20.1.1 The Concept of Affordance

The relevant part of what the dictionary says about “to afford” is that it means to offer, yield, provide, give, or furnish. For example, a study window in a house may afford a fine view of the outdoors; the window helps one see that nice view. In HCI design, where we focus on helping the user, an affordance is something that helps a user do something. In interaction design, affordances are characteristics of user interface objects and interaction design features that help users perform tasks.

20.1.2 Definitions of the Different Kinds of Affordance

In an effort to clarify the concept of affordance and how it is used in interaction design, we have defined (Hartson, 2003) four types of affordances, each of which plays a different role in supporting users during interaction, each reflecting user processes and the kinds of actions users make in task performance. Those kinds of affordances are as follows:

In analysis and design, each type of affordance must be identified for what it is and considered on its own terms. Each type of affordance uses different mechanisms, corresponds to different kinds of user actions, and has different requirements for design and different implications in evaluation and problem diagnosis.

As an example to get you started, consider a button available for clicking somewhere on a user interface. Sensory affordance helps you sense (in this case, see) it. Sensory affordance can be supported in design by, for example, the color or location of the button. Cognitive affordance helps you understand the button by comprehending what the button is used for, via the meaning of its label. Physical affordance helps you click on this button, so its design support could include the size of the button or its distance from other buttons.

20.3.1 Cognitive Affordance

Cognitive affordance is a design feature that helps, aids, supports, facilitates, or enables thinking, learning, understanding, and knowing about something. Cognitive affordances play starring roles in interaction design, especially for less experienced users who need help with understanding and learning.

Because of this role, cognitive affordances are among the most significant usage-centered design features in present-day interactive systems, screen based or otherwise. They are the key to answering Norman’s question (1999, p. 39) on behalf of the user: “How do you know what to do?”

As a simple example, the symbol of an icon that clearly conveys its meaning could be a cognitive affordance enabling users to understand the icon in terms of the functionality behind it and the consequences of clicking on it. Another cognitive affordance might be in the form of a clear and concise button label.

Cognitive affordance is usually associated with the semantics or meaning of user interface artifacts. In this regard, cognitive affordance is used as feed forward. It is help with a priori knowledge, that is, knowledge about the associated functionality before selecting an object such as a button, icon, or menu choice. In short, a button label helps you in knowing about what functionality will be invoked if you click on that button.

Communication of meaning via cognitive affordance often depends on shared conventions. The symbols themselves may have no inherent meaning, but a shared convention about the meaning allows the symbol to convey that meaning.

Another use of cognitive affordance is in feedback—helping a user know what happened after a button click, for example, and execution of the corresponding system functionality. Feedback helps users in knowing whether the course of interaction has been successful so far.

20.3.2 Physical Affordance

Physical affordance is a design feature that helps, aids, supports, facilitates, or enables doing something physically. Adequate size and easy-to-access location could be physical affordance features of an interface button design enabling users to click easily on the button.

Because physical affordance has to do with physical objects, we treat active interface objects on the screen, for example, as real physical objects, as they can be on the receiving end of real physical actions (such as clicking or dragging) by users. Physical affordance is associated with the “operability” characteristics of such user interface artifacts. As many in the literature have pointed out, it is clear that a button on a screen cannot really be pressed, which is why we try to use the terminology “clicking on buttons.”

Physical affordances play a starring role in interaction design for experienced or power users who have less need for elaborate cognitive affordances but whose task performance depends largely on the speed of physical actions. Design issues for physical affordances are about physical characteristics of a device or interface that afford physical manipulation. Such design issues include Fitts’ law (Fitts, 1954; MacKenzie, 1992), physical disabilities and limitations, and physical characteristics of interaction devices and interaction techniques.

20.3.3 Sensory Affordance

Sensory affordance is a design feature that helps, aids, supports, facilitates, or enables user in sensing (e.g., seeing, hearing, feeling) something. Sensory affordance is associated with the “sense-ability” characteristics of user interface artifacts, especially when it is used to help the user sense (e.g., see) cognitive affordances and physical affordances. Design issues for sensory affordances include noticeability, discernability, legibility (in the case of text), and audibility (in the case of sound) of features or devices associated with visual, auditory, haptic/tactile, or other sensations.

While cognitive affordance and physical affordance are stars of interaction design, sensory affordance plays a critical supporting role. As an example, the legibility of button label text is supported by an adequate size font and appropriate color contrast between text and background. In short, sensory affordance can be thought of as an attribute that affords cognitive affordance and physical affordance; users must be able to sense cognitive affordances and physical affordances in order for them to aid the user’s cognitive and physical actions.

Why do we call it “sensory affordance” and not “perceptual affordance?” In the general context of psychology, the concepts of sensing and perception are intertwined. To avoid this association, we use the term “sensing” instead of “perception” because it excludes the component of cognition usually associated with perception (Hochberg, 1964). This allows us to separate the concepts of sensory and cognitive affordance into mostly non-overlapping meanings.

While overlapping and borderline cases are interesting to psychologists, HCI designers need to separate the concepts because design issues for user sensory actions are almost entirely orthogonal to design issues for cognitive actions. As an illustration, consider text legibility, which at a low level is about identifying shapes in displayed text as letters in the alphabet, but not about the meanings of these letters as grouped into words and sentences.

But text legibility can be an area where user perception, sensing, and cognition overlap. To make out text that is just barely or almost barely discernable, users can augment or mediate sensing with cognition, using inference and the context of words in a message to identify parts of the text that cannot be recognized by pure sensing alone. Context can make some candidate letters more likely than others. Users can recognize words in their own language more easily than words in another language or as groups of nonsense letter combinations.

In HCI, however, we seek to avoid marginal design and ensure that designs work for wide-ranging user characteristics. Therefore, we require effective design solutions for both kinds (sensory and cognitive) of affordances, each considered separately, in terms of its own characteristics. Simply put, a label in a user interface that cannot be fully discerned by the relevant user population, without reliance on cognitive augmentation, is a failed HCI design.

Thus, we wish to define sensing at a level of abstraction that eliminates these cases of borderline user performance so that HCI designers can achieve legibility, for example, beyond question for the target user community. In other words, we desire an understanding of affordance that will guide the HCI designer to attack a text legibility problem by adjusting the font size, for example, not by adjusting the wording to make it easier to deduce text displayed in a tiny font.

In our broadest view, a user’s sensory experience can include gestalt, even aesthetic, aspects of object appearance and perceptual organization (Arnheim, 1954; Koffka, 1935), such as figure–ground relationships, and might sometimes include some judgment and lexical and syntactic interpretation in the broadest spatial or auditory sense (e.g., what is this thing I am seeing?), but does not get into semantic interpretation (e.g., what does it mean?). In the context of signal processing and communications theory, this kind of sensing would be about whether messages are received correctly, but not about whether they are understood.

20.3.4 Functional Affordance

Functional affordances connect physical user actions to invoke system, or back end, functionality. Functional affordances link usability or UX to usefulness and add purpose for physical affordance. They are about higher level user enablement in the work domain and add meaning and goal orientation to design discussions.

We bring Gibson’s ecological view into contextualized HCI design by including a purpose in the definition of each physical affordance, namely associated functional affordance. Putting the user and purpose of the affordance into the picture harmonizes nicely with our interaction- and user-oriented view in which an affordance helps or aids the user in doing something.

Yes, a user can click on an empty or inactive part of the screen, but that kind of clicking is without reference to a purpose and without the requirement or expectation that any useful reaction by the system will come of it. In the context of HCI design, a user clicks to accomplish a goal, to achieve a purpose (e.g., clicking on a user interface object, or artifact, to select it for manipulation or clicking on a button labeled “Sort” to invoke a sorting operation).

McGrenere and Ho (2000) also refer to the concept of application usefulness, something they call “affordances in software,” which are at the root of supporting a connection between the dual concepts of usability and usefulness (Landauer, 1995). In an external view it is easy to see a system function as an affordance because it helps the user do something in the work domain.

This again demonstrates the need for a richer vocabulary, and conceptual framework, to take the discussion of affordances beyond user interfaces to the larger context of overall system design. We use the term functional affordance to denote this kind of higher level user enablement in the work domain.

20.3.5 Summary of Affordance Types

Table 20-1 contains a summary of these affordance types and their roles in interaction design.

Table 20-1 Summary of affordance types

20.4.1 Communication and Cultural Conventions

An important function of cognitive affordance is communication, agreement about meaning via words or symbols. Communication is exactly what makes precise wording effective as a cognitive affordance: something to help the user in knowing, for example, what to click on. We see symbols, constraints, and shared conventions as essential underlying mechanisms that make cognitive affordances work, as Norman (1999) says, as “powerful tools for the designer.”

In the tradition of The Design of Everyday Things (Norman, 1990), we illustrate with a simple and ubiquitous non-computer device, a device for opening doors. The hardware store carries both round doorknobs and lever-type door handles. The visual design of both kinds conveys a cognitive affordance, helping users think or know about usage through the implied message their appearance gives to users: “This is what you use to open the door.” The doorknob and lever handle each suggests, in its own way, the grasping and rotating required for operation.

But that message is understood only because of shared cultural conventions. There is nothing intrinsic in the appearance of a doorknob that necessarily conveys this information. On another planet, it could seem mysterious and confusing, but for us a doorknob is an excellent cognitive affordance because almost all users do share the same easily recognized cultural convention.

This “on another planet” idea led to an interesting exercise in a class of graduate students on how cultural conventions influence our perception of affordances. We handed out identical empty Coke bottles to several groups and asked them to look at the bottles, to hold and handle them, and to think about what kinds of uses the inherent affordances evoke. We wanted them to get down to Gibson’s ecological level.

Students responded with the usual answers about affordances evinced by sight and touch. Visually, a Coke bottle has obvious affordances as a vessel to hold water, it can hold flowers, or it can serve as a rough volume measuring device. The heft and sturdiness sensed when held in one’s hand indicate affordances to serve as a paperweight, a plumb bob on a string, or even an oddly shaped rolling pin.

Then we asked them if they had seen the movie called The Gods Must Be Crazy. Although this cool movie was apparently before the time of most of them, some eyebrows were raised in an “ah ha” moment. In this movie, an empty coke bottle falls out of the sky from a passing airplane and is found by a family of Bushmen in the deep Kalahari. The Kalahari Bushmen, who have never seen a bottle before, can rely on only its inherent characteristics as clues to physical affordances leading to possible uses. The perceived affordances were not influenced by cultural conventions or practice.

The Bushmen used it for a variety of tasks—to transport water, to pound soft roots and other vegetation, as an entertainment device when they figured out how to use it as a whistle, and eventually as a weapon to attack one another.

That these affordances became so apparent to the Bushmen, but might not be obvious to most people from an industrialized part of the world, indicates the impact of social experience and cultural conventions to influence, and even prejudice, one’s perception of an object’s affordances.

20.4.2 Cognitive Affordance as “Information in the World”

Norman characterizes a view of cognitive affordance that we share (Norman, 1999, p. 39): “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.” This view of cognitive affordance as information in the world to aid understanding is fundamental and resonates with the ecological view of Gibson. The attribute that communicates the use of an object is an integral part of the object. This definitely works for, say, a label on a user interface button.

20.4.3 Affordance Roles—An Alliance in Design

In most interaction designs, the four types of affordance work together, connected in the design context of a user’s work environment. To accomplish work goals, the user must sense, understand, and use affordances within an interaction design.

Each kind of affordance plays a different role in the design of different attributes of the same artifact, including design of appearance, content, and manipulation characteristics to match users’ needs, respectively, in the sensory, cognitive, and physical actions they make as they progress through the cycle of actions during task performance.

As Gaver (1991, p. 81) says, thinking of affordances in terms of design roles “allows us to consider affordances as properties that can be designed and analysed in their own terms.” Additionally, even though the four affordance roles must be considered together in an integrated view of artifact design, these words from Gaver speak to the need to distinguish individually identifiable affordance roles.

Coming back to the example about devices for opening doors, the simplest is a round doorknob. Its brass color might be a factor in noticing or finding it as you approach the door. The familiar location and shape of a doorknob convey cognitive affordance via the implied message that it is what you use to open the door. A doorknob also affords physical grasping and rotating for door operation. Some designs, such as a lever, are considered to give better physical affordance than that of a round knob because the lever is easier to use with slippery hands or by an elbow when the hands are full. The push bar on double doors is another example of a physical affordance helpful to door users with full hands.

Sometimes the physical affordance to help a user open a door is provided by the door itself; people can open some swinging doors by just pushing on the door. In such cases, designers often help users by installing, for example, a brass plate to show that one should push and where to push. Even though this plate might help avoid handprints on the door, it is a cognitive affordance and not a real physical affordance because it adds nothing to the door itself to help the user in the physical part of the pushing action. Sometimes the word “push” is engraved in the plate to augment the clarity of meaning as a cognitive affordance.

Similarly, sometimes the user of a swinging door must open it by pulling. The door itself does not usually offer sufficient physical affordance for the pulling action so a pull handle is added. A pull handle offers both cognitive and physical affordance, providing a physical means for pulling as well as a visual indication that pulling is required.

As an example of how the concepts might guide HCI designers, suppose the need arises in an interaction design for a button to give the user access to a certain application feature or functionality. The designer would do well to begin by asking if the intended functionality, the functional affordance, is appropriate and useful to the user. Further interaction design questions are moot until this is resolved positively.

The designer is then guided to support cognitive affordance in the button design, to advertise the purpose of the button by ensuring, for example, that its meaning (in terms of a task-oriented view of its underlying functionality) is clearly, unambiguously, and completely expressed in the label wording, to help the user know when it is appropriate to click on the button while performing a task. Then, the designer is asked to consider sensory affordance in support of cognitive affordance in the button design, requiring an appropriate label font size and color contrast, for example, to help the user discern the label text to read it.

The designer is next led to consider how physical affordance is to be supported in the button design. For example, the designer should ensure that the button is large enough to click on it easily to accomplish a step in a task. Designers should try to locate the button near other artifacts used in the same and related tasks to minimize mouse movement between task actions. But also designers should locate each button far enough away from other, non-related, user interface objects to avoid clicking on them erroneously.

Finally, the designer is guided to consider sensory affordance in support of physical affordance in the button design by ensuring that the user notices the button so that it can be clicked. For example, the button must be a color, size, and shape that make it noticeable and must be located in the screen layout so that it is near enough to the user’s focus of attention. If the artifact is a feedback message, it also requires attention to sensory affordance (e.g., to notice the feedback), cognitive affordance (e.g., to understand what the message says about a system outcome), and physical affordance (e.g., to click on a button to dismiss the message box).

In sum, the concept of affordance does not offer a complete prescriptive approach to interaction design but does suggest the value of considering all four affordance roles together in the design of an interaction artifact by asking (not necessarily always in this order):

Considering one affordance role but ignoring another is likely to result in a flawed design. For example, if the wording for a feedback message is carefully crafted to be clear, complete, and helpful (good cognitive affordance), but users do not notice the message because it is displayed out of the users’ focus of attention (poor sensory affordance) or users cannot read it because the font is too small, the net design is ineffective. A powerful drag-and-drop mechanism may offer good physical and functional affordance for opening files, but lack of a sufficient cognitive affordance to show how it works could mean that most users will not use it.

Another example of a way that cognitive affordance and physical affordance work together in interaction design can also be seen in the context of designing constraints for error avoidance. “Graying out” menu items or button labels to show that inappropriate choices are unavailable at a given point within a task is a simple, but effective, error avoidance design technique.

This kind of cognitive affordance presents a logical constraint to the user, showing visually that this choice can be eliminated from possibilities being considered at this point. In that sense, the grayed-out label is a cognitive affordance on its own, quite different from the cognitive affordance offered by the label when it is not grayed out.

If cognitive and physical affordances are connected in the design, a grayed-out button or menu choice also indicates a physical constraint in that the physical and functional affordance usually offered by the menu item or button to access corresponding functionality is disabled so that a persistent user who clicks on the grayed-out choice anyway cannot cause harm. Because these two aspects of graying-out work together so well, many people think of them as a single concept, but the connection of these dual aspects is important.