5 ms·

> Don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer. The art

> Don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer. The article is misguided, in that it assumes that the meaning of an icon only exists in the lines/color/visual form of the icon. Icons are visual language. You have to teach the user what the icon means. Either the user has seen the icon before (such as in airports), or if the user hasn't, your UI has to accommodate that. Once that happens, then icons are way faster. Icons are like visual acronyms. The sequence of letters 'T', 'C', 'P', 'I', 'P' means nothing to someone who doesn't already know what 'Transmission Control Protocol/Internet Protocol' is, but once you do, TCP-IP is way faster to recognize, speak, type, and to share.

Sir_Cmpwn 11y ago
I think the author does address this - further down, he gives examples of icons that have little meaning to outsiders, but that regular users will understand.
com2kid 11y ago
> You have to teach the user what the icon means. Recognition speed presumably goes up with familiarity. I have Age - 6 years of experience reading, I have far less than that with whatever icon you come up with. Let's take starting an app as an example. On my Smartphone I use the email client "Nine". I probably open up the app manually (versus tapping on a notification) about 5 or 6 times a day. It took me ~3-5 months of use to be able to look for the icon first versus looking for the text. Note that this is WITH keeping the icon in the exact same place on my home screen the entire time. So that is what, 450 impressions for, well, no real speed improvement. In a sea of words, a good icon can help an app stand out. But I'd argue that a good textual name helps more. If you have multiple products, having your company name start off the title of all your products just means I cannot find your product in my alphabetized app list. Changing app names is another huge problem. Google's constant re-branding of how I send SMSs on my phone has been very unconductive to me remembering anything. Half the messaging apps out there have the same type of icon (a speech bubble), the textual names make them unique. That said Facebook cheats by calling theirs Messenger. :) Also, enough blue icons. Stop it. Everything is one of 3 shades of blue, gross color differentiation kicks in WAY before shape matching does. The three easiest apps to find on phone are the three apps that still have "out of fashion" black icons. > Icons are like visual acronyms. I disagree that the analogy is 100%. Our brains have this giant section dedicated to nothing but recognizing characters in our native written language. Sure we have a lot of brain power going to shape recognition in general, but character recognition is so incredibly trained in our heads that it should be our go to.
- brenschluss 11y ago
  > I have Age - 6 years of experience reading, I have far less than that with whatever icon you come up with. When I mean icons are a language, I literally mean that they're a language, in that there's a lineage and history of these languages. For example, I bet you have decades of experience recognizing the 3.5" diskette 'save' icon, and a similar familiarity with the landline phone receiver as symbolizing 'phone'. These are icons that are part of a shared language, so it's safe to say that using them will be instantly recognizable, despite the fact most people don't use floppy disks or landlines anymore. If a company decides to use a new icon that's not easily recognized, it's like trying to introduce new language; it has to be done smoothly, otherwise most users will not understand what it means. This is not a problem unique to icons; it's a problem across languages. If I had a new command-line tool that, instead of `./cmtool --verbose`, I implemented `./cmtool --consult` or `./cmtool --magicify`, you'd have to `man cmtool` in order to understand what the commands mean. This is because '--verbose' is a flag that's common oft-used enough to be understood, generally, what it means, while 'magicify' or 'consult' are ambiguous and rarely used. This confusion has nothing to do with the nature that the UI is text-based (vs. icon-based), and everything to do with the fact that user interfaces, like a language, involves shared conventions.
- conanbatt 11y ago
  > character recognition is so incredibly trained in our heads that it should be our go to. This is also a problem. You cant avoid reading text when its presented to you, so extra text makes the page cluttery, and hard to find the text you really want to read. It is very useful to replace an ever same-looking label for an recognizable icon (Like "Close", "Open", "Save" etc).
  - Retra 11y ago
    I don't think you're correct. Yes, you can't avoid reading text, but you spend far less effort reading it than you would trying to decipher icons, which you also can't avoid doing if you want to know how to use the program.
- roywiggins 11y ago
  > If you have multiple products, having your company name start off the title of all your products just means I cannot find your product in my alphabetized app list. Oh great, now I'm flashing back to hunt-and-peck through the Windows XP Start Menu trying to find a particular piece of software in a list categorized sometimes by company, sometimes by software, sometimes by built-in Windows category. An absolute mess.
JFlash 11y ago
Great comment. This reasoning is probably intuitive to anyone who's familiar with a logographic writing system. I feel like you can also draw a parallel with programming languages. Consider: def sum1(array) sum = 0 array.each { |e| sum += e } sum end def sum2(array) array.reduce(:+) end sum2 isn't just a different way to write the same thing. It's a construct that expresses a specific pattern of evaluation and aggregation. It doesn't describe what it's doing like sum1 does. It's more expressive than that. It's "clearer" once you learn it. Similarly (at least in the US) green means proceed/go/forward/continue and red means cancel/go back/stop/error. This is something that was learned, not something that was known by instinct.
- kqr 11y ago
  > red means cancel/go back/stop/error. This is something that was learned, not something that was known by instinct. Well...[1][2] There are some precedents for red being a no-go colour even in nature. Which is likely why we use it as a stop colour. It would be interesting if someone knows of a significant number of cultures that use it as a "go ahead" colour. I mean, the samples are probably skewed because everyone has been a colony these days but still. [1]: http://www.noaa.gov/features/resources_0109/images/fire1.jpg http://www.noaa.gov/features/resources_0109/images/fire1.jpg [2]: http://museumvictoria.com.au/spidersparlour/images/en000008.jpg http://museumvictoria.com.au/spidersparlour/images/en000008....
  - marcosdumay 11y ago
    Transit lights were standardized during the XX century. You won't find a place that uses them differently. But there are cultures where red means good things.
joblessjunkie 11y ago
> You have to teach the user what the icon means Who's in charge here? The software works for me, not the other way around. I don't want to be learning your glorious new UI, I want to be using its essential feature and getting out ASAP. I understand that for progress to be made, ideas must be explored and risks must be taken. But leaving out a label is not progress, it's just someone trying to save screen space on a cluttered design, and it doesn't help me.
- rpgmaker 11y ago
  It's kind of silly but google changed the "share" button icon in their android youtube app a while ago and I couldn't find the share button for MONTHS even though it was in the same place. That is because the icon now looks like a "reply" icon and I never guessed that now button is used to 'share' something.
- conanbatt 11y ago
  Adding text provides strain as you cant avoid reading text. It also produces huge clutter. If you replace all the icons for text, you will feel the site looks from the 90's. Try it out on any major site with the browser. Text label is not a silver bullet.
petilon 11y ago
How invested is the user in your app? If this is an enterprise scenario and your user makes a living using your app he'd probably be willing to expend the time to learn the meaning of your icons, and eventually he will be more productive for having done so. In a consumer app, especially one which the user only uses occasionally the bar is much higher, so your icons should be much more obvious, because the user will just delete your app if he can't figure out your icons.
WalterBright 11y ago
You can't look up an icon. You can't google an icon. You have to hope there's a tooltip for it. I can look up a word written in a phonetic alphabet.
gnaritas 11y ago
> Icons are visual language. You have to teach the user what the icon means. Which is the first problem, we don't care, we don't want to learn your crappy custom little visual language. We already know how to read, use words. > Once that happens, then icons are way faster. That never usually happens; use words, icons suck and we're all tired of them. Works work better, we all know how to read and don't need you to "teach" us anything.

Sir_Cmpwn 11y ago

I think the author does address this - further down, he gives examples of icons that have little meaning to outsiders, but that regular users will understand.

com2kid 11y ago

> You have to teach the user what the icon means. Recognition speed presumably goes up with familiarity. I have Age - 6 years of experience reading, I have far less than that with whatever icon you come up with. Let's take starting an app as an example. On my Smartphone I use the email client "Nine". I probably open up the app manually (versus tapping on a notification) about 5 or 6 times a day. It took me ~3-5 months of use to be able to look for the icon first versus looking for the text. Note that this is WITH keeping the icon in the exact same place on my home screen the entire time. So that is what, 450 impressions for, well, no real speed improvement. In a sea of words, a good icon can help an app stand out. But I'd argue that a good textual name helps more. If you have multiple products, having your company name start off the title of all your products just means I cannot find your product in my alphabetized app list. Changing app names is another huge problem. Google's constant re-branding of how I send SMSs on my phone has been very unconductive to me remembering anything. Half the messaging apps out there have the same type of icon (a speech bubble), the textual names make them unique. That said Facebook cheats by calling theirs Messenger. :) Also, enough blue icons. Stop it. Everything is one of 3 shades of blue, gross color differentiation kicks in WAY before shape matching does. The three easiest apps to find on phone are the three apps that still have "out of fashion" black icons. > Icons are like visual acronyms. I disagree that the analogy is 100%. Our brains have this giant section dedicated to nothing but recognizing characters in our native written language. Sure we have a lot of brain power going to shape recognition in general, but character recognition is so incredibly trained in our heads that it should be our go to.

brenschluss 11y ago
> I have Age - 6 years of experience reading, I have far less than that with whatever icon you come up with. When I mean icons are a language, I literally mean that they're a language, in that there's a lineage and history of these languages. For example, I bet you have decades of experience recognizing the 3.5" diskette 'save' icon, and a similar familiarity with the landline phone receiver as symbolizing 'phone'. These are icons that are part of a shared language, so it's safe to say that using them will be instantly recognizable, despite the fact most people don't use floppy disks or landlines anymore. If a company decides to use a new icon that's not easily recognized, it's like trying to introduce new language; it has to be done smoothly, otherwise most users will not understand what it means. This is not a problem unique to icons; it's a problem across languages. If I had a new command-line tool that, instead of `./cmtool --verbose`, I implemented `./cmtool --consult` or `./cmtool --magicify`, you'd have to `man cmtool` in order to understand what the commands mean. This is because '--verbose' is a flag that's common oft-used enough to be understood, generally, what it means, while 'magicify' or 'consult' are ambiguous and rarely used. This confusion has nothing to do with the nature that the UI is text-based (vs. icon-based), and everything to do with the fact that user interfaces, like a language, involves shared conventions.
conanbatt 11y ago
> character recognition is so incredibly trained in our heads that it should be our go to. This is also a problem. You cant avoid reading text when its presented to you, so extra text makes the page cluttery, and hard to find the text you really want to read. It is very useful to replace an ever same-looking label for an recognizable icon (Like "Close", "Open", "Save" etc).
- Retra 11y ago
  I don't think you're correct. Yes, you can't avoid reading text, but you spend far less effort reading it than you would trying to decipher icons, which you also can't avoid doing if you want to know how to use the program.
roywiggins 11y ago
> If you have multiple products, having your company name start off the title of all your products just means I cannot find your product in my alphabetized app list. Oh great, now I'm flashing back to hunt-and-peck through the Windows XP Start Menu trying to find a particular piece of software in a list categorized sometimes by company, sometimes by software, sometimes by built-in Windows category. An absolute mess.

JFlash 11y ago

Great comment. This reasoning is probably intuitive to anyone who's familiar with a logographic writing system. I feel like you can also draw a parallel with programming languages. Consider: def sum1(array) sum = 0 array.each { |e| sum += e } sum end def sum2(array) array.reduce(:+) end sum2 isn't just a different way to write the same thing. It's a construct that expresses a specific pattern of evaluation and aggregation. It doesn't describe what it's doing like sum1 does. It's more expressive than that. It's "clearer" once you learn it. Similarly (at least in the US) green means proceed/go/forward/continue and red means cancel/go back/stop/error. This is something that was learned, not something that was known by instinct.

kqr 11y ago
> red means cancel/go back/stop/error. This is something that was learned, not something that was known by instinct. Well...[1][2] There are some precedents for red being a no-go colour even in nature. Which is likely why we use it as a stop colour. It would be interesting if someone knows of a significant number of cultures that use it as a "go ahead" colour. I mean, the samples are probably skewed because everyone has been a colony these days but still. [1]: http://www.noaa.gov/features/resources_0109/images/fire1.jpg http://www.noaa.gov/features/resources_0109/images/fire1.jpg [2]: http://museumvictoria.com.au/spidersparlour/images/en000008.jpg http://museumvictoria.com.au/spidersparlour/images/en000008....
- marcosdumay 11y ago
  Transit lights were standardized during the XX century. You won't find a place that uses them differently. But there are cultures where red means good things.

joblessjunkie 11y ago

> You have to teach the user what the icon means Who's in charge here? The software works for me, not the other way around. I don't want to be learning your glorious new UI, I want to be using its essential feature and getting out ASAP. I understand that for progress to be made, ideas must be explored and risks must be taken. But leaving out a label is not progress, it's just someone trying to save screen space on a cluttered design, and it doesn't help me.

rpgmaker 11y ago
It's kind of silly but google changed the "share" button icon in their android youtube app a while ago and I couldn't find the share button for MONTHS even though it was in the same place. That is because the icon now looks like a "reply" icon and I never guessed that now button is used to 'share' something.
conanbatt 11y ago
Adding text provides strain as you cant avoid reading text. It also produces huge clutter. If you replace all the icons for text, you will feel the site looks from the 90's. Try it out on any major site with the browser. Text label is not a silver bullet.

petilon 11y ago

How invested is the user in your app? If this is an enterprise scenario and your user makes a living using your app he'd probably be willing to expend the time to learn the meaning of your icons, and eventually he will be more productive for having done so. In a consumer app, especially one which the user only uses occasionally the bar is much higher, so your icons should be much more obvious, because the user will just delete your app if he can't figure out your icons.

WalterBright 11y ago

You can't look up an icon. You can't google an icon. You have to hope there's a tooltip for it. I can look up a word written in a phonetic alphabet.

gnaritas 11y ago

> Icons are visual language. You have to teach the user what the icon means. Which is the first problem, we don't care, we don't want to learn your crappy custom little visual language. We already know how to read, use words. > Once that happens, then icons are way faster. That never usually happens; use words, icons suck and we're all tired of them. Works work better, we all know how to read and don't need you to "teach" us anything.