What is the law of proximity?

In 1923 the psychologist Max Wertheimer described a set of rules for how we see patterns. One of them is proximity: when some dots in a row are closer together, we see pairs or clusters instead of a single line. Our visual system does this grouping instantly and without effort.

This makes proximity one of the strongest tools in layout design. Spacing alone can create structure that people understand at a glance — no lines, boxes or colours needed.

Why spacing matters so much

Visitors scan a page before they read it. In that first scan, the gaps between elements tell them how the page is organised. If the gaps are wrong, people connect the wrong things: a label with the field below it instead of the one above, or a price with the wrong product.

Other cues can override proximity. Elements inside the same box or background look grouped even when they are far apart — Stephen Palmer called this common region. Elements that look alike also group together (similarity). Good layouts make these cues agree instead of fight.

How to apply it on a website

  1. Keep labels close to their fields

    A label should be clearly closer to its own input than to the field above it. Put error messages right next to the field they describe.

  2. Use a spacing scale with two levels

    Pick a small gap for items inside a group and a larger one between groups — for example 8 px and 24 px. A ratio of about 1:2 or more is easy to see.

  3. Give headings more space above than below

    A heading belongs to the content that follows it. Equal space above and below makes it float between two sections.

  4. Group navigation links by topic

    Split long footers and mega menus into small clusters with clear gaps. This also helps with Miller's Law.

  5. Keep actions next to what they affect

    Put “Edit” and “Delete” inside the card they change, and the main button right after the form it submits.

  6. Keep product details together

    Name, price and key details of a product should form one tight block, clearly separated from the next product.

Common proximity mistakes

  • Even spacing everywhere. When every gap is the same, nothing looks grouped and the page feels like a long list.
  • Labels halfway between fields. People can't tell which field a label belongs to, so they fill in the wrong one.
  • Borders instead of space. Lines around every block add visual noise. Try more space first.
  • Buttons far from their form. A submit button pushed to the edge of a wide screen is easy to miss and slower to reach (Fitts's Law).

A quick test: blur your eyes or the screenshot until you can't read the text. The groups you still see are the groups your visitors will see.

How Lensux checks this

Proximity is judged visually, so Lensux covers it in the AI design-psychology review. It looks at a screenshot of your page and flags grouping problems — such as labels far from their fields or crowded sections — together with Gestalt cues like similarity and common region.

Frequently asked questions

What is an example of the law of proximity?

On a sign-up form, each label sits just above its own field, and there is a bigger gap before the next label. Without reading, you know which label goes with which field.

What is the difference between proximity and similarity?

Proximity groups things by the distance between them. Similarity groups things that look alike, for example by colour or shape. Both are Gestalt principles and work best when they point the same way.

How much space should there be between groups?

There is no fixed number, but the gap between groups should be clearly larger than the gap inside a group — at least about twice as large is a good rule of thumb.

Sources

  1. Wertheimer, M. (1923). Untersuchungen zur Lehre von der Gestalt II. Psychologische Forschung, 4, 301–350
  2. Palmer, S. E. (1992). Common region: A new principle of perceptual grouping. Cognitive Psychology, 24(3), 436–447
  3. Nielsen Norman Group — Proximity principle in visual design
  4. Laws of UX — Law of Proximity