Gestalt. Proximity principle to design interfaces – | Blog

These are a set of principles that were established in the early 20th century by Gestalt psychologists. Fundamentally, these principles capture how human beings make sense of and perceive images.

What are Gestalt principles?

Gestalt principles define how human beings simplify and organize complex images that are composed of many elements, unconsciously ordering each part of the system to create a whole.instead of interpreting each part as an independent element from one another and unrelated to each other.

The Gestalt, picks up our tendency to perceive the whole instead of the individual elements. Therefore, we can say that, Gestalt principles help us understand how people visually perceive the world, including the interfaces of an application or a website.

There are various principles of the Getalt including: proximity, similarity, common region, continuation, closure, figure and ground, and symmetry and order. The principle of proximity is very important in UX, it is that the elements that are visually very close will be perceived as part of the same group.

Gestalt principle of proximity applied to the digital interface

Probably the principle of proximity is the one that interests us the most. What this Gestalt principle really tells us is that we perceive that objects that are close by tend to group them together.

Human beings tend to automatically organize things. Our brain understands that nearby objects are part of the same group.

The practice of putting common elements together and separating unrelated elements can be seen almost everywhere in user interface design.

See also  UX / UI Design archivos - Page 3 of 4 - | Blog

To get our brain to group the elements the amount of white space is key that exists between them in our . Although the elements have different forms.

1. Mercadona

For example, on the Mercadona website for PC, we can see how we group the menu links, since they are navigation options, while the language selection dropdown is more separate and we do not include it in the group of links in the menu. menu.

In this case we also group each block within the page structure by the principle of proximity.

2. Cabify

Practically the same thing happens on the Cabify site. Thanks to the principle of proximity we are able to perceive each group made up of independent elements where white space plays a very important role.

3. Carrefour

Another example is on the Carrefour Spain site. In the Header, in the same container as the logo and the button that gives access to the navigation menu, there are 4 quick actions on the right side that we tend to group together.

4.Amazon

The law of proximity is also used to group fields on forms. A form with many fields that are not grouped together seems more complicated to fill out.

For example, in this form of the Amazon Spain purchase process, we can see how they group the fields, also helped by the space that exists between the field label and its corresponding field of the form.

Placing related elements in close proximity and using white space to create meaningful groups is a fundamental principle in visual or interface design.

See also  Tools to do online surveys in UX - | Blog

Placing grouped elements that are related provides good usability to the site. If these elements are related and grouped in the area that the user focuses on when executing the task, all the better.

credits

Loading Facebook Comments ...
Loading Disqus Comments ...