In-group gaps must be clearly smaller than between-group gaps

What it is

Toggles 8 px apart inside a pack, and 8 px apart between packs: proximity has nothing to say about who belongs together. The in-group gap has to be clearly smaller than the between-group gap — not “remember to leave air,” a contrast you can feel in a glance. 16 versus 20 is not clear. 8 versus 24, 12 versus 32 start to look like two different seams.

The whitespace group asks whether empty can group, and what happens when there is too little or too much. This leaf only locks the inequality.

Why it happens

Gestalt proximity is comparative: nearer items bin together, farther ones split. Absolute pixels do not group; the ratio (or at least a discriminable difference) does. Below threshold, both gaps look like one step, and the category “group” never appears.

“Clearly” usually means skipping one or two steps on the spacing scale, not a 4 px nudge. Spatial differences are coarse; a designer’s “we already opened it 4 px” is perceptually no opening. Without the inequality, strokes and fills are drafted in to impersonate grouping — a later, more expensive move.

Studying it

The classic method shows clouds of dots or patches, varies intra- and inter-cluster distance, and asks how many groups people see, or to circle co-members. Independent variables: the two distances and their ratio. Dependent: reported group count, match to the intended clustering, latency. An interface version can swap dots for settings rows or fields and compare circled regions to the design intent.

Thresholds from dot clouds do not paste in as padding rules: UI also has headings, rules, colour. The ratio still applies; the numbers want a re-measure on real components.

Where it stops holding

Strong strokes or fills (common region) can group even when in-group and between-group match — but boxes are expensive and die when overused. Transient gaps during expand animations need not obey the inequality. Dense data grids partition with rules and save empty for the digits.

In RTL or vertical type, compare distance on the relevant axis; the inequality does not flip.

Applying it

• Write two steps per group kind: one in-group, between-group at least one step up (two is better). Ban using the same step as both.
• Fix spacing before adding a line. A line is a backup, not a stand-in for the inequality.
• How to check: on five live groups, measure the shortest in-group seam and the shortest between-group seam; compute between/in. Any ratio under about 1.5: mark the two seams in different colours, open the between-group gap until the ratio crosses 2, then ask someone who has not seen the mock to circle groups. Where they err, add contrast; do not draw a line first.

Related

• Same group: F2.06.2 Label-to-control gap is where the rule shows most clearly · F2.06.3 A divider cannot rescue a wrong spacing relation
• Nearby: F2.04 Whitespace · F2.03 Spacing scale · F1.03 Proximity and gaze jumps
• Search terms: Gestalt proximity · in-group spacing · between-group gap · grouping threshold