The law of proximity is a principle in Gestalt psychology—describing how humans perceive elements that are close together as more related than ones farther apart. This is so even if the elements differ in color, shape, size or otherwise. Designers use proximity to create clear, coherent layouts, guide users’ attention and reduce cognitive load.
Proximity is a fundamental Gestalt principle—or law. The Gestalt laws describe how humans perceive visual elements, and how human brains tend to group these elements into patterns that are meaningful. What’s more, these principles state how an image is more than just the sum of its parts. The Gestalt school of psychology emerged in 1920s’ Germany. Psychologists Max Wertheimer, Kurt Koffka and Wolfgang Köhler developed theories—such as the laws of continuity, closed region and prägnanz—to account for various phenomena related to human visual perception, including how we perceive lines or curves, and focal points.
The essence of proximity: Objects that appear together form distinct groups from others.
© Steven Bradley, Fair use
The principle of proximity is a grouping law, describing how humans perceive and simplify complex images in visual elements. According to the Gestalt psychologists, our minds innately tend to group items and perceive patterns using five main categories. Wertherimer, Köhler and Koffka developed the principle of proximity, principle of similarity, principle of continuity, principle of closure, and principle of connectedness (or uniform connectedness). As with the wide range of other principles, proximity quickly became a valuable part of graphic design. And it’s especially helpful for your design work to improve the user experience in digital products.
Like most Gestalt laws, it’s easy to define the law of proximity in simple terms and take the meaning literally from the name. The closer two or more objects are, the more likely a human viewer will perceive them as a group or unit. Close proximity means there’s a relationship between the elements or objects. For example, think of clusters of frequently asked questions on an FAQ page that relate to various issues brand customers may have. Proximity casts a powerful effect on users’ eyes. For instance, it overrides color in the importance the eye gives it.
With Gestalt theory, you can apply the law of proximity to many aspects of web design, user interface design (UI), and product design.
© Lukas Oppermann, Fair Use
When designers use proximity well, they can bring a great deal of positives to their digital products. For instance, they can improve the readability of it—for example, a website—boost users’ comprehension and raise levels of usability and engagement. Designers who get the proximity right can make their interfaces more user-friendly, intuitive, persuasive—and compelling.
But there are some challenges and pitfalls to be aware of, also. If designers don’t apply the principle of proximity well, the elements can work against their designs. So, the context and content of the interface are vital things for designers to bear in mind whenever they try to use proximity. For example, as far-away elements will seem to be unrelated, it’s easy for users to miss them if they have the majority of the elements clustered together.
Responsive design can present another challenge when it comes to proximity, as the design will adjust to the screen real estate and some effects—like proximity—might diminish on smaller screens.
On the desktop version of WCC’s website, extra whitespace at the left of the Search button shows it has different functionality from the other buttons.
© Aurora Harley, Fair use
But on a tablet, this separation can’t hold, so “Search” appears to be part of the main navigation; it was raised and grouped with other utility-menu items.
© Aurora Harley, Fair use
To apply the law of proximity in your user interface (UI) designs, it’s important to consider three things in particular: alignment, spacing, and grouping. Alignment is vital—it’s about arranging elements along a common axis or edge. Meanwhile, spacing—which is an essential device, too—particularly refers to how much white space designers actually use to separate elements and draw the users’ eyes to important features. It is—therefore—vital to group items properly. So, this means to cluster elements that share a common function, feature or category.
Here are some tips:
Plan the layout: Before starting the design process, plan the layout to work out how to group and organize different elements. Think about the relationships between elements and the desired user flow.
Use consistent design elements: Use consistent design elements—like color, shape or typography—to visually group related elements. This helps users quickly identify and understand each element’s purpose and function.
Group elements that belong together: Elements that belong together—of course—should be together; that’s a factor that will make it easier for users to “get” the relationship between the elements and understand how they function. Grouping helps to make clear boundaries or white space around them, too.
Consistently align elements: Consistent alignment is a vital part of how to make a balanced and harmonious layout on a UI. From aligning elements, it gives an interface a sense of order and structure. This—in turn—makes it more user-friendly and intuitive.
Airbnb makes use of proximity in a clear and user-friendly interface—elements lined up precisely and the spacing’s consistent in a grid-like layout. What’s more, Airbnb clusters elements that relate to the user's search—such as filters, map and listings—and the use of color and typography highlights important information and actions.
© Airbnb, Fair Use
Leave enough spacing between elements: A vital thing is to make sure there’s the right amount of spacing between elements. This white space—or negative space—will create contrast and separation, and establish visual hierarchy. Too much or too little spacing can make your design look sparse of cramped. But adequate spacing will help to make the interface more readable and understandable—and make a more enjoyable UX.
Use visual cues to reinforce grouping: Visual cues—like color, shape, size or typography—can reinforce the grouping. For instance, a consistent color scheme for related elements can make for a good sense of unity and coherence.
On Amazon's product detail page, the product title, price, and "Add to Cart" button are grouped closely together—showing their relationship and making it clear for users how to proceed with purchasing the product.
© Amazon, Fair use
Use proximity to create logical and intuitive navigation: Proximity can be a tool for brands as they seek to make logical and intuitive navigation for their users. So, when designers place elements that see frequent use—or are related—near each other, they help users enjoy easy access and interaction. That’s a factor that helps reduce cognitive load and make the interface more user-friendly.
Google's search results page demonstrates the use of proximity to group search results and related elements. Each search result shows as a distinct unit—with the title, URL and snippet closely grouped together for easy scanning and comprehension.
© Google, Fair use
Consider responsive design: It’s important to be sure that the proximity that’s at work in a design keeps across different screen sizes and devices. Group and space the individual elements appropriately—no matter the screen real estate available.
Accessibility: Keep accessibility in mind—accessibility is a vital part of design. So, make sure the design elements are distinguishable for users with visual impairments—such as color blindness or macular degeneration. Use additional cues (e.g., alternative text).
Put proximity to work in forms as well: If users have forms to fill in, use proximity to make it easier for them. Cluster related sections together—for example, personal details, credit card information. This won’t just make for a better user experience; it will lessen the likelihood that they’ll make errors, too.
Trust the gut: Proximity appeals to the human eye at such a deep and visceral level, so it’s important for designers to go with their initial reactions. Don’t force it and then believe it will work. If it takes any effort to see those groups—for instance—then it’s a good idea to rethink the design.
Test and iterate: Do proper user testing—to validate the effectiveness of proximity in the design. Iterate and refine the layout based on user feedback about usability and desirability, etc. to make the user experience the best it can be. Does the proximity aid in problem solving, for example?
Remember, the law of proximity is a crucial principle in Gestalt psychology—and for good reason. It can help designers make layouts that are really clear and coherent. It can lessen the cognitive load for users, too, and enhance usability greatly. It’s important to apply the principles of proximity mindfully—though—as you will need to consider your users’ needs throughout the user journey.
Still—with consistent and effective use of proximity—designers can infuse their interfaces with a true sense of order, hierarchy and structure. This will help to guide the user's attention, focus and navigation—and make the interface more user-friendly and engaging. From there, designers can bring users that much closer to their brands.
Take our course: Gestalt Psychology and Web Design: The Ultimate Guide
See the various Gestalt principles described in our piece on them: What are the Gestalt Principles?
Find in-depth insights in this Nielson Norman Group article: Proximity Principle in Visual Design.
Find additional important points on how humans perceive objects in the article What Is the Law of Proximity & Why Does It Matter in UX Design? | Anna Fitzgerald.
Here are some examples of how to apply the law of proximity in web design:
Navigation menus: In web navigation menus, designers group related items together—based on their proximity—and it’s something that helps users easily identify and pick the option they need without getting confused.
Form fields: In forms, designers put related fields close to each other. For instance, a user's first and last name fields often appear together as a group—indicating their relatedness.
Content grouping: Articles or blog posts often use proximity to group paragraphs, headings and images. This visual grouping helps users to digest information in chunks—which is something that makes the content more readable and engaging.
Buttons and call-to-actions: Buttons or call-to-action elements related to a specific section of content appear close to it. This proximity signals to the user that these actions are directly related to the content they are viewing.
Whitespace usage: An effective use of whitespace can improve the results from applying the law of proximity. When designers space unrelated items farther apart, they can reinforce the grouping of closer elements.
The principle of proximity is crucial, to:
Group similar design elements: Proximity plays a particularly important role as a Gestalt principle—especially when working with simple shapes. The principle of proximity has it that human eyes see objects that are close to each other as being a group. This means you can organize elements effectively as the building blocks of your web design—including the visual hierarchy.
Establish figure/ground relationships: Proximity helps in establishing figure-ground relationships, also known as positive and negative space. If you change the arrangement or create discontinuity, you draw attention in your design and guide users so they can identify important elements within a visual field.
Create consistency: To keep good consistency, then you need to apply proximity—consistently. Your elements are essential group members; so, distances between groups and elements within groups should follow a pattern that’s based on the natural hierarchy. This lets users process and understand the layout—quickly.
Enhance grouping and organization: The principle of proximity helps you organize information by creating groups within groups. Whether it's a larger group or a smaller group within a group, proximity helps you visually show relationships between elements on web pages—and elsewhere.
Improve scannability in forms: In form design, keep a distance between labels and fields that’s appropriate—and this is crucial. Adequate spacing between elements is a great help to users: it enhances scannability and prevents confusion—and so makes sure users can easily associate labels with corresponding fields.
In essence, the principle of proximity serves as a guiding rule for you to make visually cohesive and organized layouts. When you consistently apply proximity, it helps users naturally understand the hierarchy and relationships between different elements.
The law of proximity—which is a key principle in Gestalt psychology—greatly boosts the user experience (UX). That’s because it influences how users perceive and process information. It states that objects that are near—or proximate—to each other, are what users tend to view as a group. This principle is crucial in UX design for several reasons:
Improved organization: When you group related items together, you can make an interface that’s more organized, and clean. This organization helps users easily understand which elements are related—and which are separate—and so streamlines navigation and interaction.
Enhanced usability: The law of proximity makes interfaces more intuitive. For instance, if you group related buttons or functions together in a software application or a website, it intuitively indicates their relatedness. That makes it easier for users to learn and remember how to use the product.
Efficient information processing: When you group information according to the law of proximity, it lightens the cognitive load on users. They can quickly process and interpret grouped information—without their having to evaluate each element individually.
Visual hierarchy: This law helps to establish a visual hierarchy on a page or screen. When you adjust the proximity of elements, you as a designer can guide users' attention to where it's needed the most. That will improve the effectiveness of the design.
Error reduction: When you group related options or controls, you’ll lower the likelihood of users making errors. Users are less likely to make incorrect choices or feel confused when they find similar or related options grouped together.
In practice, you can see the law of proximity in the layout of forms, menus, website navigation—and even in the spacing and grouping of content in a mobile app. So, use this law effectively to make your digital products that much more user-friendly—and satisfying to interact with.
The basic principle of proximity in design—based on Gestalt psychology—asserts that elements that designers place close to each other are what users perceive as a unified group. This principle—or law—guides how designers organize information, especially when it comes to creating a clear visual hierarchy. When you strategically group related elements, you as a designer can get the principle of proximity working to enhance user understanding. This will make it easier for them to interpret and navigate visual content. This fundamental design concept plays a crucial role when it comes to shaping user experiences. What’s more, it optimizes how users understand information and engage in problem solving.
The law of proximity and the use of whitespace in design are closely interconnected; what’s more, each plays a critical role in how you as a designer present information and your users perceive it.
Grouping and separation: The law of proximity states that users perceive objects that are near each other as a group. Whitespace—or negative space—is the empty space between design elements. You use it to create or break proximity between elements. When elements are closer together—and surrounded by whitespace—users perceive them as being related or part of the same group. Conversely, more whitespace between elements suggests that they’re separate or that they belong to different groups.
Focus and attention: You can use whitespace to put an emphasis on the law—or principle—of proximity. When you strategically place whitespace around groups of elements, you can direct the viewer's focus to certain specific areas. This will boost how effective the proximity principle is going to be. This technique is crucial to guide users through a design—and so they notice and process information in a desired order.
Clarity and readability: In typography and layout design, whitespace enhances readability and comprehension. For instance, the spacing between paragraphs—a form of whitespace—uses the law of proximity to indicate related content. That makes text easier to follow and understand.
Aesthetic balance: Whitespace contributes to the aesthetic and balance of a design. It's not merely empty space; it’s an active element that—together with the law of proximity—makes a visually pleasing and effective layout. It helps to keep out the clutter; plus, it lets the design breathe and get information across more effectively to users.
User experience (UX): In UX design, whitespace and the law of proximity work well together. They’re good ingredients for a user-friendly interface. Adequate spacing between navigation elements—for example—makes them easier to identify and interact with—something that enhances the overall user experience.
The relationship between the law of proximity and whitespace is fundamental to create designs that are harmonious, functional—and aesthetically pleasing. They work in tandem to organize content, direct attention and improve the usability of a design.
Here are some common ones:
Overcrowding elements: A common mistake is to place too many elements close together. This defeats the purpose of the law of proximity, as it becomes difficult for users to distinguish between different groups of information. Overcrowding leads to a cluttered and confusing interface—and hampers user experience.
Inconsistent grouping: Inconsistency in how you as a designer group elements can create confusion. If you don’t group similar elements consistently—or if you group dissimilar elements together—the “magic” can’t happen here; it breaks the visual flow and makes it hard for users to understand the relationships between different parts of the design.
Neglecting whitespace: If you don’t use enough whitespace, it can make a design feel cramped and overwhelming. Whitespace is a vital tool for designers—they can use it to make the grouping of elements clear and distinct. It's not just empty space; it's a powerful design tool that enhances readability and focus.
Lack of hierarchical structure: Another mistake is not to consider the hierarchical importance of different groups. All groups of elements shouldn’t get equal visual weight. Use the law of proximity in tandem with other design principles—like contrast and alignment—to create a clear visual hierarchy.
Ignoring user expectations and patterns: Designers sometimes group elements in ways that don't line up with user expectations or common patterns. For instance, a “submit” button that’s far away from the form fields can be a counterintuitive thing. So, it’s very important to understand user behavior and common design patterns for effective grouping.
Inadequate testing: If you don’t test designs with real users, you won’t be able to see how well you’ve actually used the law of proximity. User testing can reveal how different groups perceive and interact with the grouped elements; that will allow you to make necessary adjustments.
Beck, J. (1966). Effect of orientation and of shape similarity on perceptual grouping. Perception & Psychophysics, 1, 300–302.
This influential article investigates the impact of orientation and shape similarity on perceptual grouping. The study utilized a method—participants were asked to partition a pattern into two regions to examine the perceptual grouping produced by changes in the orientation and shape of two-line figures. The results showed the judged similarity of the figures failed to predict the degree to which the figures formed distinct perceptual groups. The study found that grouping was most strongly influenced by differences in the orientation of the lines composing the figures—with the crossing of lines also affecting grouping, albeit to a lesser extent than line orientation. This research provides valuable insights into the principles governing perceptual grouping—with implications for various fields, including psychology, visual perception and, indeed, user experience design.
Gestalt Psychology: An Introduction to New Concepts in Modern Psychology by Wolfgang Köhler (1947)
Wolfgang Köhler's seminal work provides a foundational understanding of Gestalt psychology—exploring principles such as proximity. The book delves into how our perceptual system organizes stimuli based on their proximity, forming holistic perceptions. Köhler's insights laid the groundwork for the application of Gestalt principles in various fields, including user experience design. Understanding proximity is vital in designing interfaces that leverage the way our brains work naturally.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on the Law of Proximity by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
