Graphic explaining Gestalt principles in design with labeled examples

One of the most influential psychological theories in fields of UX and interaction design is the Gestalt theory. The theory was founded by German psychologists and the word “Gestalt” means form or shape in German. As the name implies, the idea behind the Gestalt principles is that humans perceive groups of objects as patterns rather than individual objects.

There are many articles about the Gestalt principles but not so many of them help you understand how to apply them in your work as a UX/UI designer. This article will give you some ideas on how to use the Gestalt principles to create better UX and UI designs that will help people achieve their goals with less effort.

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

The law of similarity

The principle of Similarity states that when objects are physically similar we tend to group them together and assume they have the same functionality. For instance, in the image below it’s pretty easy to distinguish the line that contains burgundy red circles from the rest of the image due to its different color.

gestalt principle of similarity
An example of the principle of similarity

Using similarity in UX and UI design

Let’s imagine that your company developed an app called “Il Mio Chef'' that is used by Italian food aficionados across the US and Canada (We will use it for the rest of this article).

A recent report your UX researcher handed to you states that when it comes to ordering Italian food, users mostly care about which restaurants are the closest ones to them. After all, we would all want to have our lasagna or pizza delivered while it’s still fresh and warm, wouldn’t we?

To make it easy to help our app users see which restaurants are the closest to them we can use the principle of similarity by highlighting these restaurants in the UI.

In the image below you can see how highlighting these options in yellow (on the right) makes a big difference by visually emphasizing the difference between the closest restaurants and the ones that are farther away. This is how you can use the principle of similarity to help your users quickly find what they look for.

Gestalt principle of similarity in app
Using the Gestalt principle of similarity in an app

The law of proximity

The principle of Proximity states that objects that are located close to each other appear to be more related than objects that are spaced farther apart. For instance, the first image and the second image have the same amount of circles in them.

However, in the second image certain columns are closer to each other and create the impression of having three distinct groups instead of one big group.

Gestalt proximity example 1: a big group
Gestalt proximity example 1: a big group
Gestalt proximity example 2: three distinct groups
Gestalt proximity example 2: three distinct groups

Using proximity in UX and UI design

Let’s take an example from the field of information visualization.

This time, let’s imagine you are an executive wanting to see how your app “Il Mio Chef” performs. You want to look at KPIs that measure financial performance, user engagement, and satisfaction.

At first, your information visualization specialist creates the dashboard below that makes you and all the other executives get lost in the numbers and ask even more questions. After one month many of you just stop using this dashboard altogether.

Gestalt principles used in an app dashboard
KPI dashboard on Il Mio Chef app

At this point you go back to your information visualization specialist and ask her to make it easier for people to understand the big picture by redesigning the dashboard. The principle of proximity comes in handy in this case, and you can see the new design below.

Ready to create brand assets that pack a punch?

Visit our Academy for free marketing design courses.

It contains three groups divided by the type of KPI and it helps everyone understand how the app is doing in terms of financial performance, engagement, and satisfaction. Grouping objects together and using more white space between the groups can help your users digest information faster.

Using the Gestalt principle of proximity in dashboard design
Using the Gestalt principle of proximity in dashboard design

The law of continuity

The principle of Continuity states that once the eye begins to follow an object, it will continue following the “movement” in that direction until it encounters another object. This movement helps us perceive the object as part of the same path we have to go through to find information.

The image below shows how we can use the principle of continuity to create such visual patterns that guide the eye in a particular direction.

An example of the principle of continuity
An example of the principle of continuity

Using continuity in UX and UI design

Your UX researcher presented a new report that shows that the main motivation for users to use the “Il Mio Chef” app is food exploration, since it allows them access to new Italian food restaurants every week. You look at the metric that shows how many times people swipe through their options with the current UI design in the image below (left side) and see that they never swipe more than twice on average to see what options are available to them.

Using the principle of continuity (right side on the image below) your UX designer helped increase that number to about 10 swipes on average. How did that happen?

By hiding part of the image and highlighting the fact you need to swipe left or right to see what’s in there your users' eyes were guided to literally create the “swipe” movement and were more motivated to explore more restaurants and what they offer. This is something the earlier design didn’t motivate you to do at all, even if you’re already inherently motivated to do so.

Using the Gestalt principle of continuity in UX/UI design
Using the Gestalt principle of continuity in UX/UI design

Wrap up

To sum up, using the Gestalt principles presented in this article in your UX and UI design can help your users find information faster and better digest it. Besides, it can increase their satisfaction with your product by motivating them to take the actions they love the most.

Want to try your hand at implementing Gestalt principles in graphic design? Linearity Curve (formerly Vectornator) is easy to learn and offers a wide variety of powerful vector graphics drawing tools.

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

Cover includes artwork by Miklos Philips, edited in Linearity Curve (formerly Vectornator)

What are the Gestalt principles and how to apply them | Linearity Curve (formerly Vectornator)
What are the Gestalt principles and how to apply them | Linearity Curve (formerly Vectornator)