Gestalt Principles
Manage & direct the user’s attention to important aspects of the design.
Human brain tends to perceive the objects as a unified whole. For example, when a human brain sees different objects such as doors, windows, walls, etc. in a certain pattern, they recognize and process that information as a unifying element.
This act of perception is explained by Gestalt’s Principles which states that humans interpret and perceive the world around them by simplifying complex images into smaller groups with similar elements, and recognizing how these groups are related to each other.
By leveraging the idea of Gestalt’s principles, we can create designs that meet our goals of how people should perceive and interact with the design in order to create a seamless experience.
The brain constantly looks for a pattern that it can recognize when it sees things around. Sometimes it takes some shortcuts to fill up the gaps or create a meaningful image on its own that it could process. It is like the brain itself attempts to figure out ways to create a pattern/image that would make sense to it so that it can act further on it. It acts as if you are stuck on an island with some useless objects, after a while you’ll try to use the objects to do something for the living, to survive.
In the previous image either you are seeing a cup (black suhilette) or the faces 2 symmetrical faces looking at each other in the above image, but actually it’s just an organic figure that has a familiar shape, the brain takes the whole image including the negative space to fill those gaps to create a meaningful picture out of it. You probably have seen this image before, it is one of the most common examples when we talk about the 6 Gestalt Principles, which is “Figure & Ground”. Let us explore each principle and its nature.
Free & Discounted Udemy Courses — Explore Now
1. Figure & Ground
It defines that the human brain can differentiate a figure from an image based on similar colors, shapes, patterns, etc. setting the surrounded elements as a ground. In the following example from the advertisement, we can visualize a white fork and a knife, but if we focus in the negative space in the middle we can figure a shape of a Coca-Cola bottle, that is a familiar figure, making the previous shapes the ground.
We can apply this principle in digital product design as well. In the following example: the use of boxes with the same color creates the illusion of cards that the brain is focused on, separating them from the background, creating a figure and ground.
2. Similarity
This principle says that the human brain tends to group things that look similar in terms of color, shape, texture, etc. The unconscious process perceives these things as elements with the same purpose or functionality. In the example below even if the elements are in the same size and distribution unconsciously the brain groups them by color and shape.
Following this concept in visual design, we can communicate the functionality of elements to the user by using a consistent treatment to them. A good example is a form, where using text fields with the same treatment, the user can know that he can input text in any of the same kind, due to the association of their style with their functionality.
Anomaly is another feature of the similarity principle that works in the opposite way. While in similarity, the brain tries to group elements by the same treatment, with anomaly the brain emphasizes or focuses on one element that looks different from the surroundings, in UI we can find this principle in the use of CTAs and accents, such as the example below.
3. Proximity
We tend to create relationships between elements based on the closeness between them. In the following example, there are multiple circles of the same size, even though we can identify 3 groups because of the proximity between the elements in the composition, the proximity has such a power that can overpower the principles like similarity by color.
Proximity has a great deal of importance in design, with this principle we can relate multiple elements, even if they are of different kinds. Platforms like dribble group images, avatars, names, icons, and numbers by proximity create an independent element.
4. Common Region
This principle is highly associated with the Proximity Principle, which says that we group elements when they are sharing a certain region, when you look at the image below, it’s clear that there are two groups, even if all the elements are the same, they are divided by the area that encloses them.
In UI design elements such as cards are used for the same purpose, in the example below we can see how the Sketch app website groups the pricing information in two different containers, so the information in each container can be correlated as a unifying element.
5. Continuity
It is the way we correlate elements that are aligned in some way because the eye naturally tends to follow lines and creates a path between elements that are aligned even if they are separated by other elements or have different treatment, this principle can also overpower principles like similarity. In the example below it feels like there is more relation between the circles that are perfectly horizontal aligned even if they are not of the same color than the relation between circles by color.
An example of this principle in UI could be a checklist or stepper, as you can see in the example below, even though the elements can be of different colors (when checked or not), the alignment of them generates a visual path that creates a relationship between them.
6. Closure
This principle states that the human brain tends to order elements in the middle of the visual chaos looking for patterns or arrangements that create meaningful images. In this way, if there are missing parts the brain fills the gaps to process a recognizable image. In the image below you can recognize a soccer ball but actually is just a group of black shapes and your mind is filling the gaps to create the ball image.
In UI/UX we find this principle in elements like carousels where the UI shows part of the next section and our brain completes the image given the idea of there is something else to show, another similar example is the Instagram stories, which shows a part of the circle and due to the pattern your brain feel the other part, making you scroll to see it.
In order to use any of these principles, you have to identify what is the purpose of your design and see which one can enhance it. Remember that some principles can overpower other principles, depending on the intent of your design and the requirements of your users. You can play with them to meet the expected perception you envision for your design.
Tips / Best Practices
- Understand your product and your users.
- Understand the intent of your design.
- Use different principles to create different variations. The same purpose can be addressed by different approaches.
- It is always good to receive feedback from others to know if you are achieving the design goal.
Checklist
- Be clear on the goal of your design.
- Pick the principles that you think could help your goal.
- Break the rules if it is necessary, only if you are clear with what rule you’re breaking and why you are doing that.
- Don’t use more than the necessary principles.
- Showcase your design to non-designers and ask what they think, that will give you an idea of what your design is saying.
- Be open to feedback, sometimes the design just does meet his goal.
- Try different approaches with different principles, variations are always helpful.
Related Topics
Quick Question
If the intention of the design is to use the background as a communicator element which principle should you use?
- Closure
- Figure & Ground
- Proximity
- Common Region
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
