How to enhance your design with the gestalt principles of proximity
According to gestalt psychology, we need to organize what we see to make sense of the world. Without using patterns to order out vision, we would overwhelm our brain. The gestalt psychologists formalized those patterns as the gestalt principles.
The gestalt principles (of grouping) are part of the most important design theories. Organizing information means understanding. A designer's task is to make content as easy to understand as possible. Proximity is one of the most common principles. In the following I will provide some examples to show the importance of this principle.
What is the principle of proximity?
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. 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.
The principle of proximity is stronger than other gestalt principles. You can see below that the circles still appear grouped, even when they differ in shape or color. Thus proximity is stronger than for example the principle of similarity.
Proximity can help you define the direction of the viewers' attention. Below you see either rows or columns, depending on the proximity of the elements.
Why is proximity important?
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.
Example usage of proximity
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.
Those rules apply in digital and print design alike.
Even though the focus is on digital work, it makes sense to look at print layouts first. Print is the basis for the layouts we build on the web and it makes understanding the principle much easier. In the magazine layout the image descriptions are in different positions on the page. Yet, due to the close proximity to only one image, it is immediately clear which text belongs to which image.
By adjusting the proximity of the elements you form groups of similar information. For example contact details like phone number, email address & website. This makes it easier for the viewer to find a piece of information quickly.
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 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 recognise 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.
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.
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.
Examples from Apps
Many app menus have huge gaps between the icons and the labels. This adds mental complexity to your design as the user needs to organise the interface in her head. Take care to get your proximities right and the interface will be much easier to understand.
Every app has some list screens, so learning how to make them better is very valuable.The goal with designing lists is to make the individual items distinguishable. To reduce visual noise, you can use proximity instead of lines between items. Just make sure you have a visibly larger space between items than between the elements an item consists of.
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.
Examples from car interfaces
Car interfaces have to be usable in stressful situation while the user focuses on the road. This is why elements in a car are grouped by proximity to form thematic units.
This is why everything concerning lights is grouped on the left of the steering wheel. Interface elements related to driving are grouped around the steering wheel. Entertainment related items are in the middle console. And mirror and window buttons are on the driver window, close to where they take effect. This grouping makes it easier to find and remember the elements.