What Is the Law of Proximity in Web Design?

What is Gestalt's law of proximity?

The Gestalt principle of proximity is one of five Gestalt visual perception principles.

In general, the law of proximity states that proximity helps individuals establish relationships between objects. As a result, design elements in close proximity to each other will be perceived to share similar traits, which helps website users understand and organize information.

Conversely, Gestalt laws, such as the law of proximity, can be used to separate elements for better visual hierarchy. Ultimately, it's how humans perceive elements that are located near one another. For example, items grouped physically closer together on your website will appear more related than those farther apart, regardless of an object's color, size, shape, or function.

The law of proximity can improve UX design because it can group items and information together to help visitors see elements as part of the same group despite their sizes and colors. So, for example, if you see shapes on the left side of the screen, you'll automatically perceive them as being more closely related to each other than those on the right side.

Whether using UX design tools or drawing on paper, you can experiment with the law of proximity by drawing shapes of different sizes and colors and see that the items grouped closer together seem more related even though they look different aesthetically.

Of course, there are other Gestalt principles to consider when designing a website, such as similarity, continuity, closure, and connectedness. However, the law of proximity can give you an understanding of how your website visitors perceive objects and patterns in the same design.

Applying the law of proximity to web design

The UX law of proximity focuses on how design elements are related based on their distance apart, so the closer these elements are to one another, the more related they'll seem. You can use this law to put elements together to create a cluster and make the brain interpret it as a whole image or use it to organize content on a site.

Here are a few law of proximity examples you can use when creating a website.

Visual hierarchy

Visual hierarchy is a type of perceptual organization that allows designers to create professional websites. The UX law of proximity can create a visual hierarchy by using white space and grouping certain elements together while keeping unrelated elements separate.

Of course, every website is different, so the information architecture will vary, but how you organize information is crucial when applying the proximity principle.

You can convey hierarchy by grouping elements together in various ways. For example, a navigational menu on a website may have a category and subcategories under it to help users perceive different groups. The visual hierarchy can help users understand how different elements of your website, including information and content, relate.

Of course, the key to good visual hierarchy is white space, which can help distance elements and create visual groupings to show the relationship between elements.

Readability

You can place related elements together to improve readability. The law of proximity improves perceptual organization by grouping elements to make websites easy to read.

For example, on a web page, headings allow the visitor to easily scan and read information to understand the main points without reading the entire page. You can make your content match the visual hierarchy and use proximity in your design to make information less intimidating and more scannable.

A law of proximity example of how it improves readability would be a newspaper design. Newspapers have multiple short articles on a single page, but they're effectively grouped to let readers scan information to determine which articles they want to read.

You can apply this principle to your website on any page by having your content planned and knowing which information should be grouped to create a better reading and overall user experience.

Grouping

Grouping items together is the most important part of applying the UX law of proximity. Of course, the key to grouping is white space to help distance some elements from others.

If you have your contact information on a website, you would keep your business address, phone number, and any other information, such as emails, together to make it easier for the brain to perceive this information as related. In most cases, users only need to look at the contact information once to take it all in.

White space

As we've mentioned multiple times, white space is crucial for the UX law of proximity to be effective.

In design, you can't group elements without putting space between those they're not related to. You should always include white space when creating a custom design website. Not having enough white space can make your content challenging to understand while affecting the overall aesthetics.

Remember, you don't need to fill in all the space on your website. Instead, you should consider how elements in close proximity to one another are perceived as being related and use white space to separate items that aren't part of these distinct groups.

Examples of the law proximity in web design

Now that you have a basic understanding of the UX law of proximity, you might wonder what it should look like in practice. Here are a few law of proximity examples and situations when you should use it:

Website copy

Designers use the law of proximity to make written content more readable and scannable. For example, headlines have more space above than below to organize paragraphs and ensure readers understand that they're part of the same content grouping. In addition, line height and spaces between lines are bigger between words to create paragraphs, while letters are close enough to form words.

Navigational menus

Effective navigation is part of good user experience design. Since many websites contain lots of content, grouping the items, including content categories and subcategories, can make navigating websites easier. Menus, whether located on the top of the website or on a side, use white space between items to group content together and help visitors understand what items are most closely related to one another.

Forms

If you use your website to generate leads, consider optimizing your forms with the UX law of proximity. Forms usually have labels to tell visitors which information you want them to share. You can clearly label each field using proximity to make your form easier to read and use.

Product pages

If you sell products, you might have several items on your website, some related and some not. You can use proximity on product pages to allow visitors to find other related products easily.

For example, if you sell coffee, your product pages might recommend creamers or other blends users may enjoy. You can use recommendations in a carousel design to keep them all under the same grouping on the product page.

Footers

Every business website should have a footer consisting of basic navigational links, contact information, or short forms. In any case, proximity allows these items to be easily grouped together. For instance, you can keep your main navigational links together with any other information, such as contact information, on the other side of the page, separated by white space.

Best practices for applying the law of proximity to UI design

The Gestalt law of proximity can be used to group any content and help easily lead your customers through your website.

Here are a few best practices for applying this principle to web design:

Use white space

Many novice designers feel they need to fill a page, which can create a chaotic and confusing web design. Using white space to separate groups of content and design elements is crucial for readable, scannable, and better-looking websites. In addition, using large areas of white space can make your web pages appear more organized while helping users navigate the site.

Consider content first

Before designing your web pages, consider the content you'll need. For example, if you're creating product pages, you may have a design in mind, but it's important to consider the types of copy and how much you'll have on the page. Design should fit copy, not the other way around. Therefore, it's a good idea to plan your content before starting the website design to help you understand the types of information that will need to be grouped.

Emphasize elements

You can use the law of proximity to emphasize certain elements on the page and improve your UX and UI design. First, always consider the elements you need on the page and which are most important; the content and informational hierarchy will determine the elements that need to stand out. Still, designers can play with negative space to emphasize different areas of the web page to ensure they stand out.

Optimize UI with the law of proximity

If you want to make your website more aesthetically pleasing and improve the user experience, consider optimizing your website with the Gestalt principle of proximity.

This graphic design principle allows you to understand how perception affects your design and use it to your advantage. Playing with different elements by grouping them together and creating visual hierarchies with white space can make your website look more professional and improve your customer's first impressions of your business.

Use the law of proximity when designing your website with Mailchimp. We make creating professional websites easy with no design experience necessary. Try Mailchimp today.