Fun with Icons May 18, 2007
Posted by Elton Billings in User Experience.trackback
Icons are one of the biggest challenges in designing good interactions. Icons are a great way to represent an available action or show an affordance while using less space than descriptive text. They can also ease localization by lessening the number of labels that need to be translated.
The problem, simply put, is that there is a difference between icons and little pictures. Icons represent something in a way that is broadly recognized. Little pictures are simply little pictures, and subject to multiple, and widely varying, interpretations.
For example, Elvis is an icon. Flags of various countries are icons. Even a little picture of a printer is an icon.
Not every little picture is an icon. Little pictures of top hats, lightning bolts, or almost any animal are not icons.
There are a couple of mitigating factors. The first is that when certain small pictures are displayed in the appropriate context, they become icons. For example, an outline of a human head displayed within a group of camera settings will usually mean something about portrait photography. The other factor is that many little pictures can become icons through common usage. A small grid with a band across the top has become recognizable as a calendar, even though I saw many people not understand that when they first encountered it years ago.
So now for the fun part.
Next time you are bored, find an application on your computer or on the web. Choose something that most of your friends have not used, or use very infrequently. Take a screen shot of the application in a state showing as many icons as possible. Then use your favorite graphic editing tool to label each icon with a letter or number. (Don’t block any part of any icon.)
Now take your screen shot and send it off to an assortment of friends, asking each to reply to your message with their idea of the meaning of each icon.
The results are always interesting and often entertaining. (I got a lot of interesting guesses about the top hat.) Of course, to reward your friends for participating, your should summarize the responses and send the summary to them for their amusement. It’s also good to include an “answer key” of the correct meanings.
If you would prefer that the guesses be more entertaining than informative, do the above with a screen shot of only the icons with no application to provide context. Then let the fun begin!
I really idea of sending icons to friends and others and see how they respond, this can be an interesting way to gauge the usefulness of icons. Interesting thoughts.
Funny what a significant factor “context” plays in iconography.
For example, in my browser I see two arrow icons, a circular arrow, a stop sign and and a house. In Apple mail there is an open envelope, a no bozo circle, a bag of mail, a single back arrow, two back arrows and a straight forward arrow. Lastly a paper with pencil.
Now, outside of context, many of these would fail to convey the tasks at hand. The “New Message” note with pencil icon does convey writing. The house = home. Stop is pretty clear.
But I think it’s fascinating to not that the arrows no longer say “back or forward”. Netscape pretty much defined this intent when in this placement.
That said, I find Apple Mail’s no bozo sign to give no relevance to “Delete”. If I were to assume from context I would think that button would block the address of the email I had selected. I think the universal trash/recycling bin would be a better conveyance.
I also think there is something to be said about animated icons. A simple animation can sometimes clarify what would otherwise be an rather abstract concept to convey.
- Jason “The Saj”