Spacing decides what the eye groups together

A lesson from The Psychology of Why Good Designs Fail. Play it above, or read it through below.

• Spacing is not presentation. Spacing determines the pairing.

  The common read: Spacing is presentation, so the pairing my form means is the pairing a person reads.

  On a form, spacing is not presentation: spacing determines which lines people read as pairs. Wertheimer's 1923 paper showed observers rows of dots at different intervals and reported that the most natural grouping is the one involving the smallest interval. He named this the Factor of Proximity. Nothing in that report is about taste. The paper also reports the even case: in a row whose intervals are all equal, the predominant impression is that of uniformity, with no pairs.

  The result is strong evidence because of what was in the display. The observers were looking at rows of dots, so there was no content for a grouping to come from and no meaning to group by. The intervals alone produced the grouping. A form's lines carry the same intervals, which is why 4 px under a line and 16 px above it pair that line downward, whatever the designer of the file intended.

  Palm Beach County, Florida, split the presidential candidates over two facing pages on 7 November 2000, with one column of punch holes down the middle serving both sides in turn. Wand and five co-authors, in the 2001 American Political Science Review, compared election-day ballots with the county's absentee ballots, which had no such layout, and put the mistaken votes at more than 2,000, against a certified statewide margin of 537. The paper names the layout as the cause without saying which grouping factor misled the voters.

  Group the layers if it helps you move them. The panel in the file that shipped this form reads Group 47, Group 47 copy, Group 47 copy 2, ungroup me later, and a viewer sees none of it. A viewer sees two distances. Make the gap inside a pair smaller than the gap between pairs, and check the smaller one in the built page rather than in the frame you drew. The fix costs one pass through the spacing scale; skipping it costs another quarter of arguing about the copy.

• Nothing moved, and the grouping changed anyway.

  The common read: Grouping is a distance problem, so two things far apart are two things, whatever they look like.

  Distance is one factor and it is not the only one. The second demonstration takes distance out of the experiment on purpose: the paper maintains an identical proximity throughout and varies the colour of the dots themselves, and the row divides regardless. The paper names the result the tendency of like parts to band together, The Factor of Similarity. Nothing was moved, and the grouping still changed, in a display where position could not have caused it.

  The consequence for a product is that a shared trait can bind items that sit far apart on one page, unless the spacing around them overrides that trait. Two controls in opposite corners sharing a fill, a weight and an outline tend to be read as one kind of thing. The paper's displays were seen all at once, so it says nothing about separate screens. Carrying a trait across screens so a person recognises the action from memory is a design practice, not the paper's finding.

  For example, a user files a ticket saying the main action is hard to find; the team treats it as a contrast problem with that one button and closes it by darkening the button on the single screen the session was recorded on. The next surface styles the same action differently again, and a new ticket with a different title reports the same problem. The problem is not any button's contrast. The buttons share no trait that would let a person group them.

  So pick the traits before the screens. Give the action that matters most one fill, one weight and one outline, hold them everywhere the action appears, and write every exception down as an exception rather than deciding it in the file. The rule has a cost: a surface somebody wants to style differently cannot be styled differently. In return, a person who has met that action once finds it on the next screen without searching for it.

• There is no ranking, only a threshold.

  The common read: Proximity is the first and strongest of the grouping laws, so when spacing and colour disagree the spacing wins.

  There is no ranking. The paper puts the two factors against each other in one figure and reports an illustration of opposition in which similarity is victorious despite the preferential status given to proximity, and it states in the same document that proximity is not the only factor involved in natural groupings. Both outcomes are in the paper. The paper never ranks one factor above the other in general. It says that by appropriate variations, either factor may be weakened or strengthened.

  Instead, the paper describes a threshold that can be moved. Where proximity is the predominant factor, a gradual increase of interval will eventually introduce a point at which similarity becomes predominant, and the paper says plainly that this is how the strength of the factors can be tested. So the useful question is not which law applies to this layout but which of these two cues is currently stronger in it, and that question can be answered with a procedure rather than an opinion.

  For example, a user reports in a support thread that records from different projects have been merged, and the report is filed against the grid that lists them, on a release whose only change was showing each record in its owner's colour. No records were merged. The shared colour grouped records across the gaps and overrode the spacing, and the person who added the colour was solving an ownership problem one screen away and had no reason to look at the spacing scale.

  So treat a second cue as competing with the first, not as an addition to it. Before colour-coding a set that cuts across your spacing, widen the gaps around the sets you want held together, so the gap inside each set stays the smallest, or reduce the colour to a strength those gaps can override. Say which of the two you did. The cost is a denser layout or a quieter colour. The cost of skipping it is a grouping nobody on the team chose.

• To find which cue groups the items, freeze one and move the other.

  The common read: Telling the two apart is a vocabulary question, so which one I name in a review changes nothing about how I fix the layout.

  Freeze every trait on the screen and move the items apart. The grouping moves with them, which shows that the cue causing it is

  Naming distance and naming a trait lead to two different actions, and one procedure separates them in the time it takes to export two screens. Freeze every trait and move the items: if the grouping moves with them, distance was causing it. Freeze every position and change one trait: if the grouping changes, the trait was causing it. The second half of that procedure repeats the paper's own second demonstration, which used dots, and that demonstration is why similarity was covered separately earlier.

  Which half applies tells you which file to open first: for distance, the spacing scale; for a trait, the token that defines it. The other cue can still be pushed past the threshold, at a price already named: a denser layout or a quieter colour. If you name the wrong cue, an iteration changes the wrong artefact, even though the review that asked for it was right about the grouping.

  So run the freeze before the argument rather than after the release. Take the screen, change exactly one variable, take it again, and put the two side by side: the two images answer the question, and opinions do not. The price is the few minutes it takes and the small social cost of asking to check something the team has already agreed on. The price of skipping it is a spacing pass that ships and moves nothing.

• The grouping factors are not properties of pixels.

  The common read: These are layout principles, so they describe where things sit on a screen and they stop at the edge of one.

  The paper reports the same grouping when its dot row is replaced by a row of taps, which puts the factor in

  Both factors still hold with no screen at all. The paper replaces a dot row with taps and reports that the principle holds also for auditory organization, readily seen by substituting tap-tap, pause, tap-tap, pause for one of the rows. It states the similarity version for sound too: maintaining a constant interval, the beats may be soft and loud. Proximity and similarity are properties of how perception organises an array, and an array is not required to be visible.

  The same two factors apply to a sequence of sounds. For example, a user complains that the app pinged four times for one action, and the team files it as a duplicate-event bug nobody can reproduce. The build's only change lengthened the delay between the tones to the silence that separates notifications. Four tones were always played. They were heard as one event while the gap inside the sequence was the smallest interval. Once that gap matched the gap between notifications, each tone was heard as its own notification.

  So set the intervals in a sound sequence the way you set them in a column: the gap inside a group smaller than the gap between groups, written as a number a person can review. Setting the intervals costs one number written into the spec that currently carries none and one line in a review that currently mentions none. Not writing it down costs a bug report that names the wrong subsystem and cannot be reproduced by whoever receives it.

• Name the factor, because no measurement supports the workload claim.

  The common read: Ambiguity has a measured cost in attention, so citing cognitive load in a review is citing a finding.

  The line about every question mark adding to a person's cognitive workload traces back to

  The line everybody repeats about every question mark adding to a person's cognitive workload is attributed across design writing to Steve Krug, a consultant writing up his own practice, and it is repeated without a study attached: nothing read for this lesson cites an experiment behind it. It is a working principle somebody chose. A working principle is useful and it is not a finding, and the difference matters when someone in a review disagrees.

  For example, a reviewer rejects a label with a comment that names cognitive load, and the person who wrote the label cannot answer it, because there is no number to check and no procedure to run against it. The label may well be the wrong label. Nothing in the comment says why, the next label is argued the same way, and a term borrowed from a research field is used as if the field had measured it.

  So name the factor and show it: this helper line has 24 px above it and 8 px below it, so it is bound to the field below it, not the field above that it describes, and here is the screen with the two numbers swapped. That gives up a science word's authority and costs one screenshot taken twice. In return, the other person gets an objection they can check and can show wrong. Gaps and shared traits together decide what reads as a group, and neither is decoration.