How to apply Gestalt principles in UX design

In this blogpost we will take a better look at the different Gestalt principles and how they can be used to improve UX. For visuals they are used to manipulate the user’s attention to gain focus on certain aspects within the visual.

Gestalt principles: the base for a good UX

It can be challenging to create (digital) products which lead to a good user experience. Therefore, it is nice to have some basic principles to rely on. The Gestalt principles are an example of this because when these principles are applied correctly, users will be aided (unconsciously) to accomplish their goals.

In this blogpost we will explain the principles using examples from the field for the Gestalt principles are often explained using simple figures, whereas in real life we have to deal with much more complexity than colored circles and squares. This is why an example is provided for each principle which explains how it has been applied in UX design.

Gestalt principles: guidelines for our visual perception

Gestalt is a term used in psychology and originates in Germany, it can be translated as form or shape. The Gestalt theory deals with visual perception and tries to describe how people organize visual elements in groups or related figures. To support the theory a set of principles (or laws) were developed which describe the congenital way of visual perception. The principles have been elaborated over the years and new principles have been added, in this blogpost we’ll treat the most well-known principles. For an extended version on the origination of the Gestalt principles you can, for instance, have a look at Wikipedia.

The Gestalt principles seem quite simple, but their effect can have a huge impact on the user experience. Below you will find an explanation of the effect per principle, illustrated by an example from the field.

• Principle of proximity

When everything else is equal, elements that are closer together are seen as a group. In the image you will see one large group of dots to the left and three equal, smaller groups to the right.

Related subjects are often grouped in navigation menus, to allow the user to ignore irrelevant information. The example shows the navigation menu of Bol.com (an online warehouse in the Netherlands) for the category ‘Music, Film & Games’. When a user is looking for a game, he can ignore the first two groups and focus on the latter to continue his journey.

Tip #1 to apply Gestalt principles in UX design:
Make sure elements which belong to each other, are grouped together.

• Principle of similarity

All else being equal, elements that look similar are seen as the same object and elements that look different as as part of a different object. The image will be interpreted as three horizontal lines with white dots and three rows with black dots. Few will think the vertical lines with both black and white dots belong together.

Let’s have a look at the part of Twitter which is used to write tweets: when you look at the icons to the bottom left, the principle of similarity can be recognized: the icons are related, since they allow the user to add something extra to their tweet. This similarity in function comes back in the layout: the icons are equally sized and have the same color and style (rounded shapes).

Tip #2 to apply Gestalt principles in UX design:
Elements which match in function or content, should visually match as well.

• Principle of closure

  This principle refers to the tendency to see incomplete or partly covered figures as complete. Despite the fact that the figures in the image are incomplete, people will still recognize a circle and rectangle.

  Many apps show notifications in figures that overlap the original app icon. In this example you can see that there are 6 unread e-mails of which at least one is new (due to the envelope) in Microsoft Outlook. Both overlap the original Outlook item, but the user will still recognize it. By showing the notifications as overlapping elements, valuable space is saved using the principle of closure.

  Tip #3 to apply Gestalt principles in UX design:
  When there is little space to display information, it is possible to let figures overlap. Make sure that the bottom figure can still be recognized though.

• Principle of continuation

  Our brain will see a path in elements which have been grouped in a certain way and will expect the path to continue in its general direction. In the image most people will see two lines crossing each other, instead of four lines which meet in the middle.

  Google maps shows walking paths as a series of blue dots which we interpret as a path in the direction of our destination. This is not explicitly mentioned in Google Maps, but understood by everyone nonetheless.

  Tip #4 to apply Gestalt principles in UX design:
  When you need to display a path or movement in a certain direction, you can place figures in a line to achieve this.

• Principle of enclosure

By enclosing a group of similar elements with another visual element (often a border), this enclosed group will be seen as one. In the example the enclosed dots seem to belong to the same group, the borders even overrule the principle of similarity.

When looking at Facebook many examples of enclosure can be found. For starters: every individual post is enclosed by a light gray border. Within the post, an external link (in this case the blogpost about FITC) is also placed in a frame. The screenshots and information are subsequently placed in frames as well. Finally, all interaction possibilities are framed, with a slightly different shade of gray as background. Facebook separates the different posts this way and also provides overview within the different posts.

Tip #5 to apply Gestalt principles in UX design:
Use frames to separate functionalities and elements from other, equal elements.

• Figure-ground principle

This principle is all about recognizing the distinction between figure and (back)ground. In the example, most people will recognize a white square on a black background and vice versa.

This principle is applied regularly for forms to login or register to a website. An example is the application form of Airbnb. The site is shaded and all attention is focused on the form in the white square.

Tip #6 to apply Gestalt principles in UX design:
When something requires the user’s attention, you can explicitly highlight it using the figure-ground principle. However, only use it when the user asked for it, because applying figure-ground randomly will lead to irritated users, since they are bothered on their journey.

• Principle of symmetry

People like it when figures can be divided in groups of symmetrical elements. In the image you will see three pairs of brackets instead of six individual brackets.

An example of the principle of symmetry is the logo of ‘Scannable’ (a nice iOS app created by Evernote to scan documents with your smartphone). The elements differ in color and are separated, but since they are symmetrical it is perceived as one figure (a paper butterfly).

Tip #7 to apply Gestalt principles in UX design:
Symmetry is a strong principle to group elements.

• Principle of connection

When two figures are connected, they will also be perceived as related to each other. This principle is stronger than the principle of similarity, in the example you will see two pairs of a square and circle. Without the connection line the squares and circles would be seen as pairs.

The principle of connection is applied in many (public) transport maps, e.g. in the metro map of Washington DC. The connection between the dots, together with the use of colors, shows which stations are connected. Without the lines, this map would be worthless.

Tip #8 to apply Gestalt principles in UX design:
Connect elements to show that they are related to each other.

• Principle of common fate

The principle with this philosophical name explains that figures moving in the same direction are related to each other. In the example, the dots moving diagonally up, belong to a different group than those moving diagonally down.

 When navigating on a smartphone this principle is also applied. For example, when you switch between the different pages with apps and you swipe to the next page, all apps will move out of sight as one group. The next group of apps will move into the screen as one group as well. The principle is also used in the dating-app Tinder: swiping a photo to the right means ‘Like’ and swiping to the left means ‘Pass’. The elements do not move simultaneously, but movement is applied to differentiate elements.

Tip #9 to apply Gestalt principles in UX design:
When possible, movement can be used to differentiate (groups of) elements.

Conscious use of Gestalt principles helps the user to achieve their goals.

As you have seen, in almost all user interfaces Gestalt principles can be recognised. Users are continuously looking for visual clues and try to link elements to reach their goal. By consciously anticipating on this, confusion can be prevented and the user is helped. The Gestalt principles can be used to identify problems and solve them to improve the user experience.

Are you wondering what a website would look like when the Gestalt principles are not applied? Please check: https://www.arngren.net. The lack of visual clues about the hierarchy of the website makes it extremely difficult to find what you are looking for. So, in principle, one cannot do without Gestalt principles!

More information about this subject?

If you have any questions, know additional good examples or need help when applying the Gestalt principles in UX, please do not hesitate to contact us.

Interested to know more about UX? We invite you to browse through our website, for instance read our blogposts on Usability testing by Inge or on the Successful use of the Fast Track UX approach by Jeroen.