Common Region
A shared boundary or background binds elements together more strongly than proximity does.
Definition
Identified by Stephen Palmer in 1992 as an addition to the classical Gestalt principles. Elements within a common enclosed area are perceived as a group, and enclosure overrides proximity when the two conflict.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this plate
Reach for this when
- Grouping content that the grid separates.
- Deciding between a card, a divider and plain space.
- Reviewing a layout that reads as a wall of boxes.
Common mistakes
- Cards used as the default container for everything.
- Nested containers with competing boundaries.
- Inconsistent internal padding, which breaks the region.
- Reaching for a card when additional space would have grouped the content just as clearly.
The strongest grouping tool available
Because common region beats proximity, a border or background can bind elements the grid cannot bring together. This is the mechanism that makes cards work, and it is why an inconsistently padded card breaks a grid so noticeably.
It is also why enclosure should be used sparingly. Every container adds a visual boundary, and a page of nested containers becomes a set of boxes competing for the same grouping signal.
Ways to establish a region, quietest first
- Whitespace alone, which creates an implied region with no added marks.
- A subtle background tint, one step from the page surface.
- A hairline border, which is precise but adds a visible line.
- Elevation through shadow, which implies a separate surface and should be reserved for things genuinely above the page.
- A full card with border, background and shadow, which is the loudest and most overused option.
Ways to bound a region, from quietest to loudest
| Technique | Strength | Cost |
|---|---|---|
| Extra space around the group | Moderate | None. Try this first |
| A faint background tint | Strong | One more surface colour to maintain |
| A hairline divider | Moderate | Adds a line to every theme and every state |
| A bordered panel | Strong | Visual weight, and it competes with real cards |
| A card with elevation | Strongest | Implies the contents are one object, and often a clickable one |
In practice
- i.
Fieldset grouping
Long formsA subtle background behind a group of related fields communicates the grouping faster than a heading alone, and it survives at a glance.
- ii.
Card overuse
DashboardsA dashboard where every element is a card produces a grid of boxes with no hierarchy. Removing the containers from secondary content lets the primary cards mean something again.
- iii.
Cards inside cards
Region inflationA card containing three cards, each with its own border and shadow, communicates four levels of grouping where the content had two. The nesting is visible, the meaning is not.
Local chart
FND·006 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Common region: a new principle of perceptual grouping
S. E. Palmer, Cognitive Psychology, 1992
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Short definition
The one-paragraph version, for when that is all you need.
- Gestalt PrinciplesTERM·056 · Term
Related concept
Connected closely enough to change how you apply this.
- Borders and DividersFND·047 · UI foundation
- ContainersFND·041 · UI foundation
- DensityFND·016 · UI foundation
- ElevationFND·048 · UI foundation
- Figure and GroundFND·009 · UI foundation
- ProximityFND·004 · UI foundation
- WhitespaceFND·015 · UI foundation