|
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.
Reduce Visual Work
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.
Reduce Intellectual Work
Issue: While visual recognition
of images is easy, abstract, action-oriented icons carry unexpected baggage.
Try to "read" Figure 2.
|
|
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.
|
