Affordances and Signifiers: Making UI Self-Explanatory
An affordance is what an object actually invites you to do; a signifier communicates that affordance to the user.
What are Affordances and Signifiers?
Picture a door with a handle sticking out versus a flat metal plate. The handle affords pushing or pulling in specific ways—your hand and fingers have a natural interaction pattern. The flat plate affords pushing only. The affordance is the actual possibility; what the object physically invites. Now imagine those same doors without any visual distinction. You might miss the handle entirely or push when you should pull. That’s where signifiers come in—they’re the visual signals that tell users what affordances exist. Buttons in digital design have no physical affordance, so we use color, borders, and depth to signal “this is clickable.” Affordances are about possibility; signifiers are about communication.
Why is it important?
Reduces user errors: When users clearly see what actions are possible, they attempt correct interactions and succeed faster. Unclear signifiers lead to trial-and-error, frustration, and missed functionality that was actually available.
Prevents feature invisibility: Powerful features hidden without signifiers are effectively nonexistent. Users can’t use what they don’t perceive. Good signifiers reveal your product’s actual capabilities without requiring instruction.
Builds trust through clarity: When interfaces signal their affordances clearly and accurately, users feel in control. They know what will happen before clicking, and that prediction proves correct. This builds confidence and deeper engagement.
Supports accessibility: Signifiers that work for sighted users like button shape or color don’t help screen reader users. Proper semantic HTML and ARIA labels communicate affordances to assistive technology, ensuring all users discover possible actions.
How to Apply Affordances and Signifiers
Identify real affordances first — Determine what users can actually do in your interface. List every action available: clicking, dragging, scrolling, hovering, voice commands. These are your affordances.
Create appropriate signifiers — Each affordance needs a visual or semantic signal. Clickable items need button styling, draggable elements need appropriate cursors, voice commands need microphone icons. Match the signifier to the affordance’s importance.
Test signifier strength — Show your interface to users without explanation. Which elements do they attempt to interact with? Where do they miss interactions? If fewer than 80% discover an affordance naturally, your signifier needs strengthening.
Avoid false affordances — Don’t make non-clickable text look like links, or non-draggable items look draggable. False signifiers create frustration and erode trust faster than hidden features do.
Scale signifiers to importance — Critical actions warrant stronger signifiers (higher contrast, larger size, more obvious styling). Less important actions can use subtler signals that experienced users will discover but won’t distract novices.
Mentor Tips
Color alone isn’t a signifier: Colorblind users won’t see color-only cues. Combine color with shape, text, icons, or position. If removing color breaks the affordance signal, your signifier isn’t accessible.
Conventions are powerful signifiers: A blue underlined word screams “link” because users have seen thousands of links styled this way. Deviation requires strong reason—blue text without underline will confuse users expecting a link.
Hover states aren’t enough on mobile: Desktop users see button hover states that signal interactivity. Mobile users have no hover, so your static state must signal affordance clearly. Never rely solely on interactive states to communicate possibilities.
Context changes affordances: A trash icon signals delete in a file list, but as a decorative element it’s confusing. The same icon has different affordance depending on context, so test what users actually attempt to do.
Resources and Tools
Books & Framework
- The Design of Everyday Things by Don Norman — The definitive text on affordances and signifiers with real-world examples of good and bad design
Research/Application Tools
- Usability Testing — Have users narrate what they expect before interacting, revealing what signifiers they perceived
- Accessibility — Semantic HTML and ARIA labels ensure assistive technology users discover affordances too