Should attaching an image be more obvious?


(Jesse Perry) #1

Hi all -

I had a user on my Discourse ask how to upload an image. Very easy problem to solve, of course. So I go to take a screenshot and show which button to press. Then I think "what button are you supposed to press?" because normally I just drag the image to the box. Lo and behold it’s a non-obvious arrow pointing upwards, easily hidden in the middle of the row of icons. The alternative of course is dragging the file onto the message box. Well the help text to do that is grey/hard to read and it’s the last part of a sentence that regular users would ignore as soon as they see the “Use Markdown, BBCode, or HTML to format” text that 90% of regular people have no idea what that means.

I propose that the priority of what a user wants to do when replying/creating a topic is: 1. Write text 2. Attach image 3. Everything else

Sure enough when you look around on social media, these functions are very clear and not hidden among other formatting features:

My proposition:

  • In the least, make the help text in the box be more obvious and highlight how to drag an attachment in
  • Change upload icon to be a camera (I know it also allows uploading any attachment, but again we’re thinking about what the majority of users want to do) and highlight the icon and also separate it from the row of formatting icons. Maybe move icon to the empty space under the right side of the box where “saving”/“saved” currently lives?

If not WYSIWYG, then how about disabling styles entirely?
(Jeff Atwood) #2

There are two icons used here. Depends on your Discourse settings.

when you leave it at the default of only allowing images (jpg, png, gif)

when you have added other file types as allowed uploads (csv, txt, pdf)

On mobile there is an explicit “upload” link since there is no editing toolbar on mobile.


(Jeff Atwood) #3

I’d also add that I am not sure these “no formatting supported, plain text box” environments like Twitter are a great example to compare us with.

Here’s how much bold, italic, blockquote I can add to a Tweet: none.


(Stephanie) #4

I’ll admit that I was mildly confused the first time I tried to upload a pic here because I was used to the picture icon on IC, but I figured out pretty quickly that the up arrow meant upload. It possibly could be clearer, but I don’t really know how.


(Jeff Atwood) #5


(Jesse Perry) #6

That’s fair. However I don’t think it changes that the majority of users coming to Discourse are used to social media that makes it very clear where to attach an image. I believe the hierarchy of needs of users when composing a message is 1. Text 2. Uploading an image 3. Everything else


(Jeff Atwood) #7

That’s fine, I’m just not clear how to work that into a toolbar-button based editor.

The two approaches seem diametrically opposed to me:

  1. Plain unformatted text area, 3 “actions” presented

  2. Formatted text area with toolbar buttons


(Jesse Perry) #8

I would propose promoting the image feature as a new button, keeping the upload button on the toolbar if non-image attachments are allowed. Even though they would have identical functionality…


(Jeff Atwood) #9

Can’t say I agree with this at all. Feels shoehorned in.

Now if there was an alternate editor that was focused on tasks, and ignored all formatting, that might be OK. But both toolbar and big giant task icons? Weird.


(Jesse Perry) #10

Admittedly that is shoehorned in, albeit it gets to the point of what I’m trying to convey in separating the image functionality in an obvious way from the toolbar. I don’t think there should be an alternate editor, that just makes things too complicated in settings.

Perhaps just the camera icon on the right side of the toolbar, separate from the rest of the icons on the left?


(Stephanie) #11

The one with the file folder is probably most intuitive. I feel like the others are obvious if you are expecting them, but that one is more illustrative of the action for someone who doesn’t think in computer.


(mountain) #12

Why not make the buttons in the toolbar a touch bigger? Or, change the color of the upload button to make it stand out. You may possibly do that for other basic/most-used/critical buttons such as link and quote, to make things cohesive.


(Jesse Perry) #13

Yeah the core of my concern is just making what people use the most (I’m arguing uploading an image/file is the most used) stand out more.

If there were some easy way to override the “upload” icon to always be the picture icon through CSS, I would do that immediately on mine. Do you know of a way?


(Jeff Atwood) #14

The easy way to get the picture icon is turn off the optional file types you have allowed for upload.


Image button icon instead of upload icon
(Jesse Perry) #15

Yeah, and that’s a nice detail that it switches based on the setting. But I want to retain my upload settings as is.


(cpradio) #16
.wmd-image-button::before {
   content: "";
}

Replace “” with the font-awesome icon you wish to use.


(Jesse Perry) #17

Thank you! That’s more awesome then font awesome.


(Jesse Perry) #18

Unfortunately doesn’t work :frowning:


(Mittineague) #19

Did you do backslash unicode inside quotes? eg.
content: "\2620";
for “skull and crossbones”


(Jesse Perry) #20

Thanks. I did, still didn’t work (I’m trying for camera: fa-camera: Font Awesome Icons)