Affordances Are Actions, Signifiers Are Clues
An affordance is what's possible (a door can be pushed), while a signifier is the clue telling you how (the flat plate). In UI, a button's styling is a signifier for its click affordance. The footgun is saying 'affordance' when you mean 'signifier'.
WHY IT EXISTS Designers need precise language to discuss how users discover functionality. The term 'affordance' was often misused as a catch-all for 'good UI,' creating confusion. The distinction between affordances and signifiers provides the clarity needed to build and critique intuitive interfaces.
THE MENTAL MODEL Think of a door. The fact that it can be opened is its affordance, a physical property. A flat plate on the door is a signifier that tells you to push. A handle is a signifier that tells you to pull. The affordance is the potential action; the signifier is the hint that makes that action discoverable.
HOW IT WORKS An affordance is a relationship between an agent and an object defining possible actions. A chair affords sitting for a human, but not an ant. It exists whether it's perceivable or not. A signifier is any perceivable cue that communicates an affordance. Signifiers can be deliberate, like a 'PUSH' label, or accidental, like footprints in snow showing a common path. Social signifiers are those derived from the behavior of others, like a crowded train platform signifying the train has not yet arrived.
WHEN TO USE IT Use 'affordance' to describe the fundamental actions an object or system makes possible (e.g., 'a button's primary affordance is to be clicked'). Use 'signifier' to describe the sensory cues that communicate those actions (e.g., 'the button's raised look and shadow are strong signifiers for its click affordance'). This precision helps teams pinpoint why a design might be confusing.
WHEN NOT TO USE IT Avoid saying an element 'has good affordance.' This is a category error. Instead, say it has 'strong signifiers' or is 'discoverable.' The affordance itself just is; the quality of the design lies in how well the signifiers communicate that affordance to the user.
ONE CANONICAL EXAMPLE A hyperlink on a webpage. The text's ability to be a navigation target is its affordance. The blue color and underline are the conventional signifiers that communicate this affordance, telling the user 'you can click me to go somewhere else.' Without these signifiers, the affordance is hidden and therefore useless.
Read the original → jnd.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.