Affordances and Design

In the world of design, the term "affordance" has taken on a life far beyond the original meaning. It might help if we return to the original definition.
Let me try to clarify the definition of the term and its many uses.

AFFORDANCE

The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between
the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible,
known, or desirable. Some affordances are yet to be discovered. Some are dangerous. I suspect that none of us know all the affordances of even
everyday objects.

PERCEIVED AFFORDANCE

I introduced the term affordance to design in my book, "The Psychology of Everyday Things" (POET: also published as "The Design of ..."). The
concept has caught on, but not always with true understanding. Part of the blame lies with me: I should have used the term "perceived affordance,"
for in design, we care much more about what the user perceives than what is actually true. What the designer cares about is whether the user
perceives that some action is possible (or in the case of perceived non-affordances, not possible).

In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same.
In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its
keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and
clicking on every pixel of the display screen. Most of this affordance is of no value. Thus, if the display does not have a touch-sensitive screen, the
screen still affords touching, but it has no result on the computer system. Mind you, the affordance still has impact: it is useful in multiple-person
communication, and it helps aid the sale of screen-cleaning tissues and fluids. All screens afford touching: only some detect the touch and are
capable of responding. But the affordance of touchability is the same in all cases. Touch sensitive screens often make their affordance visibly
perceivable by displaying a cursor under the pointing spot. The cursor is not an affordance; it is visual feedback.

In similar vein, because I can click anytime I want, it is wrong to argue whether a graphical object on the screen "affords clicking." It does. The real
question is about the perceived affordance: Does the user perceive that clicking on that location is a meaningful, useful action to perform?

CULTURAL CONSTRAINTS, CULTURAL CONVENTIONS

In graphical design, one is really talking about conventions, or what I called logical and cultural "constraints" in POET. Physical constraints are
closely related to real affordances: Thus, it is not possible to move the cursor outside the screen: this is a physical constraint. Logical constraints
use reasoning to determine the alternatives. Thus, if we ask the user to click on 5 locations and only 4 are immediately visible; the person knows,
logically, that there is still location left.

Cultural constraints are learned conventions that are shared by a cultural group. The fact that the graphic on the right hand side of a display is a
"scroll bar" and that one should move the cursor to it, hold down a mouse button, and "drag" it downward in order to see objects located below the
current visible set (thus causing the image itself to appear to move upwards) -- all this is a cultural, learned convention. The choice of action is
arbitrary: there is nothing inherent in the devices or design that requires the system to act in this way. (The word "arbitrary" does not mean that
any random depiction would do equally well: the current choice is an intelligent fit to human cognition, but this is a different topic, for another day.)

In all scrolling bars I have seen, there is a physical constraint as well: the vertical scroll bar only moves vertically, not horizontally. Once again,
these cultural constraints are arbitrary. The scroll bar could have been designed very differently. It could have been located on the left, or the top,
or as a button. Today, its action follows the "outside-in" convention, but in the early days, a number of designs used the "inside-out" convention,
so that moving the scroll bar down caused the text to move downwards, exposing the new text at the top of the screen. Today if we were to use that
convention, it would be confusing, but only because the convention has already been established. (Some drawing programs still follow that earlier
convention and they have adopted the convention of a "hand" graphic to signal that moving the cursor upwards "grabs the text" and moves it
upward as well. )

All this is cultural convention, not affordances.

In the world of design, what matters is:

  1. If the desired controls can be perceived
    1.a. In an easy to use design, if they can both readily be perceived and interpreted
  2. If the desired actions can be discovered
    2.a. Whether standard conventions are obeyed

In a game, the designer may deliberately violate the A principles (1A and 2A). Sometimes, even in effective, mass-consumer designs, it is useful to
violate these principles. Thus, sometimes there are "back doors" for those who maintain the system, and it is not desirable that the average user
know of their existence. But if the user is to be effective at, these principles should be followed.

How new users understand what to do: Four principles for screen interfaces

There are several ways of getting a new user to understand what actions are possible. This was a major theme of POET, but there, the emphasis was
on physical products, so perceived physical affordances were extremely important. In graphical design (e.g., screen displays), physical affordances
play only a minor role, so other principles must be invoked. Here are four, but like most design conventions, each has both virtues and drawbacks:

1. Follow conventional usage, both in the choice of images and the allowable interactions.

Convention severely constrains creativity. Following convention may also violate intellectual property laws. Sometimes we wish to introduce a new
kind of action for which there are, as yet, no accepted conventions. On the whole, however, unless we follow the major conventions, we are
doomed to fail. Those who violate conventions, even when they are convinced that their new method is superior, are doomed to fail. (You cannot
successfully introduce a non-qwerty keyboard today, or reverse the window scroll bar convention, or suddenly require double-clicking on web
links. For better or for worse, human culture changes slowly, if at all.)

2. Use words to describe the desired action (e.g., "click here" or use labels in front of perceived objects).

This is, of course, why menus can be relatively easy to understand: the resulting action is described verbally. (Of course, the method of using the
menu has to be learned, and the text still has to be chosen with care -- and user tested.)

Words alone cannot solve the problem, for there still must be some way of knowing what action and where it is to be done. This requires a
convention of highlighting, or outlining, or depiction of a actionable object. It is also well known that single word labels fail for most people --
everyone has a favorite word, but the variety of preferred words is overwhelming. Words also cause problems with international adoption. Thus,
road signs often use graphics -- an international standard on road sign graphics exists. Alas, most people do not understand those standards. It is
also the case that words are understood more quickly than graphics -- even a well known, understood graphic. Words plus graphics are even more
readily understood.

3. Use metaphor.

Metaphor is both useful and harmful. I personally believe that metaphors are more harmful than useful, but this is a different topic for a different
day. For today's topic, the problem with metaphor is that not all users may understand the point. Worse, they may take the metaphor too literally
and try to do actions that were not intended. Still, this is one way of training users.

4. Follow a coherent conceptual model so that once part of the interface is learned, the same principles apply to other parts.

Coherent conceptual models are valuable and, in my opinion, necessary, but there still remains the bootstrapping problem; how does one learn the
model in the first place? -- why by conventions, words, and metaphors.
 


References

The primary reference to affordances in perception is Gibson, 1979, but also see Gibson, 1977.

Gibson, J. J. (1977). The theory of affordances. In R. E. Shaw & J. Bransford (Eds.), Perceiving, Acting, and Knowing. Hillsdale, NJ: Lawrence Erlbaum Associates.

Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston: Houghton Mifflin.

Norman, D. A. (1988). The psychology of everyday things. New York: Basic Books.

Norman, D. A. (1990). The design of everyday things. New York: Doubleday.