How do we understand the world around us? How does our brain interpret our perceptions from our surroundings? How do we see? How does our brain understand shapes and forms and designs? Why does our brain tend to see some shapes next to each other? Why is our brain sometimes fooled and finds shapes and patterns in nature and the surrounding environment that do not exist externally? Psychological science has been looking for answers to these questions for a long time.
Many psychologists from different countries worked and researched in these fields. Some of them reached interesting results and registered famous and influential theories in their name. Theories that have a wide application and are not limited to psychology or other related sciences.
For a long time, in politics, business, marketing and digital marketing, the findings of psychological science about humans and the factors affecting their behavior and decisions have been used. Politicians use psychological theories for election campaigns and to gather more votes, business owners and marketers to increase sales.
Psychological theories are also used in user experience design and user interface design, because the goal in both is to satisfy the user (human). User interface designers can use psychological theories to make their designs more effective and interactive. When a user opens an application, what layout should he face? Why?
Why are some logos and icons more attractive? What rules can UI designers use in iconography to design more memorable and targeted icons? Gestalt theory and Gestalt principles give the UI designer the answer. A theory that was born in the early decades of the 20th century and belongs to 3 German psychologists (Max Wertheimer, Wolfgang Köhler, Kurt Koffka).
In this content, you will get acquainted with this theory. You read about the principles and rules of Gestalt, its importance and usefulness in user interface design and for user interface designers. And you will see the application of Gestalt rules in UI design.
Table of Contents
Gestalt principles and rules in UI
Gestalt theory, also known by other names such as Gestalt psychology, Gestaltism, or Configurationism, was born nearly 100 years ago in Germany and Austria to explain how to perceive. Gestalt literally means shape and in this theory it is used as a pattern or order and situation of placing shapes and designs next to each other.
According to this theory, human beings (our brain) tend to understand shapes, patterns and designs together and as a whole. That is, when we see several shapes or designs next to each other, we do not see them individually and alone, we see and understand them together. We (humans) tend to group and combine shapes that are placed together in different situations.
The whole is something other than the sum of the parts.
Gestalt theory is based on 4 principles and has 7 laws. The principles of Gestalt are Reification, Emergence, Multi-stability and Invariance. The 6 laws of Gestalt are proximity, similarity, completion, symmetry, continuity and common destiny.
The importance and usefulness of Gestalt principles and rules in user interface design
Why should the user interface designer know about this theory and its rules? If he knows how the human brain understands the things he sees, what are the benefits for him? The following 3 answers can be given to these questions:
Choosing the most practical and effective elements
When the designer is familiar with Gestalt rules, he knows which is the most practical type of design and arrangement of elements and designs and letters for each situation and situation.
Directing the user (perhaps tricking him/her)
wait! It is not meant to deceive him/her with malicious intent. In designing the user interface of the website or application, the designer has goals and must convey messages; Knowing these rules helps him to understand what he wants the user to see.
Knowing more about the user and meeting his needs
The user interface should also consider the principles of product design in his designs because he is also involved in the design of the final product (whether it is a website or an application).
Great designers understand the undeniable role of psychology in visual perception. What happens when the user’s eyes see your designs? How does their brain react to the message that your design conveys?
4 principles of Gestalt
Gestalt laws and its theory are based on what principles? The correctness of the following principles has been proven in other sciences such as mathematics and physics. In fact, these principles are not specific to psychology.
The first principle of Gestalt: Reification
We can see things that are not really there. Not! We are not crazy. This principle explains that the human brain can complete and see a shape by itself even if it is not completely drawn. Look at the image of the FedEx logo. It is a logo you know. Do you see the arrow (arrow symbol) created by the alignment of E and x? Is that sign really drawn and present in the logo?
The second principle of Gestalt: Emergence
This principle explains that when components are placed next to each other in a certain position, they cause the emergence of designs and images that are completely different from themselves.
The third Gestalt principle: multi-stability
When an image is ambiguous to us and our brain cannot understand what it is seeing, this principle explains that the brain perceives several possible forms together.
The fourth principle of Gestalt: Invariance.
The human brain has the ability to see and understand shapes, designs, and images even if they are in different sizes, directions, colors, and dimensions. This principle explains that our perception is independent of the attributes of shapes and objects.
6 Gestalt laws and their application in UI design
First, each rule is introduced and then its use in user interface design is determined. Once you’re familiar with these rules, you can find their applications on the websites and apps you interact with.
The first law of Gestalt: Law of Proximity and its application example in UI
Our brain tends to see and understand things that are grouped together. Be careful in website or application design, when you place elements close together, the user will see them together as a group. Is that what you want and are they really related enough to be members of the same group? If not, change the design.
The second law of Gestalt: Law of Similarity and its application example in UI
Our brain tends to see similar shapes and things grouped together. We use similarity to organize objects and shapes. What they are similar in (color, shape, material, direction, dimensions, size, etc.) is not important. The fact that they are similar is enough for our brain.
Taking advantage of this rule will help you to actually make the distinctive ones bolder by juxtaposing similar ones.
The third law of Gestalt: Law of Closure and its application example in UI
Our brain tends to complete shapes and things by itself and fill in the blanks (first principle). It means that you don’t need to draw all the circles to let me know that you drew a circle. The user himself understands the rest. (It goes without saying that what icons and logos can be created using this rule.)
The fourth law of Gestalt: Law of Symmetry and its application example in UI
Our brain likes and understands symmetry. Our brain likes to discover shapes and things that are similar. We see similarities in groups. Asymmetry can be used to separate symmetries. This rule can be easily used to design web pages and applications and separate its different parts.
The fifth law of Gestalt: Law of Continuity and its application example in UI
We tend to see things, shapes, or components that follow each other, connected, and therefore in a group. If the sequence is interrupted, it means that the related things are over and there is no more group. The best example of the application of this law can be seen in Google Maps. You see the connected blue dots as more of a line, a line that represents movement on a path to a specific destination.
The sixth law of Gestalt: Law of Common Fate and its application example in UI
Our brain tends to see parts and shapes that are in the same direction and think that these two go together and have the same destiny. In fact, like-minded people are a group because they have a common destination and we see them related to each other. As a result, when two shapes or designs move in two opposite directions, the user sees them as unrelated and even contradictory.
It is also possible to instill the idea of moving in a certain direction to the user by placing the shapes and designs in the same direction. Make sure that if elements are aligned in the design of the website or application, the user will see them as related. Is this what you intended? Did you want to guide him to a specific destination?