What Is the Law of Proximity & Why Does it Matter in UX Design?

Usually, the question "What is the law of proximity?" comes up while trying to solve a design problem. The law of proximity comes in because designers account for a wide range of people when creating websites, devices, and products.

A set of principles in psychology — Gestalt laws — describe how people perceive objects around them. One of these principles is the law of proximity. Keep reading or jump to one of the sections below:

• Gestalt Laws
• Why is the Law of Proximity Important?
• Law of Proximity UX
• Law of Proximity Examples

What is the law of proximity?

The law of proximity is a principle in Gestalt psychology that describes how the human eye perceives elements that are close together as more related than elements that are further apart. This principle applies even if the elements differ in color, shape, size, or other characteristics.

Below is an illustration of the law of proximity.

According to this principle, the three rows of shapes on the left belong to one group, even though some are different colors.

And you’ll see the row of shapes on the right as belonging to a separate group, even though they are the same size and color as the majority of shapes on the left.

That’s because the three rows of shapes on the left are close together, while the row on the right is further away.

Gestalt laws like the lay of proximity are fundamental in user experience (UX) design. They can help your visitors understand what they’re seeing, find what they’re looking for, and take action.

Let’s take a closer look at these laws as a whole.

Gestalt Laws

Gestalt laws are a set of psychological principles based on the idea that humans have a natural inclination to perceive patterns in the world around them.

Psychologists Max Wertheimer, Wolfgang Köhler, and Kurt Koffka argued that this was an innate disposition of the human mind. Based on this foundational belief, they created a set of principles to explain how people organize and interpret visual data.

Since each principle aimed to describe how people made an order from the disorder around them, the German psychologists named them "Gestalt" laws — which is German for "unified whole."

Let’s go over the five major principles below.

Proximity

The law of proximity states that objects placed in proximity to one another will be seen as a group rather than as individual parts.

For example, Univer’s logo has 25 distinct icons. But because of their specific placement, you recognize the whole "U" figure.

Similarity

The law of similarity states that objects will be perceived as one object or part of the same group when they look similar.

Sun Microsystems' logo is an excellent example of the law of similarity. Rather than see eight distinct U-shaped figures, you perceive the word "sun" four times, with the letter "S" broken into two parts.

Closure

According to the law of closure, people fill in missing information or gaps to see an object as a whole.

For example, when looking at the World Wildlife Fund’s logo, your brain will naturally perceive the cluster of black shapes set against a white background as a panda.

Continuity

The law of continuity describes how objects that look different but are similarly aligned will be seen as a whole. For this to be effective, the eye must move naturally from one object to the other without something breaking the continuity.

Mastercard’s logo is a great example since the eye easily moves from one interlocking circle to the other thanks to the overlapping orange region.

Figure-ground

The law of figure-ground describes how the human eye can separate an object (or figure) from the surrounding area (or ground). The FedEx logo applied this principle to emphasize both its brand and what it does.

In the FedEx logo, can see the words FedEx as the figure and the forward arrow between the E and the x. This use of figure-ground emphasizes both the FedEx brand and a reference to their swift delivery service.

Why is the law of proximity important?

Understanding the law of proximity can make it easier to see your website design from someone else's perspective.

There are many ways to create something that's appealing to the eye. But it takes empathy, time, and knowledge to create a website that anyone can use effectively.

For example, you may have perfect vision, but what if 60% of your target audience has vision problems? A site with high contrast, targeted use of color, and a clear structure will be easier for them to use.

Another example: 38% of consumers first look at the page layout or navigational links before anything else.

How you group and arrange this content on your website makes it easier for your site visitors to reach their goals on your site.

Understanding proximity can make you a better designer because it helps you organize information. Effective use of the law of proximity can:

• Make your website more readable
• Reduce visual clutter
• Make your site more dynamic
• Help you create the right balance and structure for your site

Let’s look at how this law applies to UX design.

Law of Proximity UX

Applying the law of proximity in user experience design is easy. Remember to place related elements near each other and unrelated elements apart. Using whitespace to group or separate elements is key.

In web forms, for example, place labels close to the input field so that the user understands how they relate. This bootstrap form below is easy to understand and complete:

But the form below is more difficult to understand. This is because of the large white space between the label and email address input field.

Most users will likely be able to figure it out and fill in the text field correctly, but they will need to think more before completing the form.

Let’s look at more examples of this principle below.

Law of Proximity Examples

You see the law of proximity at work daily, but you might not realize it. It appears on web pages, apps, remote controls, business cards, and more. Let’s take a look at some examples below.

Navigation Bar

Most navigation menus offer simple examples of the law of proximity in action.

W by Crystal White

Image Source

Check out the example above. Notice that the primary navigation items are spaced evenly apart. Then, there’s a chunk of whitespace before the search, login, and cart buttons. This lack of proximity helps to show website visitors that these three items are secondary navigation items.

The Room

Image Source

This example from The Room is another streamlined example of proximity in the navigation bar. No matter your monitor's size, you can see a clear grouping for navigation at the top right-hand corner of the page.

Magnet

Image Source

This navigation has a different orientation on the page, but the law of proximity is clearly used. The grouping on the left is the main navigation for the page. The grouping on the right allows users to learn about Magnet in more detail.

Product Page

Product pages are also great examples of the law of proximity. Proximity on a product page is about hierarchy. You want to structure product pages so your users can explore your website without getting lost or reaching a dead end.

Movita Organics

Image Source

Notice how, on the product page above, each product's star rating, title, price, and "Add to Cart" buttons are all in close proximity.

Note how the product image is slightly separated from the 5-star rating, this makes the product stand out even more. The designer also uses white space to separate one product from another, further showing the importance of space allowing each product to shine.

Fitbit

Image Source

High-end products like Fitbit use proximity to emphasize the value and features of their product.

Helix Sleep

Image Source

Besides grouping text elements, this product page groups similar but different products to highlight their subtle differences. This makes it easy for shoppers to scan the two products as they make a purchase.

TechCrunch

Image Source

Images are important too. When you add images, try to place them near relevant content to help your readers connect your words and images. While you're working on images, make sure to include image alt text include

Brit + Co

Image Source

This blog home page uses a grid structure and proximity to create visual groupings that are easy to scan for more consumable blog content.

Newsletter Opt-in Form

You can also see the law of proximity applied in most newsletter opt-in forms. White space and groupings on your newsletter opt-in can focus user attention on some areas more than others and boost the user experience.

Broken Land Co.

Image Source

In the example above, thanks to the proximity of the input field and the "Subscribe" button, the user has no doubt what will happen when they enter their email address and click the button.

Lisnr

Image Source

This newsletter form creates visual space between the form on the left and the report image on the right. The grouping on the left uses different sizes of type to emphasize details, and the graphic on the right gives users more detail on the value their newsletter offers.

Primary

Image Source

This newsletter opt-in groups every useful call-to-action in a single group on the right-hand side of the popup. Whether a site visitor wants to minimize the window to view the website or complete the form for a discount, it’s easy to see every option quickly and easily.

Check out this post for more excellent form examples.

Web Application Sign-in

Are you hearing from your customers that your web application sign-in needs some work? Proximity can help.

Sometimes a button, link, or instruction can seem like it's easy to see. But when you group unrelated elements it can make it easy for your users to skip over them.

HubSpot

The first time you log in to a new app is often the most difficult. Many apps share so much information that it makes it tough to figure out how to log in and use the app. The user interface for the HubSpot app is simple, with ample white space that draws attention to two simple choices: log in or sign up.

Gusto

Image Source

Gusto’s log-in has many choices, like logging in with Xero, Intuit, or Google credentials. But they use proximity to connect each part of their login form with text that answers common questions.

Instagram

Image Source

Instagram uses the law of proximity to break its login page into sections that help new users quickly solve common problems. Whether they’ve forgotten their password or need to download the app, there is a clear structure that groups common elements for a great user experience.

Website Footer

Website footers typically exemplify the law of proximity. Good use of proximity means that you should group logo and brand values together, group contact details together, group social media profiles together, and so on.

Superfluid

Image Source

In the example above, notice how most items come together under three headings: help, legal info, and follow us.

Chobani

Image Source

In this example, important site pages form a group on the left and newsletter sign-up details form a group on the right. Then Chobani created a group for important customer information at the bottom.

This grouping helps to focus on the information that users are most likely to look for. It also helps guide users who are quickly trying to solve a problem.

Wieden+Kennedy

Image Source

This website footer uses proximity to share a lot of complex information simply. The left grouping offers links that answer common questions from different site visitors. Then there is a separate grouping for each of the agency’s eight offices.

The Law of Proximity for Mobile Devices

The law of proximity is especially important when designing for mobile devices. Most mobile devices have a smaller screen size. Constant interaction is just one of many user behaviors unique to mobile. These qualities increase the importance of proximity and ease of use with minimal effort.

When designing for mobile, don't just start with a desktop design and make adjustments so the same design works on a mobile screen. Designing for portrait orientation might feel uncomfortable at first. But this change in orientation makes the way you group elements more important than ever.

Without a unique mobile design, your users might struggle with the following:

• Overlapping design elements
• Buttons and links that are tough to click
• Form errors
• Slow load times
• Excessive scrolling

At the same time, mobile devices offer a range of existing elements you can build on with your unique design, like bottom navigation bars.

Find ways to make what is most important to your audience a priority. Use proximity to draw attention to this content. This may mean editing and removing extras from your mobile designs.

Libby

Image Source

This app is simple and clean. The clear upper and lower groupings make it easy for first-time users and library patrons who might not be tech-savvy to use this app.

Shine

Image Source

A wellness app like Shine offers many different tools for users. The more complex your mobile tool is, the more important proximity is. The example above shows clear buttons, headers, and blocks of text in groups. This approach makes it easy to scan and choose the right resource, even if you have a stressed user.

Using the Law of Proximity

From navigation menus to web forms and everything in between, the law of proximity is vital to good web design. When you consider proximity in your designs, it helps users to better understand how different elements relate. This can make it easier for them to consume your content or take action on your site.

Great website design makes your audience feel seen, valued, and empowered. You can make the website of your dreams with the proper knowledge and tools.

This post was originally published in July 2021 and has been updated for comprehensiveness.