Affordance
Also known as: perceived affordance, interaction cue
What Is an Affordance?
An affordance is a quality of an interface component that signals how it can be used. A button that looks raised suggests it can be pressed. An underlined word suggests it leads somewhere. A drag handle communicates that something can be repositioned.
The concept originates from psychology and was brought into design by Donald Norman. In UX, it refers specifically to the perceived action possibilities a design communicates — what users believe they can do with a component before they try to interact with it.
What's the Difference Between Real and Perceived Affordances?
A real affordance is the interaction that's actually possible. A perceived affordance is what the design leads users to believe is possible.
The distinction that important in digital interfaces. A button can technically be clicked regardless of how it looks, but if it looks like plain text, users won't try. The visual treatment: shadow, border, color, shape, is what turns a real affordance into a perceived one.
How Are Affordances Communicated?
Affordances are expressed through signifiers. Visual and behavioral cues that indicate what an interface invites users to do.
Visual weight — buttons are styled to look distinct from static content, using contrast, border, or shadow to signal interactivity.
Cursor behavior — the pointer changes to a hand when hovering over a clickable area, providing a real-time signal that something can be acted on.
Shape conventions — sliders have handles, checkboxes have boxes, radio buttons are round. Each shape carries a learned interaction expectation that users recognize across products.
Feedback — hover states, press animations, and active states confirm that the affordance was read correctly and the action registered.
What Are the Benefits?
Intuitive interaction — strong affordances mean users know what to do without instructions. Actions feel obvious rather than discovered.
Reduced errors — when interactive and static components look clearly different, accidental clicks and missed actions become less common.
Faster onboarding — users navigate a new product confidently when affordances follow conventions they already recognize.
What Are the Challenges?
False affordances — components that look interactive but aren't create confusion and erode trust. Styled text that isn't a link, or a visual that resembles a button but does nothing, breaks user expectations.
Flat design trade-offs — minimal visual styles can weaken affordance signals. Removing shadows and borders for aesthetic reasons can make it unclear what users can interact with.
Cross-platform inconsistency — affordance conventions differ across platforms. A gesture that's standard on iOS may be unfamiliar on Android, and vice versa.
Which Interfaces Demand the Strongest Affordances?
Affordance design is most visible in interactive components (buttons, inputs, navigation, drag-and-drop interfaces) where the invitation to interact needs to be immediately clear. The principles behind these signals are explored at the component level in UI elements, from visual weight and feedback to the interaction conventions that make components readable at a glance.