Laws of UX
Law of Common Region
Elements inside the same visible boundary are perceived as one group.
Where it comes from
It's a Gestalt principle, formalised later than the original set by the perceptual psychologist Stephen Palmer in 1992. It holds that elements sharing a clearly bounded area are perceived as a group — even overriding how close or far apart they are.
Why it matters for your website
Enclosure creates belonging. The Law of Common Region says elements inside the same boundary — a card, a panel, a box — are automatically read as related. Without visual containers, related items feel disconnected and the whole page reads as harder work.
A border, a background fill, or a card is a stronger grouping signal than spacing alone. Draw a boundary around a set of elements and the eye reads them as one unit, no matter how they're arranged inside it. This is why cards have become the dominant way to organise modern interfaces: each one is a self-evident container that says 'these things belong together'.
The flip side is that boundaries are powerful enough to override your other cues. Two related items split across separate cards will read as unrelated, however close they sit; two unrelated items sharing a box will read as a pair. Containers should be drawn around the groupings you actually mean.
Wrong vs right
A form mixing several unrelated sections with no visual separation, so it's unclear where one topic ends and the next begins.
Each section enclosed in its own panel or card, so the groupings are immediately legible.
A label and its input split across the edge of two adjacent cards, so they read as belonging to different groups.
Each label kept inside the same boundary as its field, so the pairing is unambiguous.
Related summary figures scattered across a layout with no container tying them together.
The figures gathered into a single bounded panel, so they read as one related set.
Understanding Law of Common Region
The Law of Common Region states that elements enclosed within the same visible boundary are perceived as a group. A shared border, background colour, or container shape creates a region, and everything inside that region is read as belonging together. It's one of the strongest grouping cues the mind uses — strong enough to override proximity, so a boundary can unite distant elements or separate close ones.
This is the perceptual basis for one of the most common patterns in modern design: the card. A card is simply a common region — a bounded area that bundles related content and actions into a single, self-contained unit. Panels, sections with background fills, bordered tables, and modal dialogs all work the same way, using enclosure to declare 'this is one group'.
Because common region is so dominant, it has to be used deliberately. A boundary is a strong claim about belonging, so drawing one around the wrong set — or splitting a natural pair across two containers — actively misleads the eye. Used well, enclosure lets a complex page organise itself into clear, digestible units. It works hand in hand with proximity and uniform connectedness.
How Kweri checks it
Kweri can observe how a page uses containers, borders, and background regions to group content, and flag layouts where related elements appear split across boundaries or where unrelated ones are enclosed together. As with the other grouping laws, the tool doesn't always know your intended structure, so it treats ambiguous cases as prompts: it points out where the boundaries on the page may be sending a grouping signal that doesn't match the content, and asks you to confirm the regions are drawn around the right sets.
FAQ
What is the Law of Common Region?
The Law of Common Region is a Gestalt principle stating that elements inside the same boundary — a card, box, or shared background — are perceived as a group. Enclosure is a powerful grouping cue that can override distance.
Why are cards so common in web design?
Because a card is a common region: a bounded container that visually bundles related content and actions into one unit. The enclosure makes the grouping self-evident, which is why cards are a dominant way to organise modern interfaces.
How is common region stronger than proximity?
A shared boundary can group elements even when they're far apart, and separate elements even when they're close. So a border or background fill overrides spacing — making common region one of the most decisive grouping cues.
How do I use the Law of Common Region?
Enclose elements that belong together within a shared boundary — a card, panel, or background fill — and keep unrelated elements in separate regions. Make sure natural pairs, like a label and its field, sit inside the same boundary.
What's the risk of using containers carelessly?
Because enclosure is such a strong signal, a boundary drawn around the wrong items will mislead users into seeing a relationship that isn't there — or splitting a real pair across two containers will hide a relationship that is. Draw regions around the groupings you actually mean.
Related principles
Things placed close together are seen as related; things spaced apart are seen as separate.
Elements visually connected by lines, borders, shared colour, or enclosing shapes are perceived as more related than those with no connection.
Space around and between elements is not wasted — it creates hierarchy, grouping, and focus.
Attribution & sources
Identified by Stephen Palmer (1992). Catalogued from Laws of UX (Jon Yablonski).
A Gestalt grouping principle formalised by Stephen Palmer; popularised for designers by Jon Yablonski's Laws of UX.
See Law of Common Region on your own site
Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.
Run a free audit →