When building and designing a website, you might have a lot of questions about what colors to use, how to arrange elements, and more. The good news is you don’t have to guess. Instead, you can rely on psychology to help you make visually appealing designs.

One set of principles in psychology — known as Gestalt laws — describe how people perceive objects around them. These laws are incredibly important in user experience (UX) design. They ensure your visitors can understand what they’re seeing, find what they’re looking for quickly and easily, and take action.

Let’s take a closer look at these laws as a whole, then hone in on one: the law of proximity.  

Download Our Free UX Research & Testing Kit

Gestalt Laws

Gestalt laws are a set of principles in psychology 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 order out of the disorder around them, the group of German psychologists named them “Gestalt” laws — which is German for “unified whole.”

Let’s briefly define 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 is made up of 25 distinct icons. But because they are placed in close proximity, you recognize the whole “U” figure.

Unilever logo shows 25 distinct icons in proximity that are perceived as a single "U" shape

Image Source

Similarity

The law of similarity states that when objects look similar, they will be perceived as one object or as a part of the same group. 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.

Sun Microsystems logo uses Gestalt law of similarity

Image Source

Closure

According to the law of closure, people fill in missing information or gaps in order 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.

WWF logo is perceived as panda because of Gestalt law of closure

Image Source

Continuity

The law of continuity describes how objects that look different but are similarly aligned will be perceived 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.

Mastercard logo uses Gestalt law of continuity to show two interlocking circles

Image Source

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 ad for Melbourne’s 2007 Food & Wine Festival applied this principle to emphasize both food and wine. Below you can perceive the white fork as the figure against the black background and the black wine bottles against the white background.

Melbourne Food & Wine Festival ad implements Gestalt law of figure-ground to display fork and wine bottles

Image Source

Let’s take a closer look at one of the most popular of these principles — proximity — below.

Below is an illustration of the law of proximity.

Law of Proximity graphic shows three rows of elements perceived as one group and one row of similar elements perceived as separate group

According to this principle, you’ll perceive the three rows of shapes on the left as belonging to one group, despite the fact that some are different colors. And you’ll see the row of shapes on the right as belonging to a separate group, despite the fact that 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 of shapes on the right is further away.

Let’s take a closer look at how this law applies in UX design.

Law of Proximity UX

Applying the law of proximity in UX designs is easy. Basically, just place related elements near each other and unrelated elements apart from each other. Using whitespace to group or separate elements is key.

In web forms, for example, the labels should be placed in close proximity to the input field so that the user understands they’re related. The Bootstrap form below is easy to understand and complete.  

Bootstrap form implements law of proximity by placing label and input fields near each other

The form below is more difficult to understand because of the large chunk of white space between the label and input field for email address. Most users will likely be able to figure it out and fill in the text field correctly, but it will require more cognitive resources.

Bootstrap form with email address label far away from input field breaks law of proximity

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

Law of Proximity Examples

You can see the law of proximity applied to most web pages, apps, remote controls, business cards, and other interfaces and designs. Let’s take a look at some examples below.

Navigation Bar

W by Crystal Whites homepage uses law of proximity to visually indicate difference between primary and secondary navigation items

Image Source

Most navigation menus provide simple examples of the law of proximity in action. Take 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 indicate to website visitors that these three items are secondary navigation items.

Product Page

Movita Organicss shop page is an example of the law of proximity

Image Source

Product pages are also great examples of the law of proximity. Notice how in the product page above, the image, star rating, title, price, and “Add to Cart” buttons for each product are all in close proximity. This conveys to the reader that all this information is related to one product. Whitespace is then used to separate one product from another.

Newsletter Opt-in Form

Broken Lands newsletter opt-in form places the email address field in close proximity to the subscribe button

Image Source

You can see the law of proximity applied in most newsletter opt-in forms as well. 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.

Website Footer

SUPERFLUIDs website footer uses law of proximity to group related navigation items

Image Source

Website footers typically exemplify the law of proximity. A good use of proximity essentially means that logo and brand values should be grouped together, contact details should be grouped together, social media profiles should be grouped together, and so on. In the example above, notice how most of the items are grouped together under three headings: help, legal info, and follow us.

Law of Proximity in Website Design

From navigation menus to web forms to virtually everything in between, the law of proximity is applied frequently in web design. When you group related content together, it helps users to better understand their association. This can make it easier for users to digest the content or take action on your site.

ux templates

 ux research kit

Originally published Jul 1, 2021 7:00:00 AM, updated July 01 2021

Topics:

User Experience