One design issue that comes up whenever you have the good fortune of designing from scratch is whether or not to use icons. Icons offer some distinct advantages. Icons

  • Add color to the UI and help break the monotony of the gray and blue.
  • Provide impetus for creative thinking.
  • Facilitate internationalization.

There are also several pitfalls to using icons:

  • It is difficult to design icons that are easy to distinguish
  • The metaphors that underlie a set of icons often prove unintuitive or incomprehensible to users
  • If an icon design tries to convey too much meaning via a set of subelements, the details of the resulting structure can easily overwhelm the user.
  • For examples, consider this graphic used as an icon: What is a poor user to infer about its meaning? Likewise, what about ?
  • For a user to interpret the relevant icons with sufficient confidence can often take longer than reading text. This is especially true if the user has a number of choices to pick from. Tell me honestly—would you ever make a decision on this page without reading the text?

Is the decision to use icons just a way to create more work for the graphics designer?


jessemellon 1 comment Joined 05/09
19 May 2009

Great stuff, Mona!

Icon design is one of my favorite things. Many folks don't realize how challenging it is to develop a visual system, with icons working between one another, while serving the interface they populate.

Good icon design takes into account the breadth and depth of the system and finds that perfect balance. An icon designer should consider the potential for scalability, which can cause major headaches (for example, if a general icon is initially applied too specifically and the list of items requiring iconification in a set expands, the whole system needs to be reconsidered to accommodate the change). It would naturally frustrate a user if an icon they'd always associated with one thing suddenly meant something else. Equally jarring is encountering an icon that doesn't visually match the rest, so effective icon design considers the overall style first. Generally, simplicity is key. And getting to simple (especially with large systems) is hard.

There are different ways to use icons:
- As a way to highlight content (body-level), icons can draw a user's attention and help make otherwise overwhelming text easier to understand. Body-level icons can help a user quickly orient, and hopefully understand a little about what they're about to read.

- Interface-level icons are a little different. A little "close" icon, an "alert" icon, or a "maximize" icon shouldn't deviate too much from a user's expectations. To mitigate the risk of ambiguity (for example, a "+" icon could mean "expand" or "add"), a tooltip should always be quick to display. For stable, interface-level icons, a user will likely become accustomed to certain icons and tune them out until needed. There's a good balance to be struck -- ideally, interface-level icons shouldn't stand out too much from content until they're searched for, at which point they should be easily found.

Creating icons is serious work. In a perfect world, a finite list of things is defined (so there's less risk of a system expanding and potentially nullifying itself). Research is important. When I'm creating an icon system, I keep a giant file of symbols handy, and I browse online like crazy to see what's already been established (and what users might be expecting). There are always different ways of symbolizing things, so grouping ideas together and then assessing whether they're working together at the right level is key. When I'm iconifying something I don't understand (say, a complex, proprietary action), I seek out and engage those who do understand, and pull together as many visual options as possible before socializing them more broadly. Sometimes there's a perfect, simple solution that hadn't been considered until entire sets are laid out. When all else fails, designers resort to stars :)

Validating with users is a great way to determine whether icons are a success or failure. You bring up a good point about internationalization -- icons can transcend language differences to visually communicate something. There's a risk there though: what visually works in one place might not work elsewhere, so validation shouldn't just happen around the office.

You must sign in to leave a comment.