Our recent usability testing has found many icons that enhance a design, but also many icons that cause usability problems and aren’t recognized by most users. While every visual design is different and has its own issues, there are some broad categories of icons we can use to better understand what makes some icons inherently easier to understand than others.

Resemblance Icons

Depicting a physical object which the icon is intended to represent. Using a picture of an envelope to represent a file of electronic mail would be a resemblance icon.

The main usability challenge for a resemblance icon is to design an image that actually looks like the intended object. Not so easy given the tiny size.

Reference Icons

Depicting some object which by reference or analogy might represent the concept the icon is intended to represent. For example, using a picture of a clamp to represent a file-compression utility (because it squeezes) would be a reference icon. It would be hard to come up with a good resemblance icon for file compression except through use of a before–after combination of a large and a small document, but icons showing state changes are notoriously hard to understand. Reference icons are sometimes also called symbolic icons or index icons.

Here, the question is whether users will get the mapping between the reference domain and the system domain. Are the two concepts sufficiently closely related in users' mental models that people will think of the system feature when they see the picture of the reference item?

Arbitrary Icons

Arbitrary shapes that only have meaning by convention. Traffic signs are often arbitrary icons and may form a good source of computer icons because of their fairly standardized international use. For example, a warning triangle might be used as the icon for a warning message. Obviously, arbitrary icons are the hardest for users to learn, unless they are so widely used that the convention becomes second nature. For example, it is doubtful that many people worry that the shape “?” is completely arbitrary as an indicator of a question. Thus, it's a good icon to denote help.

Example: Circular icon with two clock hands Clock as Resemblance or Reference Icon

In one recent usability study, we came across an icon of a clock. The image definitely looked like a clock and would likely have worked great if it had been a resemblance icon used to represent a clock-oriented feature such as time of day, an alarm clock, or the scheduled starting time for an event. On this site, however, the clock icon was used to represent a history feature, and it failed miserably in user testing.

A clock for a history feature is a reference icon, since both relate to the concept of time. However, this is a poor mapping: the analogy has been stretched too far.

Example: Screenshot of small icon depicting a floppy disk Floppy Disk as “Save” Icon

A small picture of a floppy disk is used to represent the “Save” commend in many graphical user interface (GUI) designs.

Originally, this was a resemblance icon: users actually saved their files on floppies, so as long as the icon looked reasonably like a floppy disk, it was likely to be recognized and understood.

Later, people got hard drives and the “Save” icon became a reference icon. A floppy disk is a form of storage device and thus can be used to represent the generalized function of storing the document onto any kind of storage device, even one that looks very different. Indeed, most users have never seen a hard drive, so it was probably better to continue using the floppy-disk icon at the time when the switchover from floppies to hard drives happened. (To go the route of picking a specific instrance to stand for a broader class, use a widely recognized exemplar and not an outlier member of the class. Our course on The Human Mind and Usability goes into further detail on how people decide on category membership.)

Today, many younger users have never seen a floppy disk, and the icon has become an arbitrary icon for these users. Why should a small square represent saving? Well, it just does.

As this example shows, the classification of an icon can change over time or with other changes in context.

International Icon Usability

Resemblance icons will often have the highest usability, but can lead to problems for international users to the extent that the same thing looks different in other countries. Pictures of uncommon objects may be harder to recognize, as shown by a test in Hungary of proposed international icons for sports. Only 9% of Hungarians correctly interpreted the icon showing a squash player, because most Hungarians have never seen a game of squash.

Similarly, mailboxes look very different around the world in both shape and color (blue, red, yellow, and green are just a few colors I’ve seen in my travels). I remember being very insecure about whether I was using an “official” mailbox the first time I mailed a postcard in Belgium, because Belgian mailboxes look very different than any others I had seen. And that was a physical mailbox. A small 2D picture is even more likely to be misunderstood.

Reference and arbitrary icons will often do considerably worse than resemblance icons in internationalization. Analogies are often more culturally dependent than are the looks of physical objects.

Varying national conventions may reduce the usability of designs that are intended to be reference icons. For example, a picture of a dining table can be used as a reference icon to represent a table of numbers. The analogy between tables as furniture and tables as typographical objects only holds if the user speaks English, however. In many other languages, completely different words are used for the two concepts (for example, bord vs. tabel in Danish), and the table icon would be reduced to the status of an arbitrary icon for users speaking those languages.

In general, interface puns are dangerous, though they can be hard to resist.

Easy Icons, Difficult Icons

Resemblance icons usually have the best usability, though an arbitrary icon can be great if it has already been widely standardized by the time you employ it in your design. Don’t be the one to try to teach the world a new arbitrary icon, though. You will likely fail.

Of course, we always have our trusty fallback in the usability field: user testing of icons will quickly show us whether users understand a design.