How to use Gestalt principles in UX design: Definitions and examples

By applying Gestalt principles, designers can create designs that naturally align with how the human brain organizes and interprets visual information, ultimately leading to better user experiences and more effective interactions with digital products.

The 2000 US presidential election in Florida is remembered for the historic mess up. Among the two main candidates, Al Gore and George W Bush, the candidate who won the election was not the one majority voted for! Though a higher number of people voted for Al Gore, Bush won. The mess-up was attributed to the inefficient design of the ballot. 

The misaligned rows of the ballot confused the voters and led them to press the wrong button, costing Al Gore the presidency. The incident is an example of how the human brain perceives things in a pre-programmed way. Certain laws guide the visual perception of the human mind. 

Our scope of discussion in this article is one such psychological principle called Gestalt’s principles. Gestalt principles are quite helpful for UX designers as it provides insights into how humans view the designs around them in their everyday life. It includes laws that describe how the human brain groups similar elements and identifies patterns to simplify complex visuals.  

To give you an example of how our brains work, take a look at this picture. 

What do you see? A dog? Even though it's a random arrangement of dots, the human brain perceives it as a picture of a dog. You might have even figured out that the breed of dog is Dalmatian because of the black-and-white color contrast. That's how the brain works – it tries to make sense of the world by building logic, patterns, and structures. 

In our UI UX design agency, we explore and implement different psychological laws that influence human behaviors and actions in the designs. Through this article, we will discuss Gestalt principles of visual perception and share some examples from our projects to help you build a real-world understanding. 

Law of common region

The law of common region says that elements sharing an area with a clearly defined boundary tend to be perceived as a group. When different elements are bounded by a common region, the brain groups them together subconsciously. This is done by the brain to better organize the information for finer processing. 

Here is how we used the law of common region in the design of a stock market learning app. To display the different tournaments, we used card design. By grouping information in a clear and defined boundary within each card, users could make out the relation between elements intuitively and perceive each tournament as a group.   

Gestalt principle of focal points

The law states that elements with a point of interest, emphasis, or difference will capture and hold the viewer’s attention.

To illustrate this law, take the following example from our UI UX design services for an ecommerce platform. 

Here, you can see that the law of focal points is used to bring attention to the “Add to cart” CTA button. When the law is not applied (left image), there is no immediate point of interest. By adding emphasis on the CTA button, people’s eyes will naturally gravitate towards it, increasing their chances of taking that particular action. 

Law of uniform connectedness

The law of uniform connectedness states that visually connected elements are perceived as more related than elements with no visual connection.       

In the above example of a building management platform, we used the law of uniform connectedness to bring out the connection in the left sidebar. Designing the sidebar in a different color not only makes it distinct from the rest of the screen but also suggests to the users that there is a connection between those particular elements. 

Gestalt principle of proximity

The Law of proximity states that objects that are near or proximate to each other tend to be grouped together. 

In this example of a data exchange website, the section “Impact” has multiple elements under it. Each element has an icon and a corresponding text. When the icon and text for each group are spaced apart, users get confused about which icon belongs to which. They cannot group the information properly, adversely affecting information processing. 

By applying the law of proximity and arranging the corresponding elements in the desired proximity range, the grouping becomes intuitive in the users' minds. 

Law of figure-ground

The law of figure-ground states that the human eye can separate objects on different planes of focus. We can intuitively identify which elements are placed in the foreground and which are in the background. 

This law is often used in pop-up design to bring a clear distinction between the pop-up window and the background. 

In this example, you can see how we used the law of figure and ground to bring users' focus to the pop-up screen. 

Human perception is influenced by the way our brain processes visual information. Much of this processing is governed by laws, such as the Gestalt principles discussed in this article. Identifying such laws and exploring them makes it easy for designers to create intuitive and easy designs for users. Using these laws as design guidelines will help users achieve their goals effortlessly and bring them back to interact with digital products. 

FAQ

1. 1. What are the Gestalt principles of perception?

Gestalt principles of perception are laws that explain how humans perceive visual information to gain meaningful ideas. The principles include laws of continuity, similarity, proximity, common region, focal point, figure/ground and closure. 

2. 2. Why are Gestalt principles important?

Using Gestalt principles helps to make interfaces intuitive and easy to understand. By knowing how the human brain interprets visual information, designers can build products tailored to human attention and actions. 

3. 3. How are Gestalt principles used in everyday life?

We use Gestalt principles in our daily life to make meaning out of things around us. When we put together individual letters to form words and sentences, that's the law of proximity in action. Similarly, when we identify members of a team from the jersey colors, we use the law of similarity. When we use Google Maps to follow directions, we apply the law of continuity. 

4. 4. Is it a good idea to use Gestalt principles?

Using Gestalt principles can elevate any design by reducing visual complexity, improving user-friendliness and enhancing the aesthetics. So, it's highly recommended that designers use Gestalt principles in their designs.