The Problem With Icons

Icons are little pictures on GUI buttons which identify the actions those buttons produce.

Problems

Strengths

Outdated icons

Icons can go out of date, too. The canonical icon for a save button is a picture of a floppy disc. With the cheapness of CDs, I've given to using CDs almost exclusively. I wouldn't be surprised if younger people never even use floppy discs. One of the recent Macs did not even include a floppy drive.

The floppy disc icon is not out of date. Many will fail to recognize what it's supposed to look like, but that's ok - as long as it's recognized as the "Save" pictogram, that's just as good (better). Pictograms are symbols, not portraits. Consider Mandarin Chinese - some of those pictograms go back thousands of years. Would you like to tell the Chinese their written language is out of date?

SAVE is just as short and memorable as any pictographic symbol could possibly be. In addition, it has the advantage of being intuitive.

[I'd say that only to an English speaker is SAVE more intuitive then an icon; although, as pointed out elsewhere, localization of icons may be necessary, surely icons can be common across more cultures than language-specific words can?]

A better understanding of how pictograms become abstract symbols is needed here.

{I see a gear icon used for "tools" and a pencil icon used for "edit". It's merely using an analogy to an older technology. Floppies[3] arguably are the same. However, the newest generation may never even see a floppy by the time they start using computers. I understand the complaint, but frankly don't know what alternative to suggest.}

Suggested alternatives to "Save":

Too many icons

Icons are good because they're easy to identify very quickly. Of course, that spectacularly fails in MicrosoftOffice since there are enormous panels of zillions of icons. Icons are good when there aren't too many of them. However, a new user of a program faced with a panel of ten icons might have a general idea of what most of them do, but it's not worth hazarding a guess. The GnomeDesktopEnvironment solves this problem by adding a textual description of each icon underneath it. Users can turn them off when they become familiar with the icons. -- MikaelBrockman

This seems to me to be more a problem of trying to offer too much to the user at the same time, and less a problem from icons in general. If the users were forced to sit in front of a panel with "zillions" of textual descriptions, would users have a better experience?

Without a doubt. Because the textual descriptions would be unambiguous. Unless of course they were written by incompetent writers. But at least, that's not an inherent limitation of text.

However, the clutter would be no better for productivity than an equally-cluttered collection of icons. The icons would, however, take up less screen real estate.

Another problem with lots of icons is that you end up with many that are very similar. What's the difference between the blue circle and the purple circle? Which one of the seven slightly different sheet-of-paper 'document' icons did I just click?

Related: GooglifyDeepMenus

Icon familiarity and associations

Icons also take advantage of people's visual recognition by tapping into our innate hunting skills of recognizing outlines. Text does this as well, but to a lesser extent than colors and unique shapes, requiring more time to process and isolate than an icon. Icons are weak because of opaque meanings, the natural limitations of their size, and because they often aspire to represent actions with little counterpart in the real world (or real world actions that have no physical form). The real benefit from icons IMHO comes from associating an image with an action for future recall. Once learned, that knowledge can be recalled easily and applied in other applications. While junior highschool students today rarely -> never use a floppy disk these days, how many of them are confused by the icon when confronted by it in a new application? How often do you read the tooltip text over the floppy icon in an app? It JustWorks?.

Familiarity breeds comfort, and being able to quickly perform the desired action gives users a sense of accomplishment and expertise. Just as with real world control panels, unique shapes on levers and buttons aid with quick discrimination. One could argue that the actual content of the icon is almost irrelevant, provided that its' outline is unique and standard (and not blatantly counter intuitive...), so that the users can create a link from form to function.

WIMP relation

The most widespread use of icons isn't to identify actions or abstract properties. It's to identify concrete objects in the WimpInterface. Objects such as files, directories, network drives, system devices, printers, executable programs, et cetera.

The problem with this is that clicking on an icon in order to get you the full-fledged object is an abrupt transition. It's UI magic, as AlanCooper would say. The best, most intuitive and most natural way to represent an object isn't with an icon but with a miniature. So instead of clicking on an icon in order to magically summon an object, the object is always there and the user simply zooms into it. It's the difference between imperative programming and OOP.

Some say that icons are artifacts of the WimpInterface that can't be justified even when they make sense, as representing concrete objects, so using them to represent actions or abstract properties is senseless.

Icons are bad when misused or used as the only clue for an operation's identity or purpose. We have all seen lots of crappy icons in our day; how about focusing on the good icons? Even when we are incapable of creating the art we can still visualize the image we want to convey, eh? Work on that and then get somebody who is good with a pointing device to create the art.

Make sure the tool tip is present as well.

Keyboard/CLI versus Mouse/Wimp HolyWar Mindsets:

Hatred of icons "The most widespread use of icons isn't to identify actions or abstract properties."

That is simply in error. Most applications for windowing OSes have multiple buttons on jillions of little toolbars that all "do something." These icons don't represent solid object instances or Singletons - they represent an action to be applied.

"Icons can't even be justified when they make sense"

I disagree, icons make all the sense in the world when they are used properly. For instance, I recently started to use the Quick Launch toolbar on my Win2K desktop. I found that I had a couple of mutually exclusive IP applications and I had to switch back and forth between them all the time. The icons on the toolbar made that very easy.

Now, of course I could have assigned a hotkey combination to both of these apps and fired them off that way, but I don't always remember the key combos for everything, and the toolbar turned out to be a great convenience for a lot of other reasons, too. Now I use the durn thing all the time.

Try to keep in mind that the user interfaces for windowing OSes like Windows have been worked on by zillions of people who get paid a lot of moolah to come up with a "better idea." This doesn't mean that everything they do is a better solution, but it isn't just a pile of dog poop, either.

By zillions of people who are all incompetent idiots. Every single one of them. And the fact that they're all paid to come up with a "better idea" instead of trawling through existing research in human-computer interaction, is proof positive that the people who hire and manage them are equally incompetent and equally idiotic. This is precisely why everything in the market OSes like Windows and Unix is a pile of dog crap.

Okay, that statement makes you a troll. Now I know who I'm dealing with - some strung-out teenager whose angst boils over into an Internet rant. Thanks for identifying yourself.

And as for the "existing research" that you seem to want to quote, the fact that the Wintel desktop outnumbers all others on the planet by an order of magnitude or two would be a pretty strong indication by itself, eh? Grow up, snotface.

It's well known that the Wintel platform didn't become the market leader through technical excellence. It got its dominance through a combination of good timing and good marketing. It took how many years for MS to come up with an OS which is reasonably stable? Two decades? Unix isn't any better, it's merely on the opposite end of the style spectrum. As much as we wish it otherwise, technical superiority of the product (including UI's) isn't - and has never been - the key to success in the consumer marketplace. Consider McDonalds, Memorex media, Gilette Mach3 razors, and the damn trays that we get our tomatoes in at work. -- WilliamUnderwood

Icons Vs Text

No icon is going to be as evocative as the word "Copy", "Save", or "Reply"; why ditz around with cutely pictures when you can simply say what you mean?

So go ahead. Nobody's going to stop you. On the other hand, don't force zillions of users to read your description of the action associated with a particular button, either. It's nice to be able to set up rows of same-sized buttons that just use little pictures to identify their operations rather than some long-winded explanation in text.

By the way - I avoid buttons and icons and the like as much as I can. Not because I am a Luddite, but because I find key combinations to be faster and more comfortable. Still, there's nothing inherently wrong with windowing user interfaces.

Definitely. Whenever someone sits down to use my computer for web browsing, they say "Where's the back button?!" I have all buttons turned off in my browser. In OperaBrowser you simply hit 'z' to go back and 'x' to go forward. Why you would ever want to put your hand on the mouse, move it around and click to do such a common task is beyond me. -- BrianRobinson

You do it so that users won't be asking you, "Where's the [Back] button?" Your instance of Opera uses 'Z' and 'X' as backward and forward navigation. Okay, but what about the next guy's setup of Opera? Or the next browser? If the user has a button that is recognizable from one instance to the next, from one app to the next, or even from one platform to the next - then they don't have to ask you how to use it.

I, too, eliminate the buttons from my browsers and most other apps. However, when I have a guest (or how about a client?!?) who wants to use one of my machines and wants to use buttons, then I turn them back on. It's nice to have the option.

Wimp Vs Keyboard

The problem with Icons has to do with working with keys you press versus working with images you click on. Those who press keys, want to work by touch, those who work with icons want to work by sight. So as a result touch-oriented individuals prefer keys and sight-oriented individuals prefer icons. The problem isn't with the presentation so much as it is with the acceptation. On that account, it seems that icons are nearly ubiquitous, finding a place of usefulness in thousands, if not millions of programs.

This is blatantly false. I personally prefer to click on a button than to hunt down whatever key combination is supposed to trigger an action. And I hate icons. I prefer "save" to "picture of a diskette". I prefer "new page" to whatever hallucinatory image is supposed to represent a new window.

This assumes that they can communicate their behavior to the user. There are a few operations that are easy to communicate to a large set of users, but I see icons used for behaviors that just can't be expressed in a 32x32 pixel image. I also see them used without regard to cultural assumptions. Doesn't anyone ever wonder what Arabic readers make of a "forward" button with an icon pointing to the right?

Wouldn't the arabic reader be equally confused by textual buttons with 'Backwards' on the left and 'Forwards' on the right? While icons do open up new avenues for cultural misunderstandings, those problems are a subset of trying to communicate to different audiences through the same means and mechanisms.

The touch-oriented users who use CLIs must depend on their memories or memory-aids to know what to do when.

Funny you should mention memory-aids: my mother had a 'wordperfect' memory-aid overlay she put on her keyboard when she first started using it. It was wonderful... every special key's meaning was clearly laid out on the keyboard.

The problem isn't that button's on a tool bar are bad. The problem is that they aren't as good as the buttons on your keyboard, except that a program can't put a tooltip on your keyboard. You know what I want? A touchpad keyboard with integrated lcd screen (low-resolution if need be), such that the computer can show me what key does what. [F1], [enter], [capslock], [1], [Q], [shift], []; these are all keys (in the relational sense) to a piece of functionality on the computer. They've been given those labels because they're used in that manner more often than not, or they provide a conveniently specified key value to a definition.

-- WilliamUnderwood

Do you actually look at the keyboard while using it? And do you really want to read "Open File" written in the space of a key top?

I do, usually when I'm running an unfamiliar function. I do, when I want to know if num-lock is on. By contrast, realize that in physical devices, labels are put as close as possible to the actual control. No, once the user is familiar with the function, they aren't necessary; that doesn't mean that they aren't invaluable when the user is _not_ familiar with the function. The closer the description is to the physical point of contact, the better. --cwillu

The strengths of icons far outweigh the limitations and weaknesses, at least for the sight-oriented users who tend to use GUIs. The touch-oriented users who use CLIs must depend on their memories or memory-aids to know what to do when.

For those who do implement iconic interfaces: On the topic of international glyphs (not limited to computer use), there are standards to at least be aware of; see

Notes:

  1. Localized GUI button icons are, in fact, used for many international applications even now. For instance, bank teller machines display different icons for different local languages. The same is true of many medical devices, machine controls, military systems, ...
  2. When in doubt, include text. There is no point in creating a button with some phunky picture on it if the icon can't convey the totality of the concept. A trash can is pretty descriptive of a delete button. What does a button with an icon of a sun rising behind mountains tell me? Okay, don't use that. If it hurts...
    • I've made a point to include pop-up rollover text on icons if the technology provides it. But this still contains the problem of managing multiple written languages.

  3. Even the term "floppy" is anachronistic when applied to the sealed floppy disks used in "Save" icons. The older "floppies" were actually visibly floppy. I used an 8-inch floppy a couple of times for legacy equipment left over from the 70's, and they were indeed very "floppy".

Icons as verbs are very bad. The reasons why are straightforward:

Of course, these arguments don't apply to icons used to represent objects.

We'll start by observing that buttons are typically used as verbs, so if we concern ourselves with icons as nouns it follows that we're not talking about buttons. Which raises the question, where are icons used when not in buttons? The answer is straightforward: where they represent BusinessObjects?.

The proper replacement for icons is miniatures. ZoomableUserInterfaces? make use of them. Even mainstream operating systems have acknowledged this fact in a limited way; thumbnails have gained popularity.

-- RichardKulisz

As a personal WetWare anecdote, I do in general find icons easier to visually locate than text. If there are more than about 7 text items near each other, then "locational memory" is insufficient for me, forcing me to rely on visual recognition. Words take longer to mentally translate into concepts once one is familiar with the icons. Color is part of the reason, for words generally are all of the same color. Colors offer another factor in the mental WHERE clause that helps locate and narrow mental match candidates. The geometric shapes of icons are also larger than that of letters in most cases, which also seems to help. Further, with images, the designer has more choices as far as re-doing them if two or more are too visually similar. You can rotate the angle of view or use a different color for say a house ("Home"). With words your choices are generally more limited, and changing to a synonym may require re-working the documentation. -t

See Also: MicrosoftRibbonInterface

CategoryInteractionDesign CategoryUserInterface

EditText of this page (last edited January 27, 2011) or FindPage with title or text search