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.

Source: Amazon

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.

Source: The Hindu e-Paper

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.

--

--

--

A UX Design agency delivering B2B products experiences for Enterprise clients. www.neointeraction.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How being a cat 🐈 dad makes me a better UX Designer

App login design: The art and science of choosing a login method

App login ux design

The Fall of Lorem Ipsum

Great User Research (for Non-Researchers) — Part 2

Improving the experience of a loyalty app — design explorations

A preview image for the Fivestars Android app redesign.

Small money & UX

Upgrading a UX design team’s toolkit

A group of men and women are in front of a white desk full of colourful post its, pens, papers and a laptop.

A look at UI design basics through a Gestalt lens

Silhouettes of Les Paul guitars—seven are white, one is teal.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neointeraction Design (UX Design Agency)

Neointeraction Design (UX Design Agency)

A UX Design agency delivering B2B products experiences for Enterprise clients. www.neointeraction.com

More from Medium

UI Design: All You Need To Know To Get Started.

Surrealism and product branding

Cover image from Marco wine labels designed by (calcco) design studio.

Understanding “African Colors” for Graphic Designers

Paper Summary — Colors, Complexity, Prototypicality and Beauty in the Web