When a visitor lands on a new website, ease of use is a determining factor in whether they stick around. Does your site load quickly? Is the text well laid out and easy to understand? Can users easily follow a clear path to find what they need? The key to getting this last element right is understanding proximity, or how people see items that are close together.
When you embrace this concept, known as the law of proximity, your site design feels logical, clear, and based on solid principles of human perception. Learn what these Gestalt principles are and see them in real-world examples so you can employ them in your web design.
What is the law of proximity?
The law of proximity is the tendency of the human mind to perceive objects that are in close proximity to each other as being part of the same group, even if they differ in color, size, or shape. This theory of visual perception is part of Gestalt psychology, a school of thought concerned with perceptual organization, or how related individual phenomena are experienced as a unified whole. Other Gestalt principles, like similarity, continuity, and closure, work alongside proximity to shape how users read a page.
Although the law of proximity has its origins in psychology, it’s particularly useful for visual design. For example, in organizing the layout of a website, it’s standard practice to group related website navigation links together. Links to product category pages get grouped in a dropdown navigation menu, while basic informational links (About Us page, Contact Us, and FAQ) get grouped along a footer menu.
Why is the law of proximity important in web design?
The law of proximity is a foundational principle of web design—particularly user interface design, which focuses on website interactivity and usability. Using it effectively helps website visitors recognize patterns and follow visual cues on your site.
When you present information with a clear visual hierarchy that places related elements close together, users can perceive patterns and quickly find what they’re looking for. This reduces cognitive load, since your site navigation is intuitive and conforms to user expectations. For instance, organizing all product categories in a single dropdown menu provides a clear starting point for shoppers.
Examples of the law of proximity in web design
The law of proximity is critical for successful UX design. Here are a few brands doing it right.
Curious Elixirs
Nonalcoholic beverage company Curious Elixirs uses the proximity principle on the page for its variety pack subscription service, presenting dense information clearly while keeping the visual hierarchy clear.
In this example, the site’s designer uses the law of proximity by clustering three separate elements within each of the four boxes: an icon, a title, and a description. By presenting these elements as unified groups, the designer helps website users register the individual elements as one group with a single coherent idea.
The negative space is just as important. The spacing between boxes maintains consistent alignment, facilitating the perception of all four boxes as a single group—a group that is distinct from other elements on the page. The Shop Now button is close to the cards, creating physical proximity that ties the call to action directly to the four benefits.
How they group elements related to the Curious Elixirs subscription club clearly separates them from the information along the website header at the top of the page.
DedCool
The law of proximity has just as much impact on the user experience when you’re working with text alone. For example, consider how writers use paragraphs to group similar ideas together spatially.
This navigation bar on fragrance brand DedCool’s website uses the law of proximity to group categories of user action.
The column structure conveys critical visual information in four distinct groups, clearly differentiating the main categories of action. Each category header sits closer to the related links below than to anything above it, so your eye naturally will perceive elements like the header “Shop” as defining everything beneath it.
Kindred Label
The law of proximity can also succeed when visual elements differ, as this landing page from fashion brand Kindred Label shows.
The law of proximity is used more loosely here, but it still plays a crucial role in making the disparate elements of the variously stylized texts, Our Story button, and imagery feel like a unified whole.
“EST 2023” and “CRAFT & STYLE” are close together, so even though they aren’t the same size or font, they feel like a unified whole. The second unit on the page is the Our Story button and the body copy, so that clicking on the button feels like a natural extension of the reading experience. Having two units of faraway
Tips for applying the law of proximity in web design
- Use proximity to establish hierarchy
- Use negative space thoughtfully
- Mind the space between labels and inputs
- Watch for proximity conflicts
The law of proximity makes it easier for visitors to understand your website. Here’s how to apply it in practical terms.
Use proximity to establish hierarchy
Using uniform frequency rhythm, or predictable, steady repetition of the same amount of spacing across a page, can flatten hierarchy. For example, the distance between a heading and its associated body text should always be less than the distance between the heading and the section before it; this way, the heading guides the eye toward its associated text, especially on smaller screens.
Proximity can also make an impact on a micro scale. You can create a subtle focal point within a cluster of similar elements by placing one element slightly nearer to another. For example, placing a Buy button just a few pixels closer to the price than to the product name or description can simplify the choice architecture and serve as a final nudge to complete a purchase.
Use negative space thoughtfully
Designers often think of the white space as an easy way to create aesthetic breathing room without considering the signal it sends. When completing a design, it’s worth auditing the layout to consider whether your negative space conveys the proper relationship between certain elements.
Too much negative space between related elements means a user will have to figure out the connection for themselves, while too little space between unrelated items can create the confusing impression of a relationship that doesn’t exist. Negative space guides the eye and establishes relationships between elements, so when it’s used discerningly, it can reduce your user’s cognitive load.
Mind the space between labels and inputs
Even a small number of pixels of unnecessary space between a label and its field can disrupt similarity states, or the flow that occurs when elements share similar visual characteristics according to Gestalt laws. This creates hesitation.
A label is the descriptive text in a user interface that identifies a specific input field, like “first name” or “email.” These labels identify specific input fields and also allow screen readers to communicate the field’s purpose, ensuring accessibility. When there’s too much space, this relationship becomes more abstract.
Stimulus-based eye-tracking research shows that users move quickest and have the easiest time with top-aligned forms, where labels are directly above their corresponding input fields, so there is no vertical gap the eye must jump.
Watch for proximity conflicts
Proximity conflict happens when the distance between elements sends the wrong signal about their relationship, making unrelated elements appear grouped, or related visual elements appear separate. For example, when designs use bordered containers or cards, it’s easy to accidentally create proximity conflict if the content within cards is too close to the edge of the borders.
Curious Elixirs’ site is a great example of card spacing done well. The text inside has a nice buffer of negative space between the edges, so the contents of the cards don’t compete within the grouping signal.
Law of proximity FAQ
What is the law of proximity in web design?
The law of proximity is used in web design to harness the tendency of the human mind to naturally perceive close objects as related and distant objects as unrelated.
What is an example of proximity in a website?
An ecommerce product card is a classic example, placing product name, description, image, price, and even an Add to Cart button in the same area to make them appear as a single unit.
Why is proximity important to design?
Proximity uses spatial relationships to communicate organization at a single glance, creating layouts that feel intuitive, organized, and uncluttered.
