Illustration by Gleren Meneghin
In the early 20th century, German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Köhler explored how people visually perceive the world. Based on the results of their experiments, they’ve defined the gestalt principles—a set of rules that explains how people interpret the complex world around them. Proximity is one of the gestalt principles. Modern graphic and user interface design relies heavily on this principle.
This article will explore proximity in design, and take an in-depth look at how to apply this principle in visual design.
What is proximity in design?
How do people decide whether certain elements are part of a larger group or not? They look at objects, and if objects are located close to one another, they see them as a unit. Take a look at the image below. You will likely see two groups of elements rather than eighteen individual objects. All objects are identical, and the only thing differentiating them is the white space that separates them.
White space separates circles into two individual groups. Image credit Nick Babich.People follow the same approach when they interact with both physical and digital products. For example, when we examine a web page or mobile screen, we usually see it as a composition of objects rather than individual objects. This perception offers user interface (UI) designers an excellent opportunity—as it’s possible to group objects together that share similar functionality or properties.
How would you use proximity in design?
The proximity principle helps designers achieve two major goals, which include making layouts appear less crowded and grouping together related elements.
Filling out an entire web page with content and functional elements is one of the common mistakes among designers. It’s tempting to provide as much information as possible and fill up every portion of a layout with text and images. But it’s important to understand that users have a limited attention span, and 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, and it prevents users from digesting information properly. Careful application of proximity in design helps to reduce visual clutter and improve comprehension.
Proximity also makes the page more organized. Designers use the principle of proximity to give users visual cues. By grouping elements together, designers send users a clear signal that those elements are related. 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.
Here are four practical examples of proximity in design:
1. Better form design
Filling out forms is one of the least enjoyable parts of user interactions. Yet, forms are an essential part of almost any product experience. Be it a mobile or web design, it’s vital 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.
Field labels and their placement plays a tremendous role in how easily users can scan the form. We know that top-aligned labels tend to reduce form completion time because the user’s eye moves in one direction (from top to bottom). But by placing labels near corresponding form fields, you make it much easier for users to scan the form. It is especially important for longer forms (forms with seven or more fields) because when relationships between labels and form fields are not apparent, users have to spend extra time figuring out what label belongs to which field.
By placing labels closer to relevant fields, it’s possible to make a form easily scannable and increase the chances of successful completion. Image credit Nick Babich.Long forms with many fields may appear difficult to fill out. A general rule of thumb is to eliminate all optional fields and only ask users to provide information you need to use. But what should you do when a form requires multiple input fields? The answer is simple: you can change the user perception of the form using the principle of proximity.
By grouping related fields together, you can help users understand why they need to fill in this information. Take a look at the example below. Both forms have the same number of fields, but the fields in the right form are categorized into three groups. The amount of user input is the same in both examples, but the impression on users is entirely different.
By grouping relevant input fields, you make the process of data input easier. Image credit Nick Babich.Finally, it’s possible to use proximity in design to format data input. You can use chunking for multiple types of data. For example, when you ask users to provide their phone number, it’s much easier to present the number in chunks because it will make it easier for them to scan and validate the input data. Compare “+18005550123” with “+1 (800) 555-0123.” The data chunking used in the second example is easier to scan, validate, and recall in the future.
2. Improve content comprehension
Content is king. For many products, content is the reason why people start using them in the first place. Good readability (the ease with which a reader can understand a written text) and legibility (the ease with which a reader can decode symbols) 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 scannable blocks—grouping sentences in paragraphs or sections and separating them with a bit of whitespace—you help users scan and read the text.
Examples of proximity in design: By breaking a text into paragraphs, you make it much easier for users to scan and read it. Image credit Nick Babich.3. Emphasize certain elements
Emphasis is one of the most important principles of user experience (UX) design. Giving priority to specific elements or content on a page is one of the most common tasks for designers. While designers can use many different techniques to achieve good results—such as making an element larger or adding more contrast—it’s possible to achieve the same results without any alteration of the original element. Instead, you can play with the amount of negative space around the element.
There’s a direct connection between negative space and user attention. The more negative space you add around an element, the more noticeable it becomes for the viewer. This happens naturally—as the user’s attention will be guided towards an element with more negative space simply because there’s nothing else in that area drawing their attention.
When visitors come to the Google Search homepage, the first thing they notice is a Google logo and search field underneath it. Image credit Google.It’s worth mentioning that it might be hard to know which element attracts the most attention on a web page. So it’s recommended to use web design software to create a prototype of your design and validate it with the five-second test. Show your prototype to people who represent your target audience for five seconds, and then ask them, “What are the main elements you can recall?” If they name an element (or elements) that you want them to see, then you’re all good.
4. Guide the viewer’s eye through content
The principle of proximity can help you create a flow that will guide the viewer’s eye from one point to another. By adjusting white space, you can easily create focal points or areas that naturally attract the user’s attention. Creating focal points starts with creating a web design grid that will allow you to place design elements (such as text, images, or functional controls) consistently within the layout. After you have a grid, you need to arrange elements to guide users through key content sections. As you can see below, this is exactly what Evernote does by pairing text blocks with illustrations. As a result, the viewer’s eye follows a zig-zag path as they scroll through this page.
Evernote uses a zig-zag pattern to direct users’ attention. Image credit Evernote.Proximity and responsive design
Focusing on the relative distance between UI elements is important when you design for various screens and resolutions. Design that looks good on large desktop screens might not look as good on tiny mobile screens. When your design is scaled down to accommodate smaller screens, the spacing between elements can be minimized, which might destroy UI elements’ intended relationships. It’s essential to test your design on various screens and resolutions to see whether your design scales well. It’s possible to use Google Chrome Dev tools to simulate mobile devices.
Showing how Google Search page will look on the iPhone X screen. Image credit Nick Babich.Leverage the principle of proximity in your designs
The main purpose of using proximity in design is to organize information and create a visual hierarchy that aids in better usability of your product. Designers should leverage proximity to create meaningful groups so that users can easily understand their interface. And the easier it will be for people to use your product, the more enjoyable experience they will have.