Perception

Law of Common Region

Elements that sit inside the same clearly bounded area are perceived as a group, even if they are not otherwise similar.

Experience · UX & Design Science1 research source
Share
Dots perceived as groups because they share bounded regions — an illustration of Law of Common Region.

See it in action

The same screen without and with Law of Common Region. Watch both sides play out, then compare the outcome.

Items share one open areaChoose a planBasic₹1991 userPlus₹4993 usersTeam₹99910 usersSelectSelectSelect

Without boundaries the prices, features and buttons drift together — which “Select” goes with which plan?

Each plan in its own cardChoose a planBasic₹1991 userPlus₹4993 usersTeam₹99910 usersSelectSelectSelect

A shared background turns name, price and button into one object, so the choice is instant and unambiguous.

What to watch: the moment the cards appear, each price and button visibly belongs to one plan.

Do

Put related content inside a shared container — a card, panel or tinted background.

Don’t

Rely on alignment alone when several groups sit side by side.

Key takeaways

  • Use cards, panels and backgrounds to group related content.
  • A visible boundary can override proximity and similarity cues.
  • Too many nested boxes add noise — group only what truly belongs together.

Quick facts

Also known as
—
Described by
Stephen Palmer
Year
1992
Category
Perception

Law of Common Region explained

The Law of Common Region is a Gestalt principle stating that elements placed within the same bounded area are perceived as a group. A border, background colour or card around items tells the eye that they belong together.

Common region is so strong that it can override other grouping cues. Items that are far apart but share a container read as related, while items that are close together but in different containers read as separate.

In interfaces, cards, panels, sections and table rows all use common region to create structure without relying on extra labels.

Where it comes from

Added to the Gestalt principles of perceptual grouping by cognitive psychologist Stephen Palmer in 1992, building on the classic Gestalt work of the 1920s.

How it shows up in apps

Cards on a feed, grouped settings sections and pricing tier boxes all rely on common region to tell users what belongs together and what they're comparing.

Law of Common Region examples

Wrapping each pricing plan's name, price, features and button in its own card makes the three plans instantly comparable as units.

  • Product cards

    E-commerce grids place each product's image, name, price and rating inside a card, so shoppers immediately know which details belong to which product.

  • Settings sections

    Mobile settings screens group related toggles in rounded panels with headings, making long lists of options easy to scan.

  • Pricing tiers

    Pricing pages put each plan's price, features and button inside its own column or card, and highlight the recommended plan's container to make it stand out.

How to apply Law of Common Region

  1. Use cards, backgrounds or borders to group content that belongs to the same object or task.
  2. Keep the visual treatment of containers consistent across the product.
  3. Use common region to separate distinct sections of complex screens such as dashboards.
  4. Avoid nesting too many containers inside containers, which creates visual noise.
  5. Combine common region with proximity and headings for clear hierarchy.

Want Law of Common Region checked in your own product? Our mobile app ux audit evaluates it alongside the other principles that shape how users decide, onboard and stay.

Common mistakes

  • Putting unrelated items in the same card, which signals a relationship that does not exist.
  • Boxing everything, so containers lose their meaning and the interface feels heavy.
  • Using borders and backgrounds that are too faint to read as grouping, especially for users with low vision.

How to measure it

In usability tests, ask users which items they think belong together or test whether they attribute information (such as a price) to the correct item. Card sorting and first-click tests reveal whether visual grouping matches users' mental model.

Frequently asked questions

What is Law of Common Region?

Elements that sit inside the same clearly bounded area are perceived as a group, even if they are not otherwise similar.

Where does Law of Common Region come from?

Added to the Gestalt principles of perceptual grouping by cognitive psychologist Stephen Palmer in 1992, building on the classic Gestalt work of the 1920s.

How does Law of Common Region apply to app design?

Cards on a feed, grouped settings sections and pricing tier boxes all rely on common region to tell users what belongs together and what they're comparing.

Who described the Law of Common Region?

Psychologist Stephen Palmer described common region as a grouping principle in 1992, extending the original Gestalt principles of perception.

What is the difference between common region and proximity?

Proximity groups items by closeness; common region groups items by a shared boundary. A clear boundary can group items even when they are not close together.

How do you measure Law of Common Region in a product?

In usability tests, ask users which items they think belong together or test whether they attribute information (such as a price) to the correct item. Card sorting and first-click tests reveal whether visual grouping matches users' mental model.

Sources

  1. Palmer, S. E. (1992). Common region: A new principle of perceptual grouping. Cognitive Psychology, 24(3). Find on Google Scholar ↗

View all 60 laws of UX

Keep exploring

Law of Common Region in practice

Keep exploring

Certifications that test it

Pass it on

Teach this to your team

Share it before your next design review — a shared vocabulary makes product decisions faster.

Join free

Get the ideas, not the noise.

Sign up with Google and we’ll send you short UX psychology tips by email — why people tap, stall and leave, and what to do about it. Unsubscribe anytime. Prefer something to keep? Get the free Laws of UX guide as a PDF.

Get the free Laws of UX PDFFree · no spam · unsubscribe anytime
Free certification

Can you apply Law of Common Region under pressure?

Test it in 18 real product scenarios in the free Product Design Science test. Score 70% and earn a founder-signed certificate anyone can verify.

  • Credential ID
  • QR verification
  • LinkedIn-ready
Free PDF · 74 pages · 2 editions

The Laws of UX, in one field guide

60 research-backed principles in 6 categories — what each one means, why it works on the human brain and how to use it on your own screens. Written by Sushant Singh, founder of Science of Apps, who has scaled consumer apps to lacs of users and spent 10+ years leading product across startups and digital businesses in the US, EU & India.

Pick your edition
Free. No card, no paywall — just your email.
Free PDF · 74 pages

Get Laws of UX by email

Choose your edition

You’ll also get occasional UX psychology tips. Unsubscribe anytime. Privacy policy

Free PDF · 90 pages · 2 editions

100+ Subscription Paywalls, decoded

110 real paywalls from top apps, taken apart, rated out of 5 and decoded with the Laws of UX — plus the frameworks, copy and checklists to ship your own. By Sushant Singh, founder of Science of Apps.

  • 110 paywalls rated
  • 34 Laws of UX
  • 12 frameworks

Which paywall scored 4.8 out of 5, and which scored 2.6? It’s all inside.

Pick your edition
Free. No card, no paywall — just your email.
Free PDF · 90 pages

Get 100+ Paywalls, Decoded by email

Choose your edition

You’ll also get occasional UX psychology tips. Unsubscribe anytime. Privacy policy