Icons and UI

Ok, disclaimers first: I have done absolutely zero research into user interface design, I have no degrees in psychology, and I have no input into my thought process other than my own experience. Without letting that stop me, I’m going to go off for a minute on why I think computer user interfaces are so bad these days.

What’s Wrong with Icons?

I totally disagree with the general thought that icons make software easy to use. Icons are opaque until you do what? Mouse over them and read text. Perhaps after you have read the text and you know what the button does, then the icon serves as a succinct shorthand for the functionality.

However, I think most novice users are substantially hindered by all the pictures. Most of the icons today assume a certain working knowledge, a certain vocabulary of computer literacy. Until you are fluent in the language, however, you have a ways to go before you can understand an iconographic interface.

Consider phrases like minimize and maximize in the context of windows. (By this I mean the general concept of “windows on the screen,” not the operating system by Microsoft). Until someone tells a novice user what those terms mean, they’re not obvious. Of course, the terms and the functionality make a lot of sense once you understand them. The thing about icons is that they put all this understanding one level farther away. All the novice sees is this icon (here’s a Mac example, which I think is as opaque as the equivalent Windows example) Mac Icons. The red button means “kill the window,” the yellow button means “minimize” and the green button means “maximize.” Hardly obvious, in my opinion.

So my point is that novice users must learn two levels of abstract thinking in order to grok the fundamentals of computer use. They must first understand the minimize and maximize concepts, then they must learn which pictograms represent those concepts.

The rebuttal I make to myself is this Paco, you’re just one mind. Hundreds of people have spent years and careers studying user interfaces. How could they all be wrong? I don’t know.

Icon Overload

When I am introduced to a new program for the first time, I usually spend the first few minutes mousing over everything and waiting for the text to pop up and tell me what the icon means. Even after using software for a long time, I still can’t always remember what the silly icons mean. Consider the following capture of Visio 2000. visio.pngOn the one hand, this is a contrived example. I have activated 5 toolbars at once. On the other hand, consider how much screen real estate is used and how many tiny, non-obvious icons there are. This is supported behavior. In fact, the default installation brings up at least 2 or 3 of these toolbars. Even though I’m a pretty regular user of Visio, I can’t remember what all these things do.

The information density is just too high for a non-specialist. Even for a specialist and a highly skilled user, it is daunting.

Use Words

My opinion: words are the way to go. Everything should just have a word or phrase associated with it. They already do. Abandon the icons. Here’s my rationale:

Words require no specialist knowledge

Words have meaning that is already well-defined. Someone who, for example, does not speak English very well, can go to a translation dictionary and look up “Export.” In an icon-based system, they must first mouse over the export icon to see the English word “export” and then they can go look it up.

Let’s face it: even though icons let us theoretically design language-independent GUIs, you can never sell software to a non-English market without writing all your mouse-overs and help in the other language. Abandoning icons doesn’t create new translation work. The translation work was already there, and doesn’t change in magnitutde.

Words facilitate keyboard-based navigation.

I think people overlook the value of keyboard-based navigation. They somehow think that a mouse with just a button or two is better than two hands full of fingers. Consider the accuracy with which one must use a mouse. A 64×64 pixel button is large by today’s UI standards, but requires quite a bit of precision that only people in the middle ages of life (e.g. 10-50) can consistently manage. On the other hand, if your focus is in the right window and you can hit the right key, you can be absolutely certain that the desired effect will happen. That is, it is easier for me to hit “F” on the keyboard than it is to mouse over to a tiny little toolbar button that is 16×16 and click it.

I also think keyboard-based navigation is far faster than mouse-based navigation and operation. People are used to using their hands to tap things. Mousing requires extra surface area, and lots of manual dexterity. There is no equivalent to “hunt and peck” with a mouse. I have now meandered from what is essentially an output discussion (the UI) to an input discussion (how people control programs). The two are decidedly related in today’s GUIs, though.

Words Facilitate Dictionary-style Help and Documentation

You can’t search based on icons, nor can you sort based on icons. Documentation must always be written in words. Icons can be arranged in any jumble, and the rhyme and reason is usually lost on a novice user. If you have ever worked in a technical support context—either professionally or just trying to help out a friend—think about a time when you were trying to tell them where to click. It’s hard to say ‘click on the thing that looks like a magnifying glass with a plus sign in it.’ Even if you have described it succinctly like that, the person must then get a picture in their mind of what you just described. Then they have to find it on the screen, and there is absolutely nothing to help them do that.

If you are a company making software, think about how hard it is to describe the use of particular icons in the help files or hard-copy documentation. You have to draw pictures of the screen and use arrows to point at the thing. Even when you have consistent language and idioms, you have to show them the thing to click on.

Icons Impede Efficiency

Here’s where a little knowledge is worse than none at all. I have heard that there’s some study somewhere that says, effectively: if there is more than one way to do something, it takes longer on average to do that something. I further heard that this is true even if a person always does the thing the same way each and every time. I guess there is always some infinitesimal cognitive pause to decide “do I do it the way I always do it, or do I do it the other way?” If I am wrong about this research (that I haven’t bothered to find and cite) and its conclusions, then the conclusions I’m about to draw are proportionately bogus.

You can’t get away from text. You will always have a ‘file’ menu and an ‘edit’ menu and so forth. If, however, you also provide icons to click on that duplicate the functionality, then you have provided at least a second path to do something. Consider all the ways I can make text boldfaced in Microsoft Word:

  1. I can select it and press Ctrl-B
  2. I can choose a style from the style menu
  3. I can select it and click the B icon
  4. I can select it and choose Format->Font and choose the bold option on my current font

There are probably a few more variations on this theme. I argue that the existence of such a myriad of paths slows me and anyone else down when trying to make something bold. Again, coming at it from a technical support point-of-view, if you start trying to tell someone how to make text bold, you might be telling them a different way than the way they’ve used in the past. It creates confusion and misunderstanding.

I’ve blurred a line again. Rather than just talk about icons, I’ve talked about how many ways there are to do stuff. I’m basically saying “get rid of icons and you get rid of one of these paths to doing stuff.”

Conclusion

Icons hinder more than help novice users, by making them learn an extra level of abstraction. Non-dextrous novice users are further hampered by the mouse interface interacting with icons. They cannot resort to “hunt and peck” with icons. They cannot search icons to find out more about them, and help cannot be sorted based on pictures.

Advanced and accomplished users waste time and brainpower dealing with fields of icons. Mousing is slower and less efficient for an expert user who can use all 10 fingers well. While there is increasing commonality between programs about which pictograms represent which functions, there is almost perfect agreement on which words represent which functions. For example “grid snap” is universally understood in English, but not universally represented by an icon.

I’m interested in some of the places where I have completely missed the boat in UI design. I encourage comments.