Affordances and Their Importance to UX Practitioners
3.3 (26 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
528 students enrolled

Affordances and Their Importance to UX Practitioners

Use the power of affordances in UX design to meet users' cognitive, physical, sensory, emotional, and functional needs.
3.3 (26 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
528 students enrolled
Created by Rex Hartson
Last updated 11/2013
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • By the end of this course, you will be able to:
  • Know and apply the differences between the types of affordances in the context of UX design
  • Understand and apply the UX design issues for each type of affordance
  • Use the different kinds of affordances together as an alliance in UX design
  • Identify false affordances and know how to avoid them in UX design
  • Recognize user-created affordances occurring “in the wild” and interpret them as inputs to design
  • This course is completely self-contained and no additional materials, software, applications, or equipment are needed.

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.

Who this course is for:
  • This course is directed toward anyone currently engaged, or planning to be engaged, in interaction design for a high quality user experience. It will also be of value to anyone with an academic or practical interest in UX design. This includes students, graduate students, practitioners, project managers, and people who work with UX practitioners on design and development teams.
  • Recognize user-created affordances occurring “in the wild” and interpret them as inputs to design
Course content
Expand all 49 lectures 02:54:15
+ Preface
1 lecture 03:01

Download your copy of the course slides and see a preview of the course content.

Preview 03:01
+ Introduction and brief history
2 lectures 10:09

Specialized terminology, such as that surrounding the concepts of affordances, helps practitioners in any field communicate efficiently and effectively.

Preview 04:35

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.

Preview 05:34
+ Types of affordances
6 lectures 22:44

“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.

Definitions of different types of affordances

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.

Cognitive affordances

Physical affordances, design features that help users make physical actions on objects, are the most important for experienced or power users.

Physical affordances, actions on objects

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.

Physical affordances, physical devices

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.

Sensory affordances

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.

Summary of affordance types, exercises
+ Cognitive affordance design issues
15 lectures 58:47

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.

Importance of design issues

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.

Cognitive affordances to help users get started

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.

Clarity and correctness in cognitive affordances

This lecture is about helping users by making choices distinguishable. An example of a tragic plane crash illustrates this principle.

Distinguishability in cognitive affordances

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.

Consistency in cognitive affordances

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.

Consistency, the flip side

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.

Consistency of departure and arrival labeling

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.

Layout and grouping of cognitive affordances

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.

Layout and grouping examples

We use a patient healthcare blood test chart to illustrate how data visualization helps users understand data quickly.

Helping users understand information displays

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.

Information displays: a train example

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.

Usage centeredness in cognitive affordances

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.

Cognitive directness in cognitive affordances

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.

Complete information in cognitive affordances

Try these exercises to test what you have learned about cognitive affordance design issues.

Exercises about cognitive affordances
+ Physical affordance design issues
5 lectures 18:40

Physical affordances are central to issues such as user actions on objects and devices, physical disabilities in users, and awkwardness and fatigue in usage.

Physical actions, disabilities, and awkwardness

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.

Fitts' law

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.

Physical overshoot

Here are some exercises, involving practical everyday devices, to test your knowledge of physical affordances.

Exercises about physical affordances
+ Sensory affordance design issues
8 lectures 26:02

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.

Discernability and legibility

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.

Distinguishability of sensory affordances

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.

Presentation timing of sensory affordances

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.

Auditory and tactile sensory issues

In this lecture we sum up the sensory affordance design issues and offer some exercises to test your knowledge.

Summary and exercises about sensory affordances
+ Shared cultural conventions
2 lectures 07:58

Conveying the meaning of cognitive affordances often depends on cultural conventions being shared between designer and user.

Meaning can depend on shared convention

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.

Example: The Gods Must be Crazy
+ Using affordances together in design
4 lectures 12:20

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.

Affordances as an alliance in design

Here we start a running example to illustrate the use of the affordance design considerations checklist. We begin with functional and cognitive affordance considerations.

Example: Functional affordances and cognitive affordances

We continue the running example to illustrate the use of the affordance consideration checklist with the consideration of physical and sensory affordances.

Example: Physical affordances 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.

Example: Emotional affordances and exercises
+ False cognitive affordances
2 lectures 05:19

False cognitive affordances are messages to the user containing incorrect information, inconsistencies, or tricky cognitive traps. False cognitive affordances can misinform and mislead users.

Examples of false cognitive affordances

In this lecture we show some entertaining examples of false cognitive affordances taken from the real world of everyday design.

More examples of false cognitive affordances
+ User-created affordances
4 lectures 09:15

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.

Wake-up calls to designers

Here we show some interesting examples of user-created physical and sensory affordances.

User-created physical and sensory affordances

And here are some interesting real-world examples of user-created cognitive affordances.

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!

Wrap-up and exercises