Objects that are close to each other are perceived as related, while objects farther apart are perceived as separate.
Overview
Spacing is one of the simplest and most powerful tools in design. When elements sit close together, people automatically see them as a group. When there is more space between them, people see separate groups. This happens instantly, before people read a word.[1][2]
Proximity is how people know which label belongs to which form field, which caption describes which image, and where one section of a page ends and the next begins. Often, whitespace alone can create clear structure without lines, boxes, or color.[3]
Because proximity is so automatic, inconsistent spacing can easily send the wrong message, such as making a label appear to belong to the wrong field.
Why it matters
Poor spacing creates ambiguity, and ambiguity creates errors and slows people down. Clear spacing makes screens easier to scan, forms easier to complete, and dense information easier to understand.
Consistent spacing rules, defined in a shared design language, are one of the most effective ways to make all products feel organized and coherent.
Key takeaways
- Put related things close together and unrelated things farther apart.
- Labels should be closer to their own field than to any other field.[3]
- Use whitespace to separate sections before adding lines or boxes.
- Use a consistent spacing scale so that the same distance always means the same relationship.
- Proximity usually beats similarity. Items placed together are seen as a group even if they look different.[1]
- Reflect groupings in markup. Use headings, lists, and fieldsets so the grouping is also available to assistive technology.[4]
In practice
Common patterns in business applications, portals, and internal tools:
Supports the principle | Undermines the principle |
|---|---|
Labels placed directly above or beside their fields with tight spacing. | Labels equally distant from the field above and below. |
More space between form sections than between fields within a section. | Uniform spacing throughout, so sections blur together. |
Action buttons placed close to the content they affect. | Buttons far from the content, near unrelated elements. |
Spacing values drawn from a shared scale. | Arbitrary, inconsistent spacing between similar elements. |
Captions close to their images or charts. | Captions equidistant between two images. |
Questions to ask in a design review
- Is it immediately obvious which label goes with which field or value?
- Do spacing differences reflect real differences in relationship?
- Could we remove a line or box and use spacing instead?
- Are we following the shared spacing scale?
Origin
The principle is one of the Gestalt laws of perceptual organization, developed in Germany in the early 20th century by psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Köhler. Gestalt means “form” or “shape,” and the school’s central idea was that people perceive organized wholes, not collections of separate parts. Proximity was among the principles Wertheimer described in his 1923 paper on the laws of perceptual organization.[5][6]
Nearly a century of subsequent research has confirmed proximity as one of the most fundamental and reliable grouping cues in human vision.[7]
Related concepts
- Law of Common Region — shared boundaries create even stronger groups
- Law of Similarity — similar appearance also suggests relatedness
- Chunking — spacing breaks information into digestible groups
- Mapping — controls placed near what they affect
- Fitts’ Law — nearby targets are faster to reach
- Aesthetic-Usability Effect — orderly spacing increases perceived quality
References and further reading
- Nielsen Norman Group. Proximity Principle in Visual Design. https://www.nngroup.com/articles/gestalt-proximity/
- Yablonski, J. Law of Proximity. Laws of UX. https://lawsofux.com/law-of-proximity/
- Nielsen Norman Group. Group Form Elements Effectively Using White Space. https://www.nngroup.com/articles/form-design-white-space/
- W3C. Understanding WCAG 2.2 Success Criterion 1.3.1: Info and Relationships. https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
- Wertheimer, M. (1923). Laws of Organization in Perceptual Forms (English translation, Classics in the History of Psychology). http://psychclassics.yorku.ca/Wertheimer/Forms/forms.htm
- Wikipedia. Max Wertheimer. https://en.wikipedia.org/wiki/Max_Wertheimer
- Wagemans, J., et al. (2012). A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 138(6). https://doi.org/10.1037/a0029333
- Interaction Design Foundation. What is the Law of Proximity? https://www.interaction-design.org/literature/topics/law-of-proximity
- Yablonski, J. Laws of UX (format inspiration for this series). https://lawsofux.com/