Gestalt: the brain automatically reads scattered elements as 'wholes' — proximity and similarity
Gestalt psychology (Wertheimer 1923 and others, in the first half of the 20th century) discovered that people don't look at a scene pixel by pixel — they subconsciously organize the parts into a structured whole: 'the perception of the whole is not the sum of its parts.'
These 'grouping principles' directly determine, in an interface, 'what looks like a group and what looks separate.' The original set includes proximity, similarity, closure, and continuation; late in the 20th century common region (Palmer, 1992) was added, among others.
What it means for designers: you don't need a label saying 'these belong together' — place and style elements using Gestalt cues, and users naturally read them as a group.
Proximity: sits close = one group. This is the most effective grouping cue and the one to reach for first. Elements near each other are perceived as belonging to the same group; distant elements are read as playing different roles.
How strong is it? Often a simple spacing adjustment beats adding divider lines or boxes.
In practice: pull each form label close to its own input field, and leave larger gaps between groups — users instantly read the structure. The anti-pattern is a label sitting closer to the previous input than to its own — users then type into the wrong row. Group with spacing first; bring in other means only if that's not enough.
Conversely, similarity is an implicit promise: if two things look the same, users expect them to behave the same. Putting an element that 'looks like a button but isn't clickable' into an interface breaks the expectation similarity created (echoing the usability principle of consistency).
A box makes a group, and the brain fills in gaps: common region, closure, and continuation
Common region: elements inside the same boundary / container are perceived as one group and assumed to share some function or attribute (proposed by Palmer, 1992).
The card is a product of this very principle — a container with a background or border that wraps an image + title + button into 'one thing.'
The key point: common region is strong — strong enough to override proximity. Even if two elements sit close together, once they're drawn into different boxes, users treat them as two groups. When you need strong grouping, give it a container.
Two Gestalt laws related to guiding the eye:
- Closure: the brain automatically fills in gaps and reads incomplete shapes as complete wholes — many minimalist logos rely on this, letting a few arcs show you a panda or a circle. Closure lets you suggest boundaries with fewer strokes and with whitespace, instead of drawing solid lines everywhere.
- Continuation: the eye naturally follows lines and curves onward. In design: use the invisible 'lines' formed by alignment to guide reading order and string a column of elements into one visual flow.
Visual hierarchy: what gets seen first — scale, contrast, and whitespace
Visual hierarchy = guiding the eye to notice elements on a page in order of importance. It answers 'what does the user look at first?' and is built along these dimensions: size / scale, value and color, contrast, spacing, position.
The method: first decide the single most important element on the page, give it the greatest visual weight, and let the rest descend by importance. NN/g notes that pages with clear hierarchy usually express priority with only 2–3 font sizes.
The anti-pattern: don't let everything shout 'look at me' — when everything is emphasized, nothing is.
Two workhorse tools for building hierarchy:
- Scale: use relative size to express importance and rank — big things get noticed first. Don't exceed about 3 sizes in one layout, or the hierarchy blurs.
- Contrast: juxtapose visually different elements (differences in color / size / weight) to signal that they differ and to attract attention.
An important warning: don't drop body-text contrast too low just to 'de-emphasize' it — that hurts readability and accessibility (insufficient contrast is one of the most common accessibility problems; see the WCAG 2.1 text contrast requirement, 1.4.3). To de-emphasize, use whitespace, smaller size, lighter weight — not text tuned until it's barely legible.
Packing the layout full actually destroys the hierarchy — everything crowds together fighting for attention, users don't know where to look first, and scanning slows down. Whitespace isn't 'no design'; it is precisely using 'emptiness' to express structure and emphasis.
自测 · 学完检查一下
想真正动手做题、记进度、攒连胜？到互动课里练。
What is the core finding of Gestalt psychology (Wertheimer 1923 and others)?
答案：People don't look at a scene pixel by pixel — they subconsciously organize the parts into a structured whole: 'the perception of the whole is not the sum of its parts'
Gestalt psychology (Wertheimer 1923 and others, first half of the 20th century) found that people subconsciously organize the parts of a scene into a structured whole — 'the perception of the whole is not the sum of its parts.' These grouping principles directly determine what looks grouped versus separate in an interface: the original set includes proximity, similarity, and closure, with common region, continuation and others added late in the 20th century. It is not a 21st-century invention, and it is the opposite of 'the whole equals the sum of its parts.' (Source: NN/g, 'The Gestalt Principles for User Interface Design'; Wertheimer M. 1923; Koffka K. 1935)
On a signup form, the 'Phone number' label sits closer to the previous input field than to its own, and users keep typing into the wrong row. By the proximity principle, what should you fix first?
答案：Adjust spacing — pull each label close to its own input and leave larger gaps between groups
Proximity is the most effective grouping cue and the one to use first: elements near each other are perceived as one group, and often a simple spacing adjustment beats adding divider lines or boxes. The fix is exactly to pull each label close to its own input and leave larger gaps between groups so users instantly read the structure; the scenario in the prompt (a label closer to the previous input) is the wrong-row anti-pattern NN/g calls out. And Gestalt's whole point is that you don't need written explanations — so adding instructions or making labels red isn't the right first move. (Source: NN/g, 'Proximity Principle in Visual Design'; Wertheimer 1923, Gestalt grouping laws)
True or False: By the similarity principle, 'looks alike = works alike' is an implicit promise to users — putting an element that 'looks like a button but isn't clickable' into an interface breaks that expectation.
答案：True
True. The similarity principle: elements sharing color / shape / size / style are seen as the same kind with similar functions, so the same kind of action should look consistent (all primary buttons the same color and shape, all links the same blue with an underline). Conversely, similarity is an implicit promise: if two things look the same, users expect them to behave the same — an element that 'looks like a button but isn't clickable' breaks the expectation similarity created, echoing the usability principle of consistency. (Source: NN/g, 'Similarity: Gestalt Principle for UI Design'; Wertheimer 1923)
On a listing page, two cards sit close together: the button at the bottom of card A is actually closer to card B's title than to card A's own title. Which card will users assign the button to, and why?
答案：Card A — common region (the same container / boundary) is strong enough to override proximity; an element belongs to whichever box it is drawn inside
Common region (proposed by Palmer, 1992): elements inside the same boundary / container are perceived as one group and assumed to share a function or attribute — the card is a product of this very principle. The key point is that common region is strong enough to override proximity: even if two elements sit close together, once they are drawn into different boxes, users treat them as two groups. So the button drawn inside card A's container belongs to A. But don't overuse borders — too many boxes fragment the interface and add visual noise; whitespace is often lighter than a stroke. (Source: NN/g, 'The Principle of Common Region'; Palmer S.E. 1992)
Many minimalist logos let you see a panda from just a few arcs; a column of aligned elements in an interface reads as one visual flow. Which pair of Gestalt principles do these two phenomena correspond to?
答案：Closure (the brain automatically fills in gaps, reading incomplete shapes as wholes) and continuation (the eye follows lines and curves onward)
These are the two Gestalt laws about guiding the eye: (1) closure — the brain automatically fills in gaps and reads incomplete shapes as complete wholes; minimalist logos use a few arcs to show you a panda or a circle, and closure lets you suggest boundaries with fewer strokes and with whitespace; (2) continuation — the eye naturally follows lines and curves onward; in design, the invisible 'lines' formed by alignment guide reading order and string a column of elements into one visual flow. They are distinct principles, not the same thing. (Source: NN/g, 'Continuation / Closure: Gestalt Principles for UI Design'; Wertheimer 1923, Gestalt grouping laws)
In UX, what is visual hierarchy, and what is the first step to building it?
答案：Guiding the eye to notice elements on the page in order of importance — first decide the single most important element, give it the greatest visual weight, and let the rest descend by importance
Visual hierarchy = 'guiding the eye to notice elements on the page in order of importance' — the core tool for answering 'what does the user look at first,' built along size / scale, value and color, contrast, spacing, and position. The method is to first decide the single most important element and give it the greatest visual weight, with the rest descending by importance; pages with clear hierarchy usually express priority with only 2–3 font sizes. 'Emphasize everything' is the anti-pattern — when everything is emphasized, nothing is. (Source: NN/g, '5 Principles of Visual Design in UX'; NN/g, Visual Hierarchy / Scanning Patterns)
True or False: The more font sizes a layout uses, the richer and clearer its visual hierarchy — so using seven or eight sizes on one page is better.
答案：False
False. Scale expresses importance and rank through relative size — big things get noticed first — but NN/g recommends not exceeding about 3 sizes in one layout, or the hierarchy blurs; pages with clear hierarchy usually express priority with only 2–3 font sizes. Piling on more sizes muddles the priority relationships rather than clarifying them. (Source: NN/g, '5 Principles of Visual Design in UX')
True or False: The best way to de-emphasize a piece of secondary explanatory text is to drop its contrast very low (e.g., light gray text on a light background) — the fainter it is, the more secondary it looks.
答案：False
False. This is the important warning NN/g calls out: don't drop body-text contrast too low just to 'de-emphasize' it — that hurts readability and accessibility, and insufficient contrast is one of the most common accessibility problems (see the W3C WCAG 2.1 text contrast requirement, 1.4.3). To de-emphasize secondary content, the right tools are whitespace, smaller size, and lighter weight — not text tuned until it's barely legible. (Source: NN/g, '5 Principles of Visual Design in UX'; W3C WCAG 2.1, 1.4.3 contrast minimum)
True or False: Whitespace is wasted real estate; good design should pack every pixel with content to get its money's worth.
答案：False
False. This is a common misconception. Whitespace (negative space) is an active design material: it groups via the proximity principle (tight within groups, loose between them), gives key elements 'breathing room' that lifts their visual weight, lowers cognitive load, and improves readability — NN/g ties whitespace directly to balance and grouping. Packing the layout full actually destroys the hierarchy: everything crowds together fighting for attention, users don't know where to look first, and scanning slows down. Whitespace isn't 'no design'; it is precisely using 'emptiness' to express structure and emphasis. (Source: NN/g, '5 Principles of Visual Design in UX'; NN/g, 'Proximity Principle in Visual Design')
Marketing asks you to make the main CTA, the promo banner, the popup notice, and every subheading on a landing page bigger, bolder, and red — 'so users can see everything.' By visual hierarchy principles, what is the result?
答案：When everything is emphasized, nothing is — the hierarchy is destroyed, and users no longer know where to look first
The essence of visual hierarchy is 'what gets seen first, what next': decide the single most important element, give it the greatest visual weight, and let the rest descend by importance — don't let everything shout 'look at me,' because when everything is emphasized, nothing is. Making everything bigger, bolder, and red pushes every element to the same weight, fighting for attention: the hierarchy blurs and scanning slows down. Hierarchy is a functional tool for guiding the eye, not an aesthetic preference, and users don't automatically read in DOM order or in the order marketing wishes. (Source: NN/g, '5 Principles of Visual Design in UX'; NN/g, Visual Hierarchy / Scanning Patterns)