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 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 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.
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?