Law Of Proximity - Gestalt Laws of Perceptual Organization
Learn how the law of proximity, a Gestalt principle, can help you create websites that are more organized, clear, and user-friendly.
Web design and web development are not only about creating attractive and functional websites, but also about understanding how users perceive and interact with them. User experience (UX) and user interface (UI) are two essential aspects of web design and development that aim to provide a satisfying and intuitive experience for the users. However, designing and developing a good UX/UI is not an easy task. It requires a lot of research, testing, and creativity to create websites that meet the users’ needs and expectations.
One of the tools that can help web designers and developers to create better UX/UI is the Gestalt laws of perceptual organization. These are a set of principles that describe how humans perceive and group visual elements in their environment. The Gestalt laws were developed by German psychologists in the early 20th century, who argued that humans have a natural tendency to organize complex stimuli into simpler and meaningful patterns. The word “Gestalt” means “unified whole” in German, and it reflects the idea that the whole is different from the sum of its parts.
There are several Gestalt laws, such as similarity, continuity, closure, figure-ground, symmetry, and common fate. However, in this article, we will focus on one of the most important and widely used Gestalt laws: the law of proximity. We will explain what it is, why it matters in UX/UI design, and how to apply it in web design with three real examples.
What is the law of proximity?
The law of proximity states that objects that are close to each other tend to be perceived as belonging to the same group or category, regardless of their shape, size, color, or other characteristics. Conversely, objects that are far apart tend to be perceived as separate or unrelated. This principle is based on the assumption that humans prefer to simplify their perception by grouping similar or related elements together.
For example, look at the images below:
In the list above, it's not clearly distinguishable which product the "Add" button refers to, whereas in the one below, thanks to the law of proximity, it's very clear to the user.
The law of proximity applies not only to shapes, but also to text, images, icons, buttons, menus, forms, and any other visual element on a website. By using the law of proximity effectively, web designers and developers can create a clear and logical visual hierarchy, improve readability and scannability, reduce cognitive load and confusion, and guide the users’ attention and actions.
Why does the law of proximity matter in UX/UI design?
The law of proximity matters in UX/UI design because it can help web designers and developers to create websites that are easy to use and understand for the users. By grouping related elements together and separating unrelated elements apart, web designers and developers can achieve several benefits:
- They can create a clear visual hierarchy that shows the importance and relevance of different elements on a website. For example, by placing headings closer to their corresponding paragraphs than to other headings, web designers can indicate which text belongs to which section.
- They can improve readability and scannability by making text easier to read and comprehend. For example, by using adequate line spacing and margins between paragraphs, web designers can avoid creating a wall of text that can overwhelm or discourage the users.
- They can reduce cognitive load and confusion by simplifying the perception and processing of information. For example, by grouping form fields with their labels and instructions, web designers can help users fill out forms faster and more accurately.
- They can guide the users’ attention and actions by creating focal points and calls-to-action. For example, by placing buttons or links close to relevant content or images, web designers can encourage users to click on them or take action.
How to apply the law of proximity in UX/UI design?
Applying the law of proximity in UX/UI design is not difficult if you follow some basic guidelines:
- Use whitespace (or negative space) to create distance between unrelated elements or groups. Whitespace is the empty space between or around elements on a website. It can help create contrast, balance, harmony, and emphasis on a website. Whitespace can also help reduce clutter, noise, distraction, and stress on a website.
- Use grids or alignment tools to create order and consistency among related elements or groups. Grids are frameworks that divide a website into columns and rows that help organize and align elements on a website. Alignment tools are features that help position elements relative to each other or to a reference point on a website.
- Use visual cues or indicators to show relationships or connections between elements or groups. Visual cues or indicators are elements that help users understand how elements are related or connected on a website. For example, visual cues or indicators can be lines, arrows, boxes, colors, icons, or symbols.
3 real examples of the law of proximity in web design
To illustrate how the law of proximity can be applied in web design, let’s look at three real examples of websites that use this principle effectively.
Example 1: Mailchimp
Mailchimp is a marketing platform that helps businesses grow and connect with their customers. Mailchimp uses the law of proximity in several ways on its website:
- On the homepage, Mailchimp groups its main features and benefits into three sections: Grow Your Audience, Reach Your Goals, and Get Creative. Each section has a heading, a subheading, an image, and a button that are close to each other, creating a clear visual hierarchy and a focal point for the users.
- On the pricing page, Mailchimp groups its plans and features into four columns: Free, Essentials, Standard, and Premium. Each column has a heading, a price, a list of features, and a button that are close to each other, creating a clear comparison and a call-to-action for the users.
- On the login page, Mailchimp groups its form fields with their labels and instructions, creating a clear and simple form for the users. Mailchimp also uses whitespace to separate the form from the navigation menu and the footer, creating a contrast and an emphasis on the form.
Example 2: Airbnb
Airbnb is an online marketplace that connects travelers with hosts who offer unique accommodations around the world. Airbnb uses the law of proximity in several ways on its website:
- On the homepage, Airbnb groups its search options into four categories: Location, Check-in, Check-out, and Guests. Each category has a label and an input field that are close to each other, creating a clear and easy search form for the users.
- On the explore page, Airbnb groups its listings into different sections based on their type or location. Each section has a heading and a carousel of cards that are close to each other, creating a clear and scannable overview of the listings for the users.
- On the listing page, Airbnb groups its information and images into different sections based on their relevance or importance. Each section has a heading and a content that are close to each other, creating a clear and comprehensive description of the listing for the users.
Example 3: Spotify
Spotify is a music streaming service that allows users to listen to millions of songs and podcasts online. Spotify uses the law of proximity in several ways on its website:
- On the homepage, Spotify groups its main benefits and features into three sections: Music for Everyone, Enjoy Anywhere, Get Premium. Each section has a heading, a subheading, an image or video, and a button that are close to each other, creating a clear value proposition and a call-to-action for the users.
- On the browse page, Spotify groups its playlists and albums into different categories based on their genre or mood. Each category has a heading and a grid of cards that are close to each other, creating a clear and attractive selection of music for the users.
- On the player page, Spotify groups its controls and information into different sections based on their function or purpose. Each section has an icon or text that are close to each other, creating a clear and intuitive interface for the users.
Conclusions
The law of proximity is one of the Gestalt laws of perceptual organization that can help web designers and developers create better UX/UI for their websites. By grouping related elements together and separating unrelated elements apart using whitespace, grids, alignment tools, and visual cues or indicators, web designers and developers can create websites that are easy to use and understand for the users. The law of proximity can help create a clear visual hierarchy, improve readability and scannability, reduce cognitive load and confusion, and guide the users’ attention and actions.
Other Gestalt Laws
Check out the other five Gestalt laws in our following articles:
Bibliography
1 A. Fitzgerald, “What Is the Law of Proximity & Why Does it Matter in UX Design?”, HubSpot Blog [Online].
2 “What Is The Law Of Proximity In Web Design?”, Mailchimp [Online].
3 “What is Law of Proximity? — updated 2023”, Interaction Design Foundation [Online].