Icons: Beautiful but Deadly

Icons -- in the electronic era -- pretty much date back to the introduction of user interface. Although I'm sure they existed in some form before this, the earliest icons I can remember hearing about were part of the PARC design that Steve Jobs used to base the first Macintosh interface on, most famously as paint took indicators. Paint tools are of course among the easiest targets for icons beacuse each relates to a common handheld tool with a distinct function.

They are now used throuhghout the computer world. however we have a larger body of data now about whether they are effective or not as a UI convention. We even have a set of icons that have been made ubiquitous thorugh use on the computer: folders, the "move swastika", the tip down triangle, and the "X of death". The pre-digitial icon was mainly found on roadsigns and mechanical control panels.

Icons are used for files, applications, in list detail, window sprue, application toolbars, menus, drawing applications, web pages... it would almost be easier to make a list of where they are not used (spreadsheet body? UNIX consoles?). However they are not necessarily as useful as they are prolific.

The function of an icon is to create a memorable, clickable, and in some cases draggable visual hook for an item, command, file, etc. Technically speaking a game sprite is also an icon of sorts. As a rule, icons are either a form of control (button) or a visual representative of an item to be manipulated (dragged) -- as in a file icon. That is, either as a noun or a verb.

One observation from About Face is that nouns - physically absolute items - are easier to represent iconically than actions. This makes sense: an object has an absolute, canonical representation - itself. However an action rarely has a clear and unique visual represntation given to you.

Take the icons from Cinema 4D: and keep in mind this is a deep release from a visually oriented product. (and 66% actual size.) The icons at the bottom -- textures, a concrete object, are crystal clear. The icons at the left and to pare on the other hand a lot less straightforward.

The more frequent one is exposed to the icon and uses it in their daily life the more relevant it is. For instance my dock icons are crystal clear to me: that is, I don't know what each one is supposed to be, but I do know which application they represent. To me: because I use those programs.

That soft rounded cube next to the postage stamp? That's NetBeans; oh and the postage stamp is my Mail program(duh!). The duck is, of course, my instant messanger. But they are probably irrelevant to anyone looking over my shoulder.
By contrast the iconic annotations on bookmark menu is byzantine - even to me. I'd rather they were gone - they're a hopless muddle of distraction because while i do use my book mark menu, I do so erratically and add to it frequently. 

Take another use case: the toolbar, herein represented by the Web Developer toolbar.

Keep in mind I graphically sharpened the toolbar to maximize the readaiblity. Half the icons here are cryptic and just darn counterproductive: the word CSS in a yellow box for "CSS" -- next to the word CSS? a lego (?) for Miscellaneous ? A key (?) for Options? I would rather that they dropped the icon and colored each word a different hue. I am not attacking the (sainted wonderful) people behind Web Developer (the best thing ever made) -- just to point out that icons as a rule are hard: really hard, especially if you commit yourself to iconifying every element in a diverse set of information. things like "Information", "Miscellaneous", and "Options" are by definition aggregate terms for things with very little in common; graphically representing things whose only commonality is that they don't belong somewhere else is a massively difficult undertaking - especially in a 12 x 16 mesh of pixels. And not all things that are hard are actually worth doing.

The point of icons is to help you find something in a series. In some cases they are devastatingly powerful. For instance, photographic thumbnails: unless the reduction process destroys the icon's readability totally, they are pretty easy to identify. However, in other cases they are not so great; the Firefox dev team in a recent development contest admitted that seeing iconic representatives of a bunch of pages in wikipedia is not very useful -- they all pretty much look the same at the thumbnail scale. So an iconic view of a Wikipedia page might be useful in contrast to say, a C-Net page, but not so great to aide in internal discrimination within a set of Wikipedia pages. On the other hand, a series of favicons (such as appears on firefox tabs) are fairly functional. 

For instance the latest Micorosoft Word is thoroughly iconed -- and frankly a little confusing. It doesn't help that the context menu that switches the toolbar is a huge Frazette Postulate violation. Compare this to the pages toolbar: iconic? yes - but the icons are a linear hang for clear labels, and the more standard "old Microsoft" controls are ever present.

The Last Word. Microsoft has been taken over by evil baboons: send help!

Apple iWork Pages

 In short: before, doing and after the introduction of icons to a system, be honest as to whether the icons or their labels are doing the heavy lifting. If the Icons are not communicating identity and are not clear and useful, consider reverting to an un-iconed interface. Especially in the case of very small icons, they are often more intrusive than they are communicative.