Affordance × Signifier: 'Can Be Operated' and 'Looks Operable' Are Two Different Things
Norman borrowed the concept of affordance from psychologist J.J. Gibson: an affordance is the relationship of 'possible actions by a particular agent in a particular environment' — a chair 'affords' sitting, a button 'affords' pressing.
Two points are most often missed:
1. It is a relationship, not an intrinsic property of the object;
2. It is not necessarily visible — an affordance can objectively exist while users cannot see it.
That is why Norman stresses that what design really needs to care about is the 'perceived affordance': what users notice they can do matters more than what they objectively can do. An invisible affordance is as good as nonexistent.
So what lets users 'see it'? Norman introduced the signifier to make up for what affordances lack: a signifier is 'an indicator or signal in the physical or social world that can be meaningfully interpreted' — a perceivable cue that tells users 'where and how to act.'
He puts it bluntly: 'Forget affordances: what people need, and what design must provide, are signifiers.' People understand products through cues — affordances themselves do not communicate; signifiers do.
Examples: an empty platform suggests you missed the train; a trodden path across the lawn (a desire line) shows where people want to walk; a scrollbar's position marks the document's length and your place in it.
For designers: a clickable element must carry a visual signal that says 'this is clickable' (shape / color / underline / cursor), or its affordance stays invisible.
Flat design fell into exactly this trap: elements were still objectively clickable (the affordance remained), but borders / shadows / underlines were removed (the signifier was lost), so users could no longer tell they were clickable.
The corrective rule of thumb: when you want something to 'look clickable,' what you need to add is a signifier, not an affordance.
Mapping and Feedback: Controls That Line Up, Actions That Respond
Mapping is the correspondence between controls and their effects. Good design uses 'natural mapping' — borrowing spatial or physical analogies to make the correspondence self-evident:
- Turn the steering wheel left, the car turns left;
- Arrange stove knobs to match the burners' positions, and no labels are needed to know which controls which.
Bad mapping (say, knobs in a single row controlling two rows of burners) forces users to memorize or trial-and-error. Norman treats mapping as one of the keys to reducing cognitive load: 'previous / next,' 'volume up / down,' and switch directions in an interface should all follow users' intuitions about space and causality.
Feedback keeps users continuously informed: what state the system is in, whether my input was received, and what the result is. Norman's requirements for feedback are 'immediate' and 'informative':
- Pressing a button should get an instant visual / tactile / audio response;
- Long tasks should show progress;
- Feedback should make clear 'what happened,' not just 'something beeped.'
This is exactly the underlying principle of usability heuristic #1, 'visibility of system status.'
Three Models, Two Gulfs, Four Constraints: Diagnosing 'Hard to Use' Systematically
Why do users get it wrong? Norman distinguishes three 'models':
1. The designer's conceptual model — how the system works in the designer's head;
2. The user's mental model — how the user believes it works;
3. The system image — everything the user actually sees from the interface / documentation / feedback.
The crux: designers cannot stuff their conceptual model directly into users' heads; they can only convey it through the 'system image.' Good design = a system image that clearly communicates a conceptual model, so the mental model users naturally form matches it. A mismatched mental model is a root cause of user errors — like believing the elevator's door-close button shuts the door instantly, when it is mostly a placebo.
Norman describes how people use things with the 'seven stages of action': goal → plan → specify actions → execute → perceive the system state → interpret → compare with the goal. Two gulfs cut across it:
- The Gulf of Execution — 'the gap between what I want to do and how I can operate it' (how do I do it?), bridged by clear signifiers, constraints, and mapping;
- The Gulf of Evaluation — 'the gap between the system's current state and my ability to judge whether the goal was achieved' (did it work?), bridged by good feedback and visible state.
The core task of design is to shrink both gulfs until users don't have to think.
Constraints are forces that limit possible actions — they can both prevent errors and guide correct use. Norman identifies four kinds:
1. Physical constraints: the shape only fits one way — USB-C's foolproof plug, the SIM card's notched corner;
2. Logical constraints: the next step is deduced by logic — with one jigsaw piece left, you know where it goes;
3. Semantic constraints: determined by the meaning of the situation — a motorcycle windshield only makes sense facing the front;
4. Cultural constraints: based on convention — red = stop / danger.
Using constraints well = turning 'the right way' into 'the only / easiest way' — far smarter than reporting errors after the fact (echoing usability heuristic #5, 'error prevention beats error messages').
自测 · 学完检查一下
想真正动手做题、记进度、攒连胜？到互动课里练。
By Norman's precise definition, which understanding of an affordance is correct?
答案：It is the relationship of 'possible actions by a particular agent in a particular environment' — not an intrinsic property of the object, and not necessarily visible
The affordance Norman borrowed from psychologist J.J. Gibson is the relationship of 'possible actions by a particular agent in a particular environment' — a chair 'affords' sitting, a button 'affords' pressing. Two key points: (1) it is a relationship, not an intrinsic property of the object; (2) it is not necessarily visible — an affordance can objectively exist while users cannot see it. That is why design should care about the 'perceived affordance': what users notice they can do matters more than what they objectively can do, and an invisible affordance is as good as nonexistent. Visual hints like borders and shadows are signifiers, not affordances. (Source: Don Norman, The Design of Everyday Things, Revised Edition; jnd.org, 'Signifiers, not affordances')
Norman introduced the signifier to make up for what affordances lack. Which option best fits the definition of a signifier?
答案：A perceivable cue that tells users 'where and how to act' — like underlines, cursor changes, a scrollbar's position, or a desire line trodden across a lawn
A signifier is 'an indicator or signal in the physical or social world that can be meaningfully interpreted' — a perceivable cue that tells users 'where and how to act.' Norman puts it bluntly: 'Forget affordances: what design must provide are signifiers' — people understand products through cues; affordances themselves do not communicate, signifiers do. Examples: an empty platform suggests you missed the train, a desire line shows where people want to walk, a scrollbar's position marks the document's length and your place in it. 'The objective possibility of an action' is the definition of an affordance, not a signifier. (Source: Don Norman, 'Signifiers, not affordances,' jnd.org, 2008; The Design of Everyday Things, Revised Edition)
True or False: In a design review you say, 'This button doesn't look clickable — let's add an affordance to it.' By Norman's precise definition, this wording is accurate.
答案：False
False — this is the most common misuse in design circles. By Norman's precise definition: affordance = whether the action can be done (a relationship / possibility); signifier = the perceivable cue that shows it can be done, and how. The button is already objectively clickable — the affordance has been there all along; what is missing is the cue that shows it is clickable, so what you need to add is a signifier. Flat design fell into exactly this trap: elements stayed clickable but lost their borders / shadows / underlines (lost the signifier), so users couldn't tell. Rule of thumb: when you want something to 'look clickable,' add a signifier, not an affordance. (Source: Don Norman, 'Signifiers, not affordances,' jnd.org, 2008)
A stove has four burners arranged two-by-two. Which knob layout best matches Norman's 'natural mapping'?
答案：Arrange the knobs two-by-two as well, matching each burner's position — no labels needed to know which controls which
Mapping is the correspondence between controls and their effects; natural mapping borrows spatial or physical analogies to make the correspondence self-evident — turn the steering wheel left and the car turns left; arrange stove knobs to match the burners' positions and no labels are needed. Knobs in a single row controlling two rows of burners is the bad mapping Norman calls out — it forces users to memorize or trial-and-error, and labels are just a patch over bad mapping. Mapping is one of the keys to reducing cognitive load: 'previous / next,' 'volume up / down,' and switch directions should all follow users' intuitions about space and causality. (Source: Don Norman, The Design of Everyday Things, Revised Edition — the classic stove-knob example)
True or False: The more feedback the better — popping up a message at every step and flashing highlights across the whole screen is the surest way to reassure users.
答案：False
False. Norman requires feedback to be 'immediate' and 'informative': pressing a button should get an instant visual / tactile / audio response, long tasks should show progress, and the content should make clear 'what happened' rather than just 'something beeped.' But feedback must not be overdone — flashing everywhere and popping messages at every step create noise and make people ignore the feedback that truly matters (the 'cry wolf' effect). The rule: clear feedback for important actions, lightweight feedback for minor ones. This is also the underlying principle of usability heuristic #1, 'visibility of system status.' (Source: Don Norman, The Design of Everyday Things, Revised Edition; Nielsen NN/g's ten heuristics, #1)
Norman distinguishes three 'models.' Which set of correspondences is correct?
答案：The designer's conceptual model = how the system works in the designer's head; the user's mental model = how the user believes it works; the system image = everything the user actually sees from the interface / documentation / feedback
Norman's three-way distinction: (1) the designer's conceptual model — how the system works in the designer's head; (2) the user's mental model — how the user believes it works; (3) the system image — everything the user actually sees from the interface / documentation / feedback. Designers cannot stuff the conceptual model directly into users' heads; they can only convey it through the system image. Good design = a system image that clearly communicates a conceptual model so the mental model users naturally form matches it. The three are not the same thing — and certainly not posters, competitor analyses, or personas. (Source: Don Norman, The Design of Everyday Things, Revised Edition)
You stand in front of a new coffee machine: (1) at first you don't know which button makes an Americano; (2) after pressing, the machine shows no response and you can't tell whether it has started. Which gulf does each difficulty correspond to?
答案：(1) Gulf of Execution (how do I do it?); (2) Gulf of Evaluation (did it work?)
Across Norman's seven stages of action (goal → plan → specify actions → execute → perceive system state → interpret → compare with goal) lie two gulfs: the Gulf of Execution = 'the gap between what I want to do and how I can operate it' (how do I do it?), bridged by clear signifiers, constraints, and mapping — 'not knowing which button' (1) sits on the execution side; the Gulf of Evaluation = 'the gap between the system's state and my ability to judge whether the goal was achieved' (did it work?), bridged by good feedback and visible state — 'no response, can't tell if it started' (2) sits on the evaluation side. Design's core task is to shrink both gulfs until users don't have to think. (Source: Don Norman, The Design of Everyday Things, Revised Edition; Norman & Draper 1986, User Centered System Design)
Four scenarios: (1) a SIM card has a notched corner and only fits into the slot one way; (2) with one jigsaw piece left, you know where it goes without thinking; (3) a motorcycle windshield only makes sense mounted facing the front; (4) seeing red makes you think stop / danger. Using Norman's four types of constraints, which classification is correct?
答案：(1) physical; (2) logical; (3) semantic; (4) cultural
Norman's four types of constraints: physical — the shape only fits one way, like USB-C's foolproof plug or the SIM card's notched corner (1); logical — the next step is deduced by logic, like knowing where the last jigsaw piece goes (2); semantic — determined by the meaning of the situation, like a motorcycle windshield having to face the front (3); cultural — based on convention, like red = stop / danger (4). Red = stop is a convention, not a law of physics, so it is a cultural constraint rather than a physical one. (Source: Don Norman, The Design of Everyday Things, Revised Edition)
True or False: Designers cannot install their conceptual model directly into users' heads; they can only convey it through the 'system image' (everything users actually see — interface, documentation, feedback), and a mismatched mental model is a root cause of user errors.
答案：True
True. Designers and users never talk directly; users can only infer how a thing works from the system image (everything they actually see from the interface / documentation / feedback). Good design = a system image that clearly communicates a conceptual model, so the mental model users naturally form matches it. A mismatched mental model is a root cause of user errors — the classic example: believing the elevator's door-close button shuts the door instantly, when it is mostly a placebo. (Source: Don Norman, The Design of Everyday Things, Revised Edition)
True or False: Constraints restrict what users can do and shackle them — so good design should minimize constraints, and popping up an error message after the user makes a mistake is good enough.
答案：False
False. Constraints are forces that limit possible actions, but they both prevent errors and guide correct use — Norman identifies four kinds (physical / logical / semantic / cultural). Using constraints well = turning 'the right way' into 'the only / easiest way': the SIM card's notched corner and USB-C's foolproof plug use 'can't be done wrong' to block errors for the user — far smarter than reporting errors after the fact (echoing usability heuristic #5, 'error prevention beats error messages'). Minimizing constraints and relying on error messages gets it exactly backwards. (Source: Don Norman, The Design of Everyday Things, Revised Edition)