A picture is worth a 1000 words; icons are not pictures

[The following is an excerpt from recommendations I made recently to a client. It was intended as a best practices guide or cheat sheet on icons. I cribbed it together from my own experiences and several online sources cited below.]

When we say a picture is worth a 1000 words, we mean that we intuit a sense of time, place, and emotion from a single glance at a photograph. Using simple graphics, i.e., icons to convey even the simplest concepts is very different. Developing a system of iconography is not as easy as it seems. Many of the things we identify as icons are not images representing concepts but are humans recognizing brands. The Facebook, Twitter, and LinkedIn icons are current examples of this phenomenon. Basic functions common to word processing programs like cut and copy feel deeply ingrained, however, we have learned them from long-term use rather than the intuitive nature of the pictures that match these actions.

The Microsoft Word toolbar is the classic example. The icons feel obvious because we’ve grown up with them. But we have labels and placement to guide us. Icons are arranged from left to right based on frequency of use. And there are words paired with the most frequently used items to cue us.

Even Apple—touted as the best in usability—understands this concept. How useful would these icons be without the labels? Many of them seem obvious (Messages, Calendar, Camera, Maps, Notes, Weather, Mail, Phone). Some of them completely fail. The Photos icon, for instance, says flowers, not pictures, without the label. As soon as you look past these basic smart phone functions, the remaining icons only seem obvious because we are engaged in brand recognition. They are logos more than icons as in the case of Skype, iTunes, Facebook, and your purchased applications.

Rules to Remember

There are some universal principles regarding iconography demonstrated by repeatable usability research.

The picture plus its label is more effective than the icon alone.
Humans learn the position of an item faster and commit it to memory easier than the image itself.
Icons are specific to a culture or a language, not specific to an industry.
If the solution is obvious to your designer, it’s obvious to everyone. If it’s not obvious to your designer, you have a problem—and your problem is not likely your designer.

These are Patches, Not Solutions

Including information about the icons is not a solution. A problematic icon set cannot be fixed with

Rollover text or alt text
Legends
Training

Usability Testing Is a Must

There are two options for testing icons. To be thorough, both techniques should be employed. However, one test is better than none. You can do this on paper or online via survey with as few as 5 users.

Show your users your icons without labels and ask what the icon is meant to represent
Show your users your icons in the context of your software and ask what the icon is meant to represent

Recommendations

[These get a bit specific, but you might be able to extrapolate information relevant to your situation.]

Topics and actions must be organized into logical buckets either by content area or by action (e.g., all the functions related to HR go together or all the topics that can be Searched go together). Once the grouping system is selected, icons can be used at one level or the other, but not for every level. For instance, it seems unlikely that we will come up with an icon that accurately represents “Late Salary Distribution Change Request.” However we may be able to design an icon that represents “Time Sheets” or “Paychecks.” If we can group and possibly rename some of the menu items logically, we will be even more successful designing a clear system for the core actions like Find, Close, Clone, Create, Reverse. A better layout of the content clearly indicating the hierarchy of information will also improve the usability of your portal.

Sources