← Go Back

Affordance

What is affordance?

Affordance is the quality of an object or element that suggests how it can be used. In UI, perceived affordance is what users infer from appearance: a button looks pressable, a link looks clickable, a field looks editable. Good affordances reduce guessing and support usability and interaction design.

Use it when: you’re designing controls, links, or inputs. If users can’t tell what’s interactive or how to use it, strengthen the affordance (shape, style, label, convention).

Copy/paste checklist

  • [ ] Buttons – Look like buttons (e.g. filled or outlined; hover/focus state). Not plain text unless it’s clearly a link or secondary action.
  • [ ] Links – Underline, colour, or both so they’re distinguishable from body text.
  • [ ] Inputs – Bordered or clearly delineated; look like something you can type in.
  • [ ] Clickable areas – Large enough (e.g. 44×44px touch target); cursor or hover change where applicable.
  • [ ] Disabled – Look disabled (e.g. greyed out, reduced contrast) so users don’t try to use them. See negative affordance.
  • [ ] No false affordances – Don’t make non-interactive elements look like buttons or links.

Why affordance matters

  • Users know what they can do without reading instructions.
  • Reduces errors and support requests (“I didn’t know I could click that”).
  • Supports accessibility when focus and semantics match the visual affordance (e.g. keyboard works where it looks interactive).
  • Aligns with interaction design and UI design best practice.

What good affordance includes

Checklist

  • [ ] Convention – Use familiar patterns (button shape, link style) so users don’t have to learn new ones.
  • [ ] Consistency – Same type of control looks the same across the product (e.g. all primary buttons share the same style).
  • [ ] Feedback – Hover, focus, and active states reinforce “this is interactive.” See interaction design.
  • [ ] No false affordances – Nothing looks clickable but isn’t (e.g. underlined non-links).
  • [ ] Accessible – Focusable and operable via keyboard where it looks interactive; ARIA for custom controls.
  • [ ] Clear purpose – Label or icon supports the affordance (“Save” on a button, not “Click here”).

Common formats

  • Visual: Shape, colour, border, shadow (e.g. raised = pressable). Use with design system components.
  • Convention: Buttons look like buttons; links look like links. Don’t break convention without a strong reason.
  • Signifiers: Text, icon, or label that clarifies the action (e.g. “Add to cart” on a button).

Examples

Example (the realistic one)

Problem: “Users don’t realise the card is clickable.” Current: Plain card with no hover or cursor change. Fix: Add hover state (e.g. subtle shadow or border), cursor: pointer, and ensure the whole card (or a clear “View” link/button) is focusable and clickable. Buttons: Primary actions use a filled button style from your design system; secondary use outline. Disabled: Greyed out and aria-disabled or disabled so they look and behave disabled. You test with usability testing to confirm users recognise what’s interactive.

Common pitfalls

  • False affordance: Underlined or blue text that isn’t a link. → Do this instead: Reserve link styling for real links; use plain text or a button for other actions.
  • No affordance: Important control looks like static text or decoration. → Do this instead: Use button or link style, or add an icon/label that suggests action.
  • Inconsistent: Same action looks different in different places. → Do this instead: Use design system components so affordances are consistent.
  • Looks interactive but isn’t: Div with click handler, not focusable. → Do this instead: Use <button> or <a>, or add tabindex="0" and keyboard support so accessibility matches the affordance.
  • Affordance vs signifier: A signifier is the cue (e.g. label, icon) that indicates use; affordance is the property that supports that use. In UI we often design perceived affordance via signifiers (e.g. “Save” on a button).
  • Affordance vs interaction design: Interaction design defines behaviour and feedback; affordance is the “this looks like it does X” that makes the interaction discoverable.
  • Affordance vs usability: Usability is the outcome; good affordances support usability by making actions obvious.

Next step

Audit one screen: list every interactive element and check that it looks interactive (button, link, or input style), has a clear label or icon, and is keyboard focusable. Fix any false or missing affordances. Use usability testing to confirm users recognise what they can do.

Related Terms