What are the Gestalt principles and how to apply them

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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