Proximity Principle in Visual Design
The principle of proximity states that we perceive objects which are close to one another as a group. This is true even if the color, size or shape of the objects differ.
One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. When people perceive complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces.
The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.
The proximity principle is based on the idea that our minds seek to organize and bring order out of chaos, which makes it easy for us to navigate the world
Why is it important in Visual design?
Proximity is so powerful that it overrides similarity of color, shape, and other factors that might differentiate a group of objects.
People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.
Many designers use the principle of proximity without even knowing or thinking about it. Yet, I would argue, it is always helpful to know why this strategy works. This way you can reason about a design and explain issues to colleagues. And your developer colleague will understand why you need a space of 5px horizontally and 15px vertically between your cards. The gestalt principles also make for a great checklist when something feels off about a design.
Proximity Principle in Content
Typography & copy
The importance of proximity in making a text easy to read cannot be overstated. A title, for example, requires more space before and after it. It feels more connected to the portion it belongs to since it is closer to it. Another example is line height. The space between lines must be larger than the space between words, but not so large that they do not constitute a paragraph. The same can be said about letter spacing. The spacing must be large enough to discern letters yet tiny enough to allow words to be formed from the individual letters.
Let’s take an example of the Britannica Website
The image below shows two lists of the same items. On the left, it’s difficult to wade through all the items as they are equally close together, while on the right you see instantly that certain items fit together logically. Create more logical groupings and put space between the items that shouldn’t be grouped together.
Proximity Principle in Web Design
Today’s websites are full of content, making grouping the items all the more important.
We can take advantage of this principle by grouping similar information, such as sections within the same page/web application or navigation buttons. Being so close, the white space plays a fundamental role to let the eyes get some rest.
White space is a powerful tool for establishing proximity. Adding whitespace to the same group helps us interpret things differently. Use white space to reinforce groupings and distinguish them from other elements in your designs.
For example: On the Amazon website we can see the proximity principle applied. Certain products are grouped together according to the categories for faster interaction between the user and the website. The white space is used between each category to get a better understanding and to differentiate between Rewards, offers & top picks, etc… By adding white space between elements, we change the perception of the groupings
Taking the amazon example further you can see how a similar product ( i.e Mouse) forms a group related by its proximity as well as depending on the previous browsing history you can also see all the items (i.e books) grouped together by their proximity.
We can see that The Hindustan e-Paper uses this principle in its informative figures.(i.e Have you experienced these features)
Proximity Principle in Mobile Design
Menus & Lists
Many app menus have huge gaps between the icons and the labels. This adds mental complexity to your design as the user needs to organize the interface in their head. Take care to get your proximities right and the interface will be much easier to understand.
Every app has some sort of list screen, therefore knowing how to improve them is quite useful. The purpose of the list design is to make individual items easily identifiable. Instead of using lines between things, you can use proximity to reduce visual noise. Just make sure there’s more space between items than between the components that make up an item.
Headlines & sublines
Dashboards often show stats, be it your sports activities or car usage. When adding a label above or below those numbers make sure to visually group the correct elements together.
Salient Points
- The principle of proximity states that we perceive objects which are close to one another as a group. This is true even if the color, size, or shape of the objects differ.
- Today’s websites are full of content, making grouping the items all the more important.
- White space reinforces groupings and distinguishes them from other elements in your designs.
