All principles

    04 · Seeing

    Law of Common Region

    Things inside a shared border read as a group.

    Evidence: Holds up

    What we do with it

    1. 01

      A border or a background color is the quickest way to say these belong together.

    2. 02

      Cards work because each card is its own region.

    3. 03

      Use it sparingly. Boxes inside boxes inside boxes stop meaning anything.

    Examples

    Getting it wrong, getting it right.

    Don't

    A pricing table where every feature row runs the full width with no column boxes. People can't tell which plan a checkmark belongs to.

    Do

    Each plan sits in its own panel. The features inside it belong to it, and nobody has to trace a row across the page.

    The evidence

    What the research says.

    Evidence: Holds up

    Stephen Palmer showed in 1992 that a shared boundary groups things strongly, strongly enough to override closeness: two dots far apart inside one box read as a pair before two close dots in separate boxes.

    A second look

    Is your product breaking one of these?

    Most teams can't tell from the inside. Send us the page or the flow that's not working, and we'll tell you which of these we'd look at first.

    Email hello@synergyprod.com