Elements read as one group only when they sit closer to each other than to the next group

What it is

This is the direct layout translation of proximity: for a set of elements to read as one group, the spacing between neighbors inside that group has to be smaller than the spacing to the next group. The rule itself is easy to state; the hard part is how much smaller is enough — merely "smaller" is not sufficient, it has to be smaller by a margin that's obvious.

Why it happens

Grouping isn't an all-or-nothing call triggered once spacing drops below some fixed value — it varies continuously with the distance ratio: a bigger ratio makes the grouping perception more certain and more consistent across viewers, while a small ratio leaves grouping ambiguous, inconsistent between viewers, and even unstable for the same viewer staring at it over time. This is why "within-group smaller than between-group" is a necessary condition but not a sufficient one — a margin that's only barely smaller produces a shaky, marginal grouping rather than a clear one.

Studying it

This conclusion originally comes from systematic measurement on dot-lattice displays: keeping the dot arrangement fixed and varying only the ratio between the near and far spacing, then having observers report or choose the perceived grouping and plotting agreement rate against that ratio. The resulting curve rises smoothly, with no sharp inflection point marking "past this value, grouping becomes stable" — only a general trend where a larger ratio produces more consistent judgments.

For interface design this means there's no universal minimum spacing ratio that works everywhere; whether a given layout's ratio is "obvious enough" ultimately has to be confirmed by having people actually look at the layout and report what they perceive, not by applying some generic ratio constant.

Where it stops holding

The relationship is about ratio, not absolute pixels: in a small, dense list an 8px vs. 16px difference may already be clearly discriminable, while the same pixel difference in a large, sparse layout may be imperceptible. Judgments need to be scaled to that layout's own density; a single spacing-ratio number can't be carried over between interfaces of different density.

When a layout carries nested grouping (large groups made of smaller subgroups), each level needs its own within-group/between-group spacing relationship, and the outer level's between-group spacing needs to be clearly larger than the inner level's within-group spacing — otherwise the two levels of grouping interfere with each other and become hard to read correctly at the same time.

Applying it

• Don't settle for "within-group value is numerically smaller than between-group value" — make the ratio gap large enough to be discriminable at a glance; a marginal difference is effectively no difference.
• For nested grouping, check the spacing ratio at each level from outer to inner, making sure the outer spacing is clearly larger than the inner spacing rather than squeezing every level into a similar numeric range.
• When scaling or responsive layout changes element size, scale spacing proportionally rather than keeping it at a fixed pixel value — a fixed pixel value breaks the ratio relationship once the layout is rescaled.
• To verify, shrink a screenshot of the layout down and then back up, or glance at it quickly with eyes half-closed; if the grouping still reads clearly under that crude viewing, the ratio gap is large enough.

Related

• Same group: A2.01.1 nearby elements are perceived as one group · A2.01.2 proximity beats color and shape similarity · A2.01.3 inconsistent spacing creates unintended grouping
• Nearby: A2.07 common region · A2.10 conflict and priority among Gestalt principles
• Search terms: proximity ratio · spacing scale · dot lattice grouping