What is proximity in design?

The proximity principle is the idea that placing similar design elements close together produces a more effective 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. 

Proximity is one of the most important grouping principles and can overpower competing visual cues such as similarity of color or shape. The practice of placing related elements close together and separating unrelated elements can be seen almost everywhere in UI design.

The following example illustrates the principle of proximity. In the first image you see one group of circles. In the second image you see 3 groups (columns) of circles. The only thing that changed is the distance (proximity) between some of the circles.

There is  two groups of elements rather than 24 individual objects. All objects are identical, and the only thing differentiating them is the white space that separates them.

How would you use proximity in design?

The proximity principle helps designers achieve two major goals, which include

1.     making layouts appear less crowded and

2.     grouping together related elements.

 

1. Proximity

Proximity also makes the page more organized. Designers use the principle of proximity to give users visual cues(indications).   By grouping related elements together, designers send users a clear signal  to perceive.. Careful application of proximity in design helps to reduce visual clutter and improve comprehension.

2.     Negative space, or space

Negative space, or space around and between elements, is the tool that designers can use for that. Adding or subtracting negative space between elements can either unite or separate them. by adding too much content and functional elements, you overwhelm users with too many details. As a result, it becomes harder for them to understand what’s important and what’s not,

Here are four practical examples of proximity in design:

 Better form design

Forms are an essential part of almost any product experience. A form is a type of conversation. It’s essential to design forms in a way that allows users to fill out all data effortlessly. There are three major areas where the principle of proximity can help create a better experience for users: field labels, input fields, and input format. 

Forms are an important part of the internet. Most desired actions like paying or signing up use forms. Here user abandonment rates are a problem and creating easy to use forms can improve those.

With the use of proximity, you can make it clear which label and which description belongs to which field. This will make your form easier to use and users are less likely to leave

Typography & copy

Proximity is a very important part of making a text easy to read. For example, a headline must have more space before it then after. By being closer to the section it belongs to, it feels more connected to it. Line height is another example. Space between lines must be bigger than between words, but small enough so they form a paragraph. The same is true for letter spacing. The spacing must be wide enough so letters are distinguishable but small enough to form words from the individual letters.

Proximity is a very powerful gestalt principle that helps you to structure our designs and group content together.

 Improve content comprehension

Content is king. For many products, content is the reason why people start using them in the first place. Good readability  and legibility  are essential properties of product design. 

Many factors can contribute to readability and legibility, including font family, font size, and text contrast. But the way you structure content on a page also directly impacts content legibility and readability.

Readability can suffer when a text is presented without any formatting. By presenting content in short, easily .

Presentation

Presentation slides are somewhat close in layout to print. Slides are often done by non-designers and, as a consequence, suffer from neglecting gestalt principles.For example, when presenting the steps in a project, you need to make sure it is obvious which step belongs to which phase. This makes understanding the slide it easy and fast.

Examples from websites

Todays’ websites are full of content, making grouping the items all the more important.

Menus

Menus are typically left or on top of the website. Especially for top menus it is fashionable to add a lot of space between the menu items. This is fine as long as you make sure to have all other content even further away from the items. Otherwise it will be hard to recognize the items and the menu itself.

Content previews & more

Content pieces like previews or quotes consist of different parts like images, headlines and copy. To make them seem like one item, e.g. an article preview, the space between them must not be too big.

Cards

Whenever you have different groups of cards you need to make sure that the space within a group of them is smaller than the space to the next group.