vocab.design

layout

Common region

also called law of common region (community), Gestalt common region (nngroup), container grouping (community)

The grouping principle that anything inside a shared boundary reads as one group, strong enough to beat how far apart the items actually are.

Draw a line around some things and they become one thing. That is the whole principle, and it was the last of the Gestalt grouping laws to be described, by Stephen Palmer in 1992, because it is so obvious that it took a while to notice it was doing work. A border, a shared background, a card, or a panel all state the same claim: whatever is inside this edge belongs together, and whatever is outside it does not.

What makes common region worth naming separately is that it wins. Put six items in a row at equal spacing, draw a box around the first three, and no amount of gap between items two and three will pull them apart again. Enclosure outranks nearness, which is why it is the tool for grouping things you are not allowed to move: a settings page whose sections are fixed in order, a form whose fields cannot be resequenced, a dashboard where the tiles are placed by the reader. Proximity can only group by rearranging, so where the arrangement is out of your hands, the boundary is the only lever left.

The cost is ink. Every boundary is a line the reader has to look past to get to the content, and a page that draws one around each of nine things has spent its whole visual budget on saying that nine things exist. This is what the flat era was reacting to when it deleted the boxes, and the compromise that survived it is the softest boundary that still reads: a background tint with no stroke at all, or a hairline where the tint would clash with the content. Nielsen Norman Group’s write-up of the principle makes the same point from the other side, that a container is a strong signal and strong signals should be spent rarely.

The rule that follows is to pick one grouping device and let it be the only one. Spacing, enclosure, and a shared colour all say the same sentence, and saying it three times is how a page ends up loud. Reach for the region when the grouping has to survive an arrangement you do not control, when a group must be interactive as a unit (a card is a common region you can click), or when two groups must sit side by side with no room for a gap between them. Otherwise let the whitespace do it, and keep the boundary in reserve.

Which word?

If you wantsay
when a container has to beat the spacingcommon region
arguing that spacing, not lines, makes groupsproximity
grouping controls with a visible boundarybox

Sources