Thinking up icon metaphors for an application, you must follow two major goals:
- Keep them simple
- Make icons in the application different from each other.
But there often seems to be some demon out there, some evil tempter, who keeps you from reaching these goals. Here’s my own list of the temptations that lie in wait for the novice icon designer.
Temptation #1: Explain each aspect of functionality
We generally use the printer icon to print one copy of the document with a default printer. But imagine you have no experience of printing documents: this icon might equally be used to direct you to specify printer's settings or finding and adding a printer (example from Alan Cooper's About Face 3).
When you're thinking up the metaphor, you try to make it as explanatory as possible. But let's face the facts: in most cases, it's hardly possible to make it explanatory. Even when you're dealing with simple icons, you often can't tell for sure what they do.
For this toolbar in Outlook 2007, multiple envelopes are bad for readability.
Temptation #2: Add three or more objects
Adding more than two objects to an icon is asking for trouble. Two simple objects are most often ok even for 16x16, though you should always be asking yourself if you can reduce the number of objects to increase readability.
Try explaining just one aspect of the functionality the icon is stands for. For a “network administrator” icon, draw a guy in nerdy glasses; don’t add a wrench and computer connected to a network.
This setup icon is a good example of excessive objects on an icon. We already know the software is usually installed on computers. We already know sometimes software is shipped on CD. The box is enough.
Temptation #3: Be too specific
It’s about symbols, not picturing the reality. For “Art exhibition” icon, a statue or picture is a better solution than museum interior. Of course, there should be no conflicting icons in the application such as “Art object”.
Temptation #4: Use branding
You're strongly tempted to use corporate colors for your set to please your boss or client. Also, it looks so consistent. Don’t!
Bringing brand identity to icons results in reduced readability in 99% of cases. Bringing icons to the same style makes icons uniform. Use OS icon guidelines instead. Since Windows XP, Microsoft specifies such parameters as perspective, lighting source and overall look. So, icons for Vista must be realistic and the source of light is top left, slightly in front of icon.
The icon is not the same as a logo. However, Yugma conference application (above) uses a logo for all start menu items, so they are 100% about branding. Compare the Yugma icons with the clear icons of TuneUp Utilities 2008, that concentrate on function (below).
Temptation #5: Use text on icon
Don’t write what the icon does on the icon. There are hints and text labels to tell what it does.
The text next to each icon describes what the icon stands for. Instead of repeating this information, the icon designer should attempt to make the icons different, so experienced clients can use them more quickly.
Temptation #6: Add facial detail
Don't draw the facial detail; use empty faces. If the face carries too much information, it distracts from the icon’s meaning. This classic cartoon by Bidstrup shows how much you can read from a face:
About the author
Ivan Boyko is the owner of VisualPharm, keeping eye on all projects. Also, he keeps making his own work designing the websites and interfaces for clients. Since 2005 Ivan teaches his own course of Interation Design at British Design School in Moscow.