Proximity

Definition

Proximity is the way your eye naturally bundles nearby elements into a single group. When you pull related things tightly together and push unrelated things clearly apart, it becomes obvious which items belong to the same set, even without a heading or a divider line to spell it out. In a form, for example, placing a label right above its input makes the two read as one pair, and widening the gap before the next field quietly signals that a new item has begun. Distance alone carries the structure of the screen, which makes proximity one of the four Gestalt principles and arguably the most intuitive picture of how the eye actually works.

Why does it matter?

A screen usually holds a lot of information, and people scan it in chunks rather than reading every character. When proximity is handled well, the eye groups related items instantly and grasps the overall structure with far less effort. When every gap is identical and nothing tells you what pairs with what, users have to guess at the relationships themselves, and that small friction piles up field by field until the whole screen feels cluttered. The real strength of proximity is that it organizes information without adding a single line, box, or background color. The layout stays light while the relationships stay clear, and because the structure comes from spacing rather than decoration, it holds up as you add more elements, which makes it far easier to maintain and extend.

Common mistakes

• Giving every element the same gap. When spacing is uniform, group boundaries disappear, so items that should read as one set blur together with items that have nothing to do with them, and users have to re-decide where each chunk ends every single time.
• Reversing the distances by widening the gap between a label and its input while keeping the gap to the next item tight. The label then appears attached to the wrong input, the form is easy to misread, and that misreading can turn into an actual data-entry error.
• Reaching for divider lines to separate groups while leaving the spacing untouched. The more lines you add, the busier the screen gets, when in most cases adjusting the whitespace alone would have solved the relationship cleanly.

Practical tips

• Make the gap between groups clearly larger than the gap inside a group. Honoring this one contrast lets whitespace alone communicate exactly where each set ends, no lines or backgrounds required.
• When a relationship feels ambiguous, adjust the spacing before adding a divider or background color. If distance solves it, the screen stays lighter, and only when that still falls short do you layer on a minimal line.
• Do not pick gap values on the spot; choose them from a spacing scale you have defined in advance. Setting a fixed value for inner and outer gaps keeps group structure consistent across the whole screen, and when new items are added later the same rule applies unchanged, which makes the layout much easier to manage.

Related concepts