Elements sharing an enclosing boundary are perceived as one group
Aliases: shared enclosure · region grouping
What it is
As soon as a set of elements sits inside the same bounded area — a shaded panel, an outlined box, a card with a drop shadow — people see them as one group, regardless of how far apart or how different-looking those elements are. This cue is called common region.
It is not the same claim as "a border is just decoration." Once a border actually encloses a recognizable area, it changes how the contents get grouped directly — it is a grouping signal in its own right, not a cosmetic layer on top of grouping decided by other means.
Why it happens
Cues like proximity and similarity require the visual system to compare pairs of elements against each other — is this one closer, does that one look alike. Common region skips that comparison: the system only has to decide which enclosed area a given element falls inside, which is a more basic figure–ground segmentation question rather than a relational judgment between elements.
Because common region operates at the earlier step of carving the display into regions in the first place, whatever grouping that step produces is treated as settled. Checking whether spacing or appearance is consistent within a region happens afterward, as a refinement inside an already-drawn boundary — it does not get to overturn the boundary's own grouping.
Studying it
The classic demonstration uses pairs of dots: lay them out so spacing alone suggests one grouping, then overlay ovals or boxes so the actual enclosed pairs contradict what the spacing implies. Participants report, via forced choice, which dots they see as belonging together — and the report tracks the enclosing shape, not the spacing.
The design only changes one variable at a time — whether an enclosing boundary is present — while spacing and color stay fixed. That isolation is what lets the resulting shift in grouping be attributed to common region itself rather than some other visual difference riding along with it.
Where it stops holding
The boundary has to be genuinely legible: low-contrast fills, hairline strokes, or a soft gradient that never actually closes will weaken the effect or make it collapse into ordinary background decoration.
The classic demonstrations use plain dots. Interface elements already carry their own visual weight from text and icons, so whether common region still cleanly overrides other cues in a busy real layout needs checking against that specific layout rather than assumed from the simple-stimulus result.
Applying it
- To signal "these controls belong together" without relying on pulling groups apart in space — especially when a grid constrains how much spacing you can vary — add a background fill or a card outline; common region can carry the grouping on its own.
- Leave enough contrast margin on the boundary so it reads as an enclosed area under the actual color theme in production, dark mode included, not just against the default background in the design file.
- To verify: strip the background fill or card outline and show only the bare elements to someone unfamiliar with the design, then ask which items belong together. A changed answer confirms common region was doing independent grouping work rather than riding on spacing or another cue.