Gestaltprinsipper
Cecilie Dahl

Cecilie Dahl
Partner | Senior Rådgiver

cecilie@vidi.no
92878350

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.

clouds

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, 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.

Gestalt principles

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.

Grouping of objects

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.

Multistability

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.

Variants

Optical Illusions

The information our eye sends to the brain challenges our perception of reality.

Gestalt - illusjon

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.

Gestalt Proximity principle

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.

Continuity

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.

Similarity Gestalt

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.

Stand out

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.

Grouping of objects

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.

Close principle

Symmetry

Symmetrical elements tend to be perceived as belonging together regardless of distance, which gives us a sense of solidity and order.

Symmetry

How does the symmetry principle apply in UI design?

Symmetrical elements are simple, harmonious and visually pleasing. Our eyes seek these qualities along with order and stability, to give meaning to the world. For this reason, Symmetry is a useful tool for communicating information quickly and efficiently. Symmetry feels comfortable and helps us focus on what is important.
Symmetrical compositions are satisfying, but they can also be a bit dull and static. Visual symmetry tends to be more dynamic and interesting. Adding an asymmetrical element to an otherwise symmetrical design can help draw attention while making an impression; something useful for all interesting places or for example a call to action.
Symmetry, along with a healthy amount of asymmetry is important in any design.
Asymmetry

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.

Continuation

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.

columns

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.

Motion and Direction

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.