Too little whitespace makes separate items read as one group

What it is

Two stretches that should not belong together will be read as one cluster if the gap between them is about the same as the gap inside them. Underspaced false grouping is proximity firing where it should not: a field marries the next group’s heading, a button marries another card’s actions, a caption marries an unrelated picture. This is not a missing line. It is a spacing ratio that never formed, so the cut never started.

Why it happens

Proximity does not ask whether items ought to group; it only asks whether they are near. Layout that places two groups near each other will group them, even when meaning objects. The usual accident is giving section gap the same size as row gap: a new heading sits against the previous field, the heading is read as a note on that field, and the next group’s fields become unowned inputs. The same happens on the horizontal: a primary and a secondary button that share a gap with an unrelated neighbouring control have their scope misread. Once a false group forms, correction is expensive — people act on the wrong cluster and have to take it apart. The fix is a larger between-gap, or a forced cut on that boundary; what has to be admitted first is “the ratio is missing,” then the means. Adding a hairline without growing the gap can make the line look like decoration inside the cluster; the false group remains.

Studying it

Join two blocks that should be separate with the same spacing as inside each block, then grow the between-gap or add a line. Ask people to circle clusters, match headings to fields, and say which object a button acts on. Independent variables: between-to-inner spacing ratio, line or no line. Dependent variables: false-group rate, headings married to the wrong field. False grouping should peak when the ratio is near 1; adding a line while the ratio stays 1 should only weakly reduce it.

Where it stops holding

A tool cluster that is meant to read as one group (a set of formatting buttons) should be tight on purpose. On a narrow screen, vertical gaps are crushed, a ratio that worked on desktop fails on a phone, and false grouping is a responsive problem, not a single set of numbers that travels. Common region (a card plate) can still cut objects when the spacing ratio is weak; false grouping is then rarer between cards and still possible between two logical zones inside a card.

Applying it

• At every “new heading / new card / new action group,” check that the gap from the previous block is clearly larger than gaps inside the block.
• A heading must sit closer to the group it names than to the tail of the previous group.
• Where a ratio cannot be made, cut with a line or a plate; do not hope people will read the words and override proximity.
• How to check: ask someone to pencil around “one group.” Circles that cross a semantic boundary mean grow that gap, or put a cut there.

Related

• Within the group: E4.20.1 A divider is a forced cut for when the relationship would otherwise be unclear · E4.20.2 Whitespace groups by spacing, without drawing an edge · E4.20.3 Too many dividers make the surface look shattered
• Adjacent: E4.01 Cards · F2.06 Proximity grouping
• Search terms: false grouping · proximity error · cramped layout