Should attaching an image be more obvious?

Contribute UX

AI-generated summary

The discussion revolves around whether attaching an image should be more obvious in Discourse. jesselperry proposes that the upload functionality is not clear and suggests making the help text more obvious, changing the upload icon to a camera, and separating it from the row of formatting icons.

codinghorror points out that the icon changes based on the allowed file types and suggests that the issue is not with the icon, but with the complexity of the editor. jesselperry suggests adding a camera icon on the right side of the toolbar, separate from the rest of the icons.

AmiAthena suggests that a file folder icon might be more intuitive. purldator suggests making the buttons in the toolbar larger or changing the color of the upload button to make it stand out.

cpradio provides a CSS solution to override the upload icon with a picture icon. Mittineague helps troubleshoot the CSS solution.

Stephen argues that the original point about uploads not being obvious is contradictory, as the file upload icon is clear for images, and the proposal would make uploading other files less obvious. codinghorror suggests that the issue is about choosing between a traditional formatted text editor toolbar design and a simplified task-based plain text design.

awesomerobot proposes having two buttons for images and other files, with the camera icon for images and the paperclip icon for other files. jesselperry likes this idea and suggests that “attach” is a better verb and related icon than “upload.”

The discussion also touches on customizing the text area placeholder text and color, with awesomerobot providing a CSS solution.

codinghorror suggests hiding all editing options or having a few major toolbar elements that can be expanded. jesselperry and others like this idea.

The discussion is revisited a year later by joecures, who inquires about a more approachable composer for mobile users. codinghorror and Falco respond that the toolbar is already hidden by default on mobile, but joecures shares a screenshot showing the toolbar on an iPhone 6s using Chrome.

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:

Screen Shot 2015-07-22 at 6.39.23 PM.png1052×240 20.6 KB

Screen Shot 2015-07-22 at 6.35.13 PM.png1034×336 51.4 KB

Screen Shot 2015-07-22 at 6.35.06 PM.png1356×156 20.5 KB

Screen Shot 2015-07-22 at 6.35.01 PM.png926×420 30.9 KB

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?
إعجابَين (2)
If not WYSIWYG, then how about disabling styles entirely?
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.

3 إعجابات
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.

Pasted image750×283 18.6 KB

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

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.

5

Pasted image677×728 190 KB

إعجابَين (2)
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

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

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…

camera mock up.png1420×582 68.3 KB

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.

إعجابَين (2)
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?

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.

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.

إعجاب واحد (1)
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?

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
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.

16 
.wmd-image-button::before {
   content: "";
}

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

4 إعجابات
17

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

18

Unfortunately doesn’t work :frowning:

19

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

20

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

Screen Shot 2015-07-24 at 12.51.51 AM.png1598×1076 76.9 KB