What is the law of proximity?
The law of proximity is one of the Gestalt principles of perception, set out by the psychologist Max Wertheimer in 1923. It states that elements close to each other are perceived as related, even when they look nothing alike. Show people twelve dots in three tight clusters and they see three groups, not twelve dots.
Interface design borrowed the principle because it describes something users do automatically. Nobody reads a form or a product grid one element at a time. They scan, and the first thing their eyes pick up is the arrangement: which blocks sit together and where the gaps fall. Get the gaps right and the layout explains itself. Get them wrong and no amount of labelling quite fixes it.
Why proximity matters in UX design
Spacing does three jobs at once. It groups related items, separates unrelated ones, and sets the order in which people read. A label 4 pixels above its input belongs to that input; the same label 24 pixels above, and 8 pixels below the previous field, appears to belong to the wrong one.
That is why proximity problems feel vague to users. They rarely say "the spacing is wrong". They say the page is confusing, cluttered or hard to follow, and they make small mistakes: typing a phone number into the email field, tapping the button for the wrong plan, missing the price because it sits closer to the next product than to its own.
Law of proximity examples
Forms
Each label sits directly above its field, with help text just below. The space between one field group and the next is clearly larger than the space inside a group. Related groups (contact details, delivery address, payment) are separated by a bigger gap again, often with a small heading. Users read each label and field as a pair and each block as a step, without needing boxes or lines.
Product cards
Image, product name, price and "Add to cart" button sit tight together, with a clear gutter between one card and the next. If the card's inner padding is bigger than the gap between cards, neighbouring products start to merge and people misread which price belongs to which item.
Navigation menus
Main navigation links sit together; account, cart and search sit in a separate cluster at the other end of the header. In large dropdown menus, links are grouped into short columns under small headings so a list of thirty items reads as five groups of six.
Headings and paragraphs
A heading should be closer to the paragraph it introduces than to the paragraph above it. When the space above and below a heading is equal, the heading floats between sections and the reader has to work out where it belongs.
How to apply the law of proximity in UI design
- 01Set a spacing scale, such as 4, 8, 16, 24, 32, 48 and 64 pixels, and use only those values. Our post on product design principles explains why a fixed scale matters.
- 02Apply the inner-outer rule: the space inside a group must always be smaller than the space around it. For example, 8 pixels between a label and its field, 24 between fields, 48 between sections.
- 03Group content by what users need together, not by how the company is organised. Price, key benefit and action belong side by side.
- 04Use a background colour or a card when proximity alone is not enough, for example on a busy dashboard. A tinted panel is a strong grouping cue, so use it sparingly.
- 05Remove dividers and borders where you can and widen the gap instead. White space separates without adding visual noise; keep lines for tables and tight spaces.
- 06Test with a blur. Zoom out or squint until you cannot read the text. The blocks you see should match the groups you intended. If they do not, change the spacing, not the copy.
Proximity in graphic design
The same rule works on print and brand material. On a business card, name and job title sit together, contact details form a second group, and the logo stands apart. On a poster, the event name, date and venue cluster so they can be read in one glance from across a room. In a logo lock-up, the tagline sits close enough to the wordmark to belong to it, but with enough space that each stays legible at small sizes.
Proximity and the other Gestalt principles
Proximity rarely works alone. These related principles either reinforce it or, when they conflict, override it.
| Principle | What it says | How it interacts with proximity |
|---|---|---|
| Similarity | Elements that look alike (colour, shape, size) are seen as related | Can group items that are far apart, such as all red sale badges on a page |
| Common region | Elements inside the same boundary are seen as a group | Usually stronger than proximity: a card border groups its contents even if spacing is uneven |
| Continuity | Elements arranged on a line or curve are seen as connected | Helps steppers and timelines read as one sequence |
| Closure | The eye completes incomplete shapes | Lets you group with partial outlines or implied edges |
| Figure-ground | People separate an object from its background | Explains why modals and overlays read as one layer |
Common region was added to the list by the psychologist Stephen Palmer in 1992. In practice, it is the reason a card or tinted panel can rescue a layout whose spacing is not quite right, and why too many panels make every group look equally important.
Common proximity mistakes
- Equal spacing everywhere, so nothing is grouped and the page reads as a long, flat list.
- A button placed closer to the wrong form or card than to its own.
- Cards with more padding inside than the gap between them, so neighbours merge.
- Captions and legal text that sit closer to the next section than to the content they describe.
- Layouts from AI tools and templates taken as they are. They are usually aligned neatly but spaced evenly, so the first manual pass should tighten groups and widen the gaps between them.
Spacing problems are also one of the visual mistakes covered in 5 UI design mistakes to stop making.
Sources
- Max Wertheimer, Laws of Organization in Perceptual Forms (1923), the original statement of the Gestalt grouping principles
- Stephen E. Palmer, Common Region: A New Principle of Perceptual Grouping, Cognitive Psychology (1992)
- Jon Yablonski, Laws of UX: Law of Proximity (lawsofux.com)
Common questions
- What is the law of proximity in simple terms?
- Things placed close together look related, and things placed far apart look unrelated. Designers use distance to show which elements belong together, before anyone reads a word.
- What is an example of the law of proximity?
- A sign-up form where each label sits directly above its field, with more space between field groups than inside them. Users read each label and field as a pair, and each block of fields as one step, without needing lines or boxes.
- Is the law of proximity the same as white space?
- No. White space is the tool and proximity is the effect. You create groups by varying white space: less inside a group, more between groups.
- How does proximity affect conversions?
- When the price, the main benefit and the button sit together, the decision is easy to make. When they are scattered, visitors have to search, and some give up. Fixing grouping is one of the cheapest changes in a redesign.
- What is the difference between proximity and similarity?
- Proximity groups elements by distance; similarity groups them by appearance, such as colour or shape. Similarity can link items that are far apart, while proximity links items that are close even if they look different.
- Who came up with the law of proximity?
- It comes from Gestalt psychology. Max Wertheimer described proximity, similarity and the other grouping principles in 1923, and designers later adopted them as rules for layout.
