Why icons suck

18 Feb

Here’s the first of a series of posts I’ll write about interfaces.

The use of icons in GUI’s is usually a misapplication of the truism that, ‘simply having users point at the very thing they want is the simplest and most intuitive kind of selection’. The problems are that:

  1. Pictographs do not scale as well as text because you can’t alphabetize or do searches on images.
  2. As you add more icons to the user’s view, the visual distinctiveness of each icon quickly gets blurry and ambiguous, thus defeating the sole true virtue of icons.
  3. Icons are generally not “the very thing” that users are looking for. A pictograph typically provides hints about the thing it represents but is not synonymous with the thing itself.
  4. Worst of all, interpreting pictographs is more mentally taxing than reading a word or two, especially when the semantic content is even mildly abstract.

The crux here is that it is far easier for most people to recall the general qualities of a picture—its dominant colors and overall shape—than it is to recall its precise details. Compared to abstract images, images of recognizable objects are much easier to recall details of because we can mentally fill in the blank spots with our assumptions of what such objects look like (so this kind of recall is actually partially false, but it generally works well enough). This explains why most icons in software are so bad: most icons found in software have historically been small, indistinguishable messes that most users just come to think of as abstract shapes even though their designers tried to make them recognizable objects.

Now suppose I know what I want my software to do but don’t remember at all how the interface designers decided to label that function, either with text or an icon. If I’m looking for a label, I have to figure out what words the designers chose to describe it, which often requires consulting my mental thesaurus. In contrast, if I’m looking for an icon, I have to figure out what words the designers chose to describe it and then figure out how the designers chose to represent it as an image. While the number of synonyms for a particular concept can be frustratingly many and elusive, the number of visual representations for a concept are innumerable: even if you narrow down the concrete object(s) being depicted, there are still the variables of perspective, composition, style, and color (sure many real-life objects only come in one color, but many don’t; in fact, looking over the icons in a few applications, I notice a strong majority have basically random color assignments either because of the nature of what they depict or because of the need to make them stand in contrast to their neighbors).

So I’ll posit a few rules about when and how to use pictures/icons:

  1. All but the most frequently encountered icons should be labeled by text. Many applications omit text labels because small, unlabeled icons allow for buttons that minimize space use (see Photoshop). This is a poor trade off. First of all, for the issue of image recall outlined above, but also because even the best designed icons rarely communicate their function as clearly as a word or two of text . In fact, the real utility of an icon is that its shape and color makes it noticeable to peripheral vision or visual scanning, so they help users find points of focus and do an initial culling of their possible options; at that stage, however, users have only narrowed their options and prefer the relative precision of words to help them make their final selection.
  2. Icons should be simple in shape, distinct in silhouette, have contrasting interior lines, and never use more than two colors.
  3. Icons should be as big as necessary to make them conform to rule 2.
  4. The number of icons that it is acceptable to use is proportional to how large and distinct they are, vis-a-vis rules 2 and 3. The array of icons found in today’s typical complex apps, like word processors and Photoshop, is too many by a factor of about three.

The next post about interfaces will talk about how the World of Warcraft interface could be applied to the desktop.

2 Responses to “Why icons suck”

  1. Snocrash November 3, 2009 at 10:57 pm #

    ICONS SUCK BAD

    I hate them. On my TV, in my Car, my Phone – everywhere. Often leaving the user completely clueless as to what they actually do.

    But, it seems, they’re not going to go away any time soon. Evilness – that’s all they are – For illiterate morons who can’t read.

Trackbacks and Pingbacks

  1. BrianWill.net » Blog Archive » I hate Macs - March 19, 2007

    [...] Most things just can’t be conveyed pictorially (see earlier post, Why Icons Suck), especially with pictographs 1cm in diameter. To their credit, Apple has finally realized this and focused on making bigger icons. Still, Apple started this thinking, and many Apple apps still perpetuate illiterate, push-button design that values gloss over function. [...]

Leave a Reply