Affordance
Definition
Affordance is the quality of an object that suggests how it should be used. It's what makes a button look clickable, a handle look grippable, or a door look pushable. Good affordances help users understand what they can do without having to think about it.
Consider a door handle: when you see a handle that sticks out, you naturally know you should pull it. When you see a flat plate, you know you should push it. The design itself tells you how to interact with it.
In digital design, affordances work the same way. They're the visual cues that help users understand what they can click, tap, swipe, or otherwise interact with in your interface.
How Affordances Work
Affordances work by tapping into our natural understanding of how the physical world works. We've learned through experience that certain shapes, colors, and textures suggest certain actions.
Raised elements look like they can be pressed, just like physical buttons. Underlined text suggests it's a link, because that's how links have traditionally been displayed. Handles and grips suggest you can pull or drag something. Arrows suggest direction or movement. Shadows and depth make elements look like they're floating above the surface, suggesting they can be interacted with.
Types of Affordances
There are several different types of affordances you'll encounter:
Physical affordances are the actual properties that enable interaction. A button that's actually clickable has a physical affordance for clicking.
Perceived affordances are the visual cues that suggest how something might be used. A button that looks clickable has a perceived affordance for clicking.
False affordances are elements that look interactive but aren't. This is a common problem in digital design, like an image that looks like a button but doesn't actually do anything when clicked.
Hidden affordances are features that exist but aren't obvious to users. These can be frustrating because users don't know the functionality exists.
Negative affordances are design elements that indicate what cannot be done, like a disabled button that's grayed out.
Affordances in Digital Interfaces
In digital products, affordances help users understand what they can interact with:
Buttons use visual cues like shadows, borders, or color changes to look clickable.
Links are typically underlined or colored differently to suggest they can be clicked.
Scrollbars indicate that there's more content to see.
Hover states show users what will happen when they interact with an element.
Cursor changes signal when users are over an interactive element.
Touch targets on mobile devices need to be large enough to suggest they can be tapped.
The Difference Between Affordances and Signifiers
This is an important distinction that Don Norman clarified:
Affordances are the actual possibilities for action. A button that can be clicked has an affordance for clicking.
Signifiers are the visual cues that communicate those affordances. The button's appearance (its color, shadow, text) are signifiers that tell users it can be clicked.
In digital design, we often need to create signifiers because the affordances aren't obvious. A piece of text doesn't naturally look clickable, so we add underlines or color changes to signify that it is.
Why Affordances Matter
Good affordances make interfaces more intuitive and easier to use. Users understand what to do without needing instructions or tutorials, and cognitive load is reduced because users don't have to think about how to interact with elements.
Efficiency increases as users can quickly identify what they can interact with, accessibility improves because clear affordances help users with different abilities understand the interface, and errors decrease when users can clearly see what actions are possible.
Common Affordance Patterns
Certain design patterns have become conventions that users expect:
Raised buttons suggest they can be pressed.
Flat buttons with borders or color changes also suggest they can be pressed.
Handles suggest pulling or dragging.
Slots or input fields suggest that text can be entered.
Toggle switches suggest on/off states.
Arrows suggest direction or that more content is available.
Examples of Poor Affordances
The classic example is the "Norman Door," named after Don Norman, who popularized the concept. These are doors that don't clearly indicate whether to push or pull, often because the handle suggests one action but the door actually requires the other.
In digital interfaces, poor affordances include:
Buttons that don't look clickable because they lack visual cues like shadows or borders.
Non-interactive elements that look interactive, like images that look like buttons but don't do anything.
Links that look like regular text without underlines or color changes.
Scrollable areas without scroll indicators that don't show users there's more content.
Touch targets that are too small to clearly suggest they can be tapped.
How Affordances Have Evolved
As technology and design trends change, so do affordances:
Skeuomorphic design used familiar physical affordances in digital interfaces, like making buttons look like real buttons.
Flat design reduced visual affordances, sometimes making interfaces harder to use because elements didn't clearly suggest how they could be interacted with.
Material design reintroduced some affordances through subtle depth cues and shadows.
Touch interfaces introduced new affordances for gestures like swiping and pinching.
Voice interfaces are creating entirely new affordances based on audio cues and conversation patterns.
Creating Better Affordances
To improve the affordances in your design:
Use familiar patterns that users already understand from other interfaces.
Be consistent with your affordances throughout your product so users don't have to relearn how things work.
Test with real users to see if your affordances are clear and intuitive.
Consider different contexts like mobile vs. desktop, where affordances might need to be different.
Provide feedback when users interact with elements so they know their action was recognized.
Remember, the goal is to make your interface so intuitive that users can figure out how to use it without thinking about it. Good affordances are invisible because they work so well.