On this page
The law
Elements placed inside the same clearly bounded area are seen as one group.
A border, a background colour or a card edge is enough. The boundary can even override other cues: two items far apart inside one box read as a pair, while two items close together but in different boxes read as separate.
Where it comes from
Stephen Palmer, a perception researcher at the University of California, Berkeley, described the principle in Common region: A new principle of perceptual grouping, published in Cognitive Psychology in 1992. The classic Gestalt principles from the 1920s covered proximity, similarity and continuity, but not enclosure.
Palmer showed participants rows of dots with ovals drawn around pairs of them. People grouped the dots by the ovals, even when that grouping went against proximity, pairing dots that were further apart because they shared a region. He argued that common region is a separate grouping principle, not a special case of the older ones.
What it means for an interface
- Cards group what is inside them. A card's edge tells people that its image, title, price and button belong to the same item.
- Boundaries beat spacing. When a boundary and spacing disagree, the boundary usually wins. Check that every bordered area holds exactly one group.
- Use regions to separate sections. A shaded panel for filters or a boxed summary in a checkout separates content without needing large gaps.
- Do not box everything. Nested boxes inside boxes create visual noise and make the hierarchy harder to read. Use the lightest boundary that does the job.
Examples
Product cards. In a product grid, each card's border or background keeps the product's name and price together, so people never attach a price to the wrong product.
Settings pages. Settings grouped into bordered sections, such as Account, Notifications and Privacy, are scanned section by section rather than as one long list.
Form fields. An input box is itself a common region. The label sits outside and the value inside, which is why labels placed inside the box as placeholders can be mistaken for content.
Where it is misapplied
- Box soup. Cards inside cards inside panels flatten the hierarchy, because every boundary claims the same importance.
- Boundaries that split groups. A border drawn between a label and its control breaks the pair apart.
- Invisible regions. Very faint backgrounds may not register for people with low vision or on low-quality screens. A region must be perceivable to group anything.
- Replacing hierarchy. A region groups items; it does not say which group matters most. Size, weight and position still have to do that.
Checklist
- Each bordered or shaded region contains one group and only one group.
- No boundary separates a label from the control it labels.
- Nesting is limited to two levels of regions.
- Region boundaries are visible in both light and dark themes.
- Section importance is still shown by type and position, not by boxes alone.
Related
- Law of Proximity: spacing groups items when no boundary is drawn.
- Law of Uniform Connectedness: a connecting line or surface groups even more strongly.
- Law of Similarity: items that look alike are grouped across regions.
- Patterns: Accordion.