Law of Common Region

Elements inside the same enclosed area are seen as a group.

How to apply it

Put related controls in one card, panel or tinted area, and keep one region per relationship.

Where Law of Common Region comes from

The principle was described by the psychologist Stephen Palmer in a 1992 paper in the journal Cognitive Psychology, "Common region: A new principle of perceptual grouping". It builds on the Gestalt idea that people see separate elements as groups, and adds that a shared boundary groups things even when they differ in shape, size or colour. It is one of several grouping principles, alongside proximity, similarity and continuity.

How to apply Law of Common Region, step by step

List what belongs together. Sort the controls by meaning first, and name each group.
Give each group one region: a card, a panel, a tinted band or a bordered box.
Keep one region per relationship. Avoid boxes inside boxes.
Make the regions quiet. A subtle fill or border keeps the focus on the content, not the frame.
Blur your screen or squint. You should still see the groups.

Law of Common Region in practice: a concrete example

Settings that group themselves

A flat list of six switches makes people read every label to work out what goes with what. Put the two notification switches in one card, the two privacy switches in another and the two security switches in a third, and the grouping is visible before anyone reads a word. iOS Settings does this by placing related rows inside rounded sections, and most card-based dashboards rely on the same idea.

Common Law of Common Region mistakes

Boxing everything. When every element has its own border or card, the regions stop meaning anything and the screen turns into noise.
Nesting boxes inside boxes inside boxes. One region per relationship is enough; extra frames add weight without adding meaning.
Using lines between rows as if they grouped. A divider between every row separates items; it does not tell people which ones belong together.
Grouping by looks while the meaning disagrees: two unrelated items sharing a card, or related items split across two, sends the wrong signal.

When Law of Common Region doesn't apply

In dense tables, long lists and data-heavy screens, a box around every group costs more than it gives. There, whitespace and alignment group items with less visual weight (see the Law of Proximity and the Alignment principle). A single clean list with consistent rows can also be right when the items really are one group.

How to tell you got it right

Blur the screen or squint at it. If the groups are still visible and each box holds one idea, the regions are working. If you can see a box with no clear reason for it, remove it.

Law of Common Region: common questions

What is the law of common region?

Elements inside the same enclosed area are seen as a group, even if they look different. A card, a panel or a tinted background tells people that the items inside belong together.

What is the difference between common region and proximity?

Proximity groups items by how close they are. Common region groups them with a boundary, such as a box or a background. Use proximity when spacing is enough, and common region when items sit close together but still need to be told apart.

What are examples of common region in UI?

Cards, settings sections, form fieldsets, pricing tables where each plan sits in its own box, a navigation bar with a shared background, and dialogs.

Can you use too many regions?

Yes. If everything has its own box, the boxes stop meaning anything and the screen gets noisy. One region per relationship is a good guide.

Who came up with the law of common region?

The psychologist Stephen Palmer described the principle in a 1992 paper in the journal Cognitive Psychology.

Practise it on a real challenge

Settings Screen — the switches that float on their own

A chat app's settings screen lists six switches in one flat list. Support keeps hearing that people turn off the wrong ones, and testers can't tell which switches belong together.