UX Word of the Day: Affordance

You probably don’t remember the first time you encountered a patio or sliding glass door. There was no knob to turn. No lever to push on. So how did you first learn to open this type of door?

You looked for clues.

You saw the roller track, vertical latch thing-a-bob, or both, and then put it together in your head.

Adjusting mini blinds to block the morning sun. Inserting a debit card into an ATM. There are hundreds of things we’ve learned in life without reading a word of instruction.

But you were taught.

The designer showed you.

Affordance

Affordance is a visual cue that makes it clear what to do or how to use something.

Affordance keeps people from exclaiming, “Well, how was I supposed to know it would do that?!” and then angrily stomping away.

Common Examples of Affordance

Buttons

Buttons look like buttons generally because of 2 visuals cues: their rectangle shape and their drop shadow (or gradient). Affordance is why you rarely see web buttons in the shape of triangles, stars, or turtles.

Links

How do you know something is a link? Designers keep inventing new ways to signal that something is clickable, but which visual cues do your users recognize?

  • Make it a different color (usually blue)
  • Underline it
  • Make it a different color upon hover
  • Animate it
  • Replace it with something else
  • Nothing / make users read your mind

Links and buttons are pretty forgiving, but what about less common interactive elements, such as sliders, drag and drop objects, touch gestures, toggles, and scrollbars? How will you let users know they can swipe, pull down to refresh, or fling?

The Affordance Litmus Test

To check for affordance in your design, ask:

Can the user determine what will happen just by looking at it?

Related Articles

UX Word of the Day: User Goal
UX Word of the Day [Index]
How to Create More Engaging Forms

Author: Kristine Remer

Kristine Remer is an independent UX researcher & strategist in Minneapolis. Connect @ https://twitter.com/kristineremer