The Icon Book

May 7, 2022

Book Notes

The Icon Book cover

When I read a book I have the habit of highlighting certain passages I find interesting or useful. After I finish the book I’ll type up those passages and put them into a note on my phone. I’ll keep them to comb through every so often so that I remember what that certain book was about. That’s what these are. So if I ever end up lending you a book, these are the sections that I’ve highlighted in that book. Enjoy!

Studies of road signs typically find that iconic signs can be read at twice the distance and in half the time as word signs.

Graphics work better than words for representing subtle concepts of shape, color, position, angle, size, texture, and pattern.

Icons replace wide rectangles of text with compact squares of meaning.

To find a word label we must read each of the labels in turn; to find an icon we merely scan for its distinctive shape.

When we encounter a visual symbol, we give it a name and remember that name along with the visual image. Thus icons are stored as visual and verbal memories, but word labels are retained only verbally.

The first serious attempt to communicate with beings outside our solar system came when designers of the Pioneer 10 space probe attached a plaque using visual symbols to tell an intelligent being encountering the spacecraft where the probe came from and who sent it. It did so by using visual images of the few concepts and experiences an extraterrestrial being is likely to have in common with us: mathematics, physics, and basic chemistry.

Icons and words are not enemies. They are not mutually exclusive. Word labels help users learn visual initially, and the visual images help poor readers interpret word labels.

Icons do not make a product easier to use. Good design does.

Some concepts are inherently difficult to understand–whether we represent them with icons or with words. For such concepts, the issue is not whether icons require study but whether they require less or more study than equivalent word labels. An icon does not fail if it requires a few seconds of study the first time the user sees it. Provided users are not totally stumped by an icon, the process of figuring out its meaning adds an enjoyable challenge to learning the system. Watch users when they decode an icon. They smile. This process of decoding an icon actively engages the user and helps the user remember the icon so that recognition is almost instant the next time. This instant recognition may be much more important than the initial delay, especially if the user will encounter the icon dozens or even hundreds of times.

Icons are meant to be viewed entirely in a single glance and, once learned, recognized automatically.

Misunderstanding leads to bad design.

For icons to succeed, users must be able to do four things with them: decode, recognize, find, and activate. You may have to make tradeoffs among these four goals, but all are necessary to some extent.

Draw a simple image already associated with the concept you wish to represent. If you cannot do this, then represent the concept by combining familiar images in a simple way.

Once we’ve learned an icon, we merely have to recognize it when we see it and we have to recall its meaning. Recognition is especially quick and reliable when images are:

The image should awaken memories of related sounds, words, and emotions.

Ensure that users can predict the distinctive visual characteristics, such as shape and color, of the icon they seek. Do this by asking an user what they think the icon would be for a certain concept before showing them the one you designed.

Establish, teach, and consistently follow a simple scheme for activating icons. (Activating meaning clicking on or touching a button)

If you understand how icons work, you understand how graphics work; if you understand how graphics work, you understand how we communicate–regardless of medium.

In regards to visual processing – We remember not just one visual image for the object but several. What we see comes not from the eyes but from memory. We see mostly what we already know and have seen before. Visual input seems designed more to trigger the correct memories than to tell us directly what something looks like. We tend to seek out details that confirm our current interpretation of a scene.

The icon is more like a catalyst that releases meaning in the presence of a context and a human mind.

Context includes adjacent icons.

Once you know what the object is, your memory can fill in all the necessary details. This would work well if you leave space in the middle of an icon for the user to fill in or for an object that has lots of variability in one part. Leave that section blank for an user to fill in with what they remember.


The message is what the icon is all about. If the user recognizes the icon as representing the concept you intended, the message was understood. There are two kinds of messages: factual and emotional. Factual messages represent specific information we want the user to recognize and perhaps experience. A choice of color or selection of an object can be a message, enabler, or noise.

Enablers

Enablers are not part of the message but they may be essential to speedy, reliable delivery of the message. If you leave out enablers, users can still get the same message, but it will take them longer and they will make more mistakes.

Noise

Noise is anything that interferes with the sure delivery of the right message. Anything that is not clearly an enabler or message is probably noise. Noise is relatively easy to detect.

How you can analyze test data

If you take out the suspicious item and the happens…The thing you removed was this…
Users get the intended message more quickly and more reliablyNoise
Users get the message, but take longer and make more mistakesEnabler
Some users get the message, others do notRedundant Message
No users get the messageNonredundant Message

Each symbol must have a strong, direct association with the desired meaning.

Start with symbols that show the subject itself or at least physically resemble it. These are easy to understand and recognize. Then consider ones that show a related object. These may take a little study and thought, but once understood, they are recognized reliably. If you cannot communicate The concept by showing a familiar object, only then consider more abstract symbologies.

Show the subject if you can. This is the most direct symbol and usually the best. The physical similarity between the real-world object and its graphic representation ensures that the subject is recognized reliably. Often when the symbols mimic the subject, we forget that they are symbols at all and treat them as if they were the object being discussed

When an activity involves manipulating a physical object, show objects arranged the way they would appear to the user performing or observing the action.

If the action requires a person to assume a distinctive posture, we can use that posture to represent the action.

Sometimes it’s worth just searching through your emojis list to see if a common icon already exists.

When you can’t show the idea directly, you can show an analogous object, one with recognizable parallels to the real idea.

Icons for utility programs typically show an example of the problem the program is designed to overcome.

If an operation requires a familiar tool, you can use the tool as a symbol for that activity, it must, however, be both familiar to the viewer and strongly associated with the activity.

Often the icons for this software employ images of the tool, person, or body part used in the past to perform the software’s functions.

Electronic publishing systems typically use scissors, paste, pencils, and push pins.

Even general concepts can be represented by specific, familiar tools.

If an activity is traditionally performed with a part of the body, you can show or feature that body part as a symbol for the activity.

Because we use each part of the body for many functions, body parts are seldom sufficient to unambiguously implicate one activity. They usually require labels or other objects to clarify the meaning.

Often the best way to communicate the function of a button or command is by showing its goal, effects, or consequences.

Many common symbols show the state or condition that will result from an action.

If the organization of the subject is important, you can often represent it by showing an object with a similar structure. 

Synecdoche

In the figure of speech called synecdoche, we use a single, familiar part to stand for the whole object. This technique is widely used in road signs where a gas pump signifies a service station; a tent, an entire campground; a bed, a hotel; and a fork, knife, and spoon, a restaurant:

When the whole object is too complex or indistinct to represent a concept, pick a small, recognizable part.

When you cannot find a direct symbol for a concept, consider whether you can show it by the negation of its opposite, as in the figure of speech called litotes. We do this verbally when we show our approval by calling something “not bad.”

Broken arrow is a symbol for peace.

How do you show freedom? One way is to show release from its opposite, that is, imprisonment. Show an object used to block, thwart, or defend against the concept

If the object you use to symbolize a concept is small, you may use hyperbole, or exaggeration, To make It more prominent. This technique is valuable when you must clearly distinguish among otherwise similar objects or concepts.

When the user of a Macintosh drops the icon for a file into the trash can icon, the sides of the trash can seem to bulge

We see hyperbole at work in the standard road sign for an incline. If the sign did not greatly exaggerate the slope it would appear flat.

Unless your improvement is vast and obvious, it will confuse readers and probably be rejected by those comfortable with the familiar form.

For a visual symbol show not what something actually looks like but what users think or remember it looks like. Often this an earlier, simpler version.

Most people label the one on the left as maluma and the one on the right as tukatee. They cite the roundness of sounds in maluma and the sharpness of those in tukatee. Sounds do not have a visible shape, so when we speak this way we are using a synaesthetic analogy.

Similarly, in icons depicting before-and-after conditions, the after condition is to the right

Anything pointing to the right implies motion. When we do not want to imply motion or change, we typically point to the left.

A point seldom has any meaning on its own. Instead, it relates to some other object in the icon.

In icons we use lines to represent:

The above is a cool way to shade in a background

Regular patterns suggest uniformity and order, while irregular patterns suggest coarseness, crudeness, vulgarity, turmoil, and violence.

A sudden change of texture can indicate an edge, a fold, or a crease within an object.

In drawing, a gradual change of texture indicates changes in the angle of the surface relative to the source of light or to the viewer.

Some textures appear to shimmer or vibrate. This shimmering effect draws undue attention to the texture and annoys many viewers. But it also could be useful in certain situations.

Straight-edged shapes occur most frequently in man-made objects.

Rounded shapes occur in nature and living organisms. We associate them with organic, fluid concepts.

Irregular shapes call attention to themselves. They may appear spontaneous and unplanned. They may be used to represent objects that are unique or are exceptions to the rule.

Concave shapes draw the eye into the enclosed space, focusing attention on whatever resides there.

Keep in mind that the orientation or angle of an object relative to the viewer and to the horizon contributes to a feeling of action or stability. The more the orientation of an object or text differs from its most common form, the more slowly and less accurately we recognize it.

Dynamics are helpful to:

For a single blinking rate use 3 Hz. For two rates use 2 Hz and 5 Hz and use no more than two blinking rates.

If the rate is too slow, the motions will seem unconnected. If it is too fast, the eye cannot form the separate images and the object will seem to blur rather than vibrate.

Straight movement suggests control and constraint. Motion along a curve has a more natural, fluid quality. Steady movement can seem mechanical and may suggest that the object is not moving under its own power. Accelerating or decelerating movement makes the object seem to propel itself across the screen.

Often we need to say that two things are equal or similar, that they belong to the same category:

Symmetry – it’s most effective when icons for opposite concepts are mirror images of each other
Even when the symmetry is not total, the effect is still strong

Showing Importance

Put the object in front – make it appear closer by having it overlap other objects in the icon. In addition to expressing importance, overlap is one of the ways we can show depth in flat icons.
Increase detail in the object
Objects in the center, top, or upper-left corner of the scene appear the most powerful or important

Showing Depth

Notice how these icons put farther objects higher than nearer ones
Types of shadows
Highlights, glints, and reflections also suggest depth
Perspective can prove confusing unless the objects shown are recognizable solid objects. To avoid ambiguity, give the flat object thickness.

There seem to be two causes for color perspective: One is the psychological association of aggression with warm colors and regression and calm with cool colors. Another is the physiological fact that different wavelengths of light are refracted to different degrees by the lenses of our eyes. These different colors come into focus at different planes and the eye cannot focus them at the same time. The mind concludes, incorrectly, that they come from objects at different distances. This three-dimensional effect of color is called chromostereopsis. It encourages us to use of intense warm colors for nearby objects and cooler, less saturated or darker colors for more distant objects:

Showing Changes or Motion

For movement of solid objects, draw arrows as solid or draw them in perspective with the movement of the object
Show a posture of action whenever you want to show an object clearly in motion or an action as it occurs. The effect is heightened if the object is in an unstable position

Pregnant moment – Depicting an action, not at its climax but a few moments earlier. The implied climax is like a magnet that pulls the action forward.

This depicted state is called the pregnant moment. The gap between the pregnant moment and the climax produces a directed tension that the viewer can relieve only by achieving closure. This closure comes when, in the viewer’s imagination, the action proceeds to its climax. The pregnant moment is often used in warning signs that show an impending disaster rather than the consequences of the disaster. Such signs let the viewer play out the scene in the imagination, thus heightening its emotional impact and its effectiveness as a warning:

Designing an Iconic Language

Every language has two parts: a vocabulary and a grammar. The vocabulary is the collection of elementary symbols that are combined according to the rules of the grammar to form units of expression. Grammar tells us what combinations have meaning and which do not.

Mathematics, as we said, is a language too. Its vocabulary consists of simple symbols for mathematical operations (+, -, =) The grammar of mathematics provides rules such as those you learned in algebra class.

The same principles apply to designing and using iconic languages – consistency and simplicity.

Large, complex systems benefit most from a simple, consistent iconic language.

Actions are what the user does to or with elements.

Objects are geometric figures being created and manipulated.

Methods specify how an action is carried out.

Change of State

If the before state is well known, the image may show only the destination state.

Sometimes the opposite state of an icon doesn’t read well alone, but reads a lot better when it is toggled with its opposite frequently. (See below image)

Here’s how you might use an identifier – Imagine that you are designing icons for a program used to create multimedia presentations. You want to give your icons for the various media a thematic unity and you want to clearly associate them with your program and your company. You start with your company trademark. And you simply incorporate that emblem into the icons for the various media handled by your product.

This shows that you don’t have to always follow the rules you set to a tee.

In antithesis, we combine two sharply contrasting objects or characteristics to suggest a richer idea than is conveyed by either alone. We see this technique used in an emblem for classical theater

Antithesis is most useful where the symbol represents some aspect of an extreme difference or the range of concepts between two extremes

In the technique of addition, we create a compound symbol by adding the independent meanings of separate objects. This technique works well where a concept can be represented as the sum of its parts. One test is whether you can express the icon with a formula like this:

Whole = Part1 + Part2 + … Partn

By the technique of overlap, we signify an abstract or general concept by combining objects that have only this concept in common. (And differ in almost every other way)

The technique of overlap is superb for representing abstraction and general categories. Consider an abstract concept like technology.

Often an icon must refer to one specific item or category. Specification combines separate images so that each restricts the reference of the others. It is like the practice of stacking up adjectives in front of a noun to sharpen its reference.

The first step to bringing order to the chaos is to group the icons into meaningful categories and subcategories.

Use a different color or background pattern for different categories of icons.

Appropriate details make objects easier to recognize. Our eyes seek out detail in a scene and detail can draw our eye to an image. However, detail can distract and clutter. Excessive detail makes it harder to see a pattern of relationships. Which is best? The rule is simple: Include just those details necessary for the icon to accomplish its purpose. Often a less detailed image makes a better emblem, especially for general or abstract concepts. We can draw icons in five different degrees of detail and realism.

Photographs and photo-realistic drawings can serve as icons. Typically this technique is used for complex objects that require a uniformly high level of detail to make them recognizable. One common use of photographic icons is to represent specific people, buildings, or works of art. For instance, some multimedia authoring tools capture a frame of video or animation and use that frame as an icon for the actual clip or sequence:

Photographic icons are not practical in all circumstances. For photographic icons to work, you need three things:

Simplified drawing
This style works well for complex objects that require specific details to be recognized. This style is especially useful when objects contain small, significant parts like the vernier wheel in a drafting compass or the spiral binding of a notebook. The simplified drawing style helps us distinguish among objects that share a common profile.

Caricature calls attention to a small, crucial feature of the icon. In caricature we distort a part of the image to emphasize that part.

Outline
This technique is good for small icons that represent a familiar object having a distinct profile. By omitting internal details and simplifying outline contours, we imply that the icon represents an abstract category or class. The outline style may be the only style practical when the object consists of just edges and lines.

By giving the icon a thin outline contour rather than filling it with an emphatic color, we make it visible without letting it dominate other icons.

The silhouette style results naturally from objects too thin to have a separate outline contour.

Filling a shape gives it a visual mass that makes it stand out from a plain background and from unfilled objects. By combining filled and unfilled shapes, you can control the relative emphasis given to different icons or different objects within an icon.

Each icon should answer these questions: What is this? What is most important about it? How do I use this icon? How is it related to the rest of the program, especially to other icons?

For every object, there is one viewpoint that makes the object most recognizable. This viewpoint is called the characteristic view or the canonical view.

The best view is the one that most clearly reveals the object.

The purpose of an icon is not to tell someone what something looks like, but to remind them of something they already know. For this reason, we often must exaggerate the size of important but small items in an icon.

Isometric – The object is viewed from 45 degrees above and to one side. This view works best when the front, top, and side are equally important.

Offset from Front – The object is viewed from the front, slightly above and to one side. This view focuses most attention on the front but lets side and top views reveal distinctive details.

Objects drawn in true perspective cannot be combined or moved in the image without redrawing their edge lines.

Our world is illuminated from above. This is not a metaphor but a simple observation. In icons, therefore, draw the shadow as if cast by a light source above the plane of the viewer’s eyes.

Shadows falling onto shadows or onto foreground objects add complexity beyond what many viewers can handle. If you have objects on different layers, you may want to avoid shadows altogether.

Use sudden changes in brightness to suggest a sudden change of slope or a sharp edge.

To minimize jaggies, avoid oblique angles, those that are nearly horizontal or nearly vertical. Try to draw diagonals with 45-degree lines. If this is not possible, then use 30- and 60-degree lines.

When drawing small objects, try to avoid arcs or else substitute straight-edged shapes.

As a general rule, make as degree diagonals about one and a half times as thick as verticals and horizontals. The result is that the thickness across the diagonal is the same as across vertical and horizontal lines.

No hard-and-fast rule is possible. If users are accustomed to negative-contrast displays and must consult paper documents frequently, use negative-contrast icons. If their jobs involve tracking small objects, especially those with color codes, try positive-contrast display. Watch out for the blooming effect: the tendency of light to flow from the light pixels into the dark ones. Bright lines and objects will tend to expand on a dark background.

A balanced image appears more formal and static than an unbalanced one.

Imbalance may better direct attention to the critical matter of the icon.

Balance

Visual mass and its effect on balance depend on several factors.

These effects do not operate independently. You can readily combine them to add counterbalancing effects.

Symmetry

The strict symmetry of a book reinforces its formal authority while the asymmetrical arrangement of messages on a bulletin board gives it a lively informality. The newspaper seems midway between these two extremes.

Stability determines whether an icon seems ready to topple over or is likely to stand for years. For a stable icon, lower the center of mass; for an unstable one, raise it. Top-heavy icons appear less stable than bottom-heavy ones.

Even though some laptops display 16 levels of gray, users often find it hard to discern more than half that number in realistic work conditions.

How do we abbreviate an icon? We can show a simpler, smaller version. Besides the main version of an icon, we may need a smaller version for inclusion in lists and on brief menus. We may also need a larger version for use as an emblem on the product’s box or in its manual.

Many icon designers say they find it helps to draw icons, or at least preliminary sketches, on a grid background.

One of the paradoxes of icon design is that design is easier if the grid has an odd number of pixels along each side. This is because an odd number provides a center pixel around which to focus the design.

Color

Decide why you are using color:

To make a small item stand out, give it a conspicuous color.

Large areas of pure, saturated color overwhelm and tire users

To deemphasize, hide, or camouflage an object. Fade it into the background. Give it a color close to that of the background.

Color coding can fail if you use too many colors, or if there are too many items in each color.

Show the color of the most common, most widely used, and best established version of an object.

Whenever you use traffic or safety signs in icons, show them in their conventional colors.

We naturally see items of the same color as a group. To show that separate icons are of the same type, class, or category, display them with the same color.

To imply an order or ranking among a group of icons, assign them colors varying in lightness, not just hue. One of the most common mistakes in color coding is to use the color spectrum to imply an order. This scale, which arrange colors as they occur in a rainbow, is not immediately recognized.

Although users can infer the general value from a color, do not rely on color alone to express a value. Color is best used to reinforce a value expressed more precisely by some other means.

The best we can strive for are guidelines for using colors in ways that offend few people and unify rather than disrupt the design.

Staring at a large area of one color for long periods of time dulls the user’s ability to perceive that color. This is a huge case to not overuse color, especially if only using 1 or 2 colors.

Select colors equally spaced around a common color harmony wheel.

You cannot please everyone–at least in your choice of colors. You can, however, avoid offending many.

Color associations arrow
Color associations table 1
Color associations table 2
Color associations table 3

For similar hues, pick colors from adjacent slots on the color wheel, for instance:

Here is an example of the process of selecting colors for an application.

  1. Decide why you are using colors. Select one primary purpose
  2. Specify the categories you need to represent. This lets you know how many colors you need
  3. Select candidate colors
  4. Make tenative assignments based on common associations of the colors
  5. Fix specific assignments in the context of the assignment

To avoid disruptive effects of color:

To overcome the problems caused by color blindness:

Consistent borders give all the icons a uniform shape and size their individual images may lack.

The uniformity provided by borders robs the icon of a unique outline. The penalty is even greater when scanning for a recognizable shape.

Borders are not limited to rectangular shapes.

As a visual object, the border competes with its contents for attention.

Make the border a meaningful part of the icon by using it to reinforce and clarify the message of the image it contains.

You can also alter the meaning of an icon by making slight changes to the shape of the border. Any deviation from a standard rectangular shape can represent a secondary concept. You can cut one of the corners.

Don’t use them unless you plan to teach users their meanings. Also, don’t use them for any critical message.

Many icons lack a full border enclosing the entire image. They may, however imply the extent of the icon by how they cut off an obviously continuous image.

The thicker the border, the more attention you can give it.

Notice how by extending the image to the border we imply a larger object than we can show.

You can enhance the three-dimensionality of an object by letting it protrude over the border of the icon.

Keep the background static. If anything blinks or moves, the viewer perceives it as foreground image.

Viewers can easily categorize icons by the colors or patterns of their backgrounds.

One innovative way to use the background is to progressively fill it to indicate progress toward some goal.

One simple technique is to let users decide whether to display the labels for icons. Typically this is done by setting an option in a preferences menu.

Another approach is to display the label only when the user points to the icon.

To avoid the problem of flickering labels, you can have the system display the label only when the user holds down a special function key while pointing to the icon. This is less convenient than automatic display of labels, and it requires learning the technique.

Puns require such a subtle knowledge of language that they prove difficult for those who read in their second language.

Take special care with symbols that show or refer to text in a way that implies a left-to-right reading direction.

Show sequence with arrows. If you must arrange the sequence of objects left to right, indicate the reading sequence by an arrow:

Use vertical sequence. Make the icon read from top to bottom. All languages read from top to bottom of the page.

Mirror-image icons. For the Arabic and Hebrew editions of your applications, flip left-to-right all icons that depend on horizontal arrangement for meaning.

What visual symbols will the user recognize? What symbols have they already learned?

Marketing can tell you why people buy the product and what problem they expect it to solve for them.

Test early and often.

The quality of a visual symbol often depends on the number of times you have revised it. Do not be satisfied with your first idea.

  1. Think of 5 good ideas for the icon
  2. Pick the best one and draw it.
  3. Test and redraw it five times.

All ideas are welcome, even crazy, wild, impractical ones. Often such ideas spark further ideas that are practical. Even obviously wrong ideas can provide a path to better ideas.

Pictionary is ideal for icon designers because it emphasizes the need to communicate clearly and quickly.

Testing

The result of late testing is a tendency to look for only small, easily fixed problems.

In general, 3 phases or types of testing are required:

Formative testing strives to stimulate ideas rather than to refine or verify them. This technique is sometimes called the “two steps forward, one step back” approach. The cumulative effect of the repeated testing and improvement is continual progress toward perfection.

We learn what to do by repeatedly testing a series of prototypes, ever refining them. The basic cycle of formative testing involves four activities:

  1. Build – Create a prototype, no matter how crude
  2. Test – See how well the prototype works
  3. Analyze – Understand how the prototype failed or how it can be improved
  4. Redesign – Incorporate the lessons learned into the new design

In formative testing, we are not trying to prove that the icon or the product works. We want out design to fail so we can learn how to improve it. In formative testing forgo polished designs and decimal points. Five quick-and-easy tests are better than one scientifically valid one. Remember that in formative testing, we are not perfecting the design, we are trying to come up with a design to perfect later.

Test pairs of subjects, rather than individuals. Their discussions show what they are thinking and reveal their growing knowledge, as well as their misunderstanding.

@joekotlan on Twitter