Gestalt Psychology in UI Design

Be inspired by history

Without knowing history we cannot create history

It all started with Wilhelm Wundt, the first experimental psychologist at the University of Leipzig along with a theoretical standpoint, which was developed by Edward B. Titchener. They defined and categorized the human mind, by achieving a better understanding of the structure mental process underlying human thought.

The Founding Fathers of Gestalt Psychology

In 1911, Max Wertheimer, one of the three founding fathers of Gestalt psychology with Kurt Koffka and Wolfgang Kohler. “Gestalt” is a German word. It means “shape” or “form”.

In particular, Gestalt psychology is often applied to user interface design, by emphasising the visual importance to the design or other words “how a user views a design”.

Gestalt principles of visual perception

This explains how our brains, create a structure by default

In this article, we’ll discuss five types of “Gestalt principle of visual perception”, which directly apply to modern UI designs along with the examples.

Law of similarity

The law of similarity states that “when things appear to be similar to each other, the human brain perceives them as a group. And the users think they have the same functionality”

Let’s see how this Gestalt law perfectly applies to UI Design. When users notice similar elements in the UI pattern, they perceive them as the same patterns or grouped. The best example is the difference between the primary and secondary buttons.

Law of Proximity

The law of proximity states that “things that are close together appear to be more related than things that are spaced farther apart”.

For Example — In the blog card designs, the UI elements such as the headlines, author name, descriptions, and other information for each of its blogs are closely organized. This achieves the law of proximity in UI design.

Law of Continuity

The law continuity states that “elements which are arranged on a line or curve are perceived to be more related than elements not on the line or curve”

For Example — In the below image, when you see a group of elements such as tabs, you may notice that UI elements are not in continuity. The human brain perceives the design that, the elements are not arranged in a line.

Law of Common Region

The law of proximity states that “elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary”.

For Example — Let’s take a look at the dashboard UI element, in the first design our visual perception thinks in a way that, it’s a one section that contains many different elements such as conversion rate details and charts. It proves only the law of similarity. But just look into the second design, where the UI elements are clearly bounded into a group.

Law of Figure/Ground

It states that “the user perceives a figure or object from the background”. This determination will occur quickly and subconsciously without any cognitive load.

The best example is overlay’s in the website because the background or other contents are at rest. Whereas in overlay’s they influence the focal point on the screen. So the human eye can separate objects from the background.

Summary

The Gestalt laws provide a set of clear rules that can guide designers efforts when attempting to arrange UI elements to maximise the user’s ability to identify meaningful elements quickly, accurately, and when necessary.

Hope you enjoyed this, thanks for reading! ✌️