# Should attaching an image be more obvious?
**URL:** https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315
**Category:** UX
**Created:** [7월 22, 2015, 10:50오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315 "2015-07-22T22:50:36Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 22, 2015, 10:50오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/1 "2015-07-22T22:50:36Z")
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?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 22, 2015, 11:11오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/2 "2015-07-22T23:11:42Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 22, 2015, 11:15오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/3 "2015-07-22T23:15:55Z")
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**.
---
### Author:  [@AmiAthena](https://meta.discourse.org/u/AmiAthena)
#### Post date: [7월 22, 2015, 11:17오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/4 "2015-07-22T23:17:45Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 22, 2015, 11:19오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/5 "2015-07-22T23:19:20Z")
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 22, 2015, 11:20오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/6 "2015-07-22T23:20:25Z")
> [@codinghorror](#):
>
> Here’s how much bold, italic, blockquote I can add to a Tweet: none.
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
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 22, 2015, 11:25오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/7 "2015-07-22T23:25:11Z")
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
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 22, 2015, 11:34오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/8 "2015-07-22T23:34:51Z")
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…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 22, 2015, 11:36오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/9 "2015-07-22T23:36:40Z")
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.
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 22, 2015, 11:48오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/10 "2015-07-22T23:48:42Z")
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?
---
### Author:  [@AmiAthena](https://meta.discourse.org/u/AmiAthena)
#### Post date: [7월 22, 2015, 11:53오후 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/11 "2015-07-22T23:53:12Z")
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.
---
### Author:  [@purldator](https://meta.discourse.org/u/purldator)
#### Post date: [7월 23, 2015, 2:39오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/12 "2015-07-23T02:39:06Z")
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.
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 24, 2015, 1:24오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/13 "2015-07-24T01:24:30Z")
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?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 24, 2015, 1:26오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/14 "2015-07-24T01:26:40Z")
The easy way to get the picture icon is turn off the optional file types you have allowed for upload.
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 24, 2015, 1:37오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/15 "2015-07-24T01:37:31Z")
Yeah, and that’s a nice detail that it switches based on the setting. But I want to retain my upload settings as is.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [7월 24, 2015, 2:45오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/16 "2015-07-24T02:45:45Z")
> [@jesselperry](#):
>
> 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?
```plaintext
.wmd-image-button::before {
content: "";
}
```
Replace “” with the font-awesome icon you wish to use.
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 24, 2015, 4:08오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/17 "2015-07-24T04:08:38Z")
Thank you! That’s more awesome then font awesome.
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 24, 2015, 4:14오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/18 "2015-07-24T04:14:40Z")
Unfortunately doesn’t work ☹
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [7월 24, 2015, 4:33오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/19 "2015-07-24T04:33:41Z")
> [@jesselperry](#):
>
> Unfortunately doesn’t work
Did you do backslash unicode inside quotes? eg.
`content: "\2620";`
for “skull and crossbones”
---
### Author:  [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [7월 24, 2015, 4:52오전 UTC](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315/20 "2015-07-24T04:52:56Z")
Thanks. I did, still didn’t work (I’m trying for camera: [Font Awesome](http://fontawesome.io/icon/camera/))
[Next page](https://meta.discourse.org/t/should-attaching-an-image-be-more-obvious/31315.md?page=2)