The Basics: Proximity Principle

Yolqin Alimov
UX Planet
Published in
4 min readJan 26, 2025

UI design is significantly influenced by the Gestalt principles of grouping, a fundamental set of laws and guidelines many designers rely on to create effective interfaces.

The term “Gestalt,” meaning “shape” or “form” in German, originated in the early 20th century. Developed by Gestalt psychologists, these principles explain how people visually group elements. The five key categories — Proximity, Similarity, Continuity, Closure, and Common Region — impact UI design by affecting user perception and interaction.

This article will focus on the Proximity principle, which is essential in UI design.

Proximity

The principle of proximity says that objects close to each other are often seen as a group.

Law of Proximity

Even if the shapes and sizes differ, their closeness can make the viewer see them as part of a pattern.

In Photography

Photo from The Photographer’s Guide to Gestalt Theory By Vinci Palad

Take a look at the images of the penguins above. Both pictures feature two penguins, but in the left image, their closeness creates a connection between them.

In Typography

Grouping related information by their closeness is common in writing. Sentences form paragraphs, with spaces above and below.

Well-designed headings also use space to indicate related paragraphs, with the text in that section being closer to the heading than to the previous section.

In Graphic Design

In the example below, our mind perceives the adjacent vertical bars as combining to create a singular image of a deer.

Image from Simplicity, symmetry and more: Gestalt theory and the design principles it gave birth to by Laura Busche

In Interface

When related fields are grouped together, it makes the form easier to read and less intimidating for users. This clear organization helps users quickly find what they need and improves their overall experience.

For example, a single form with 11 fields may seem overwhelming, while a form split into three sections feels simpler.

Circle.so: Displaying 11 form fields in a single large group (left) may seem more intimidating than organizing the same number of fields into three smaller groups (right).

This clear organization encourages efficient scanning and improves the overall user experience.

On YouTube, each thumbnail image is close to its title and details. This visual setup helps our brains see these parts as a single unit, making them stand out from other content.

YouTube.com: There is no need to use borders to separate each item because the relationship between the elements is already clear.

When It Goes Wrong
Aurora Harley shows how mixing unrelated items can confuse users. On the California EDD website, the “Add” button for listing employer information is located among unrelated buttons like “Next,” “Save as Draft,” and “Cancel.”

CA.gov: The Add button was located near unrelated buttons, making it hard to find.

When users look at the page, they might focus only on one button and make wrong assumptions about the others. Instead, placing the “Previous” and “Next” buttons together would make it easier for users, as these buttons are related to each other.

Daria Krasovskaya shows that using Gestalt principles alone does not ensure a good user experience. Like many things in life, there are both good and bad sides to consider.

In this case, the principle of proximity helps design a form that guides users on what information to enter in each section. However, placing the elements too close together can also make it hard for users to read and complete the form effectively.

The proximity principle of Gestalt is key to effective design. It helps users quickly see how elements relate to each other through careful spacing and organization. By using this principle, designers can make interfaces that are easy to understand and navigate. However, proximity is just one aspect of design. Other Gestalt principles, like similarity, closure, and continuity, are also important for creating positive user experiences.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (1)

What are your thoughts?

I’m curious ,when using the proximity principle in complex interfaces with overlapping elements (like dashboards or data-heavy UIs), how do you strike the right balance between grouping related items and avoiding visual clutter? Any tips or examples?