Affordances (Interaction)

Affordances are perceived and actual properties of an object that determine how it could be used. In UI, they signal what actions are possible.

stellae.design

Design Principles

Defined by James Gibson, adapted by Don Norman, affordances are actionable properties between an object and user. In digital interfaces, a raised button affords pressing, a handle affords dragging, underlined text affords clicking. Good affordances reduce the need for instructions by making interactions self-evident.

Why It Matters

Affordances in interaction design are the perceivable properties of an interface element that communicate how it can be used — a raised button affords pressing, a handle affords pulling, a slider affords dragging, and a text field with a blinking cursor affords typing. The concept, adapted from ecological psychology by Don Norman for design, is foundational to usability because well-designed affordances eliminate the need for instructions: users understand what to do simply by perceiving the interface, without reading labels, consulting help documentation, or relying on trial and error. When affordances are absent, ambiguous, or misleading, users become confused, hesitant, and error-prone — they click on decorative elements that are not interactive, miss buttons that do not look clickable, and struggle with controls that behave differently from what their visual appearance suggests.

Real-World Examples

Material Design's elevation system for interactive affordances

Google's Material Design uses elevation (shadow depth) as a systematic affordance cue: interactive elements like buttons and cards sit at higher elevation with visible shadows, while static content sits flat against the surface, creating an immediate visual distinction between what can be interacted with and what is purely informational. Hover and press states change the elevation dynamically, providing real-time feedback that confirms the element responds to user input. The system works because it maps a familiar physical metaphor — raised objects can be pressed — to digital interface behavior.

iOS toggle switch with physical motion metaphor

The iOS toggle switch uses a circular knob on a track that visually affords sliding, complete with a physical motion animation and color transition that confirms the state change as the user drags. The design communicates its interaction model entirely through visual affordance: even a user who has never seen a digital toggle understands the sliding motion from experience with physical light switches and dimmer controls. The size and shape of the touch target reinforce the affordance by providing a visually prominent element that clearly invites finger interaction.

Counter-example

Flat design text that is actually a button

A minimalist web application styles its primary action buttons as plain text with no background, no border, no shadow, and no color differentiation from surrounding body text — the only visual difference is that the text is slightly bolder, a distinction too subtle for most users to interpret as an affordance cue. Users repeatedly scroll past the primary call-to-action because nothing about its appearance suggests interactivity, and analytics show that fewer than 15% of users discover the button without external guidance. Adding a visible boundary, background color, and hover state increases click-through rates by over 300% because the affordance finally communicates what the element does.

Role-Specific Guidance

Common Mistakes

• The most widespread affordance mistake in modern interface design is the 'flat design gone too far' problem — removing all visual depth, boundaries, and differentiation cues from interactive elements in pursuit of minimalist aesthetics, leaving users unable to distinguish clickable elements from decorative text and static content. Another common error is creating inconsistent affordances where similar-looking elements have different behaviors: if some cards are clickable and others are not, but they share identical visual styling, users cannot predict behavior from appearance and must resort to clicking everything to discover what works. Teams also frequently forget that affordances must work across all interaction modalities — a hover-revealed affordance is invisible on touch devices, a visual affordance is inaccessible to screen reader users, and a touch-sized affordance may be too small for users with motor impairments.