Usability heuristic

Affordance

An element's look should signal what you can do with it: buttons look pressable, carousels look swipeable, text looks like text.

Affordance The same onboarding screen twice. On the left Continue is plain text and is easy to miss. On the right Continue is a filled button. Below, a bar chart: pages with weak clickability cues took about 22% longer to use. The next step looks like text Connect your data Add a source to see your first chart. Continue Skip The next step looks like a button Connect your data Add a source to see your first chart. Continue Skip Time to use the page Looks like text Looks like a button ~22% longer ~25% more eye fixations Looks clickable, gets used faster NN/g, 2017, 71 users
NN/g eyetracking (Moran, 2017, 71 users): when the next step looks like plain text, pages took about 22% longer to use than with a clear button.

In design use, affordance means the visible cue that tells people an action is possible. On this site good examples include a carousel whose cards are cut off at the edges so you know to swipe, and buttons whose labels ("Join now" vs "Request") show the rule behind them. The failures are actions styled as plain text, such as a "Continue" link with no button styling, or an integration that reads as a tip rather than something you can click.

The psychologist James Gibson (1979) coined "affordance" for what an environment offers an animal. Don Norman brought it into design in The Design of Everyday Things and later clarified that designers care about perceived affordances and signifiers: the cues users can actually see. NN/g's Kate Moran tested this in an eyetracking study (2017) with 71 users: pages where clickable elements had weak cues (flat ghost buttons, links styled like text) took about 22% longer to use and drew about 25% more fixations than versions with strong cues.

Onboarding often has a single path forward. If that path doesn't look clickable, users stall or take the more obvious wrong option, such as skip.

How to use it

  • Style the primary forward action as a real button with fill or border, and keep that style for actions only.
  • Let partial content peek at the edge of carousels and scrollable rows so users know there is more.
  • Turn suggestions that are really actions ("Integrate GitHub") into buttons or links with a clear verb.

Watch out

  • Making decoration look clickable (cards, badges, icons with no action) sends users into dead ends.
  • Disguising ads or upsells as content or system controls uses affordance to deceive.

Related

ClarityClear call to actionConsistency and standards

Affordance in real products 2 working · 2 not

Photo editor app: Peeking carousel Photo editor app (working) Peeking carousel Cut-off cards at both edges hint that you can swipe for more features. Retool: Join vs Request Retool (working) Join vs Request Open orgs say "Join now", locked ones say "Request", so the access rule is visible. Linear: Continue looks like text Linear (not working) Continue looks like text The only way forward has no button styling, so it is easy to miss. Linear: Integration as a tip Linear (not working) Integration as a tip "Integrate GitHub & Slack" has no button, so it reads as advice rather than an action.