8 ms·

Why consistency in icons is important and how to achieve it

65 points by kirillzubovsky 14y ago

lhorie 14y ago
My main problem with icon design is that I see people spend tons of time on their look and feel, and then they fail to label them, either due of lack of UX experience or arrogance (or both).
- hcarvalhoalves 14y ago
  The whole point of the pictogram ("icon") is to communicate what the label would, but more succinctly.
  - potatolicious 14y ago
    In an idealized world, and on a device of sufficiently low complexity, sure. But when you have multiple services that all cover the same basic thing, your icon needs to transcend its very basic function. Yelp, for example, needs to look different than Urbanspoon. Twitter needs to be distinct from Facebook. Flickr separate from Photobucket. The notion that the icon should be immediately communicative of the app's purpose is a nice one that just doesn't scale. Sure, you see envelope you think email, you see telephone you see phone. What happens when you see a TV? Is that your HBO app? Your ABC app? Hulu? Any app of sufficient complexity would be better represented via branding rather than a pictograph of its basic function.
    - hcarvalhoalves 14y ago
      I was talking about pictograms replacing labels. You're talking about application icons, which are essentially branding. I don't get why you're mixing the two matters.
      - potatolicious 14y ago
        Ah I see - I misunderstood your post then. FWIW, I still disagree with pictograms replacing labels. I'm a fan of the idea conceptually, but in every instance I've seen it done it simply hasn't been intuitive enough for me to consider it a working solution. Maybe someday someone will get it right - but I'm not holding my breath. Purely pictographic iconography is like the cold fusion of UI design. Take Win8 for example, which I've been using for the past two weeks - the UI is very deliberately minimalist, and drops almost all labels from icons. This has proven to be very frustrating. Some buttons are very self-evident and work - the back button in Metro apps, the WiFi icon, etc, have fairly self-evident functions. Others (and there are many) are just terribly confusing, especially for novice users. In the Email app the "send" icon is completely non-obvious, and it's confusing in a situation that disallows trial and error (you just spent 10 minutes typing an email, do you really want to play a game of "wonder what this does"?) So there are a tiny subset of functions where there exists a universal enough, and popular enough icon that the functionality would be recognizable. Apps, however, go well beyond the dead obvious and implement complex functionality that cannot be easily summarized in a pictograph - especially in a cross-cultural and cross-language way. I just don't see this working, though I'm personally interested in seeing this pan out.
        hcarvalhoalves 14y ago
        > FWIW, I still disagree with pictograms replacing labels. I'm a fan of the idea conceptually, but in every instance I've seen it done it simply hasn't been intuitive enough for me to consider it a working solution. It is a working solution. Pictograms are used in place of labels everyday, in large scale. Look no further than all traffic signs in the planet earth for an example. For instance, the "back button" is obvious for you because you understand the metaphor. It isn't so clear for someone used to right-to-left scripts, like arabic. On the other hand, the "send email" action on that particular software you mention has a confusing icon because there's no clear metaphor for what "sending an email" should look like - it's a relatively new idea and no one agreed on a symbol for it, therefore you don't know what to expect. This is just lack of vision from whoever designed this interface, not a problem with pictograms. You only use pictograms when you can transmit an idea more concisely. If the most concise explanation you have is a label, then a label it should be.
  - deleted 14y ago
    [deleted]
- kirillzubovsky 14y ago
  Actually, a good icon doesn't need a label. If it is properly designed, it would be intuitive enough to explain to the user its purpose. For example, an airplane taking off, that is an icon that clearly shows departures at the airport. Trash can, as we are all familiar with it now, is an obvious way to throw something away ...etc. You can have labels, where possible, if you're using icons, chances are you are already tight on space.
  - lhorie 14y ago
    That is assuming the user is familiar with both the application and the skeuomorph you're using. For example: My android phone has a loupe icon in the corner of the screen. It's arguably an universally well known skeuomorph. And yet, what does it do? Zoom? Search? Search what? My apps? The web?
    - enraged_camel 14y ago
      I don't think anyone is expected to automatically understand what the icon does when they see it for the first time. Rather, with good icon design the number of times they tap it before they internalize what it does is minimized.
  - joe_the_user 14y ago
    In the best of all possible worlds, icons don't need labeling. In the real world, a large portion do. Which brings-up the question of "why do we need icons at all?". And one could argue that often we don't. For all its flaws, Microsoft Metro has the merit of realizing that icons often don't really have the communicativeness that many designers imagine. Sometimes a word is worth a dozen very sketchy pictures too, or at least is more specific than any given picture.
    - ebzlo 14y ago
      On the contrary, I think icons have become indicative of actionable text or a button. Just today there was an article on HN that criticized Windows 8 of being too minimalistic-- it was hard to understand at first glance what was merely a label versus an actual button. And in the real world, icons, symbols, or colors help users immediately understand how to use something (while driving, I would stop at a red octagon even if it didn't explicitly say STOP).
- xentronium 14y ago
  Yes, thousand times yes! Every time I had to use gmail (after their redesign and before I found a setting to use text labels instead of icons on buttons) was an exercise in frustration. All-gray small icons might look good on mockups but they are terrible and not informative in real life usage.
joe_the_user 14y ago
His criticism seems reasonable. However, I would like to see this combined with a discussion of how to achieve something better (despite the post's title, it is just a short discussion of some icon's problems sans any discussion of what to do about this). As a non-designer occasionally having to pick or create icons, I find extremely hard to find any symbol that effectively symbolizes the action/object I want it to. And drawing such a thing in limited space is obviously a problem too. How do you that and avoid problems of uneven abstraction level, uneven stroke level and so-forth. I've seen icon sets with very even stroke level but which had the even more deadly problem that you couldn't tell what a substantial portion of the icons were. That's much worse than uneven design in the end, I'd say.
hcarvalhoalves 14y ago
Good to see I wasn't the only one to find the icons on iOS 6 share button atrocious.
wildranter 14y ago
Two additional tips: 1) use a grid to keep proportions honest. 2) read and follow these two guides if you target apple platforms. http://developer.apple.com/library/ios/ipad/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html http://developer.apple.com/library/ios/ipad/#documentation/u... http://developer.apple.com/library/mac/ipad/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html http://developer.apple.com/library/mac/ipad/#documentation/u...
tokenadult 14y ago
Most consumer products that use icons to represent user actions would communicate more clearly by simply labeling the controls in English. Yes, even in parts of the world where English is not the main language spoken at home, it is a lot easier to look up what an English word means than to look up what an icon means. (Have you ever tried to use any online search service to visually look up what an icon means? When you ask your friends about an unfamiliar icon on a website or on a tangible consumer product, do they readily know what it means?)
- joe_the_user 14y ago
  Yes, Twenty years after they appeared with the Macintosh, it's becoming clearer they icons are not a particularly useful UI device. I would assert that icons, like skeuomorphs, remain in the graph vocabulary not because of their utility or because they create beautiful designs but because the user a feeling of comfort and familiarity (which is sort-of a design concern but not always a necessary design concern). Further, I don't think this consideration is going to go away once enough electronic "things" replace their physical equivalents - a typewriter is still strong as a symbol even in a world where no one uses a typewriter. Because an electronic "thing" is never going to be "ready-at-hand", it will forever need a ready-at-hand physical object to give a comforting sense of realness.
- sarah2079 14y ago
  Case in point: the gmail action icons. Oh god, why? They used to be simple text labels, and now every time I use them I have to hover over every icon looking at the text popups to find the one I want.
  - ksherlock 14y ago
    Settings (that's the gear icon) -> general -> button labels: text.
  - TillE 14y ago
    After the first 20-30 times where I had to take a few seconds to work out the difference between the select and archive icons, I just started using the keyboard shortcuts exclusively. Archive is 'y', it has always been 'y'. Fortunately they haven't managed to break the keyboard interface. Google are famously data-driven, but I really can't imagine how they're finding empirical support for the idea that abstract monochrome icons are more effective than clear text labels.
hnriot 14y ago
tooltips and hover... Most apps have both, localized tooltips in the user's language. people don't look up icons, they look at the tooltip/hover text and learn to associate the visual reference with the action. Just like they do the bathroom signs.
- varikin 14y ago
  How does tooltip and hover work on an iphone/ipad app?
Scorponok 14y ago
I felt that the inconsistency this post talks about was a good way to emphasize the difference between the "launch an app" icons and the "perform an operation" icons.
R_Edward 14y ago
I'd hate to see icons disappear in favor of textual labels. Then my phone's app drawer would just be a page of words, which would blend themselves into a giant morass of meaningless letters, making it difficult indeed to find the app I'm seeking. Likewise, I'd hate to see labels disappear in favor of icons--I'd never figure out what some of these things are. What's that tri-colored Slow Moving Vehicle sign supposed to mean? Oh! it's Google Drive! Of course! I depend on the labels when I've just installed a new app on my phone. After a while, when I've learned to visually associate the icon with the app, I depend on the icon to locate the app more quickly than scanning the labels. The app's position within the app drawer changes frequently, so eidetic memory doesn't serve me well there. I'd say there should be a setting within every app that allows you to display or hide the label, but even as I consider that, I reject it, because it gives the app drawer an inconsistent look. And if I stop using an app for a while, I might forget what its icon looks like, and have to fall back on the labels again.
charonn0 14y ago
I must not be cool enough; I think the icons look fine.
001sky 14y ago
This is an interesting discussion along these lines > http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-brand-system/ http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-de...

My main problem with icon design is that I see people spend tons of time on their look and feel, and then they fail to label them, either due of lack of UX experience or arrogance (or both).

hcarvalhoalves 14y ago
The whole point of the pictogram ("icon") is to communicate what the label would, but more succinctly.
- potatolicious 14y ago
  In an idealized world, and on a device of sufficiently low complexity, sure. But when you have multiple services that all cover the same basic thing, your icon needs to transcend its very basic function. Yelp, for example, needs to look different than Urbanspoon. Twitter needs to be distinct from Facebook. Flickr separate from Photobucket. The notion that the icon should be immediately communicative of the app's purpose is a nice one that just doesn't scale. Sure, you see envelope you think email, you see telephone you see phone. What happens when you see a TV? Is that your HBO app? Your ABC app? Hulu? Any app of sufficient complexity would be better represented via branding rather than a pictograph of its basic function.
  - hcarvalhoalves 14y ago
    I was talking about pictograms replacing labels. You're talking about application icons, which are essentially branding. I don't get why you're mixing the two matters.
    - potatolicious 14y ago
      Ah I see - I misunderstood your post then. FWIW, I still disagree with pictograms replacing labels. I'm a fan of the idea conceptually, but in every instance I've seen it done it simply hasn't been intuitive enough for me to consider it a working solution. Maybe someday someone will get it right - but I'm not holding my breath. Purely pictographic iconography is like the cold fusion of UI design. Take Win8 for example, which I've been using for the past two weeks - the UI is very deliberately minimalist, and drops almost all labels from icons. This has proven to be very frustrating. Some buttons are very self-evident and work - the back button in Metro apps, the WiFi icon, etc, have fairly self-evident functions. Others (and there are many) are just terribly confusing, especially for novice users. In the Email app the "send" icon is completely non-obvious, and it's confusing in a situation that disallows trial and error (you just spent 10 minutes typing an email, do you really want to play a game of "wonder what this does"?) So there are a tiny subset of functions where there exists a universal enough, and popular enough icon that the functionality would be recognizable. Apps, however, go well beyond the dead obvious and implement complex functionality that cannot be easily summarized in a pictograph - especially in a cross-cultural and cross-language way. I just don't see this working, though I'm personally interested in seeing this pan out.
      - hcarvalhoalves 14y ago
        > FWIW, I still disagree with pictograms replacing labels. I'm a fan of the idea conceptually, but in every instance I've seen it done it simply hasn't been intuitive enough for me to consider it a working solution. It is a working solution. Pictograms are used in place of labels everyday, in large scale. Look no further than all traffic signs in the planet earth for an example. For instance, the "back button" is obvious for you because you understand the metaphor. It isn't so clear for someone used to right-to-left scripts, like arabic. On the other hand, the "send email" action on that particular software you mention has a confusing icon because there's no clear metaphor for what "sending an email" should look like - it's a relatively new idea and no one agreed on a symbol for it, therefore you don't know what to expect. This is just lack of vision from whoever designed this interface, not a problem with pictograms. You only use pictograms when you can transmit an idea more concisely. If the most concise explanation you have is a label, then a label it should be.
- deleted 14y ago
  [deleted]
kirillzubovsky 14y ago
Actually, a good icon doesn't need a label. If it is properly designed, it would be intuitive enough to explain to the user its purpose. For example, an airplane taking off, that is an icon that clearly shows departures at the airport. Trash can, as we are all familiar with it now, is an obvious way to throw something away ...etc. You can have labels, where possible, if you're using icons, chances are you are already tight on space.
- lhorie 14y ago
  That is assuming the user is familiar with both the application and the skeuomorph you're using. For example: My android phone has a loupe icon in the corner of the screen. It's arguably an universally well known skeuomorph. And yet, what does it do? Zoom? Search? Search what? My apps? The web?
  - enraged_camel 14y ago
    I don't think anyone is expected to automatically understand what the icon does when they see it for the first time. Rather, with good icon design the number of times they tap it before they internalize what it does is minimized.
- joe_the_user 14y ago
  In the best of all possible worlds, icons don't need labeling. In the real world, a large portion do. Which brings-up the question of "why do we need icons at all?". And one could argue that often we don't. For all its flaws, Microsoft Metro has the merit of realizing that icons often don't really have the communicativeness that many designers imagine. Sometimes a word is worth a dozen very sketchy pictures too, or at least is more specific than any given picture.
  - ebzlo 14y ago
    On the contrary, I think icons have become indicative of actionable text or a button. Just today there was an article on HN that criticized Windows 8 of being too minimalistic-- it was hard to understand at first glance what was merely a label versus an actual button. And in the real world, icons, symbols, or colors help users immediately understand how to use something (while driving, I would stop at a red octagon even if it didn't explicitly say STOP).
xentronium 14y ago
Yes, thousand times yes! Every time I had to use gmail (after their redesign and before I found a setting to use text labels instead of icons on buttons) was an exercise in frustration. All-gray small icons might look good on mockups but they are terrible and not informative in real life usage.

joe_the_user 14y ago

His criticism seems reasonable. However, I would like to see this combined with a discussion of how to achieve something better (despite the post's title, it is just a short discussion of some icon's problems sans any discussion of what to do about this). As a non-designer occasionally having to pick or create icons, I find extremely hard to find any symbol that effectively symbolizes the action/object I want it to. And drawing such a thing in limited space is obviously a problem too. How do you that and avoid problems of uneven abstraction level, uneven stroke level and so-forth. I've seen icon sets with very even stroke level but which had the even more deadly problem that you couldn't tell what a substantial portion of the icons were. That's much worse than uneven design in the end, I'd say.

hcarvalhoalves 14y ago

Good to see I wasn't the only one to find the icons on iOS 6 share button atrocious.

wildranter 14y ago

Two additional tips: 1) use a grid to keep proportions honest. 2) read and follow these two guides if you target apple platforms. http://developer.apple.com/library/ios/ipad/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html http://developer.apple.com/library/ios/ipad/#documentation/u... http://developer.apple.com/library/mac/ipad/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html http://developer.apple.com/library/mac/ipad/#documentation/u...

tokenadult 14y ago

Most consumer products that use icons to represent user actions would communicate more clearly by simply labeling the controls in English. Yes, even in parts of the world where English is not the main language spoken at home, it is a lot easier to look up what an English word means than to look up what an icon means. (Have you ever tried to use any online search service to visually look up what an icon means? When you ask your friends about an unfamiliar icon on a website or on a tangible consumer product, do they readily know what it means?)

joe_the_user 14y ago
Yes, Twenty years after they appeared with the Macintosh, it's becoming clearer they icons are not a particularly useful UI device. I would assert that icons, like skeuomorphs, remain in the graph vocabulary not because of their utility or because they create beautiful designs but because the user a feeling of comfort and familiarity (which is sort-of a design concern but not always a necessary design concern). Further, I don't think this consideration is going to go away once enough electronic "things" replace their physical equivalents - a typewriter is still strong as a symbol even in a world where no one uses a typewriter. Because an electronic "thing" is never going to be "ready-at-hand", it will forever need a ready-at-hand physical object to give a comforting sense of realness.
sarah2079 14y ago
Case in point: the gmail action icons. Oh god, why? They used to be simple text labels, and now every time I use them I have to hover over every icon looking at the text popups to find the one I want.
- ksherlock 14y ago
  Settings (that's the gear icon) -> general -> button labels: text.
- TillE 14y ago
  After the first 20-30 times where I had to take a few seconds to work out the difference between the select and archive icons, I just started using the keyboard shortcuts exclusively. Archive is 'y', it has always been 'y'. Fortunately they haven't managed to break the keyboard interface. Google are famously data-driven, but I really can't imagine how they're finding empirical support for the idea that abstract monochrome icons are more effective than clear text labels.

hnriot 14y ago

tooltips and hover... Most apps have both, localized tooltips in the user's language. people don't look up icons, they look at the tooltip/hover text and learn to associate the visual reference with the action. Just like they do the bathroom signs.

varikin 14y ago
How does tooltip and hover work on an iphone/ipad app?

Scorponok 14y ago

I felt that the inconsistency this post talks about was a good way to emphasize the difference between the "launch an app" icons and the "perform an operation" icons.

R_Edward 14y ago

I'd hate to see icons disappear in favor of textual labels. Then my phone's app drawer would just be a page of words, which would blend themselves into a giant morass of meaningless letters, making it difficult indeed to find the app I'm seeking. Likewise, I'd hate to see labels disappear in favor of icons--I'd never figure out what some of these things are. What's that tri-colored Slow Moving Vehicle sign supposed to mean? Oh! it's Google Drive! Of course! I depend on the labels when I've just installed a new app on my phone. After a while, when I've learned to visually associate the icon with the app, I depend on the icon to locate the app more quickly than scanning the labels. The app's position within the app drawer changes frequently, so eidetic memory doesn't serve me well there. I'd say there should be a setting within every app that allows you to display or hide the label, but even as I consider that, I reject it, because it gives the app drawer an inconsistent look. And if I stop using an app for a while, I might forget what its icon looks like, and have to fall back on the labels again.

charonn0 14y ago

I must not be cool enough; I think the icons look fine.

001sky 14y ago

This is an interesting discussion along these lines > http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-brand-system/ http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-de...