Key takeaways
A border, a card or a background behind a set of elements groups them at a glance.
A boundary is one of the cheapest ways to separate content from its surroundings.
Origins
Common region is one of the Gestalt principles of grouping, which describe how the mind organises what it sees into patterns. The psychologist Stephen Palmer added it to the classic list in 1992, showing that elements enclosed in the same region are seen as belonging together, even when other cues such as proximity point elsewhere. The Gestalt school, formed in early twentieth-century Germany, argued that we perceive wholes rather than isolated parts.
In practice
- Use cards, panels or tinted backgrounds to group related fields in a form.
- Keep nested regions to a minimum: a box inside a box inside a box reads as noise.
- Let an element outside the region read as separate: a primary action, a warning.
Further reading
- Design Principles: Visual Perception And The Principles Of Gestalt — Steven Bradley | Smashing Magazine
- Law of Common Region on Laws of UX — Jon Yablonski
The illustration is our own, drawn after the idea of this law’s card in Laws of UX by Jon Yablonski.
