5 brilliant Laws of Gestalt

ux design

What are the Laws of Gestalt?

The human brain is amazingly talented at assembling abstract shapes into a whole, and thereby making the world more logical to us.

Our perception is deeply influenced by how our brain processes, combines and complements the available visual information.

The Laws of Gestalt are principles of visual perception that we can rely on in User Interface Design.

The 5 main Laws of Gestalt

There are 5 main laws of gestalt that can help us in our work as UI designers:

Law of Proximity

Things that are close to each other are perceived as a unit and elements that are further away as separated. The distance to other elements enables us to group things simply through our perception.

➡️ Keep things that belong together, like menu items, near to each other.

Where to use? You can use this law for grouping things in an easy way, for example put header, text and image of one topic closer to each other than to other topics. In this way each topic can be identified as a separat one quickly.

Law of Prägnanz

Human perception always seeks the simplest way to avoid mental overload. Simple shapes are therefore better perceived and remembered then very complex elements.

➡️ Keep icons simple!

Where to use? Keep this in mind when you are designing icons for your website or app. Do not get into detail, when creating your iconography.

Law of Common Region

Common areas, marked by borders or background colors, let us perceive the individual elements in it as a group.

➡️ Use background color to group things easily.

Where to use? Cards are the best example for the law of common region. Using a card layout for your design is the fastest way to group things together visibly.

Law of Connectedness

Elements that are visually connected, for instance by lines or arrows, are more likely to be perceived as a unit than elements that are not connected.

➡️ Create timelines or context between elements using connecting lines.

Where to use? If you want to show a forward-going process you can use connections between the single process steps. This enables the user to see what the process contains, how far she went through the process and which steps will come next.

Law of Similarity

Elements that look like one another are perceived as one unit. This is the case even if they are not close to each other. The similarity can be influenced by color, shape, orientation or size.

➡️ Use recurring design for buttons, navigation and links in one system.

Where to use? Headings are a good example for similarity. They look all the same and are just different in size. All your H1s are the same, all your H2s are the same and the users will recognize this pattern without any problem. Following the law of similarity lets you create hierarchy in your design easily.

I am curious, are you designing with Gestalt Laws in mind? 💬 Or do you have more examples how we use the Laws of Gestalt in our daily work while designing user interfaces

Please share your thoughts and ideas with me on LinkedIn or Instagram. I am always happy to connect.

keyboard_arrow_up