interaction design
Signifier
What is a signifier in design?
A signifier is the visible cue that tells users what to do and where - such as an underline for a link, a shadow for a button, or a handle for dragging. While affordance indicates what an element can do, the signifier announces how to use it. A button that can be clicked is useless without a signifier to show it’s clickable.
Also known as: signifier, perceived affordance, signifiers
The demo
The same little panel, twice. One strips every cue in the name of "clean"; the other adds the signposts back. Flip between them and watch how much harder the flat one is to read.
What this demo shows (text version)
A small panel contains three interactive things: a text field, a link and a primary button. In the "clean" version they're rendered flat - the field has no border, the link no underline, the button no shadow or fill - so nothing signals that they can be used; you'd have to hover or tap to discover them. In the "signified" version the same three elements get a bordered field, an underlined link and a filled, shadowed button, so it's instantly obvious what's interactive and what each one does.
The affordances never changed - all three were always usable. What changed is the signifiers: the perceivable cues that advertise the affordance. The lesson is that stripping cues for the sake of minimalism doesn't simplify an interface, it hides it; make interactive things look interactive.
Affordance shows what’s possible; the signifier shows you how to act on it. People won’t interact with hidden options - they respond to what they can see. Flat interfaces that remove cues - like underlines or shadows - don’t simplify complexity; they erase the signposts. Add the signal back: make clickable things look clickable. You can try this concept in action on this page.
The "clean" version hid every cue, so you had to guess - or hover and hunt - to find what was actually a button. The signified version costs nothing but a border, a shadow, an underline, and suddenly there's no guessing: the interface tells you where to act. That's the whole job of a signifier - not decoration, but communication.
Norman introduced "signifier" precisely because "affordance" had been stretched to mean two different things. An affordance is a relationship - what an element makes possible (a door can be pushed). A signifier is the signal that communicates it (a flat plate says push, a handle says pull). Good design isn't about adding affordances; it's about making the right ones perceivable through signifiers.
Flat and minimal interfaces created a signifier crisis: when buttons lose their borders and shadows, and links lose their underlines, the affordance is still there but the signifier is gone, so people can no longer tell what's interactive without hovering, tapping, or guessing. The fix isn't more decoration - it's deliberate, consistent cues: things that act the same should look the same, and look different from things that don't.
Signifiers also tell people where and how, not just whether - a drag handle says "grab here", a pull-to-refresh arrow says "pull down", a disabled control's greyed state says "not now". The test is simple: can a first-time user tell what's interactive and what each control will do, before they touch anything? If they have to experiment to find out, the signifiers are missing.
Try the signifier demo here to see how visual signals direct interaction - no screenshots, just real-time feedback. Signifiers like underlines or shadows tell users what to do - without them, even clickable buttons become invisible.