
Why consistency in icons is important and how to achieve it - kirillzubovsky
http://blog.scoutzie.com/post/36068395929/consistency-in-icon-design
======
tokenadult
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?)

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

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

~~~
thezilch
Archive is "e", canonically, and I'm not sure what logic is munging the
purpose of "y" to remove label(s).

~~~
Zarel
"y" means "remove from current view", to be exact.

So if you click a message from the "Work" label, it removes the "Work" label.
And if you click a message from Inbox and hit "y", it removes it from Inbox
(i.e. archives it).

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

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

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

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

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

------
001sky
This is an interesting discussion along these lines >

[http://blogs.adobe.com/brandexperience/2012/05/16/the-
cs6-de...](http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-
brand-system/)

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

------
hnriot
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
How does tooltip and hover work on an iphone/ipad app?

------
wildranter
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/u...](http://developer.apple.com/library/ios/ipad/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html)

[http://developer.apple.com/library/mac/ipad/#documentation/u...](http://developer.apple.com/library/mac/ipad/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html)

