Definition
Affordances are visual or physical cues that suggest how something can be used. A button looks “clickable.” A slider looks “draggable.” Good design makes functionality obvious at first glance.
Why It Matters
If users have to guess how to interact with something, they’ll hesitate, make mistakes, or abandon the task. Clear affordances reduce learning time, minimize errors, and create trust in the interface.
Example – Good vs. Bad
- Good: A 3D-styled button with clear contrast, shading, and a label like “Submit.” Users know instantly it can be pressed.
- Bad: A flat rectangle of text styled to look like a heading. If it’s actually a link, users won’t realize it’s clickable.
Do’s
- Use visual cues (shadows, borders, icons) to signal interactivity.
- Apply conventions users already know (blue underlined text = link).
- Label controls clearly with action-oriented text (“Save,” “Delete,” “Upload”).
- Test with real users to see if they know what to do without instructions.
Don’ts
- Don’t hide actions behind ambiguous icons without labels.
- Don’t rely solely on color for affordance (e.g., “red text means clickable”).
- Don’t make clickable areas too small to hit comfortably.
Key Takeaway
Users should never need to ask, “Is this clickable?” or “How do I use this?” The best interfaces speak for themselves through clear affordances.
