Create Meaningful Graphics, Icons, and Images 653

Step 11: Create Meaningful Graphics, Icons, and Images 653

Icon . Something that looks like what it means.

Index . A sign that was caused by the thing to which it refers.

Symbo l. A sign that may be completely arbitrary in appearance. He states that what are commonly referred to as icons may really be indexes or sym-

bols. A true icon is something that looks like what it means. It is representational and easy to understand. A picture of a telephone or a clock on a screen is a true icon. An index is a sign caused by the thing to which it refers. An open door with a broken win- dow indicates the possible presence of a burglar. The meaning of an index may or may not be clear, depending upon one’s past experiences. A symbol is a sign that may be completely arbitrary in appearance and whose meaning must be learned. The menu and sizing icons on screens are examples of symbols. From this perspective, strictly speaking, so-called icons on screens are probably a mixture of true icons, signs, and indexes.

Rogers (1989) provided an expanded definition for icon kinds.

Resemblance — An image that looks like what it means.

Symbolic — An abstract image representing something.

Exemplar — An image illustrating an example or characteristic of something.

Arbitrary — An image completely arbitrary in appearance whose meaning must be learned.

Analogy — An image physically or semantically associated with something. She suggests that an icon is used in a number of different ways: for objects such as a

document, object attributes such as a color or fill pattern, actions such as to paste, system states such as ready or busy, and message types like critical or warning.

The different ways icons are used may then be represented by different design schemes. A resemblance icon is an image that looks like what it means — a book, for example, to represent a dictionary. This is equivalent to Marcus’s icon. A symbolic icon is an abstract image that represents something. A cracked glass, for example, can rep- resent something fragile. Marcus’s symbol would be similar. An exemplar icon repre- sents an example or characteristic of something. A sign at a freeway exit picturing a knife and fork has come to indicate a restaurant. An arbitrary icon is not directly related in any way and must be learned. Marcus’s symbol would be an equivalent. Finally, an analogy icon is an image physically or semantically associated with something — a wheelbarrow full of bricks for the move command, for example. Marcus’s symbol would also be similar.

In a study looking at various kinds of icons, Rogers found that those depicting both an action and an object were quite effective. For example, a drawing of a page and an arrow pointing up means “go to the top of the page.” She also found that arbitrary icons were only meaningful in very small sets, and that icons based on analogies were relatively ineffective.

654 Part 2: The User Interface Design Process