12 / UX Laws

Law of Common Region

Elements inside the same visible area tend to be perceived as a group.

Visual proof

A shared boundary can explain a relationship that spacing alone leaves unclear.

Story

A payment form places card details, billing address, and order summary in three clear regions. Before reading a label, people can see which controls belong to one decision and where the next part begins.

Origin

Stephen Palmer proposed common region as a perceptual grouping principle in 1992. His demonstrations showed that a shared region can overcome grouping cues such as proximity and similarity.

Field Rules

  • 01

    Place related elements on the same background or inside the same boundary when spacing does not make the group clear enough.

  • 02

    Use the smallest region that explains the relationship. Oversized containers can pull unrelated content into the same perceived group.

  • 03

    Keep nested regions to a minimum. Cards inside cards create competing boundaries and make the hierarchy harder to read.

  • 04

    Support the visual group with accessible structure. Headings, fieldsets, and labels should preserve the relationship beyond appearance.

Examples

Digital systems

A grouped settings panel

Notification controls share one region while account security sits in another. The boundaries make two different responsibilities visible before the controls are read.

Physical signals

A place setting

A placemat groups the plate, glass, and cutlery for one person. The shared area separates that set from similar objects nearby.

Application

The boundaries tell the wrong story

Related controls sit in separate containers, or unrelated content shares one card, so the visible grouping conflicts with the task structure.

Resolves with
Let regions match responsibility

Draw a boundary around content that belongs to the same decision, object, or task. Remove containers that do not explain a useful relationship.

Sources