A Simple Guide to Gestalt Principles In UI/UX Design

Table of Contents

Introduction

1. Similarity
2. Proximity
3. Common Region
4. Continuity
5. Symmetry

Conclusion

Introduction

Applying Gestalt Principles will take your designs to a whole new level!

You don't know what they are? Don't worry, let's find out😉

Actually, our brain makes "sense" of everything around us by building logic, patterns, and structure. Gestalt Principles are used to describe how humans group similar elements and recognize patterns. They also tell us about how we simplify complex images when we perceive objects. So, basically, they guide us about how humans view the designs around them in everyday life. We can use Gestalt Principles in our designs to organize content in order to make it visually pleasing, and easily understandable.

Here are the gestalt principles we are gonna discuss today :)

1. Similarity

2. Proximity

3. Common Region

4. Continuity

5. Common Region

1. Similarity

👉 This principle states that elements that look alike, whether in shape, size, or color, are considered to have the same function.

👉 So, in order to help users navigate your designs quickly or to keep the user flow efficient, keep “like with like” for achieving consistency.

👉 For example, if you’re including avatars or images of users in your designs, make sure that the placeholders for those avatars are the same shape and size in the wireframes you created.

👉 Such a similarity shows that the elements have the same function. In this case, all link to profiles of users.

2. Proximity

👉 It means that elements that are close together appear to be more related than things that are spaced farther apart.

👉 Here again, in order to help users navigate your designs quickly or to keep the user flow efficient, keep “like with like” for achieving consistency.

👉 It has a stronger impact than the Principle of Similarity.

👉 Let's take a look at the design for a blog page for better understanding!

👉 By convention, you would only show a bit of article text and then add a "read more" button right below the text.

👉 Users assume that they will see the whole article after they press the "read more" button. Why? Because the "read more" button is just below the article they wanna read.

👉 This is the Gestalt Principle of Proximity.

👉 On the other hand, if you had left a lot of space between the article text and the "read more" button, users would have been confused and might not understand the connection between the two elements.

👉 Due to frustration or a delay of even 2 seconds, they might leave your product for anything else that would give them something easy to understand.

3. Common Region

👉 It means that elements located within the same closed area are perceived to be grouped together.

👉 For example, have you ever noticed that navigation bars at the top or bottom of a mobile phone screen are usually in a different color or grouped with a border?

👉 This is a real-world example of the Gestalt Principle of the common region.

👉 A border and a block of color in a navigation bar, can help you anchor the icons for the main pages of your product, instead of having the icons float on the screen.

👉 It helps users recognize that the icons in the navigation bar are more important than others and are perceived to be grouped together.

4. Continuity

👉 It shows that individual elements that are aligned together will appear more related than the elements that are randomly placed.

👉 Simply speaking, the small hints in our design can guide users and the human brain will create a path along with aligned elements.

👉 You can use it to guide your users to important elements.

Whereas, once the continuity is disrupted, it indicates to the users that they have reached a new section of the interface.

👉 This is also providing ease for your users since they won't have to think about where to go next because you guide them via your design.

5. Symmetry

👉 This principle shows that humans are more comfortable with symmetric elements.

👉 That's because symmetry usually gives the impression of the "balance" while asymmetry triggers a sense of "unbalance".

👉 It is used to create a sense of ease or "balance" for users.

They won't feel like something is out of place with the design (app, logo, website, etc) they are interacting with.

👉 Using just symmetry in your designs is not recommended too since that would make the design pretty boring and would be difficult to maintain.

👉 The best approach would be to use symmetry and asymmetry in a balance.

👉 By playing with the ratio of symmetry and asymmetry, you can direct your user's focus on a certain "important element".

👉 A good example of a symmetrical design is the logo of Audi!

Conclusion

Learning about how to incorporate gestalt principles into your designs can greatly improve the user experience. Moreover, once we gain an understanding of how the human brain works, we can exploit a person’s natural tendencies to create a better interaction that will make any user feel comfortable on a website, even on their first visit!

So, take some time out of your busy lives and learn about these principles in detail. Trust me, it'll be worth it ;)

Let's connect!

✨ Twitter

✨ Github