ICONS: Much Ado About Something (continued)

Figure 1. Write down the function of each of these icons.

What did you write? (Check further into the column). Typically, only two out of the eight get more than about 15% correct answers (Bold and Italics). What went wrong? Six of the eight icons were not easy. They were not cross cultural. They did not solve the problem of illiteracy. And they didn't save any time. Yet, these icons could appear in any average application.

We have just diagnosed a case of cryptic IMFAP syndrome (Icon Mania, Fetish, and Phobia)! We fervently believed icons were groovy. We focused on the image. And now, we might be afraid of using them any more. How beat the ensuing trauma of crypto-hypericonitis?

THE TASK IS THE THING As in each of our columns, we resurrect soul-design by analysis of the various kinds of work involved: Visual, Intellectual, Memory, and Motor (the VIMM model). Our problem arises when we forget that icons are best used for direct manipulation. Thus, the icons in our test served only marginal benefit as static "images" such as found painted on a "wood panel"--or tool bar--or push button, as the case may be. Yet, we do not deny the beauty of religious icons. Similarly, in the context of elevating our UI out of the drab, dreary world of black and gray text, the "flash" value of subtly colored icons can provide some entertainment. Let's see how we can make icons really work. Let's get our IMFAP shots.

Issue: Users may fail to understand an icon if it doesn't "fit" with accompanying icons. Consider these command sets associated with moving your right arm: Raise, Down; Left, Open; and In, Forward. Now compare with this command set: Up, Down; Left, Right; and In, Out.

Solution: Design icons so they share similar visual attributes. For example, make them all either 2D or 3D, not some of one and some another dimension. Draw from similar metaphors. Paint or draw programs make it clear that an aerosol can is not hair spray, by associating it with a bucket of pouring paint, a paint brush, and a pencil. We understand that the aerosol can creates a texture of a can a spray paint. This phenomenon can be called visual "coherence". The icons should stylistically appear as a "family" of icons that go together.

Issue: While visual recognition of images is easy, abstract, action-oriented icons carry unexpected baggage. Try to "read" Figure 2.

Figure 2. Icons that you can easily read.

It's a "rebus", a combination of text and pictures that we use with our kids (or was given to us by our parents). It's a book with icons as training wheels. Can you read it? I suspect you can figure it out as quickly as our course participants. But why was that so easy and the icons in Figure 1 so difficult? Notice that the rebus pictures are all objects. They are nouns. However, most of the Figure 1 icons are actions. They are "verb forms." Reading clockwise from the top left, we have "make the text fit in the margins," "rotate to landscape," "make bold," "make italics," "remove all page breaks," "print in reverse order," "remove all control characters", and "hand feed the paper." Actions are difficult to interpret graphically!

Note that we recognize bold and italics only because we have memorized them based on our English language spelling.

Solution: Attach actions to objects. Make the action concrete by associating it with the object to which it applies. Many actions benefit from using arrows. See Figure 3.