Law of Proximity

The law

Things that sit close to each other are seen as belonging together.

People do not decide this consciously. Grouping by proximity happens as part of seeing, before anyone reads a label.

Where it comes from

Max Wertheimer described proximity as one of the principles of perceptual grouping in Untersuchungen zur Lehre von der Gestalt II, published in Psychologische Forschung in 1923. An English translation, "Laws of organization in perceptual forms", appeared in W. D. Ellis's A Source Book of Gestalt Psychology in 1938.

Wertheimer used simple arrangements of dots and lines. A row of evenly spaced dots looks like a row; the same dots spaced in pairs look like a row of pairs. He set out several such factors, including proximity and similarity, that decide how people organize what they see into groups. The paper is one of the founding texts of Gestalt psychology.

What it means for an interface

• Spacing is structure. The gap between elements is the first thing that tells people what belongs together. A layout with even spacing everywhere has no visible structure, whatever its headings say.
• A label belongs to its field. A form label should be closer to its own field than to the field above it, or people will read it as belonging to the wrong one.
• Space can replace lines and boxes. Clear gaps between groups often make borders and dividers unnecessary, which reduces visual noise.
• Proximity can override other cues. If two buttons sit together, people treat them as related even when they do different things. Keep unrelated actions apart.

Examples

Forms. A sign-up form where the space between a label and its field is smaller than the space between fields reads clearly as a set of pairs. When the spacing is the same everywhere, people have to read every label to know which field it names.

Cards. In a product grid, the image, name and price of one product sit close together inside the card, with a wider gap between cards. People take in each card as one item without needing borders.

Footers. A site footer with links grouped into columns, a little space within each column and more between them, is scanned by group even before the column headings are read.

Where it is misapplied

• Fighting the content model. Proximity only helps if the groups it creates match how the content is actually organized. Grouping by visual convenience rather than meaning misleads people.
• Using proximity alone for critical relationships. Spacing collapses on small screens and is lost for people using screen readers. Back up important groupings with headings, labels and markup, such as a fieldset.
• Ignoring the other Gestalt principles. Similarity, enclosure and alignment also create groups and can contradict proximity. Check that the cues in a layout agree.

Checklist

• Space within a group is clearly smaller than space between groups.
• Every label sits closer to its own field than to any other.
• Related actions are placed together; unrelated or destructive ones are set apart.
• The groups people see match the groups in the content.
• Important groupings also exist in headings and markup, not only in spacing.

Related

• Miller's Law: visual groups are the chunks people work with.
• Fitts's Law: keeping related controls close also keeps them quick to reach.
• Patterns: Accordion, Table of Contents.