Week 31 · Human Interaction Psychology

Eight identical dots. Nothing about any one of them changed.

Nobody Has 327

Max Wertheimer once stood at a window, counted the brightnesses and nuances of colour he could theoretically distinguish, and got 327. He never once perceived 327 of anything. Look at the row below — how many things is it?

Predict

Eight identical dots, alternating gaps of 10px and 40px. How many things do you see?

Experience

The Conflict Canvas

Twelve identical blocks. Three cues, and they do not agree.

Wertheimer’s dots were never studied one law at a time — the interesting figures in the 1923 paper are the ones where two factors are deliberately pitted against each other. Below, the same twelve blocks can be read as three rows or as four columns, and which one wins is not a matter of taste. Push the row spacing past the column spacing and proximity votes for rows. Colour the columns and similarity votes back for columns, from across the whole canvas, regardless of distance. Draw a box around the middle and common region throws out both ballots and wins outright.

Conflict canvas

12 blocks, 3 votes

Reads as too close to call

Proximity vote: none; 0.00 signed
Similarity vote: none; 0.00 strength
Net margin: 0.00
Verdict: too close to call

Row gap (proximity)12px

Columns winRows win

Column gap (proximity)12px

Rows winColumns win

Colour contrast by column (similarity)0%

No voteStrong vote

The verdict shown is a modelled indicator, not a measurement: netScore = proximityScore − similarityScore, where proximityScore is (rowGap − colGap) normalised to −1…1 and similarityScore is the colour-contrast slider, 0–1. A common-region box always overrides the score outright. This dramatises the additive, log-odds competition Kubovy and van den Berg measured between real proximity and similarity (Gestalt Grouping Claude.md, lines 91, 427) — it is not their fitted model, only its shape.

Concept

Factors Compete; the Percept Is the Verdict

Gestalt grouping is usually taught as a list of laws, each with its own diagram. That framing is the problem: Wertheimer never published laws. He published factors that compete, cooperate, and override each other — a conflict model, not a rulebook.

He arrived at it sideways. Trained in Berlin and Würzburg, he broke a 1910 train journey to chase a hunch about apparent motion, and by 1912 had isolated the phi phenomenon — pure movement, perceived with no object moving at all. If motion can exist with nothing to carry it, organisation cannot be built up from identified parts; it has to come first. The 1923 dot rows make the same point without any motion at all: the dots are static and identical, so only their arrangement can be doing the organising.

I stand at the window and see a house, trees, sky. Theoretically I might say there were 327 brightnesses and nuances of colour. Do I have ‘327’? No.

Wertheimer, 1923, trans. Ellis 1938

Drag the ratio below between his two intervals and watch your own eight dots cross the same threshold his readers crossed in 1923 — from a single row, into a row of nothing but pairs, with not one dot moved sideways.

Reads as a row of 8

Long interval ÷ short interval1.00×

Uniform1923 figure ≈ 4×

Short interval: 10px
Long interval: 10px
Historical ratio: 4×; ≈3mm : 12mm, 1923
Reads as: a row of 8

The historical figures are reported in the 1938 translation as intervals “on the order of” 3mm and 12mm — roughly a 4:1 ratio (Gestalt Grouping Claude.md, lines 45, 303). This canvas fixes the short interval at 10px and scales the long one by the slider, so 4× reproduces the historical proportion, not the historical size.

Deconstruction

Six Votes, Cast Separately

The canvas above ran proximity against similarity against common region all at once. Isolate each one and the mechanism stops being clever and starts being obvious.

Four of these are Wertheimer’s own 1923 factors. Two — common region and, closely related, common fate’s modern generalisation — were added decades later by vision scientists (Stephen Palmer, 1992 and 1994) who noticed the classical laws could not explain what a plain rectangle does to its contents. Step through all six below; each one changes exactly one thing.

Factor

ProximityCommon fate

Proximity — "That form of grouping is most natural which involves the smallest interval."

Reads as one row of 6

"That form of grouping is most natural which involves the smallest interval."

Common region cannot be reduced to proximity, closure, or any factor Wertheimer named (Palmer, Cognitive Psychology 24, 1992, pp. 436–447) — corroborated here only through its citation in Wagemans et al.’s 2012 review, not independently checked against Palmer’s original text.

Real World

Four Pixels, One Misread

The most common proximity defect in production software never crashes anything, which is exactly why it survives for years: a label sits close enough to the field above it that the two read as a pair, when the label was written for the field below.

The fix is never a border. It is the ratio between the label’s bond to its own field and the gap before the next one — what the dossier calls the Group Separation Ratio: the smaller gap divided into the larger. Below 1.25, the layout is a coin flip. At 1.5 or above, it stops being a judgement call. Material’s 8dp grid and IBM Carbon’s spacing scale are two real, shipped answers to the exact same arithmetic — try them as presets, then find the ratio yourself.

Name

Phone

Preset

Label → field gap12px

Field → next label gap16px

Group separation ratio: 1.33×
Reads as: uneasy
Each label attaches to: probably its own field, but the margin is thin

Group Separation Ratio and its 1.25 / 1.5 thresholds: Gestalt Grouping Claude.md, line 175. The 12px/16px pairing is the dossier’s own worked anti-pattern and its 4px/24px fix, line 588. Material’s 8dp baseline grid: Material Design, “Metrics & keylines.” Carbon’s $spacing-03 (8px) and $spacing-06 (24px): IBM Carbon Design System spacing scale, dossier lines 337–343 — neither system spec was independently re-fetched for this build.

Experiment

When the Inside Outgrows the Outside

A card stacks four grouping cues on the same content at once — its boundary, its internal rhythm, its continuous surface, its shared treatment with every other card in the set. That redundancy is why cards work at almost any density, and why they let bad spacing ship unnoticed.

One invariant does most of the protecting: the gap between two cards has to be at least as large as the padding inside either one. Push padding past that gap and the card stops being a container — its content starts reading as continuous with its neighbour, right across the boundary that was supposed to stop it.

Contained — the cards read as two distinct surfaces

Card padding (inside)24px

Gap between cards (outside)24px

Padding: 24px
Card gap: 24px
Invariant: gap ≥ padding; dossier Part 7
Status: holds

Invariant “--card-sep >= --card-pad”: Gestalt Grouping Claude.md, Part 7, line 507. The dossier’s own recommended floor is a full 1.5× (line 397); this canvas flags the leak at the harder 1× boundary so the exact crossover stays visible while you drag.

Challenge · Fix the form

Open

Every gap in this form currently reads 20px — label to field, field to next label, all equal. Every label is a coin flip for which field it belongs to. Fix it by moving one slider; do not add a line.

First name

Last name

Label → its own field20px

TightField-to-field (20px)

GSR 1.00× · tie

The field-to-field rhythm is fixed at 20px. Pull the label's own bond down until it is clearly the smaller of the two gaps.

Insight

The layout voted before you read a single word.

Every screen you have ever misread was never a comprehension failure — it was an election you lost without knowing your ballot had been cast. Proximity, similarity, and common region are not styling choices layered on top of your content; they are the mechanism your content is delivered through, and they finish their work in the same low-level visual system that groups a flock of birds, well before any word is read. Fix the election, and the content stops needing defending.

Mental model

Whenever a layout reads as cluttered, or a label seems to belong to the wrong field,

look for the ratio between the gap inside a group and the gap between groups — not a missing divider,

because the eye reads relative distance before it reads any word, and a ratio under about 1.5× is a tie your users are settling at random, one person at a time.

TomorrowPick one card or form in something you shipped. Measure its Group Separation Ratio: divide the smallest gap between two groups by the largest gap inside either one. Under 1.5, that was never a look you chose.

End of experience

← Back to the constellation

Nobody Has 327

The Conflict Canvas

Factors Compete; the Percept Is the Verdict

Six Votes, Cast Separately

Four Pixels, One Misread

When the Inside Outgrows the Outside

Where this idea goes next

Nobody Has 327

The Conflict Canvas

Factors Compete; the Percept Is the Verdict

Six Votes, Cast Separately

Four Pixels, One Misread

When the Inside Outgrows the Outside