The key to intuitive UX — Gestalt Principles
You are confident that you decide where you put your attention on. That’s right, but it’s only half the truth. There are Principles that determine how people naturally perceive visual elements and you, as well as your users, are influenced by it, too.
If you understand the Gestalt Principles, you understand how to create a better UX. You will be able to design more user-friendly apps. By using Gestalt Principles you can direct the users' attention to the right place and to the important information of your app.
After reading this article you will realize that many apps are aware of these Principles, maybe (consciously or unconsciously) you too. Furthermore, you will be able to use these Principles consciously and benefit from them.
The Gestalt (German for form, shape) theory, founded by German psychologists in the 1920s, found out how people naturally organize, understand and perceive visual elements.
“The whole is something else than the sum of its parts” — Kurt Koffka
The human mind and therefore your user sees the whole picture before he recognizes specific elements. The Gestalt Principles define and explain how the human mind perceives differently arranged elements.
The user will be irritated and not focused on the important elements when the website design differs from his expectations. If you fulfill his natural expectations you can lend the users attention to a specific element.
- Choose the most effective design elements: Understanding the gestalt principles and therefore the human perception of thinking will help you to decide which design element you should use in which situation.
- Influence the users' behavior: You are able to influence visual perception. In doing so, you can lead the user to specific points in your website or app.
- Meet the users' needs: The principles will help you to design websites and apps which meet the users' needs. You are able to create a website or app which is beautiful and intuitive usable for your users.
1. Law of Proximity
People tend to group elements together that are nearby each other. It doesn’t matter if these elements have different colors, shapes or sizes.
Proximity is more powerful than similarity or colors.
Watch the next picture. What is your first thought?
You think that there are three groups of circles: right, middle and left.
On the second thought, you can also admit that there are two groups of light and dark blue circles. At the first view, the proximity law will dictate your interpretation.
How to use the Law of Proximity:
Bring elements that belong together closer together, e.g. pictures with descriptions, or buttons with texts. Use white spaces to show that elements are unrelated.
Be careful if you put elements close to each other that don’t belong together. Users will automatically think that these elements belong together.
Proximity is more powerful than similarity or colors.
2. Law of Closure
People have the tendency to try to see the whole picture. If there are gaps in between a figure, the human brain will ignore it and understand the bigger context. It will fill the gaps with information.
How to use the Law of Closure:
This Law is often used to design icons. With the help of this law, it is possible to design icons and pictures that are simple. You can decrease the number of elements you need to let the user understand what you want to show.
Think about this law while designing your company or app logo. Be creative and try out what works and what you like.
Moreover, you should think about this law when you want to show elements with missing parts e.g. when you want to show your user that there are more elements when they scroll down the list. Here you should show your user that the last element he sees in the list is not completed. The user will understand that there are more elements.
3. Law of Similarity
Users understand elements which look similar as a group or a pattern.
Because of this law it looks like there are 4 columns. If the elements would all have the same shape and colour you wouldn’t think about 4 columns.
How to use the Law of Similarity:
Because the user interprets similar looking objects as a group or a pattern you can help him to understand your website better. Elements with the same meaning, function or hierarchy level should be designed in a similar fashion. The user will recognize the function of this element and know that a similar looking element has a similar function, meaning or hierarchy level.
If you design two elements with the same functionality differently or design elements with a different functionality the same way your user might be confused.
4. Law of Common Region
This law describes that elements which are together in the same closed region will be understood as a group.
How to use the Law of Common Region:
Give related elements a frame and show that they belong together. Define a clear border to show that the inner elements belong together.
Cards are often used elements of UX design. Picture, description and price, or ‘Call To Action’ buttons are within one closed region. The user will understand that this card and everything inside this card belongs to one product.
5. Law of Continuity
Elements which are ordered in a line or a soft curve seems more related to each other than elements which are ordered randomly or in a sharp curve.
How to use the Law of Continuity:
Paying attention to this law while designing your website will help your user to move his eyes smoothly over your website. The user’s eyes will automatically hover over the website.
Moreover, you can guide the user through the different segments and contents. When the continuity of the elements will be disrupted the user realizes that there is a new part of the content or a new segment. This will help him find his way through different content segments on the website.
Another example is the registration or the purchase. You can order the different steps of this action in one line. The user will see that these steps belong together. Furthermore, he will understand the order of the steps in one view.
6. Law of Figure and Ground
This law describes that people instinctively recognize if elements are in the foreground or background. Moreover, the user knows that the foreground is more important than the background.
How to use the Law of Figure and Ground:
You can influence where the user focuses on. By designing your website with explicit foreground and background, you can help your user to decide where he should focus on and which information is incidental.
Moreover, you can combine beautiful background pictures with important elements like buttons or fields. Your user will recognize the beautiful design but focus on the important elements.
But you have to pay attention to that the foreground differs significantly from the background. If you use similar colors the foreground gets less attention than if you use dissimilar colors.
7. Law of Symmetry
Symmetric elements give the user the feeling everything is ordered. He will feel comfortable with the design of your website. If the elements are asymmetric he will waste a lot of time trying to find out where the reason of the asymmetric is. Moreover, it feels for the user like something is wrong, missing or out of balance.
How to use the Law of Symmetry:
You don’t have to try to design your website completely symmetric. More often than not this is not even possible. Also if you did that your website looks might end up looking very boring.
You have to find a balance between symmetry and asymmetry. Just try not to arrange the elements completely random.
Moreover, you can use background pictures, matching colors or other elements to bring a balance in your website design.
With asymmetric elements in a symmetric website, you can lead your users' attention to one specific point.
8. Law of Common Fate
The law of common fate says that elements which move in the same direction are more likely considered as belonging together than elements which move in different directions or don’t move at all.
How to use the Law of Common Fate:
Because of this law, the user expects that associated elements move in the same direction, and vice versa.
Thus you should make sure that elements that belong together move in the same direction with the same speed, to get the most out of this law and fulfill the users’ expectations.
You can use this principle for instance or designing drop-down menus. Moreover, you can use it for illustrating a process, such as a registration, to the user. As you can see in those cases the movement is implied through the process.
Further reading
If you want to know more about this topic or see some real live examples check out this article. In this app study, we analyze Netflix and show how they used the Gestalt Principles and which difference they make.
If you liked the article leave some claps!
Originally published at blog.uxcam.com.
