In this interesting, enlightening, and sometimes entertaining close-up look at the concepts, the author carefully and clearly defines and explains affordances. Five different types of affordances are distinguished and the author shows how practitioners should use them together in UX design.The types of affordance and principles of their use are illustrated with engaging examples.
The course is entirely in the form of videos, as voice-over on PowerPoint slides. Lectures are interspersed with thought questions and exercises. The approximate running time of all the videos is about four hours, including the time to work out the questions and exercises.
Why take this course? Few topics in HCI or UX have been as misunderstood and misused as the notion of “affordance”. Yet few concepts are as central to effective UX design. The author of this course is a leading expert in the subject and this presentation is based on a seminal paper and a defining book chapter.
Specialized terminology, such as that surrounding the concepts of affordances, helps practitioners in any field communicate efficiently and effectively.
The concept of affordances outside HCI (Human-Computer interaction) and UX (User eXperience) was introduced in the late 1970s by J. J. Gibson. Don Norman introduced the notion into HCI and UX a decade later. Hartson later clarified the concepts and identified different types of affordances.
“To afford” means to offer, yield, provide, give, furnish, help, or aid. In HCI/UX, an affordance is a design feature that helps, aids, or makes it possible for a user to do something. Each of the five types of affordances we define are adaptations of this definition specialized for each kind of user goal or action: functional, emotional, cognitive, physical, or sensory.
Cognitive affordances, design features that help users know and understand what to do and how, are by far the most important kind of affordances for new and inexperienced users.Cognitive affordances account for the largest number of usability problems that occur.
Physical affordances, design features that help users make physical actions on objects, are the most important for experienced or power users.
Physical affordances are also about physical devices and how they are designed for users to operate them. Some physical affordances also offer cognitive affordance and emotional affordance.
Sensory affordances, design features that help users sense (see, hear, feel, etc.) other affordances, are essential to all users. Perception is a combination of sensing and cognition.
Here we offer a chart summarizing the basic characteristics of each of the five types of affordance, plus some exercises to test you knowledge of these introductory concepts.
Design issues relating to affordances are tied to common usability problems and to UX design guidelines. The UX design guidelines are universal and apply well beyond user-computer interfaces to everything we interact with in our lives.
Users can get some information they need from training and experience, but some of the most important user information comes from cognitive affordances created by UX designers. We show examples of how cognitive affordances help users to get started on tasks and to complete tasks successfully.
Communication from UX designers to users requires clarity, which means using precise words and symbols. Therefore, precise wording is one of the most important UX design guidelines. Care in getting wording just right has great potential payoff. Correctness in cognitive affordances implies saying exactly what you mean.
This lecture is about helping users by making choices distinguishable. An example of a tragic plane crash illustrates this principle.
Consistency seems like such a common concept, yet it is deceptively difficult to define. In UX design, part of what it means is to use the same term each time you refer to the same thing. And it means to use symmetric or structurally similar (linguistically) terms for similar or related things.
The principle of consistency in cognitive affordances also has a flip side: Make different things appear to be different. We illustrate this principle with an example software application for burning data disks.
To prevent confusion and to help users build confidence in navigating your Web pages or app, label arrival points (labels of places they go to) the same as the departure points (the menus or links they click to get there). This principle is illustrated with examples from a personal document system and a digital library application.
To control complexity of screen designs, use grouping in the screen layout to show how objects and design elements are associated with related tasks and functions. Emphasize by labeling the groups with the relationships. The flip side of this guideline is: Do not group together objects and design elements that are not associated with related tasks and functions.
Here we illustrate the guideline for layout and grouping of objects associated with related tasks and functions with examples from Microsoft Word and an airport departure announcement board.
We use a patient healthcare blood test chart to illustrate how data visualization helps users understand data quickly.
We use an example of passengers sitting by a train window to illustrate the guideline to display complex information in an overview first, then allow users to zoom and filter, giving details on demand.
Being usage-centered means using the language of users and the work context. Do your UX analysis and design thinking in the user’s domain of work or play. Keep your thinking away from the system or computer perspective. We illustrate this principle with a toaster we observed at a hotel brunch buffet.
Cognitive directness means not making the user perform mental transformations, such as how to use a lever moving left and right to control something moving up and down. This principle is illustrated with an example from Dreamweaver.
Making cognitive affordances complete means providing information for users to make good decisions. More precise and more complete wording can help users predict consequences of actions.
Try these exercises to test what you have learned about cognitive affordance design issues.
Physical affordances are central to issues such as user actions on objects and devices, physical disabilities in users, and awkwardness and fatigue in usage.
For some users, there is nothing like the feel of real physical actions with real, physical buttons, knobs, and levers. Grasping and manipulating real controls is often more direct and more satisfying than clicking on or touching "soft" controls like up and down arrows for a volume control.
Fitts' law is an empirically-derived mathematical formulation that predicts performance, in terms of time and errors, of user physical movement for object selection, moving, dragging and dropping. Simply put, small objects are harder to click on than large ones and longer distance movement takes longer time.
Physical action overshoot occurs when you move an object, a cursor, a slider, a lever, a switch—and you go too far, beyond the setting you wanted. You can design to avoid physical overshoot errors by constraining physical actions to stay within the bounds of valid movement.
Here are some exercises, involving practical everyday devices, to test your knowledge of physical affordances.
Within designs for sensory affordances, visual features are by far the most prevalent. And the most important UX design issue regarding visual features if, of course, visibility. It is simply about whether an interaction object of interest to the user can be seen by the user.
Beyond being visible, it is important for an interaction object of interest to the user to be noticeable by the user. Noticeability is especially important if the user doesn’t necessarily know the object to be seen exists and/or is not necessarily looking for it.
Discernability is about whether the user can make out objects, shapes, colors, etc. Text legibility and audio intelligibility are special cases of discernability. Discernability is only about sensing, not about understanding meaning.
The use of color in UX design is highly complex and often constrained by organizational standards and branding. Beyond these factors, there are some simple guidelines to help you with the use of color.
Distinguishability is another sensory affordance design issue, one that applies to all the senses. Keep similar but different objects recognizable as distinct.
Even if a cognitive affordance is otherwise well designed, if it doesn't appear at the time a users needs it, it will not be effective in helping the user. Some of the cleverest designs involve just-in-time appearance of the cognitive affordance.
Auditory and tactile sensory issues parallel those of visual sensory affordances. Volume and frequency, or pitch, are central to the design of auditory cues, as are audio quality and background noise.
In this lecture we sum up the sensory affordance design issues and offer some exercises to test your knowledge.
Conveying the meaning of cognitive affordances often depends on cultural conventions being shared between designer and user.
In this lecture we use the story line from a movie called The Gods Must Be Crazy to illustrate how cultural conventions can shape interpretations of affordances.
A major objective of this course is to get to this point, where we show you how all these affordances must be used together, as an alliance in design. To help you apply this in your work, we offer a checklist of affordance design considerations.
Here we start a running example to illustrate the use of the affordance design considerations checklist. We begin with functional and cognitive affordance considerations.
We continue the running example to illustrate the use of the affordance consideration checklist with the consideration of physical and sensory affordances.
We conclude the running example to illustrate the checklist of affordance design considerations, and we offer an exercise for you to try your hand at using this checklist.
False cognitive affordances are messages to the user containing incorrect information, inconsistencies, or tricky cognitive traps. False cognitive affordances can misinform and mislead users.
In this lecture we show some entertaining examples of false cognitive affordances taken from the real world of everyday design.
User-created affordances are "design modifications" that users add to existing designs to show designers and others how they would have like the design to be in the first place. These user-added features make good wake-up calls to designers.
Here we show some interesting examples of user-created physical and sensory affordances.
And here are some interesting real-world examples of user-created cognitive affordances.
Finally, we sum up user-created affordances, give you one more exercise to test your knowledge, and then we wrap up the whole course. We hope you enjoyed it and learned a lot!
Rex Hartson, Ph.D., is an internationally recognized consultant, author, teacher, and speaker on Human-Computer Interaction (HCI) and User eXperience (UX). Hartson is Professor Emeritus in the Department of Computer Science, Virginia Tech, Blacksburg, VA, where he was the founding faculty member in HCI in 1979. For 30 years, as a pioneer in HCI as a field and in usability engineering as a discipline and practice, he helped develop many of the techniques that are now considered an integral part of good practice.
Rex holds a B.S. and M.S. in Electrical Engineering from the University of Michigan and an M.S. and Ph.D. in Computer & Information Science from the Ohio State University. His research, writing, and teaching have always been grounded in extensive interaction with UX practitioners and practical experience in consulting and training for business, industry, and government.
Currently, Hartson is co-author of new book on interaction design to ensure a high quality user experience (Rex Hartson and Pardha Pyla, The UX Book: Ensuring a High Quality User Experience, Morgan Kaufmann, 2012), winner of the Text and Academic Authors Association 2013 Most Promising New Textbook Award.