{"id":11193,"date":"2024-10-22T15:21:02","date_gmt":"2024-10-22T15:21:02","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=11193"},"modified":"2024-10-22T15:21:41","modified_gmt":"2024-10-22T15:21:41","slug":"gestalt-principles-ux-ui-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/gestalt-principles-ux-ui-design\/","title":{"rendered":"What are the Gestalt principles and how do designers use them"},"content":{"rendered":"

The human brain is exceptionally good at simplifying and organising complex images into an ordered system. Take the figure below\u2014to most people, it looks like a bright white triangle with the outline of a darker triangle underneath it, but really it\u2019s just three circles with strategically placed cut-outs and three Vs. But those disparate parts are organised in such a way that our brains turn them into a greater whole. <\/span><\/p>\n

\"\"<\/p>\n

Source: Wikipedia<\/a><\/p>\n

As a result of this process, our mind can comprehend all sorts of information due to things like proximity, similarity, and closure. These principles belong to what\u2019s known as the Gestalt principles of perceptual organisation.<\/span><\/p>\n

The Gestalt principles are a set of psychological principles that are valuable for <\/span>product designers<\/span><\/a>, UX designers, and UI designers because they shed light on how people interpret and assess their work.<\/span><\/p>\n

In this article, we\u2019ll explain everything you need to know about the Gestalt principles and how to use them.<\/span><\/p>\n\n

Let\u2019s get started!<\/span><\/p>\n

What are the Gestalt principles and where do they come from?<\/strong><\/h2>\n

The German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler proposed the first Gestalt principles in the 1920s. Their goal was to understand how humans perceive meaningful information. They came up with a set of principles that explain how the mind perceives a series of disparate elements as a unified whole, influencing what the individual sees.\u00a0<\/span><\/p>\n

The Gestalt principles are mental shortcuts that emphasise that, in perception, the whole is greater than the parts. They allow us to see things in a manner that\u2019s orderly and structured.\u00a0<\/span><\/p>\n

These principles influence our visual perception, which means that designers can use them to create behavioural change, including by getting us to focus on specific things or <\/span>take specific actions.<\/span><\/p>\n

The 7 Gestalt principles and how to use them, explained\u00a0<\/strong><\/h2>\n

We\u2019ll explain seven of the Gestalt principles that are most often used in design today and how to use them.\u00a0<\/span><\/p>\n

1. Proximity<\/strong><\/h3>\n

Proximity states that elements that are closer together are perceived as a group. The opposite is true as well: putting space between elements can cause separation.\u00a0<\/span><\/p>\n

For example, look at the pattern below. Notice how the lines of circles on the right and left are closer together, and therefore perceived as two groups. Also notice how the blank space in the middle makes it seem like the groups are in opposition to one another, even though they\u2019re made of exactly the same elements.<\/span><\/p>\n

\"\"<\/p>\n

Source: <\/span>verywellmind.com<\/span><\/a>\u00a0<\/span><\/p>\n

Even colour is less powerful than proximity. Notice how you continue to organise the circles below into two groups despite the different colours.<\/span><\/p>\n

\"\"

Source: <\/span>Gestalt principles and their effect on user experience | UXtweak<\/span><\/a><\/p>\n

How to use proximity:\u00a0<\/strong><\/h3>\n

Proximity is often used in <\/span>product design<\/span><\/a> (UX\/UI) to group things without the need for hard borders. Putting space in between each group with similar elements closer together will enable the user to immediately understand the organisation as you want them to.\u00a0<\/span><\/p>\n

For example, on Walmart\u2019s website, the nearness of each image with its name, price, star rating, and either an \u201coptions\u201d or \u201cadd\u201d button communicates that these are a unit despite the lack of lines between each item. <\/span><\/p>\n


\"\"<\/p>\n

Source: Walmart website<\/span><\/a><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN PRODUCT DESIGN (UX & UI)]<\/p>\n Enrol now in our Product Design Programme<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

2. Figure-ground<\/strong><\/h3>\n

The figure-ground principle says that the way our brains process negative space will cause people to see things as either in the foreground or background.\u00a0<\/span><\/p>\n

For example, look at the FedEx symbol below. The words FedEx are foregrounded but if you look closely you\u2019ll see an arrow between the \u2018E\u2019 and the \u2018X\u2019, showing that, although it\u2019s often ignored, there\u2019s more to this logo than first meets the eye.<\/span><\/p>\n


\"\"<\/p>\n

Source: <\/span>Gestalt Theory: How Our Minds React to What We See<\/span><\/a>\u00a0<\/span><\/p>\n

Similarly, look at the figure of the faces on the left below, then take a look at the figure of the candlestick on the right. You\u2019ll notice they\u2019re the same figure but, depending on which one\u2019s black and which one\u2019s white, either the faces or the candlestick take the foreground.<\/span><\/p>\n

\"\"
Source: <\/span>A Guide to Gestalt Grouping Principles of Design | Maze<\/span><\/a><\/p>\n

How to use figure-ground:<\/strong><\/h3>\n

For product designers, it\u2019s valuable to know that one of the first things people do when they come to a website or mobile app is determine what\u2019s in the background and what\u2019s in the foreground. That makes it easier to highlight a specific point of focus on a product.\u00a0<\/span><\/p>\n

For example, when users look for professionals to help with their household projects on Angi, they first see the logo of the website at the top and then they see the searchbox in the middle of the screen below. There are other options available as well, but those are seen first because those are in white and, therefore, stand out the most.\u00a0<\/span><\/p>\n

\"\"
Angi homepage<\/span><\/a><\/p>\n

3. Similarity<\/strong><\/h3>\n

While elements in proximity to one another will make up a group, groups of similarity make up groups too, as long as their proximity is consistent. Similarity can be achieved through colour, shape, or size, whatever it takes to tie different elements together.<\/span><\/p>\n

Take, for example, the below image. In our brains, the blue dots are grouped separately from all the orange dots, even though they have no meaningful difference.\u00a0<\/span>
\n<\/span><\/p>\n

\"\"<\/p>\n

How to use similarity:<\/strong><\/h3>\n

In UX and UI design, this can be used to distinguish one thing from another. For example, when the text is blue, we know that it is a link.<\/span><\/p>\n

Take the Belkin homepage below for instance. The screen is automatically divided into three distinct areas because of the different colours of each of them. There\u2019s the green banner about a Labor Day sale at the top which is separate from the logo, primary navigation, and search box in the white which is separate from the picture of hands at the bottom.\u00a0<\/span><\/p>\n


\"\"<\/p>\n

Belkin homepage<\/span><\/a><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

4. Common region<\/strong><\/h3>\n

According to this Gestalt principle, when elements are located in the same closed region, we perceive them as related. These elements stand apart from other individual elements or groups due to borders or other visible barriers, even if they look the same in other aspects.<\/span><\/p>\n

Take a look at the example below. In the top row without the boxes, the middle two circles are perceived as a group. But, in the bottom example, the boxes make the left two circles and the right two circles two groups. The principle of common region can overpower other principles.<\/span><\/p>\n

\"\"
Source: <\/span>The Principle of Common Region: Containers Create Groupings<\/span><\/a><\/p>\n

How to use common region:<\/strong><\/h3>\n

When websites like Pinterest or Facebook use boxes to separate one group of similar elements from another group of similar elements, the principle of common region is at work.<\/span><\/p>\n

For example, on Yelp, every individual establishment with recent activity is enclosed in its own box with the photos, videos, or comments that it garnered to make it clear that these interactions are associated with this business, not any other.<\/span><\/p>\n

\"\"<\/p>\n

Yelp recent activity<\/span><\/a><\/p>\n

5. Continuity<\/strong><\/h3>\n

The principle of continuity says that the human eye will perceive the smoothest path possible when seeing points that could be connected. Take the image below. The circles are arranged to be perceived as two lines: one in orange and one in blue. There\u2019s nothing in the design that demands these lines be seen this way, but our brains put them in order.<\/span><\/p>\n

\"\"
\nSource: <\/span>A Guide to Gestalt Grouping Principles of Design | Maze<\/span><\/a><\/p>\n

How to use continuity:<\/strong><\/h3>\n

In product design, this can be used to guide a user\u2019s eye in a specific direction. For example, the related products on Amazon are listed in a line so the user can keep following (and comparing) the individual products.<\/span><\/p>\n

For example, the products below are all similar to the book that was originally picked, easily furthering your shopping.<\/span><\/p>\n

\"\"<\/p>\n

amazon.com related products bar<\/span><\/a><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

6. Closure<\/strong><\/h3>\n

When we look at an arrangement of visual elements, we look for a single recognizable pattern that allows us to create a whole. The simplest form of this rule is following a dotted line to its end, but there are more complex arrangements too.\u00a0<\/span><\/p>\n

Take, for example, the World Wildlife Fund logo below. There are large parts of the panda missing from this drawing, but you can easily fill in the missing parts to see the whole.<\/span><\/p>\n


\"\"<\/p>\n

Source: <\/span>World Wildlife Fund<\/span><\/a><\/p>\n

How to use closure:<\/strong><\/h3>\n

Closure is often used in logos like this one. But for product designers, an important example of closure is showing images fading off and onto the screen, indicating there\u2019s more information to be found by clicking or swiping left or right. If the user only saw full images, they would be less likely to scroll and the new images would be jarring.<\/span><\/p>\n

For instance, on the imdb.com homepage, there is continuous scroll that you can see every few seconds. It shows one image and text going and another coming in, from left to right. Without the fade between them the new images would be unexpected.<\/span><\/p>\n


\"\"<\/p>\n

imdb.com continuous scroll<\/span><\/a><\/p>\n

7. Focal point<\/strong><\/h3>\n

This Gestalt principle states that whatever stands out visually, i.e. the focal point, will capture the viewer\u2019s attention. The brain places a visual hierarchy on things that stand out, so for example the red box below is processed before the black boxes, even though the red box is not even centred in the pattern.<\/span>\"\"<\/p>\n

Source: <\/span>5 Ways To Create A Focal Point – Alvalyn Creative Illustration<\/span><\/a>\u00a0<\/span><\/p>\n

How to use focal point:<\/strong><\/h3>\n

In product design, using a button of a different colour, like making the most important button red when everything else is black, white, or muted shades, is an example of this principle in action.<\/span><\/p>\n

For example, the most important buttons on the rev.com homepage are the two \u201cGet Started\u201d buttons. They stand out the most, especially in contrast to the other links they\u2019re next to like \u201cLogin\u201d and \u201cSee Pricing.\u201d\u00a0<\/span><\/p>\n

\"\"<\/p>\n

rev.com homepage<\/span><\/a><\/p>\n

How do designers use the Gestalt principles?<\/strong><\/h2>\n

Like any psychological principle, understanding how to use the Gestalt principles in your work as a product designer can help you improve your designs. Designers use the Gestalt principles to create a more seamless user experience for users. By using the Gestalt principles, they exploit people\u2019s natural tendencies and ensure the user feels comfortable with their product, even on their first visit.\u00a0<\/span><\/p>\n

Gestalt principles are so easy to incorporate, that you may already be using them. And if you\u2019re not, it\u2019s easy to start. They can quickly improve a design and direct users towards the interactions you would like them to take.<\/span><\/p>\n

Gestalt principles in summary<\/strong><\/h2>\n

The seven principles we covered\u2014proximity, figure-ground, similarity, common region, continuity, closure, and focal point\u2014can be seen again and again in UX and UI design. The Gestalt principles give product, UX, and UI designers insight into how people perceive their designs, and work off the idea that the whole is greater than its parts.\u00a0<\/span><\/p>\n

Want to learn more about product design? Consider taking the UX Design Institute\u2019s <\/span>Product Design (UX\/UI) Programme<\/span><\/a>. Want to learn more about the rules and principles that guide designers in their work? Check out <\/span>the 7 fundamental UX principles all designers should know<\/span><\/a>, discover <\/span>7 essential principles of icon design<\/span><\/a>, or perfect your UX writing with the <\/span>6 most important content design principles<\/span><\/a>.\u00a0 <\/span>


<\/p>\n","protected":false},"excerpt":{"rendered":"

The Gestalt principles are essential psychological concepts for product, UX, and UI designers, revealing how users interpret and evaluate design. Learn everything you need to know about these principles and their practical applications.<\/p>\n","protected":false},"author":35,"featured_media":11228,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[279],"tags":[],"class_list":["post-11193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-explained"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=11193"}],"version-history":[{"count":15,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11193\/revisions"}],"predecessor-version":[{"id":11246,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11193\/revisions\/11246"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/11228"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=11193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=11193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=11193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}