CREATIVES!
3 steps. 6-figures. thriving career
masterclass
CREATIVES!
3 steps. 6-figures. thriving career
masterclass
Visual Design

Gestalt Principles: How To Apply Them In Your UX/UI Design Projects

by
Felipe Guimaraes and Aela Team
Apr 19, 2021
4
minutes of reading
Table of Content

Gestalt Principles define some basic laws that help us understand how the human mind perceives visual stimuli.

For example: what do you see in the cover image of this article? Most people can see a 3D cube, but if you look up close, it’s just circles cut into three parts. This means we recognize the whole before seeing the individual parts.

Gestalt psychology was founded on works by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. They emphasized that humans perceive entire patterns or configurations, not merely individual components.

Keep reading to know more about user perception and their behavior when interacting with digital products. This awareness will help you design better user interfaces!

What is Gestalt and why is it relevant to UI Design?

Gestalt principles are about how humans organize their perceptions. They inform us on how people form perceptions and give meaning to those perceptions based on their existing knowledge and prior experiences.

Therefore, the essence of Gestalt is that we make meaning when we create perceptions through our interaction with the external world. In other words, it is about how we make sense of the world and the complex elements we see. We engage memories that look inward to reason or understand how the experience impacted us.

Thus, how we perceive and construct meaning is inextricably embedded in who we are and what we are willing to do.

Why is it important to your design projects?

We like to find simplicity and order in complex shapes because it demands the least cognitive effort from us. This means designers can use these principles to prevent users from becoming overwhelmed with information.

Understanding Gestalt principles can make them more aware of elements and components during the design phase.

To summarize, having a solid comprehension of how Gestalt principles work will help you in three ways:

  1. To determine which design elements are most effective in any given situation. For example, deciding on a background shading, determining visual hierarchy, grouping similar items, or distinguishing them into different groups;
  2. Knowing how these psychological principles influence our visual perception allows designers to direct users’ attention to specific points of focus that will lead to taking actions and create behavioral changes;
  3. At a higher level, Gestalt principles help design products that solve user needs and help them complete their tasks in a pleasant and objective way.

This way, it is necessary to explore how people perceive information so we can use the insights to provide users with excellent navigation.

It is also important to remember that UI Design is part of UX Design, and its priority is to put the user at the center of design decisions throughout the process. Therefore, designers aim to provide answers and help users achieve their needs.

So, let’s see how each Gestalt principle can positively affect the user interface.

Reading tip: Nielsen’s Heuristics: 10 Usability Principles To Improve UI Design

The 7 Gestalt principles

According to Gestalt psychologists, the fundamental principle of perceptual grouping is the law of Prägnanz (also known as the law of good Gestalt). The law of Prägnanz says that we tend to experience things as regular, orderly, symmetrical, and simple.

Of several geometrically possible organizations that one will actually occur which possesses the best, simplest and most stable shape. — Kurt Koffka

The law of Prägnanz implies that, as we perceive the world, we eliminate complexity and unfamiliarity so we can observe reality in its most simplistic form.

So eliminating unnecessary stimuli help the mind create meaning.

Gestalt psychologists refined the law of Prägnanz, which involved putting down laws that, hypothetically, allow us to predict the interpretation of sensation. Those laws we called Gestalt Principles.

The principles were based on similarity, proximity, and continuity.

  1. Proximity.
  2. Similarity.
  3. Continuity.
  4. Closure.
  5. Figure-ground.
  6. Common-region.
  7. Focal points.

1) Principle of proximity

This law affirms that we perceive elements that are closer to each other to belong in the same group. In the same way, if elements are distant, the human eye catalogs them into a different, separate group.

Looking at the example below, both images have the same elements, but changing their proximity causes the relationships between the elements to be perceived differently.

Therefore, we perceive the elements in the first image as one group or one block of information. While in the second image, we see them as two groups.

Gestalt principles: Principle of proximity
completeness

Application in UI Design

Thus, designers can use this principle to decide how to position elements. This way, they will add space between elements according to their need if they want users to perceive different information to be part of the same group or not.

In the example below, the labels are right next to the correspondent text fields so users can quickly understand where they have to write their Name and Email:

Labels are very close to their respective text fields.

Whereas in the following example, there are different blocks of information, elements containing icon + title + text. But the proximity between these elements creates the perception of a larger group, so when we look at the image, we instantly perceive three groups.

Exemplo do princípio de proximidade

2) Principle of similarity

The Gestalt principle of similarity explores the fact that similar elements are perceived as being part of the same group and having the same function.

In the image below, we have a group of elements, but the color variation makes users perceive them as a different group.

Gestalt: Principle of similarity

Application in UI Design

See the image below. How many groups can you identify?

Observe the following:

  • The menu items have the same style and are positioned close to each other. So it is clear that their function is the same (links) and that they differ from the gray text scattered around the website. Moreover, the group is broken slightly when a link is clicked on (more about this in the Focal Point Principle);
  • Logos are also perceived as a group because they have the same visual treatment.
Exemplo princípio da similaridade

In the following example, we can see that text fields have the same function, but the button, despite having the same shape, is perceived with a different functionality because of its accent color:

Exemplo do princípio da similaridade da Gestalt

3) Principle of continuity

The law of continuity states that elements positioned in a line (or curve) are perceived as a continuation, a sequence of facts arranged in an order, or a follow-up of the previous element.

Gestalt: Principle of continuity

Application in UI Design

Booking website uses the continuity law to incentive users to fill out the search form on their homepage in the “correct” order.

Exemplo do princípio da continuidade

Extra tip: continuity illusion

Within the study of Interaction Design, Gestalt principles are applied strategically to emphasize affordances and signifiers.

So one way to use continuity is to create the illusion that it exists so that users understand that there’s more to see.

In the following example, the previous and next images of the carousel are cut off on the screen edges, giving us the impression that we need to swipe left or right to see more, providing intuitive navigation to users.

Exemplo do princípio da continuidade

Reading tip: Animation in UI: How to Create Motion Design

4) Principle of closure

You have probably seen a partial image that, even though it wasn’t completely finished, you could tell what the picture was.

That’s the law of closure. The human brain automatically fills in the gaps that don’t exist. This Gestalt principle states that we use memory to convert complex objects into simpler or known shapes.

Take a look at the image below, for example. The illustration has a few black shapes, but you can tell it’s a dog.

Gestalt: Principle of closure

Application in UI Design

In the example below, how elements and texts are organized gives us a clear idea of which content belongs to the same group.

a website screenshot to show an example of a gestalt principle: law of closure. In the image we see a pictures, written content, dates and how long it takes to read each article. They are organized in a way we can understand which information belongs to the same group.

The same happens in the following example; there’s no need to draw a line because it is clear where one section ends and the other starts.

Exemplo de princípio de fechamento

Extra tip: illusion of completeness

Working oppositely to the Illusion of Continuity cited in the previous example, the illusion of completeness creates the impression that the content is over or that the page is complete.

In the example below, if you look at the first image, there’s no indication that there’s more content to see. So if this is intentional, great, but if there’s more content for users to see, you need to make this obvious to them.

Applying the closure principle to prevent the illusion of completeness means segmenting page elements above the fold so that they appear incomplete and encouraging users to scroll down or swipe to the sides.

For example, in the second image, you can see the button “See all recent,” making it clear to users that there’s more content to see.

Headspace mobile app.

5) Principle of figure-ground

This Gestalt law states that our perception instinctively perceives objects as either being in the foreground or the background.

One of the first things people involuntary notice when using a website or app is determining which is the figure and which is the ground.

We cannot focus on the image prominently in the front and on the ground simultaneously.

Gestalt: Principle of figure-ground

Application in UI Design

This principle is very used in navigation and dialog boxes. Notice in the example below that the background becomes secondary when a dialog box emerges.

Exemplo da Figura-fundo

Reading tip: Color management: Keeping Your Colors Consistent

6) Principle of common region

The common region principle is related to proximity. This principle states that when objects are positioned within the same closed region, they are perceived as part of the same group.

Gestalt: Principle of common region

Application in UI Design

The common region principle is helpful when we need to separate content, so we can perceive them as different groups.

So adding borders or other visible barriers is a good way to create a perceived separation between groups of objects when they are in a close region.

Exemplo do princípio de região comum

7) Principle of focal points

The focal point law states that any element that stands out visually captures and holds the viewer’s attention.

Gestalt: Principle of focal points

Application in UI Design

Thus, in interfaces, we actively use this principle when dealing with visual hierarchy or when we must emphasize the main action that a user should take.

In the examples below, we can see this applied in different ways.

The typography emphasizes the word “free,” which stands out and makes it easy to memorize. In addition, the components in red contrast with the gray map, helping the process of locating these points of sale.

Exemplo de princípio do ponto focal
Source: Dribble.

In the image below, we can see that when a body part is selected, this becomes the focal point. At the same time, the green button highlights there’s an action the user can take.

Exemplo de princípio do ponto focal
Source: Dribble.

Designers can apply these principles together with a User-centered design approach to ensure that UIs are built in the best way possible to deliver a great user experience.

Se você gostou desse conteúdo não se esqueça de compartilhar! Esse pequeno gesto ajuda bastante no nosso trabalho! Fique à vontade para continuar navegando aqui e, caso queira receber nossos conteúdos por email, inscreva-se na nossa newsletter!

Recent posts

Interview with students hired

Get ready to be hired

We are proud to, every month, have alumni being hired in large companies, in countries such as
USA, UK, Ireland, Germany, Netherlands, Spain, Portugal, Austria, Brazil, Czech Republic, New Zealand and Canada.

Real-World Training Focused on Results, Not Just Diplomas

Are You Ready to Turn Your Passion for Design into a High-Paying Career, Earning $137,000+?

Kickstart your journey by downloading our free ebook, 'Career Change to UX/Product Design,' and get ready to enter one of the most rewarding careers out there.
Usamos cookies para tornar o site da Aela um lugar melhor. Os cookies ajudam a fornecer uma experiência mais personalizada para você e análises da web para nós. Saiba mais.
Aceitar