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) 
. 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. 
On 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:
- I can select it and press
Ctrl-B - I can choose a style from the style menu
- I can select it and click the B icon
- 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.
You left out my favorite stupid icon example: the replacement of the trash can with the recycle bin! That just irritates me for no particular good reason.
The other icon thing that bugged me the other day is I downloaded a new web browser and I was looking for an icon to add to my toolbar that would suggest to me “click here for web browser” and out of like 5000 icons none of them were any good. I finally picked one that looks like a planet or something, it seemed as good as any.
But to argue slightly with your main point, I think icons have two main benefits. They look pretty, which is something that people like (especially since the average home user might not get a lot more than this out of their computer) and they also give you some idea of how many different things you could do if you were to be so bold as to move the mouse somewhere and click. They encourage experimentation: “Aha! Clicking the funny “I” makes my text all slanty!” In stark contrast the unix “$” prompt is hardly encouraging to the novice. “WTF do I do now?” is the logical response to the dollar sign, whereas any doof can probably create a pretty picture using Mac Draw or whatever by finding an icon shaped like a triangle, clicking it, creating a triangle, and so on.
When you say “Words have meaning that is already well-defined.” I’m sure you mean words like awk, cpio, dd, df, ed, ex, igawk, mknod, ps, rm, sed, sh, su, tar, vi, and zcat
. There are dozens of commands available on my Linux box that I don’t know what they do, and, moreover, can’t even make a plausible guess. So I’m not sure that words are the entire answer here.
You know Paco, it probably wouldn’t be too hard for you to write a patch or plugin or whatever for Gnome or KDE that eradicates all icons, replacing them with words. If you do this I promise to download it and try it out.
John
It’s somewhat ironical that the entire thesis of this debate seems to upend that old platitude – a picture is worth a thousand words.
I’m one of what I believe is a dying breed – a user who actually takes the time to learn keyboard shortcuts so that I don’t have to lift my hand to use the mouse. Even with a trackpoint, I prefer using keys (Dave and Paco both alluded to this as well). Therefore, icons distract me less than they distract others.
- Traditional media now seem to have absorbed interfaces from Computer Science, never mind that the former are far less interactive. Anyone who has seen CNN Headline News recently will recognise that the screen now looks like a browser, complete with unnecessary icons squatting over precious real estate. I shudder to imagine when newspapers convert their insert-adverts to pop-ups.
- Recommending the use of text does not translate to presenting a bland CLI. Judicious use of text in GUIs/WUIs may be unglamorous but will be rewarded by users who get their work done faster.
- Non-obvious keyboard shortcuts are worse than icons. MicroSoft products are especially guilty of these. Even the superbly-useful PowerPoint has notorious bloopers (Alt-e-e for replace? Alt-d-v or Alt-v-w for viewing a presentation?) FrameMaker, IMO, does a very good job of keyboard shortcuts (Esc-f-o for file open, Esc-g-a for graphics align and so on).
- I think icon usage will increase simply because of the increasing trend to dumb things down. I’m not against making things _simple_, but I dislike _dumbing down_. Again, MS is most guilty of this. They could have made using templates simpler, but no, that would mean acknowledging decades of others’ work in typesetting. Instead they have the dumb B icon, which nullifies any attempt to make well-formed documents.
- I don’t think icons encourage experimentation. Or if they do, the potential for shooting yourself in the foot is extremely large. I like to think of myself as a FrameMaker power-user and I got that way simply because their menus are well-organised, with like actions in proximate menus. Not so with Word, which has irritated me with poorly-designed menus and proliferate icons.
- I sure hope nuclear power plants don’t have wordless icons. I’d hate to think there’s a Homer-Simpson-esque guys saying “I wonder what the button with the triangles does…”. If we don’t trust icons alone in nuclear plants, we shouldn’t trust them alone in day-to-day software as well. Day-to-day software may not directly maim and kill, but it can cost a lot in carpal tunnels, punched-out monitors and general self-tonsure.
Nuts
Some thoughts:
- As a partially color-blind person, I really don’t like OS X’s use of colored buttons. I figure I’d have to memorize the positions.
- It occurs to me that your tirade may have similarities with tirades on the use of “skins” that seems to be popular with apps nowadays. http://www.newsfactor.com/perl/story/16564.html
- While I agree that icons are tough on new users, I think that in the end we do want them. For example, the “and” (wide “D”) and “or” (arrowhead) symbols from digital logic design are second nature to me now, and actually save me time and space.
- Some of your objections are objections with the particular implementation of icons, not icons per se:
– Icon overload: Office now hides less frequently used icons
– Lack of dictionary-style help and documentation: There’s no reason you can’t do that with the mouseover text for icons.
– Keyboard-based navigation: Could be implemented for icons as well
- Some apps already support parts of your rant!:
– Just about any app will let you get rid of the toolbars
– IE lets you choose text, icons with text, or just icons.
– In Office, you can get text buttons if you right click on a button, select customize, then while the customize dialog is open, right click on the button again and select “text only”
– Most apps have keyboard shortcuts for people who can’t use a mouse well. Alt-f, x is my favorite way to end an app.
David
P.S. For a more serious rant, we should ask why the Navy is using Windows NT for submarines, why lasers for eye surgery are controlled by Windows 95, and why the DoD is ready to move to web-based services even though there are still unsolved problems of integrity, dependability, security, etc.
I don’t disagree with most of what you say, but you are missing a few bits.
You claim that what you are complaining about in http://paco.to/blog/visio.png is the fact that the (seemingly arbitrary) icons are useless. You are actually complaining, though, that there are too many icons, and therefore it’s hard to find the one you want. Assume that each icon is replaced by a word taking up no more space (unlikely)–it would be just as jumbled, but it would now be even harder to find the action you are looking for–now you need to read each word in order on order to find the appropriate action–there’s no way to search through them except by a linear pass.
You’re right that the icons are only useful once you know what actions they allow you to perform, but once you know the action you’re looking for, they can let you find the button more quickly. In a cursory web search I was not able to find the few pictures I was thinking about to illustrate this, but think about how the visual system executes search tasks–if all the items you’re searching THROUGH are visually very similar to the item you are searching FOR, then it degenerates into a serial search. If they are more distinct, then the visual system can find things using other techniques. Contrast searching for an F amidst lots of E’s, L’s, T’s and H’s with searching for an O amidst X’s, I’s, and E’s and S’s.
I agree that icons not well tied into an app’s help system are bad. I agree that visual clutter is bad (I tend to get rid of practically all “toolbars” and just use the menus (with keyboard shortcuts when I know them)). I don’t agree that all icons present less information/pixel in a less searchable manner. I think they can be more precise than the text that can be presented in the same amount of space, and I think that if they are well enough designed they can be searched through efficiently utilizing the strengths of the human user’s visual system. For example, just because there exist colorblind people doesn’t mean color should not be used to make tasks easier for those who can see color.
-Dale
On Mon, 1 Dec 2003, Dale Newfield wrote:
> You’re right that the icons are only useful
> once you know what actions they allow you to
> perform, but once you know the action you’re
> looking for, they can let you find the
> button more quickly. In a cursory web
> search I was not able to find the few
> pictures I was thinking about to illustrate
> this, but think about how the visual system
> executes search tasks–if all the items
> you’re searching THROUGH are visually very
> similar to the item you are searching FOR,
> then it degenerates into a serial search.
> If they are more distinct, then the visual
> system can find things using other
> techniques. Contrast searching for an F
> amidst lots of E’s, L’s, T’s and H’s with
> searching for an O amidst X’s, I’s, and E’s
> and S’s.
I think the problem is that the fact that you find the O amid the Xs easily relies on not just the fact that the O looks different from the Xs, but that most of the visual field looks the same (it’s all Xs). So if we make 99% of our icons mostly indistinguishable, then the remaining 1% will really stand out. Alternatively, if we had 1/100th of the icons we have, they’d probably stand out more.
Reading your comments Dale made me think about how I find stuff among the smattering of icons on my desktop. I think it is a linear search. I’ve gotten used to certain ones being in certain areas, so that speeds up the search, but basically I get close and then look around. Whenever I have to change my laptop resolution to use a projector (and it forcably moves icons to fit the new size), I’m screwed up for a couple of days because I never take the time to put them back in the same location. So, I linearly search them for a while until my internal map gets built again.
A bunch of you guys are Mac people right? In days of yore when I had a Mac I remember there being a set of like 8 “labels” (essentially colors) that you could give to things. The effect was, if you gave some file the pink label, the icon would become pinker than before (these labels all had important sounding names like “hot” or “essential”). At the time, I never saw a use for this feature. Now, I wonder if you could use it to take advantage of people’s color-based pre-attention and then do something linear. Of course, this again relies on most icons having the same color and just a few standouts.
Glenn
I’m reading this two years after it’s written and I can say that the team behind Office 12 will do a lot for reducing the icon-clutter.
Take a look at this blog: http://blogs.msdn.com/jensenh/rss.aspx
It’s interesting reading about the new Office-interface.
Markus