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.
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.
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.
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.
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.
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.
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.
Let’s take a closer look at one of the most popular of these principles — proximity — below.
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, 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.
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.
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.
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 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.
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 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.
Originally published Jul 1, 2021 7:00:00 AM, updated July 01 2021