Affordance

What is an affordance?

An affordance describes the action an object offers. A door handle invites you to pull, a flat plate invites you to push. The term was coined by perceptual psychologist James J. Gibson. Donald Norman brought it into product and interface design with his book "The Design of Everyday Things".

In digital design, what matters most are perceived affordances: Can someone tell at a glance that they can click, tap, swipe or drag here? Norman later distinguished between the affordance itself and the signifier, the visible cue that points to it, such as shadows, underlines or icons.

Why affordances matter

When elements don't reveal what they do, users guess. They miss features or click on things that do nothing. Both cost time and trust. Clear affordances reduce mental effort because people can apply what they've learned from other products. In an online store that means fewer drop-offs. In a SaaS tool it means more features get used without a tutorial video.

How to use affordances in practice

• Make interactive elements distinct: Buttons should look like buttons, links should stand out from body text.
• Rely on familiar patterns instead of inventing your own, like checkmarks for checkboxes or chevrons for expandable sections.
• Give feedback on interaction: Hover, focus and active states confirm that an element responds.
• Avoid false signals: If something looks clickable, it has to be clickable. Decorative elements shouldn't resemble controls.
• Check it in testing: Ask users to describe out loud what they would click on a screen.

Example

A SaaS dashboard lets users edit table cells inline. Visually, though, the cells look like plain text. In user testing, participants export the data to Excel just to change values. A subtle border on hover and a pencil icon make the feature visible.