Cecilie Dahl
Partner | Senior Rådgiver
Gestalt principles in UI-Design
How to become a master of Visual Communication.
Our brain is always trying to give meaning to the world by comparing past experiences or visual patterns and connecting what you see to something familiar – “connect the dots”. The brain has its own “weird” way of perceiving shape and form, grouping information and filling in the gaps to draw the big picture.
You have probably looked at the sky several times and noticed an unusually shaped cloud that resembled a famous animal or object. Have you ever wondered why or how you create this connection just by looking at a cloud?
It’s all because of how our brain works.
Outstanding designers understand the important role psychology plays in visual perception. What happens when someone's eyes meet your design? How do your thoughts respond to the message you are trying to convey?— Laura BuscheBrand Content Strategist at Autodesk
Having an understanding of how your brain works will help you become a wiser designer and a master of visual communication. It can help you decide which visual elements are most effective in a given situation, so you can use them to influence perception, direct attention and cause behavior change. Which is especially useful when it comes to targeted, problem-solving, intuitive design; User interface design also called UI design.
What is Gestalt?
Gestalt (form in German) is a group of principles for visual perception developed by German psychologists in the 1920s. It is based on the theory that “an organized whole is perceived as greater than the sum of its parts”.
The Gestalt principles try to describe how people perceive visual elements when certain conditions apply. They are built on four important principles:
Identification
Humans tend to identify elements first in their generally outlined form. Our brain recognizes a simple, well-defined object faster than a detailed object.
Grouping
Humans can recognize objects even when parts of them are missing. Our brain matches what we see with familiar patterns that are stored in our memory and fill in the gaps. We create a new object of several seperate components.
The whole is something other than the sum of its parts.— Kurt Koffka
Multi-Stability
People will often interpret ambiguous objects in more ways than one. Our brain looks back and forth between the options in the search for security. As a result, one point of view will become more dominant, while the other will be more difficult to see.
Variants
Humans can recognize simple objects regardless of rotation, scale and translation. Our brains can perceive objects from different perspectives, despite the fact that they are different.
Optical Illusions
The information our eye sends to the brain challenges our perception of reality.
Here are the Gestalt principels that can be used in today’s UI design.
Proximity
Elements that are arranged close to each other are perceived as more related than those that are placed further apart. In this way, different elements are seen mainly as a group rather than as individual elements.
How does the proximity principle applies to UI design?
We can use the proximity principle in UI design to group similar information, organize content and clean up layouts. Proper use will have a positive impact on visual communication and user experience. As the principle says, objects that are related to each other should stay close to each other, while the unrelated objects should stay further apart.
White space plays an important role here, as it creates contrast that guides users’ eyes in the intended direction. White space can increase the visual hierarchy and information flow, and contribute to easy-to-read and scan layouts. It will help users achieve their goals faster and dive deeper into the content.
Common areas
In the same way as the proximity principle, elements placed in the same area are perceived as grouped.
Similarity
Elements that share similar visual characteristics are perceived to be more related than those that do not share similar characteristics.
How does the principle of equality apply to UI design?
We tend to perceive similar elements as grouped or patterned. We may think that they serve the same purpose. Similarity can help us organize and classify objects in a group and associate them with a specific meaning or function.
There are different ways to design elements that are perceived as similar, and thus related. These include similarity in color, size, shape, texture, dimension and orientation; with some of them being more communicative than others (eg color> size> shape).
When similarity occurs, an object can be emphasized by being different from the rest; this is called ‘Anomaly’ and can be used to create contrast or visual weight. It can draw the user’s attention to a specific content (focus point), while also helping with scannability, discoverability and overall flow.
Closure
A group of elements is often perceived as a single recognizable shape or figure. Closing also occurs when an object is incomplete, or parts of it are not closed.
How does the Close principle apply to UI design?
As the closing principle says, when the brain is presented with the right amount of information, the brain will jump to conclusions by filling in the gaps and creating a unified whole. In this way, we can reduce the number of elements needed to communicate information, reduce complexity and make design more engaging.
Closing can help us minimize visual noise and convey a message, and reinforce a concept in a fairly small room.
Symmetry
Symmetrical elements tend to be perceived as belonging together regardless of distance, which gives us a sense of solidity and order.
How does the symmetry principle apply in UI design?
Continuation/Continuity
Elements that are arranged in a line or a soft curve are perceived to be more related than those that are arranged randomly or in a tough line.
How does the continuity principle apply in UI design?
Element that follows a continuous line is perceived as grouped. The smoother line segments, the more we see them as a unified form; our mind prefers the path of least resistance. Continuity helps us to interpret direction and movement through a composition. It happens when you adjust elements, and it can help our eyes move smoothly through the page and help with readability.
The continuity principle strengthens the perception of grouped information, creates order and guides users through different content segments. Disruption of continuity can signal the end of a paragraph that draws attention to a new content.
The linear arrangement of rows and columns are good examples of continuity. We can use them in menus and submenus, lists, product layouts, carousels, services or process / progress views.
Common directions
Elements that move in the same direction are perceived as more related than those that move in different directions, or that do not move at all.
How does the Common Direction principle apply in UI design?
No matter how far apart the elements are or how different they may appear, if they move or change together, they are perceived as related. This effect can occur even when movement is implied, by other visual elements. The common direction principle is more potent when elements move synchronized; in the same direction and at the same time and speed. It can help group relevant information and link actions to results.
Interference with a synchronized motion can capture users’ attention and direct it to a specific element or function. It can also establish relations between different groups or states.
Conclusion
User interface design is not just about pretty pixels and beautiful graphics. It’s mainly about communication, performance and convenience. Gestalt principles are always valid and help us achieve these goals; to create a good experience for the users and goal achievement for the company.
