What are Affordances?
Affordances are properties of objects which show users the actions they can take. Users should be able to perceive affordances without having to consider how to use the items. For instance, a button can be designed to look as if it needs to be turned or pushed.
“When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”
— Don Norman, Grand Old Man of User Experience
Affordances are Everywhere
Psychologist James Gibson coined “affordance” in 1977, referring to all action possibilities with an object based on users’ physical capabilities. For instance, a chair affords sitting on, standing on, throwing, etc. Human-computer interaction (HCI) expert Don Norman later (1988) defined affordances as perceivable action possibilities – i.e., only actions which users consider possible. So, designers must create objects’ affordances to conform to users’ needs based on these users’ physical capabilities, goals and past experiences. Clear affordances are vital to usability. Users will map the possibilities of what an object does according to their conceptual model of what that object should do (e.g., inserting fingers into scissor holes to cut things).
In 1991, Bill Gaver, another notable HCI contributor, defined three types of affordances:
- Perceptible – Perceptual characteristics of the object itself indicate what action possibilities are available and desired – e.g., a door handle. These obvious properties prompt users to use the affordance in an intended way.
- Hidden – In user interfaces without obvious affordances, users often must rely on experience and/or trial and error to determine possible actions – e.g., they hover/click on suspected drop-down menus.
- False – An object’s characteristics suggest users can do something they can’t – e.g., underlined text that isn’t a link.
In 2001, HCI expert Rex Hartson defined four additional types:
- Physical – The perceptual characteristics show users what to do – e.g., a large, highly visible “Add to cart” button. (Whenever text appears on affordances such as buttons, they’re called explicit affordances.)
- Cognitive – Design features that help users notice or know about things – e.g., clearly labelled text to announce what will happen if users press a certain key.
- Sensory – Design features that help users sense something – e.g., clear “pinging” feedback to indicate an available update.
- Functional – Design features that help users achieve goals – e.g., an item appears in a shopping cart after a user clicks “Add to cart”.
In user interface (UI) design, other main affordances include:
- Pattern – You follow conventions to prompt users to take actions – e.g., hamburger icons indicate menus.
- Negative – You block users from proceeding towards a goal when they must provide more data – e.g., a greyed-out “Create account” button remains until users complete the form.
The Interaction Design Foundation homepage is loaded with affordances – e.g., the shadows and the shape make the blue rectangles stand out as buttons.
How to Design the Best Affordances
You want to minimize or prevent user errors and cognitive friction. User errors occur when users fail to map between the actions they perceive they can take with an object and the actions it allows. Cognitive friction results from unexpected system actions after a user attempts a task. So, correct clues and immediate, effective feedback are essential. You should:
- Understand your users best through UX research – especially how they’ll anticipate affordances in the unique settings/context of encountering your design. Leverage these insights to provide the best clues to users, who will expect to find obvious cues to perform tasks.
- Use design principles to create logically arranged, clear affordances without clutter – so users can intuit what functions of your graphic user interface (GUI) each affordance controls.
- Use signifiers to direct users to affordances – Wherever you can’t make affordances obvious due to color constraints, etc., mark the affordance (e.g., highlight, shadow) or write text on or near it to guide users as to what they should do.
- Follow conventions so users recognize affordances – E.g., “Search” in search boxes.
- Apply Fitts’ Law to help guide users’ judgments and actions – Since this law establishes that users make more mistakes when moving quickly at smaller targets that are farther apart, help users by (e.g.) making large command buttons to show them priorities.
- Exploit Material Design – With Google’s Android-oriented design language, you can leverage cue-rich features and natural motions to support onscreen touch experiences. Customize icons to meet users’ expectations best as you present your brand.
If designing for augmented reality or virtual reality, you have the advantage of reflecting real-world behaviors and physics in your affordances. In any case, the fine details—including a thoughtful application of color theory—can help give users the conceptual model and hints they need. When users know what to do without having to explore your product, they’ll get tasks done faster and make far fewer mistakes.
Learn More about Affordances
Take our course exploring affordances: https://www.interaction-design.org/courses/affordances-designing-intuitive-user-interfaces
Here’s a piece featuring in-depth insights and examples of affordances: https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/
See additional considerations about affordances here: https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4
Literature on Affordances
Here’s the entire UX literature on Affordances by the Interaction Design Foundation, collated in one place:
Learn more about Affordances
Take a deep dive into Affordances with our course Affordances: Designing Intuitive User Interfaces .
Affordances are a key concept for designers. If you want to build products that are intuitive and easy to use, fully understanding the relationship between the human mind and technology is crucial. An “affordance” refers to the possibility of an action on an object; for instance, we say that an elevator button affords being pressed, and a chair affords being sat on. The concept was popularized by HCI (human-computer interaction) expert Don Norman in the late 1980s, and it has since played an essential role for user experience professionals and researchers. Understanding this term is essential for anyone who wants to get a deeper appreciation of what it means for a product to be “intuitive.”
Taking this course will teach you both the theory of affordances and also how to build instantly perceptible affordances into your own designs. Your users should be able to identify the actions afforded by a design with speed and accuracy. Thus, the better you can make your affordances, the more likely you will prevent the user from becoming frustrated (which can happen very quickly). In order to achieve this, you as a designer must appreciate how users perceive the world and how experience, context, culture, constraints and other factors affect our ability to detect the possibilities of actions on offer. This is at the heart of why those interested in a design career and established designers alike must gain a firm grounding in the meaning and potential application of affordances as a designer’s tool.
Throughout the course, we identify the major milestones in the evolution of the term “affordance” and outline how it applies to practical user experience (UX) design. Along the way, we look at the affordances of objects in the real world and screen-based interfaces so as to reinforce the concepts and principles covered in each lesson. You will soon realize how vital a solid grasp of affordances is—the name of the game is to make designs that users can take to naturally and without having to hesitate to ask themselves, “What happens if I do this?”.