Law of Common Region
Elements enclosed by the same visible boundary tend to be perceived as a group, even when other grouping cues compete.
Direct explanation
What it means
A card, fieldset, shaded band, or outline tells the eye that its contents share a local context. The boundary must be perceivable without becoming visual clutter.
Region is a strong way to make dashboard modules, settings scopes, and form sections legible, but excessive containers fragment a page into unrelated boxes.
Research anchor: Stephen E. Palmer, 1992
Research and interpretation
What the research found
Palmer found that enclosure grouped elements and could compete with proximity and similarity under controlled display conditions.
Common region remains a well-supported principle in perceptual-organization research and is used in display design.
Popular advice versus careful use
Common shorthand: Putting content in cards automatically improves organization.
Use the fewest perceptible regions that accurately express content scope and reinforce them semantically.
How designers apply it
- 01
Enclose billing fields within one semantically labeled fieldset.
- 02
Separate live metrics from historical comparison in a dashboard.
- 03
Use a subtle selected region to show which canvas objects will move together.
Original UI examples
desktop dashboard
Incident dashboard
Active incident facts sit in a tinted region above longer-term service metrics.
Operators can distinguish current scope from background evidence at a glance.
mobile form
Address form
Delivery fields share a labeled fieldset and billing appears in a second one only when different.
The grouping communicates scope visually and to assistive technology.
A profile settings page
Less effective
Put every label and input in its own bordered card.
Better fit
Use one region for identity, one for security, and whitespace within each group.
A boundary should express a real relationship, not decorate every element.
Limits and failure modes
Grouping strength depends on competing cues, boundary salience, figure-ground organization, and task.
Common mistakes
- Using cards for unrelated content simply to create a uniform grid.
- Drawing a visual region without matching headings or semantics.
When it should not dominate
- When one continuous comparison should remain visually uninterrupted.
- When nested containers obscure the page hierarchy.
Responsible use
Accessibility
Back boundaries with headings, landmarks, fieldsets, or group roles; ensure the region remains distinguishable in high contrast and without color.
On mobile: Prefer low-chrome regions and clear headings so borders do not consume the narrow viewport.
Ethics and context
Use the principle to reduce unnecessary effort and improve comprehension. Validate the result with representative users rather than treating a general tendency as a universal instruction.
On desktop: Use regions to organize wide canvases, but preserve a clear primary reading path.
Designer checklist
- Name the relationship the boundary represents.
- Check DOM grouping against visual grouping.
- Remove containers that add no scope information.
Check your understanding
Which statement applies Law of Common Region most carefully?
Practice and continue learning
Sources and further reading
- 01Open source
Common Region: A New Principle of Perceptual Grouping
Stephen E. Palmer · 1992 · Cognitive Psychology
Primary research · primary or original source
- 02Open source
A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure–Ground Organization
Johan Wagemans, James H. Elder, Michael Kubovy, Stephen E. Palmer, Mary A. Peterson, Manish Singh, Rüdiger von der Heydt · 2012 · Psychological Bulletin
Peer reviewed review
Continue the graph
Related principles
principle
Law of Proximity
Elements placed nearer one another tend to be perceived as related, especially when the spacing pattern is consistent and other cues do not override it.
principle
Law of Uniform Connectedness
Elements joined by a visible continuous connection tend to be perceived as one unit or as more strongly related than unconnected elements.
principle
Figure-Ground Principle
Visual perception organizes a scene into a focal figure and surrounding ground, with contrast and boundaries influencing which region receives focus.