Gestalt principles in UI design.

How to become a master manipulator of Visual Communication.

Have you ever looked at the sky noticing an unusually shaped cloud, resembling a familiar animal or an object? Have you ever wondered, why or how you make this association just by looking at a fluffy, blob of gas? It’s all because of how your brain works!

Your brain is always trying to make sense of the world by comparing previous experiences or visual patterns and connecting the dots. It has its own “weird” way of perceiving shape and form, grouping information, fill in the gaps to draw the big picture.

Having an understanding how your brain works will help you become a wiser designer; master manipulator of Visual Communication. It can help you determine which visual elements are most effective in any given situation, so you can use them to influence perception, direct attention and cause behavioural change. Something particularly useful when it comes to goal-oriented, problem-solving, intuitive design; User Interface design.

“Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations? How does their mind react to the message your piece is sharing?”
— Laura Busche, Brand Content Strategist at Autodesk

It’s clear by now, visual design and psychology are linked and can influence one another. Gestalt principles can help us understand and control these links.

What is Gestalt?

Gestalt (form, shape in German) is a group of visual perception principles developed by German psychologists in 1920s. It is built on the theory that “an organized whole, is perceived as greater than the sum of its parts”.

“The whole is other than the sum of the parts.”
— Kurt Koffka

The Gestalt principles attempt to describe how people perceive visual elements when certain conditions apply. They are built on four key ideas:

Emergence

People tend to identify elements first in their general outlined form. Our brain recognises a simple, well-defined object quicker than a detailed one.

Reification

People can recognise objects even when there are parts of them missing. Our brain matches what we see with familiar patterns stored in our memory and fills in the gaps.

Multi-Stability

People will often interpret ambiguous objects in more than one ways. Our brains will bounce back and forth between the alternatives seeking certainty. As a result, one view will become more dominant while the other one will get harder to see.

Invariance

People can recognise simple objects independently of their rotation, scale and translation. Our brain can perceive objects from different perspectives, despite their different appearance.

Here’re the Gestalt principles which can inform today’s UI design.

Proximity

Elements arranged close to each other are perceived as more related than those placed further apart. This way different elements are viewed mainly as a group rather than as individual elements.

How does the Proximity principle apply to UI design?

We can use the Proximity principle in UI design for grouping similar information, organising content and decluttering layouts. Its correct use will have a positive impact on visual communication and user experience.

As the principle states, items that are related should stay close to each other, while the unrelated items should stay further apart. White space plays a vital role here as it creates contrast guiding the users’ eyes in the intended direction. White space can boost visual hierarchy and information flow, contributing in easy to read and scan layouts. It will help users achieve their goals faster and delve deeper into the content.

We can apply the Proximity principle pretty much everywhere from navigation, cards, galleries and banners to lists, body text and pagination.

Common Region

Similarly to the Proximity principle, elements placed within the same region are perceived as grouped.

How does the Common Region principle apply to UI design?

The Common Region principle is particularly useful. It can help with information grouping and content organisation, but it can also achieve content separation or act as a focal point. It boosts hierarchy, scanability and assists in promoting information.

The Common Region principle can hold together many different elements keeping them unified within larger groups. We can achieve it with the use of line, colour, shape and shadow. It can often be used to bring elements into the foreground, indicating interaction or importance.

A good Common Region example would be the card UI pattern; a well defined rectangular space with different bits of information presented as one. Banners and tables are good examples as well.

Similarity

Elements sharing similar visual characteristics are perceived to be more related than those not sharing similar characteristics.

How does the Similarity principle apply to UI design?

We tend to perceive similar to each other elements as grouped or a pattern. We also might think that they serve the same purpose. Similarity can help us with organising and classifying objects within a group and linking them with a specific meaning or function.

There are different ways of making elements perceived as being similar, and thus, related. These include similarity of colour, size, shape, texture, dimension, and orientation; with some of them being more strongly communicative than others (ex. colour > size > shape). When Similarity occurs, an object can get emphasised 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 piece of content (focal point) while assisting with scanability, discoverability and the overall flow.

We can use the principle of Similarity in navigation, links, buttons, headings, call to actions and more.

Closure

A group of elements are often perceived to be a single recognisable form or figure. The Closure also occurs when an object is incomplete, or parts of it are not enclosed.

How does the Closure principle apply to UI design?

As the Closure principle states, when presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole. This way we can decrease the number of elements needed to communicate information, reducing complexity and making designs more engaging. Closure can help us minimise visual noise and convey a message, reinforcing a concept within a pretty small space.

We can use the Closure principle in Iconography, where simplicity helps with communicating meaning, swiftly and clearly.

Symmetry

Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.

How does the symmetry principle apply in UI design?

Symmetrical elements are simple, harmonious and visually pleasing. Our eyes seek those attributes along with order and stability, to make sense of the world. For this reason, Symmetry is a useful tool for communicating information quickly and efficiently. Symmetry feels comfortable helping us focus on what’s important.

Symmetrical compositions are satisfying, but they can also get 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 with drawing attention while making an impression; something useful for any point of interest or a Call To Action, for example. Symmetry, along with a healthy amount of asymmetry is important in any design.

It’s good to use Symmetry for portfolios, galleries, product displays, listings, navigation, banners, and any content-heavy page.

Continuation

Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.

How does the Continuity principle apply in UI design?

Elements following a continuous line are perceived as grouped. The smoother the line segments, the more we see them as a unified shape; our mind prefers the path of least resistance.

Continuity helps us interpret direction and movement through a composition. It takes place when aligning elements and it can help our eyes move smoothly through the page, assisting with legibility. The Continuity principle strengthens the perception of grouped information, creating order and guiding users through different content segments. Disruption of continuity can signal the end of a section drawing attention to a new piece of content.

The linear arrangement of rows and columns are good examples of Continuity. We can use them in menus and sub-menus, lists, product arrangements, carousels, services or process/progress displays.

Common Fate

Elements moving towards the same direction are perceived as more related than those moving in different directions, or not moving at all.

How does the Common Fate principle apply in UI design?

Regardless of how far apart are the elements or how dissimilar they might appear, if they are moving or changing together, they are perceived as related. This effect can take place even when movement is implied, by other visual elements.

The Common Fate principle is more potent when elements move synchronised; in the same direction and at the same time and speed. It can help with grouping relevant information and linking actions with results. The disruption of a synchronised movement can grab users’ attention and direct it to a specific element or feature. It can also, establish relationships between different groups or states.

We can use the Common Fate principle in expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators.

Conclusion

User Interface Design isn’t all about pretty pixels and sparkly graphics. It’s mainly about communication, performance and convenience. Gestalt principles are always current helping us achieve these goals; creating a pleasant experience for the users and a great success for the business.

If you enjoyed this article or find it useful, please clap and share it so more people can benefit from it. ❤

*You might also like my article on how to design with intention, an easy plan for action for even more successful designs.