In interaction design, what is the difference between an affordance and a signifier, and why do flat interfaces need signifiers?
answer
- what the element allows
- what tells you it is possible
- perceived rather than physical
- flat styling stripped the cues
- false cues are worse than none
basics
~20 sAn affordance is what an element lets a person do, such as being tappable; a signifier is the perceivable cue that shows the action exists and where. Flat styling strips cues like underlines, borders and depth, so actions become invisible.
solid answer
~50 sAn **affordance** is a relationship between an object and a person: a control affords pressing if that person can press it. On a screen almost anything can be tapped or clicked, so what matters is what people **perceive** they can do. A **signifier** is the cue that communicates it: an underline on a link, a filled or outlined shape on a button, a chevron on a row that opens details, a bordered drop area with a 'Choose files' action. Flat visual styles removed many of these cues, so in a benefits application an 'Upload proof of income' area styled as grey text, or a card that starts an application but looks like a static panel, affords the action and signals nothing. The opposite failure is a **false signifier**, such as an underlined heading that is not a link. The fix is consistent cues across the product.
go deeper
Recall the split: an affordance is what an element lets you do, a signifier is the cue that tells you so. Be ready with a missing-cue and a false-cue example.
Explain why screens make perceived affordance the real question, how flat styling removed signifiers, and how mapping and constraints complete the picture.
Show how you would find missing and false signifiers from behaviour, fix them without cluttering the screen, and keep web and native mobile cues consistent.
Treat signifiers as product-wide grammar: decide once how actions, links and interactive surfaces look, and weigh visual minimalism against discoverability for the whole audience.
## Affordances: what an element allows An **affordance** is a relationship between the properties of an object and the abilities of the person using it. A door handle affords pulling for someone who can grip it; a flat plate affords pushing. The idea came from perception psychology and was brought into design by Don Norman, who later stressed that what matters in design is the **perceived** affordance: what people believe they can do. On a screen the physical affordances are almost uniform. A touchscreen lets you tap anywhere; a pointer can click anywhere. Whether a region actually does something is decided by software, invisibly. So on screens the question is rarely 'can this be acted on?' and almost always 'can people tell that it can?'. ## Signifiers: how people find out A **signifier** is any perceivable cue that communicates where an action is possible and how to perform it. Norman introduced the term because designers were using 'affordance' to mean 'visual cue'. - An underline or distinct colour on inline text signals a link. - A filled or outlined shape with a label signals a button. - A chevron at the end of a row signals that it opens more detail. - A bordered area with 'Drag files here or choose files' signals a drop zone and its alternative. - A visible field boundary and a text cursor signal that you can type. Signifiers can also be **learned from context**: if every list in the product makes its rows tappable, people come to expect it. That consistency is itself a signifier. ## Why flat interfaces lose them Early graphical interfaces imitated physical objects, with bevels, shadows and gradients that said 'press me'. Flat visual styles stripped much of that away. The result was cleaner screens and fewer cues: | Cue removed or weakened | What it used to signal | Typical failure | |---|---|---| | Underlines on links | Inline text is navigable | Links read as ordinary text and are skipped | | Button borders or fills | This label performs an action | Text-only actions look like headings or captions | | Depth or shadow on cards | The whole card is a target | Clickable cards look like static panels | | Visible field outlines | You can type here | Inputs look like plain labels | Native mobile platforms face the same trade-off: a borderless text action in a toolbar and a list row without a disclosure indicator are as ambiguous as their web equivalents. Hidden gestures, such as swiping a row or long-pressing an item, are the extreme case: the affordance exists and nothing signals it at all. ## Missing and false signifiers in a benefits application Consider a government benefits application. 1. **Missing signifier.** The 'Upload proof of income' area is a pale box with small grey text. It accepts files, but applicants read it as a note and look elsewhere for an upload control. Fix: a bordered, labelled drop area with a visible 'Choose files' action. 2. **Missing signifier.** Each benefit the applicant may qualify for appears as a card, and the whole card starts that application, but nothing distinguishes these cards from explanatory panels on the same page. Fix: a visible action inside each card, or a card style reserved for actionable cards. 3. **False signifier.** Section headings are underlined for emphasis. Applicants click them expecting more information. Fix: never lend a link's cue to anything that is not a link. False signifiers are the more corrosive failure. Each one teaches people that the cue cannot be trusted, which weakens every genuine link in the product. ## Related principles: mapping and constraints Affordances and signifiers sit beside two neighbouring ideas: - **Mapping**: the relationship between controls and their effects. A step indicator whose order matches the order of the pages, or increase and decrease controls placed beside the number they change, map naturally; controls placed far from what they affect do not. - **Constraints**: limits that make wrong actions impossible or unlikely, such as offering only the valid answers to a question. Together they answer the questions people bring to any interface: what can I do, where, how, and what will happen. ## Making signifiers systematic Signifiers work because people learn them once and reuse them everywhere. That argues for decisions made at the product level, not per screen: links always look one way, actions another, interactive cards are visually distinct from static ones, and no decorative style borrows an interactive cue. A quick test: cover the labels on a screen and ask someone to point at everything they could act on. Every miss is a missing signifier, and every wrong guess is a false one.
- In interaction design, are hidden gestures such as swiping a row to reveal actions a signifier problem?Yes. The swipe affords the action but nothing signals it, so only people who already know the convention find it. Hidden gestures are fine as shortcuts for experienced users, but the same action needs a visible path too, such as a labelled action or a menu on the row, so nobody depends on discovering the gesture.
- How do you find missing or false signifiers in an existing interface?Watch where people hesitate, tap elements that do nothing, or never touch elements that do something. Taps on static text reveal false signifiers; ignored controls reveal missing ones. Analytics on repeated taps or clicks on non-interactive elements can point to candidates, which you then confirm by observing people.
- Why does consistency matter more than any single signifier?People learn a product's visual grammar quickly: if links always look one way and actions another, one lesson covers every screen. Mixing styles, some links underlined and others plain coloured text, forces people to test each element, and every exception becomes either a missed cue or a false one.
A glass door with identical bar handles on both sides affords pushing one way and pulling the other, but both handles say 'pull', so half the people who use it get it wrong: the affordance is fine and the signifier lies.
saying these in an interview costs you the question
- Affordance and signifier are two words for the same thing.
- If an element is clickable, people will find it by exploring.
- Flat design is fine because users assume anything on screen might be tappable.
- Underlining a heading just for emphasis does no harm.
- Hidden swipe gestures are discoverable enough without any visible alternative.