When two grouping cues disagree

Grouping is a vote, not a rule

Proximity, similarity and common region each push elements into groups. Most of the time they agree, and nobody has to think about it. The interesting cases — and almost every genuinely confusing layout — are the ones where two cues point at different answers, and you need to know which one wins.

A worked example. A form has eight fields in two visual columns. The labels sit close above their inputs, which groups by proximity. The designer then colours the four required fields' labels red, which groups them by similarity. A reader now sees two incompatible structures: four label-and-field pairs, and one scattered set of four red things. Both readings are available, the eye keeps flipping between them, and the form feels harder than it is.

The rough order of strength

Working from the experimental literature and from what survives on real screens, the cues rank roughly like this, strongest first:

1. Uniform connectedness. Elements that are physically joined — sharing a continuous region, a background patch, a border, or connected by a line — group before anything else. A box beats everything.
2. Proximity. Distance is the next strongest and the one you control most easily.
3. Similarity. Shared colour, shape, size or weight. Real, but it loses to both of the above.
4. Continuity. Elements that fall on a smooth path, especially a shared edge, read as a sequence.
5. Closure. The eye completes implied shapes and boundaries that are not drawn.
6. Common fate. Elements that move or change together group; only available where there is motion.

The practical consequence: you cannot fix a proximity error with colour. If a label is closer to the wrong field, making it the right colour will not rescue it. Move it. Conversely, if you need a group that distance cannot express — because the items are scattered across a table — reach for common region, not similarity, because a shared background patch is a stronger cue than a shared hue.

Continuity and closure are the ones you can exploit

These two are under-used, and they save ink.

Continuity means a list of items sharing a left edge reads as one column even when the gaps between them are large. That is why a well-aligned layout can afford generous space without falling apart, and why a ragged left edge forces you to compensate with boxes and rules you would not otherwise need.

Closure means you rarely need to draw every boundary. A table with no lines at all still reads as a table, because aligned columns imply the rules. The standard advice to remove every vertical rule from a table and most of the horizontal ones works because closure does the job for free, and because each line you remove is one fewer thing competing for the eye. Try it on your next table: delete all the rules, keep the alignment, add a single rule under the header row. It almost always improves.

Common fate appears in interfaces as shared motion. Items that slide in together are read as one set. This is why a staggered animation, where list items appear one after another, actively weakens the grouping it was meant to decorate.

A diagnostic

For each visual group you think exists, write down which cue is carrying it. Then look for the ones carried by a single weak cue.

card header + body     → common region (the card)        strong
filter chips row       → proximity + similarity           strong
required-field markers → similarity only                  weak
footer links           → proximity + continuity           adequate
related products       → similarity only, items scattered weak

The two weak rows are where readers will report confusion. The repair is to add a stronger cue, not a second weak one: put the related products in a bounded region, and move the required marker next to the thing it modifies.

When you want ambiguity

Occasionally two readings are both correct and you want both available: a grid of photographs that reads as rows and as columns, a table you might scan either way. Here the answer is to make the competing cues deliberately equal in strength — identical gaps in both directions, no boxes — so the ambiguity looks like a property of the content rather than an unresolved argument.

What fails is unequal competition: a 20px horizontal gap against a 24px vertical one. That is close enough that neither reading wins and far enough apart that the eye notices something is wrong. Either make them equal or make them obviously different.

The honest limitation

The grouping principles come from demonstrations made in Berlin in the 1910s and 1920s, and for most of their history they were exactly that: compelling pictures rather than measured laws. Later work has put numbers on some of them — proximity in particular behaves predictably as distances change — but the relative strengths above are a working ordering rather than a constant of nature. They shift with the display, the density and what the viewer is doing.

Treat them as a checklist for generating hypotheses about why a layout confuses people, and then test the layout on somebody. The checklist will point you at the right three candidates; it will not tell you which of the three it was.