The principles of Gestalt were discovered in the first half of the 20th century by Gestalt psychologists, who were trying to understand how people visually perceive the world – specifically, how people decide whether certain elements belong to the same group or not. These principles include proximity, similarity, and closure – which are important in the visual design of digital interfaces. Later, more grouping principles (such as common region ) were added to the original Gestalt list.

User interface design relies heavily on proximity and other grouping principles, as correctly interpreting which elements are related is fundamental to successful interaction with the interface.

Definition The principle of proximity It states that items that are close together will likely be perceived as part of the same group – sharing characteristics or similar features.

Place related items close to each other.

Proximity is one of the most important principles of grouping and can override competing visual cues, such as similarity in color or shape. The practice of place related elements together e separate unrelated elements It can be seen almost everywhere in user interface design.

The white space separates the shapes into two distinct groups based on the principle of proximity. Even when including different shapes in each group, these two groupings are still clear.

The use of Variable amounts of white space to join or separate elements. It is essential for communication among significant groups. For example, in the header area of the Wellington City Council website, the function To look for It is located on the same line as the main site navigation when viewed on a large screen. However, the extra white space between the main navigation and the Search This indicates that they belong to separate groups and therefore have distinct functionalities. This blank space is essential to highlight the function. To look for from the rest of the main menu.

Captura de tela do site do Conselho da Cidade de Wellington, como pode ser visto em um navegador de desktop
Wellington City Council website, as seen on a desktop monitor: extra white space to the left of button Search the It separates it from the rest of the main navigation and identifies it as a different type of functionality, even though it shares the same font treatment with the main categories in the navigation menu.

On smaller screens, however, it is not possible to maintain this spacing. To prevent these areas from being perceived as a single group, the Search It is moved away from the main navigation. (Yes, other aspects of this design could be further improved, such as grouping the label of Search and the corresponding icon using proximity or common region.)

Captura de tela do site do Conselho da Cidade de Wellington, como pode ser visto em um tablet.
On a tablet, there isn't enough screen space to maintain that separation, and to prevent that... Search While it may seem to be part of the main navigation, it has been changed and grouped with other items in the utility menu.

The use of proximity to create meaningful groups is reflected even when presenting the basic content of the text: sentences are grouped into paragraphs separated above and below by white space. Furthermore, the white space around well-designed headings signals which paragraphs they are associated with – the text of the corresponding section is usually placed closer to the heading than the text of the preceding section.

Captura de tela do conteúdo do texto (1 título com um parágrafo de texto seguido de um subtítulo e 2 parágrafos curtos) e um gráfico mostrando o mesmo layout em que o texto é coberto por caixas cinza.
(Left) Proximity defines groups of related text (paragraphs and sections) and aids in digitization. (Right) These groupings are discernible even without viewing the actual text.

Chunky construction also applies to form design: when related fields appear grouped together, the form seems easier to scan and less daunting to complete. For example, a single form with 12 fields might seem very tedious to fill out, while a 3-part form with 4 fields seems simple in comparison. (The proximity principle is applied in various ways in good form design. For example, a minimal amount of spacing between a top-aligned label and its corresponding form field makes that relationship apparent compared to a larger margin before the next pair of label fields.)

2 gráficos simulando um formulário: 1 com um único agrupamento grande de campos de formulário, versus agrupando os campos em 3 seções.
Twelve form fields in one large group (left) seem more daunting than the same number of fields divided into three groups (right). (Obviously, assuming the groups are meaningful – for example, shipping information in one group and billing information in another.)

On the other hand, Grouping unrelated elements together can camouflage the users. For example, on the California EDD website, the button To add The option to list the employer information required for a form is hidden among the unrelated buttons to proceed to the... next stage of the process, Save as draft e Cancel .When viewing the page, users can simply looking at one item within a perceived grouping and using it to judge what the other items in that group should be. . (On the other hand, Previous e Next They are related, therefore grouping them would increase usability.

Captura de tela da etapa 3 no formulário de solicitação do CA EDD.
CA.gov: the button To add It was placed near unrelated buttons, far from the main area of the form, which made it difficult to locate.

Distant elements appear independent and are easily ignored.

When users completely miss a link, button, or piece of information, even if it's right in front of them, proximity (or rather, the lack thereof) is often to blame. Because elements separated by white space are perceived as less related, distant items can be easily overlooked by task-focused users who expect all relevant information and interactive elements to be grouped together. This behavior is sometimes described as "tunnel vision": users selectively attend to certain areas of the screen while completing their task and miss things "in sight" because they are outside that focal area.

For example, in our mobile usability studies, participants often get frustrated when apps require them to create an account before accessing content. However, in many of these designs, account creation can be bypassed – this option is simply difficult to find, as it's placed in the upper corner of the page, far from the main calls to action.

Captura de tela da tela de login do aplicativo móvel Kayak
Kayak mobile app: the link Ignore It is displayed in the upper left corner of the screen, far from the main content and the most important action phrases. This channel facilitates negligence and tricks users into thinking they need to log in.

Similarly, the Hulu app on an Apple TV displays instructions on how to interact with the current screen content only in the bottom right corner of the screen, far from the relevant content. Furthermore, the text is obscured by the background image of the selected program. This lack of proximity led my husband to believe there was no way to access the screen. Details (where the other episodes of the season were listed) – thankfully, he took me to correct it!

Fotografia do aplicativo Hulu Apple TV.
Hulu on Apple TV: Instructions for Click and hold: (for) The details They are displayed in the bottom right corner of the screen, far from the information about the next episode to be watched. Especially on a large TV screen, this placement makes them difficult to see.

Proximity can change in responsive designs.

Paying attention to the proximity of elements is particularly important when designing responsive layouts, as these Groupings may change as they adapt to different screen sizes. .Reducing the size to smaller devices can minimize the space between elements or move them further apart, destroying grouping relationships.

For example, on the Transport for London Driving page in the desktop area, there are links to information about... Ultra Low Emission Zone and the Low Emission Zone They appear side-by-side in two different columns. Presenting these two links close together allows users to easily see and compare them to decide which one to click. However, on small screens, these links appear far apart because the two columns are stacked one above the other, not side-by-side. This unfortunate positioning may mean that mobile users never discover the second type of emission zone.

Capturas de tela da página Transport for London Driving, como vistas em uma tela da área de trabalho e em um dispositivo móvel.
Transport to London: Information about two types of low-emission zones appears very close together on a large screen (left). On a mobile device (right), the sections corresponding to the two zones were far apart due to the way the columns were stacked in the responsive layout.

Conclusion

Placing related elements in close proximity and using white space to create meaningful groups is a fundamental principle in visual design. Users focus on tasks and can scan pages quickly, making groupings visually obvious, increasing usability, and helping users quickly find and focus only on the UI elements most relevant to their current task.