It's five days to the software release date. Do you know what your icons mean?
Icon design is like an endless skirmish amongst transient zealots. I wish I had a nickel for every time I've been involved in a debate over the meaning of icons. OK, maybe a dollar.
You might wonder what is there to debate? An icon is a simple illustration of some important function. We all know a 'Print' icon when we see one. Heck, even my younger daughter knows what a 'Save' icon is - even though she's never seen a floppy disk.
Sometimes, in the middle of an icon battle, I have quipped that all icons are meaningless until you know what they mean.
Icon Wars come about because different people often carry private and distinct internal images for the same function. Or because one person's internal image of function A happens to symbolize another person's internal image of function B. For example, what function does this image symbolize to you?
I'm sorry, I'm tricking you. The question is almost completely unanswerable because you don't know the application that the icon is being used in. I'll tell you - it's a Call Center Management application. Now what does this image symbolize to you?
A sleeping what? Who said fried egg? No, that's not it. But I suppose it's still not fair to you (assuming you even care about getting the right answer) because you might not happen to know much about Call Center Management. So perhaps it didn't leap right out at you that the intended meaning of this icon is "Forwarded Idle Agent".
I can hear some of you saying "What is an Agent and why are they Idle and what the heck does Forwarded mean?" All very good questions and this brings us to the crux of the matter. Questions of meaning can only be answered in specific contexts. It is the context of usage that largely brings meaning to icons.
So what's a designer to do? Well, there are a few things. In the past we (Tom and I) have attacked this on a number of levels. Here are a few:
Use a visual language that is appropriate for the usage.
The Agent looks like a fried egg because there wasn't enough room in the 16 by 16 dots of colour to represent the person in a 'naturalistic' manner as was attempted in that first draft we showed you (which was done by an unusually artistic engineer).
Here's Tom's version:
He made the Agent look like a person by choosing a profile view that is more likely to be recognized as a human. Then he represented the 'idleness' of the human with a familiar 'crossed out' symbol which in our culture tends to mean "NOT!"
Combining these two symbols together suggests (strongly, we hope) this Agent is NOT being an Agent - i.e. because they are Idle.
The arrow was chosen to represent Forwarded - that the call this idle agent should have been answering got forwarded to another (possibly overworked) agent.
Be self consistent with your symbols.
Cleanly defined symbols can be combined in different ways to suggest new meanings. You can use them to build up a systematic language for revealing meaning.
You may not know exactly what all these icons mean but I'm willing to guess that by now you know that they all involve Agents on the Phone. Right?
Group Icons Appropriately
Many software applications will put commonly used buttons in one or two toolbars that we typically have permanently displayed. Icons like 'New', 'Open', and 'Save' go together because they relate to the life cycle of documents.
In word processors, style editing icons live in their own toolbar, quietly emitting their own hints of style related context to the user.
These kinds of associations play a strong, albeit largely unconscious, role in our interactions with software applications.
Place Icons Appropriately
A good criterion for the placement of icons or icon groups is frequency of use.
Using the same examples, the New/Open/Save functions are likely to be universally useful so they get a prime location up at the top left. The style editing functions are also commonly used but they also might not be important to everyone so they are typically place in a slightly less travelled location (for me it's at the top, but to the right).
Finding Meaning
This is not an exhaustive list but these factors all influence the meaning and hence effectiveness of icons in your user interface. They work because they all affect the context in which an icon is viewed. The craft of icon design is never just a matter of making small, pretty pictures.
Footnotes
* Of course this all goes out the window with movable, customizable toolbars but the out of the box experience requires a design that takes these things into consideration. Customization of the interface is another topic altogether. (back to story)