Gestalt Theory: Exploring the Role of Perception in Visual Design
Humans are excellent at noticing patterns in objects. We see dragons in the clouds, faces in the cracks of the wall, and monsters in the shadows. Such associations are the result of how our brain perceives things. According to Gestalt theory, humans have a holistic vision and the whole of an object is more than the sum of its parts because the brain fills in the missing parts when perceiving it. Gestalt principles help designers to understand how the human mind perceives visual stimuli and to create designs that are not only aesthetically pleasing but also functional and user-friendly.
What is Gestalt Theory?
Gestalt psychology first appeared in the studies of the psychologists Kurt Koffka, Wolfgang Kohler, and Max Wertheimer in the early 20th century. They attempted to understand how humans create meaning in the complex visual stimuli that surround them. To this end, they suggested a set of principles that are based on the idea that the human mind is compelled to find order in chaos. In other words, when confronted with complex visual stimuli composed of multiple elements, the human brain tends to simplify and organize them into a whole, or a single entity. As a matter of fact, the German word “gestalt” is often interpreted as a “unified whole.”
Since its emergence in the 20th century, Gestalt theory has offered a fundamental set of guidelines to designers of all disciplines. Its principles have been adopted and implemented extensively by designers who want to communicate the message of their product to users more effectively.
In this article, I will introduce you to the eight principles of Gestalt psychology that have been used widely by UX and UI designers. By understanding and applying these principles in your designs, you can organize your layouts better and create visual hierarchies that improve the clarity and quality of our product. You can also predict how the target user will react to certain elements and navigate your product.
1. The Principle of Closure (also known as Reification)
Our mind often seeks simplicity, so we fill in gaps between elements to form a simpler whole. Designers often implement this principle to create simple icons, logos, and pictures. We can see examples of closure in the logos of Adidas and the World Wildlife Fund.
2. The Principle of Similarity (also known as Invariance)
The human mind builds a link between similar elements, so we see those elements as a complete entity (i.e., a shape or picture) by filling in the gaps even when they are placed separately.
Shape, color, font, and size are determining factors for similarity. You can apply the principle of Similarity in your designs to help users to understand and navigate your website or app better. Designing the elements that have the same function in a similar fashion will help your users to perceive them as being related or having a similar hierarchy level. One of the most common elements that the principle of Similarity is employed for is links used in a webpage. They all have a similar look with blue font color and underlined text. Users identify all texts of this form as hyperlinks, so giving them a different look would mislead the users.
3. The Principle of Proximity (also known as Emergence)
According to the principle of Proximity, we perceive elements that are placed close to one another as a group rather than individual items. Proximity is based on the space or the distance between items and it is important to note that this principle is more powerful than the principle of Similarity. To explain, even if certain objects differ from the others in color, shape, or size, we see them as part of the group as long as they are located within that group.
We can apply the principle of Proximity in our web and app designs to organize the layout and create decluttered interfaces. Proximity can be a tool in grouping certain things together without the need to use lines or different colors to separate the spaces. This principle is also used in logo design.
4. The Principle of Continuation
The Principle of Continuation observes that our mind tends to perceive objects as a continuous flow of elements rather than as interrupted fragments. Think about the letter X. We see this letter as a combination of two separate lines rather than two v shapes against each other. This shows our tendency to follow the simplest and most direct path possible regardless of how the shape was actually formed.
Continuity is often implemented in interface design to guide the user’s eye to certain elements. An example of Continuity can be seen in product listings that strategically place items in a line to draw the eye from one item to another.
5. The Principle of Common Fate (also known as Synchrony)
The principle of Common Fate suggests that we perceive objects that move in the same direction as grouped or related. However, movement is not essential to group elements together; even when the objects point in the same direction, we can say that they share a common fate.
The principle of Common Fate can be used by designers in nested menus to show users the connection between sub-menus.
6. The Principle of Prägnanz (also known as Simplicity)
The human mind has a tendency to translate complex shapes into simple forms as much as possible. The principle of Prägnanz, which means “good figure,” suggests that the human mind likes to seek simplicity in complex figures because it is easier to process and less overwhelming.
7. The Principle of Figure/Ground
This principle holds that the human mind has a tendency to split the visual field into the figure (foreground or focal point) and the ground (background). The figure/ground relationship can be stable, reversible, or ambiguous. A stable figure can be easily distinguished from the background, whereas in the reversible case, neither the figure nor the ground can dominate the layout because they have almost the same density. In ambiguous designs, on the other hand, the figure and the ground can hardly be distinguished from each other.
The principle of Figure/Ground can help us to create clear and interesting designs. An example of a good figure and ground organization is when we use font and background colors that have a good contrast ratio in order to make the text on a web page easier to read for the visitors.
8. The Principle of Common Region
We perceive elements as a group when they are enclosed within the same region. We can apply this principle in our layouts to separate certain elements from others, e.g., by placing the related items within the same box or against a different background color.
In the example above, the header and footer elements are separated from the rest of the page with their background color.
Final Thoughts:
As designers, we should try to understand how the human mind works and what factors affect perception if we want to offer more user-centered products. Gestalt principles can be a good guide in understanding the psychological foundations of visual design and creating smooth and appealing interfaces and experiences for our users.
I hope you enjoyed this article!
Resources:
https://www.interaction-design.org/literature/topics/gestalt-principles
https://www.creativebloq.com/graphic-design/gestalt-theory-10134960
