Friday, 21 March 2014

Leaky and ambiguous icons

I've created many icons over the years. So I know from personal experience just how difficult they can be to design.

The objective of icon design is usually to produce the simplest possible image that unambiguously communicates a concept. Sometimes that concept is a thing: like a folder or a trash can; sometimes it's an action: like swiping a card or summoning a nurse.

There are two reasons why icons should be as simple as possible:
  1. they are less cluttered and work in small sizes;
  2. they are less likely it is to "leak" unintended messages.
The first reason is self explanatory. The second is worth exploring in more detail. As an example, take a look at this icon I found in a hospital. The purpose of the button is to summon a nurse. The icon doesn't attempt to convey the action of summoning. Instead, it shows a picture of a nurse. But is that all the icon is communicating?

I see several other messages in this icon:
  • Nurses are women
  • Nurses are slim and totter around on pin-like legs
  • Nurses wear figure hugging clothes with short skirts
  • Nurses carry items like drinks
  • Nurses wear old-fashioned clothes, or it is appropriate to be nostalgic about when they did.
...and there are doubtless many more. The presuppositions and cultural context of the designer are leaking out of the icon. In this case, the ideas leaked are so far from today's social norms that I believe the hospital should consider changing the buttons. A cost that would have been entirely unnecessary if the icon had been a bell, for example.

But while too much information can be a problem, an icon can also be over-simplified to the point at which its meaning becomes ambiguous. Take this icon for Transport for London's Oyster Card readers, for example.

Oyster Cards are the RFID-based contactless ticket system used on the London Underground and busses. The icon indicates where passengers should "touch in" and "touch out" to start and end their journey at the ticket barriers. The only action required by the user it to place their card against the reader. Perhaps the icon is intended to show a card touching against the circular reader. But instead, many passengers interpret the circular shape as a swoosh, suggesting they should wave their card around in circles. 

The problem is that this rotating motion confuses the RFID sensor, resulting in a delay in reading the card, which often causes passengers to wave the card in even more vigorous circles, making a read almost impossible.

This can be very frustrating to observe if you are stuck behind a card waver at the ticket barrier. Given that this icon is now used throughout the city's transport system, millions of man-hours have presumably been wasted in this way. At who knows what cost.

The meaning of any communication is ultimately how it is interpreted by the recipient. The recipient is never wrong - a misinterpretation is always the responsibility of the communicator. Great icons unambiguously communicate a message. And to do this, they have to be incredibly simple - eliminating extraneous elements, while maintaining sufficient detail to make their meaning explicit. Finding just the right amount of simplicity is not a simple task. But when designers do this hard work, they make it easier for users.

No comments:

Post a Comment