Improving design using Gestalt Principles

Exploring the Gestalt Principles of Design | Toptal
Source: Toptal

Psychology and design go hand-in-hand, especially in today’s fast-paced world where functionality is of preeminence for most people. Essays on Gestalt principles have been found to date all the way back to the 1890s but they were structurally put on paper in the 1920s by German psychologists, Max Wertheimer, Kurt Koffka and Wolfgang Kohler whose main aim was to understand how human beings derived meaning from disordered stimuli around them. 

‘Gestalt’ is a german word that translates to ‘unified whole’. Its principles, as the name suggests, summarize the human mind’s tendency to group similar elements, recognize patterns and simplify complex images. This impulse, when used in design, can produce aesthetically appealing results that work extremely well for utilitarian purposes. 

For decades now, advertisers have been using Gestalt principles to create illusions for eye-catching logos. In the world of website and mobile app design, these principles can be applied to create user-friendly, interactive platforms. In UI/UX design, the 5 most commonly used principles are:

Proximity

The Gestalt principle states that the human brain perceives objects that are placed closed to each other as similar.

Application of the principle

This principle is excellent to showcase unity among objects. Elements that serve the same purpose like menus and buttons, when placed together make a lot more sense. They impart coherence and guide the user instinctively.

A pattern of circles forms a group related by its proximity.
Source: Swapps
In this image, all the information is segregated by shapes. All the circles are buttons and serve the same purpose while squares are image/text boxes. 
the gestalt principle of proximity illustrated with groups of circles
Source: Toptal
The only thing differentiating the group on the left from those on the right is the proximity of the lines. And yet your brain interprets the image on the right as three distinct groups.

Similarity

The Gestalt principle states that objects that are similar in shape, size, colour, texture and orientation are assumed to be a part of the same set regardless of whether they are placed close together or not.

Application of the principle

Although closely placed objects are perceived to be similar to each other, dissimilar objects are highlighted when placed close to multiple similar objects – like an odd one out. Interestingly, this can be used to bring attention to the dissimilar object. Instead of playing with colours and contrasts, this method could serve a similar purpose.

example of the gestalt principle of similarity
Source: Toptal
The squares here are all equally spaced and the same size, but we automatically group them by color, even though there’s no rhyme or reason to their placement.

Designating a specific shape, colour or size to multiple objects that are scattered around, can help the user subconsciously identify their purpose without the use of unnecessary text. This can also be used to play with negative space and give a clean, structured look. 

A list with its descriptions generates a symmetrical pattern that is easy to group, and identify.
Source: Swapps
As you can see, although all the shapes are quadrilaterals, it is very evident that the ones in similar shape, colour and size serve the same purpose. 

Continuity

This principle emphasises that the eyes are compelled to follow a continuous path, preferably along a line or object.

Application of the principle

Mobile apps rely heavily on the understanding of the user. When faced with complexities, users are ready to discard the app with the drop of a hat. Here is where continuity comes in. Using lines and arrows to guide the user to focal points saves them a lot of time and ensures that they are guided through the functioning of the app. 

A slide of images indicates a continuity by abruptly cutting off its elements at the beginning and at the end.
Source: Swapps
It is interesting to notice how the flow of the page is guided by broken lines and the eyes travel in the same direction.

Symmetry

Symmetry insists on the fact that objects should have similar proportions and be placed in a balanced format. Otherwise, the viewer’s mind spends its time on trying to figure out the problem rather than focusing on the information. 

Application of the principle

Symmetrical layouts are a classic and never go out of style. Not only do they add aesthetic value but they also help balance the negative and positive space, imparting structure to the design.

A list with its descriptions generates a symmetrical pattern that is easy to group, and identify.
Source: Swapps
Yet again, in this layout, all the information is symmetrically laid out in 2 halves that gives it a clean, proportionate look. 

Completion

The human brain is designed to complete shapes and even when they are missing some elements.

the logo for the world wildlife fund is an example of the gestalt principle of closure


Source: Just one colour, black. But your eyes fill in the blanks and complete the Panda. 

Application of the principle

Completion is great to use when playing around with negative and positive spaces, especially in logos. It’s always a fun way to depict objects without adding too much colour. 

negative space is one of the key elements and principles of design
Can you spot the forward moving arrow in the FedEx logo?

Gestalt principles are time-tested. They are the most effective way to get the user’s attention and help them understand the mobile app or website. Using these have proven to improve user experience. If you are a designer that relies on the Gestalt principles to create your designs, leave a comment with your work down below! 


By: Team UserExperior | May 26, 2020