The gap is doing the grouping

A lesson from Why Good Design Dies. Play it above, or read it through below.

• Spacing is not presentation. It is the pairing.

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

  Spacing is not presentation on a form. It is the pairing. Wertheimer's 1923 rows are the demonstration and the wording is flat: in each of those cases the form of grouping which is most natural is the one involving the smallest interval, and he names that the predominant influence of The Factor of Proximity. Nothing in the sentence is about taste. It is a report of what observers see when the intervals differ, and the even case follows from it rather than appearing in it.

  What makes it load-bearing is 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 fall back on. Intervals alone produced it. A form is dots with words written on them, and the words arrive at an array that has already been divided, which is why 4 px under a line and 16 px above it pairs that line downward, against the file that produced it.

  That arrives as a support thread saying people are ticking the wrong consent box, filed against the copy, closed by rewriting the sentence, and reopened the next quarter when the rewrite changes nothing. Nothing was wrong with the sentence. The gap under it was smaller than the gap above it, which is a number in a stylesheet that no review discussed and that nobody has a name for.

  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 none of it reaches a viewer. Two distances do. 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: one pass through the spacing scale, against another quarter of arguing about the copy.

• Nothing moved. 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. What survives is named as the tendency of like parts to band together, The Factor of Similarity. Nothing was moved. The grouping changed anyway, and it changed in a display where position could not have caused it.

  The consequence a product lives with is that a trait binds across a whole page and does not care about layout. Two controls in opposite corners sharing a fill, a weight and an outline are read as one kind of thing, and a control given a fresh treatment on each surface is read as a new kind of thing each time. That is a decision about the entire product, taken one screen at a time, which is how it ends up taken by nobody in particular.

  That arrives as a ticket saying the main action is hard to find, filed against that one button's contrast, closed by darkening it on the single screen the session was recorded on. The next surface styles the same action differently again and the ticket returns under a new title. What is being reported is not any button's contrast. It is that the set has no shared trait for a person to band together.

  So pick the traits before the screens. One fill, one weight, one outline for the action that matters most, held everywhere it appears, and every exception written down as an exception rather than decided in the file. The price is real: a surface somebody wants to treat differently does not get to. What it buys is that a person who has met that action once finds it on the next screen without going looking for it.

• There is no ranking. There is 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 there. What is not in there is a sentence saying which of the two wins, because the paper is not describing laws in an order.

  What it describes instead is a dial. 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 never which law applies to this layout. It is which of these two cues is currently stronger here, and that question has a procedure attached to it rather than an opinion.

  That arrives as a support thread saying records from different projects have been merged, filed against the grid that lists them, on a release whose only change was painting each record in its owner's colour. Nothing merged. A trait crossed the gaps and won, 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 a bid against the first, not 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 drop the colour to a weight those gaps can beat. 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 in the room chose.

• Freeze one, move the other. That is the whole test.

  The common read: Telling the two apart is a vocabulary question, so which one I name in a review changes nothing about what I do on Monday.

  Freeze every trait on the screen and move the items apart. The grouping travels with them, which says the cue carrying it is

  The two names carry 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 carrying it. Freeze every position and change one trait: if the grouping changes, the trait was carrying it. The second half of that is the paper's own second demonstration run once, on dots, and it is the reason similarity got a screen to itself earlier.

  Which half applies decides which file you open first. Distance sends you to the spacing scale. A trait sends you to 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. Name the wrong one and an iteration goes at the wrong artefact, while 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: two images settle this and two opinions never have. The price is the few minutes it takes and the small social cost of asking to check something the room has already agreed on. The price of skipping it is a spacing pass that ships and moves nothing.

• The factor is not in the 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 survive the screen being taken away. 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 runs the similarity version in sound too: maintaining a constant interval, the beats may be soft and loud. These are properties of how perception organises an array, and an array is not required to be visible.

  The same two levers reach a sequence of sounds, and that arrives as a complaint that the app pinged four times for one action, filed as a duplicate-event bug nobody can reproduce, on a build whose only change was evening out the delay between the tones. Four tones were always played, and they used to arrive as one event because the old timing ran them close enough to bind. Evening the delay leaves no smallest interval, so nothing binds and four tones arrive as four. Somebody tidied a number.

  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. It 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. The workload number is not there.

  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

  Nobody ever shows you the measurement behind that one. 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 travels without a study attached: nothing read for this lesson cites an experiment behind it. It is a working principle somebody chose. That is a real thing to hold and it is not a finding, and the difference decides what happens when a person in the room disagrees.

  That arrives as a review comment that kills a label by naming 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 vocabulary borrowed from a discipline is doing work that the discipline never did.

  So say the factor and the observable instead. There is 24 px above this row and 8 px below it, so the helper line is bound to the field under it rather than to the one it belongs to, and here is the same screen with those two numbers swapped. That sentence costs you the weight of a science word and one screenshot taken twice. What it buys is an objection the other person can check, and can lose.