Norman's Design Principles and Visual Representation
Norman’s Four Core Principles
Don Norman’s principles provide a vocabulary for analysing why an interface element is easy or hard to use:
| Principle | Definition | Counter-example (violation) |
|---|---|---|
| Affordance | A property of an object that suggests how it can be used. A button’s raised shape affords pressing; a handle affords pulling. | A flat rectangle that looks like a label but is secretly tappable — there is no visual cue that pressing it will do anything. |
| Signifier | An explicit visual or perceptual cue that communicates an affordance. A drop-shadow signifying that a flat rectangle is actually a clickable button; a chevron (›) signifying that a row can be tapped to reveal more. | A tappable row with no chevron, underline, or colour change on hover — the affordance exists (it can be tapped) but no signifier makes it visible. |
| Feedback | The system’s response to a user action, confirming that the action was received and communicating its effect. Relates directly to Nielsen Heuristic #1 (Visibility of System Status). | Clicking “Submit” on a form and nothing happening — no loading spinner, no confirmation, no error message. The user does not know whether the action was received. |
| Mapping | The relationship between controls and their effects. A stove’s dial layout mirroring the physical layout of its burners is a natural mapping — no learning required. An arbitrary layout of dials that does not correspond to burner positions is a poor mapping — the user must learn the association through trial and error or labelling. | A volume slider that moves left–right but controls a vertical on-screen display; a set of light switches in a random order that does not correspond to the room layout. |
The Fundamentals of Visual Representation
Designing a visual display means establishing a correspondence between an invisible information structure and the visible marks a user can see. Several distinct historical conventions have evolved, and they remain the basis of almost all screen design today:
Typography and Text
Most screen information is still interpreted according to paper-derived conventions: tabulation, alignment, indentation, borders, shading, and grid-based layout. These conventions are centuries old and deeply embedded in users’ expectations — violating them (e.g. centre-aligning body text, using inconsistent indentation) creates friction even if the user cannot articulate why.
Maps and Graphs
Maps and charts rely on a quantitative correspondence between position on the surface and a continuous quantity (time, distance, value). This convention is inherited from Playfair’s economic charts (1786) and centuries of cartography. Oscilloscopes and radar screens are direct technological descendants of this lineage.
Schematic Drawings
Scaled, connected diagrams (engineering drawings, circuit diagrams) where white space is used to signal an interpretive break between otherwise-connected elements sharing one scale. A gap in a schematic means “these are separate subsystems” even if they are spatially adjacent.
Icons and Symbols
Icons range from pictorial (a picture of a tree), to symbolic (a heart for “like”), to metonymic (a key for “lock” or “security”), to purely arbitrary convention (a floppy disk for “save”). Best practice: adopt familiar conventions where they exist — users already know them. When inventing new symbols, be deliberate about whether the correspondence is pictorial, symbolic, or metonymic, and test whether users interpret it as intended.
The Visual Metaphor: The Desktop
The Macintosh desktop is the most influential visual metaphor in computing history — but it is best explained not by strict physical-desk analogy (which quickly breaks down — why does a desk have overlapping windows?). Rather, its power comes from several abstract representational conventions introduced together:
- Window borders partitioning the screen like a magazine page.
- Rich secondary notation allowing users to arrange items spatially for their own purposes.
- A consistent set of interaction patterns (click, drag, double-click) applied uniformly.
When critiquing a metaphor-based design, do not simply say “the metaphor breaks down.” Instead, identify which specific correspondence (pictorial, symbolic, spatial, via secondary notation) is doing the useful work, and where the metaphor’s literal reading and the system’s actual behaviour diverge.
Expected Learning
- Name Norman’s four principles (affordance, signifier, feedback, mapping) and give an example of a violation for each.
- Explain the distinction between an affordance and a signifier — they can exist independently, and good design makes affordances visible through clear signifiers.
- Name the historical conventions of visual display design and explain how each continues to influence modern interfaces.
- Critique a metaphor-based interface design, identifying which correspondences work and where the metaphor breaks down, without resorting to the generic “the metaphor is imperfect.”
Past Paper Questions
Norman’s principles are examined in the context of: the UCD cycle, interface critiques, and Cognitive Walkthrough (the CW’s four questions are fundamentally about affordance, signifier, and feedback). Visual representation and metaphor appear in the 2017 “interaction spaces beyond the desktop” question and the 2018 discussion of Wizard of Oz and prototyping.