Affordance refers to the qualities or properties of an object that show users how it can be used. Good affordances make interaction intuitive – you know what to do just by looking at it.
What are Affordances?
Imagine a door handle that’s clearly meant to be pushed, pulled, or slid. That’s an affordance in action! In digital interfaces, affordances are visual cues that help users understand what they can do with an element without needing instructions.
Why Affordances Matter
When designing interfaces, strong affordances reduce cognitive load. Users shouldn’t have to think about how to interact with your interface – it should feel natural. Poor affordances lead to confusion and frustration (like those doors where you can’t tell if you should push or pull).
Types of Affordances in Digital Interfaces
- Explicit affordances: Direct indicators like buttons that appear raised to suggest “click me”
- Pattern affordances: Familiar conventions like underlined text indicating a link
- Metaphorical affordances: Elements that mimic real-world objects (trash can icon for delete)
- False affordances: Elements that look interactive but aren’t (the classic “looks clickable but isn’t” mistake)
Real-World Example
Take Instagram’s camera button – its circular shape and prominent position suggest it can be tapped. This affordance is strengthened by its resemblance to a physical camera shutter button, making the interaction feel natural even to new users.
In VR/AR Contexts
In immersive environments, affordances become even more crucial. Users need clear visual (and sometimes audio) cues about how to interact with virtual objects. Good haptic feedback can create stronger affordances in these spaces.
Today’s Design Tip
Review your current project with fresh eyes. Are there elements users might struggle to understand how to use? Could you strengthen your affordances through shape, color, animation, or positioning?
What UI/UX terms would you like to learn about next? Drop a comment below!