jnd.org

ORIGINALLY PUBLISHED AS AFFORDANCE, CONVENTIONS, AND DESIGN IN THE MAY 1999 ISSUE OF INTERACTIONS, PP 38-43

I was quietly lurking in the background of a CHI-Web discussion, when I lost all reason: I just couldn’t take it anymore. “I put an affordance there,” a participant would say, “I wonder if the object affords clicking. “Affordances this, affordances that. And no data, just opinion. Yikes! What had I unleashed upon the world? “No!” I screamed, and out came this note. I don’t know if it changed anyone’s minds, but it brought the CHI-Web discussion to a halt (not what good list managers want to happen). But then, Steven Pemberton asked me to submit it here. Hope it doesn’t stop the discussion again. Mind you, this is not the exact piece I dashed off to CHI-Web: it has been polished and refined: the requirements of print are more demanding than those of email discussions.

AFFORDANCES, CONSTRAINTS, AND CONCEPTUAL MODELS

The word “affordance” was 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 relationships. They exist naturally: they do not have to be visible, known, or desirable.

I originally hated the idea: it didn’t make sense. I cared about processing mechanisms, and Gibson waved them off as irrelevant. Then, Gibson started spending considerable time in La Jolla, and so I was able to argue with him for long hours (both of us relished intellectual arguments). I came to appreciate the concept of affordances, even if I never understood his other concepts, such as “information pickup.” He and I disagreed fundamentally about how the mind actually processes perceptual information (that phrase alone would infuriate him).

Turn now to the late 1980s, when I spent a sabbatical at the Applied psychology Unit in Cambridge, England. My struggles with British water taps, light switches, and doors propelled me to write “The Psychology of Everyday Things” (POET: Norman, 1988).

A major theme of POET was the attempt to understand how we managed in a world of tens of thousands of objects, many of which we would encounter only once. When you first see something you have never seen before, how do you know what to do? The answer, I decided, was that the required information was in the world: the appearance of the device could provide the critical clues required for its proper operation. In POET, I argued that understanding how to operate a novel device had three major dimensions: conceptual models, constraints, and affordances. These three concepts have had a mixed reception.

To me, the most important part of a successful design is the underlying conceptual model. This is the hard part of design: formulating an appropriate conceptual model and then assuring that everything else be consistent with it. I see lots of token acceptance of this idea, but far too little serious work. The power of constraints has largely been ignored. To my great surprise, the concept of affordance was adopted by the design community, especially graphical and industrial design. Alas, yes, the concept has caught on, but not always with complete understanding. My fault: I was really talking about perceived affordances, which are not at all the same as real ones.

PERCEIVED AFFORDANCE

POET was about “perceived affordance.” When I get around to revising POET, I will make a global change, replacing all instances of the word “affordance” with the phrase “perceived affordance.” The designer cares more about what actions the user perceives to be possible than what is true. Moreover, affordances, both real and perceived, play very different roles in physical products than they do in the world of screen-based products. In the latter case, affordances play a relatively minor role: cultural conventions are much more important. More on that in a moment.

In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two sets need not be the same.

In graphical, screen-based interfaces, the designer primarily can only control perceived affordances. The computer system already comes with built-in physical affordances. The computer, with its keyboard, display screen, pointing device and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and clicking on every pixel of the screen. Most of this affordance is of little interest for the purpose of the application under design.

Although all screens within reaching distance afford touching, only some can detect the touch and respond to it. Thus, if the display does not have a touch-sensitive screen, the screen still affords touching, but it has no effect on the computer system. While the affordance has useful value in allowing people viewing the same screen to indicate regions of interest, this affordance mainly serves to make the screen-cleaning companies happy: they can sell lots of tissue and cleaning fluid. But this affordance is seldom useful to the interface designer.

Now consider only the touch sensitive screen that enables the system to support the affordance of touching. In this circumstance, designers sometimes will say that when they put an icon, cursor, or other target on the screen, they have added an “affordance” to the system. This is a misuse of the concept. The affordance exists independently of what is visible on the screen. Those displays are not affordances: they are visual feedback that advertise the affordances: they are the perceived affordances. The difference is important because they are independent design concepts: the affordances, the feedback and the perceived affordances can all be manipulated independently of one another. Perceived affordances are sometimes useful even if the system does not support the real affordance. Real affordances do not always have to have a visible presence (and in some cases, it is best to hide the real affordance). And the presence of feedback can dramatically affect the usability and understandability of a system, but quite independently of the affordances or their visibility.

In similar vein it is wrong to claim that the design of a graphical object on the screen “affords clicking.” Sure, you can click on the object, but you can click anywhere. Yes, the object provides a target and it helps the user know where to click and maybe even what to expect in return, but those aren’t affordances, those are conventions, and feedback, and the like. This is what the interface designer should care about: Does the user perceive that clicking on that object is a meaningful, useful action, with a known outcome?

It is possible to change the physical affordances of the screen so that the cursor only appears at spots that are defined to be “clickable.” This would indeed allow a designer to add or subtract the affordance of clicking, much as many computer forms afford the addition of characters only in designated fields. This would be a real use of affordances.

In today’s screen design sometimes the cursor shape changes to indicate the desired action (e.g., the change from arrow to hand shape in a browser), but this is a convention, not an affordance. After all, the user can still click anywhere, whatever the shape of the cursor. Now if we locked the mouse button when the wrong cursor appeared, that would be a real affordance, although somewhat ponderous. The cursor shape is visual information: it is a learned convention. When you learn not to click unless you have the proper cursor form, you are following a cultural constraint.

Far too often I hear graphical designers claim that they have added an affordance to the screen design when they have done nothing of the sort. Usually they mean that some graphical depiction suggests to the user that a certain action is possible. This is not affordance, neither real nor perceived. Honest, it isn’t. It is a symbolic communication, one that works only if it follows a convention understood by the user.

CONSTRAINTS AND CONVENTIONS

When designing a graphical screen layout, there is great reliance upon conventional interpretations of the symbols and placement. Much of the discussion about the use of affordances is really addressing conventions, or what I call cultural constraints. In POET, I introduced the distinctions among three kinds of behavioral constraints: physical, logical, and cultural. These are powerful design tools, so let’s be clear where each is being used.

Physical constraints are closely related to real affordances: For example, it is not possible to move the cursor outside the screen: this is a physical constraint. Locking the mouse button when clicking is not desired would be a physical constraint. Restricting the cursor to exist only in screen locations where its position is meaningful is a physical constraint.

Logical constraints use reasoning to determine the alternatives. Thus, if we ask the user to click on five locations and only four are immediately visible, the person knows, logically, that there is one location off the screen. Logical constraints are valuable in guiding behavior. It is how the user knows to scroll down and see the rest of the page. It is how users know when they have finished a task. By making the fundamental design model visible, users can readily (logically) deduce what actions are required. Logical constraints go hand-in-hand with a good conceptual model.

Cultural constraints are conventions 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) 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 there are alternative methods that work equally well.

A convention is a constraint in that it prohibits some activities and encourages others. Physical constraints make some actions impossible: there is no way to ignore them. Logical and cultural constraints are weaker in the sense that they can be violated or ignored, but they act as valuable aids to navigating the unknowns and complexities of everyday life. As a result, they are powerful tools for the designer. A convention is a cultural constraint, one that has evolved over time. Conventions are not arbitrary: they evolve, they require a community of practice. They are slow to be adopted, and once adopted, slow to go away. So although the word implies voluntary choice, the reality is that they are real constraints upon our behavior. Use them with respect. Violate them only with great risk.

Symbols and constraints are not affordances. They are examples of the use of a shared and visible conceptual model, appropriate feedback, and shared, cultural conventions.

How do you know if the user shares the conventions? Why, with data, of course. This is something that can not be decided by arguments, logic, or theory. Cultural constraints and conventions are about what people believe and do, and the only way to find out what people do is to go out and watch them. Not in the laboratories, not in the usability testing rooms, but in their normal environment.

I still hear far too much dogmatism about what people really “want,” what they “believe,” or how they “really” behave, but I see very little data. It doesn’t take much data. My partner, Jakob Nielsen, has long argued that you can get these data at a discount: three to five people will give you enough for most purposes (Nielsen, 1993, 1994). But they need to be real people, doing real activities. Don’t speculate. Don’t argue. Observe.

CONCLUDING SUMMARY

We have many tactics to follow to help people understand how to use our designs. It is important to be clear about the distinctions among them, for they havevery different functions and implications. Sloppy thinking about the concepts and tactics often leads to sloppiness in design. And sloppiness in design translatesinto confusion for users.

In this note I cover the following concepts:

• The Conceptual Model
• Real Affordances
• Perceived Affordances
• Constraints
• Conventions

The most important design tool is that of coherence and understandability which comes through an explicit, perceivable conceptual model. Affordances specify the range of possible activities, but affordances are of little use if they are not visible to the users. Hence, the art of the designer is to ensure that the desired, relevant actions are readily perceivable.

Today we do much of our design on computer screens, where the range of possible actions are limited to typing on a keyboard, pointing, with a mouse, and clicking on mouse and keyboard switches. Soon we will add spoken words and visual gestures to the list of interactions. All of these actions are abstract and arbitrary compared to the real, physical manipulation of objects, which is where the power of real and perceived affordances lie. Today’s design often lies in the virtual world, where depiction stands in for reality. Many aspects of physical affordances are denied the designer: the alternatives are constraints and conventions. These are powerful when used well. Personally, I believe that our reliance on abstract representations and actions is a mistake and that people would be better served if we would return to control through physical objects, to real knobs, sliders, buttons, to simpler, more concrete objects and actions. But that is a different story for a different time. Moreover, control of our artifacts through abstract commands implemented via typed and spoken items, pointing, and clicking will be with us for a very long time, so we do need to adapt.

Please don’t confuse affordance with perceived affordances. Don’t confuse affordances with conventions. Affordances reflect the possible relationships among actors and objects: they are properties of the world. Conventions, on the other hand, are arbitrary, artificial and learned. Once learned, they help us master the intricacies of daily life, whether they be conventions for courtesy, for writing style, or for operating a word processor. Designers can invent new real and perceived affordances, but they cannot so readily change established social conventions. Know the difference and exploit that knowledge. Skilled design makes use of all.

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.

Nielsen, J. (1993). Usability engineering. Boston: AP Professional.

Nielsen, J., & Mack, R. L. (Eds.). (1994). Usability inspection methods. New York: John Wiley & Sons.

Norman, D. A. (1988). The Psychology of Everyday Things. New York: Basic Books. (The paperback version is Norman, 1990.)

Norman, D. A. (1990). The Design of Everyday Things. New York: Doubleday.