Gestalt Principles for Information Design

By Lucia Wang 

A widely known psychology theory in the design community, Gestalt principles describe the way our brain makes sense of visual information. Without the audience being aware, Gestalt principles are omnipresent in logos and adverts: associations, symbols and visual representations that become deeply ingrained in our brains, such as the WWF logo below. Made of seemingly discontinuous lines and broken forms, the logo projects a powerful panda image that is hard to forget.

gestalt1

Image source: logo share

And why are Gestalt principles relevant to information design? As internet readers become more and more visually inclined, we need better way to transmit information without much cognitive effort on the audience’s part. There are many ways Gestalt principles can help us organize and present visual information better in an infographic, especially if you are dealing with complex information.

[Related: Gestalt Theory in Typography & Design Principles | 12 Basic Principles of Animation in Motion Design | International Design Awards Winners 2017: Infographics]

Here we look at the practical ways Gestalt psychology can be applied to infographic design, such as the law of figure/ground, the law of similarity, the law of common area, etc.

What is Gestalt Psychology?

Before we go any further, it shall be instructive to learn about the history of Gestalt theory. The Gestalt psychology was developed by group of German psychologists in the 1920s. It was an attempt to understand and describe how people perceive visual information and process them.

The word Gestalt is actually a German one and literally means “Whole.” It also means “Form” and “Shape.” According to this theory, “The whole is other than the sum of its parts.” This means that while each individual part has its own meaning, the whole body it creates gives it a complete meaning.

This means that our minds automatically try to simplify visual input, and as a result we see the meaning of the whole instead of the individual parts. While individual parts can have distinctively different meanings, the whole can take on a completely new meaning that deviates from individual parts.

And how do we see the whole from sum of all parts? By ways of grouping. According to Gestalt principles, a few laws govern the way we visually group things:

gestalt2

  • The law of Figure/Ground
  • The law of Proximity
  • The law of Similarity
  • The law of Continuity
  • The law of Closure

Now let’s break it down one by one with examples of how you can apply these theories in your work.

The Law of Figure/Ground

This refers to how our brain identifies foreground and background. “Figure,” or “positive space,” is what we pay more attention to in a composition. For instance, in a picture or painting, the subject is generally on the foreground.

gestalt3

In the picture above, it can look like the contour of two faces. However, due to the color contrast, it also seems like a chalice in the middle. At the end of day, the shape that requires the least cognitive effort will emerge as the “figure,” and the rest as “ground.”


hdl-2017-nodate


Leveraging on the figure/ground law, we can avoid ambiguity in infographic design by using higher contrast between figure and ground, when a clear separation between main subject and background is called for. In the infographic example below, the solid background of light pastel color made the food dishes in the foreground a clear focal point. It makes the otherwise information-dense graphic very clear and readable.

1fec918859589.560c4b8c3c2a4

Image by Ryan MacEachern |  Source: Behance

The Law of Proximity

This rule of Gestalt psychology says that although the shapes and objects may unrelated, we perceive them as the same group if they are within close proximity of each other.

gestalt6

In the figure above, you can see a hodgepodge of numbers which do not make sense. However, they are placed in the shape of an X, which is what we perceive the whole image as. According to psychologists, all the small numbers are clustered together closely, which makes the human mind perceive them as a group.

When designing infographics with many elements, we can help our audience make sense of it all faster by placing related elements close to each other. In the infographic below about “working remotely,” the designer grouped relevant information into shapes that look like notebooks, which helps us read better by separating blocks of information from each other.

Tips-and-Tricks-for-working-from-home-remote-work-infographic-lemonly

Image source: Lemonly

The Law of Similarity

gestalt8

According to this principle, if objects share the same attribute—shape, texture, size, color or orientation—they are perceived as a ground. In the above example, you can see four horizontal lines of polka dots. Even though they are all of the same size and shape, we perceive them as two separate groups because of the differences in color.

How do we apply this to infographic design? One way we can segment various design elements is to apply the same visual element to each group. It provides a quick mental shortcut to our readers which elements belong together.

This law is especially helpful when you are in need of visualizing large quantities of information, such as in the infographic below about lifespan of the entire animal kingdom. It would be overwhelming to simply layout all the lifespan numbers of every animal without any visual organization. What the designer did great here is to subtly group animals by applying the same colors – pink for mammals and blue for aquatic creatures.

Lifespans of the Animal Kingdom #infographicImage source: Visualistan 

The Law of Continuity

continuity

The principle of continuity seems very obvious but we rarely pay conscious attention to it when it’s used in visual presentation. It indicates that our brain tends to follow continuous lines and unified shapes, even when they are made of disconnected dots and lines.

In an classic advertising example below, our brain perceives the fragmented lines as a continuous whole, which makes the IBM logo even more iconic and symbolic of unification than its previous versions. Leveraging the law of continuity, the logo made of stripes of the same color creates an enduring impression.

gestalt10

In the infographic below, the law of continuity is used to break up conventional design patterns of numbers. Our eyes will connect the blocks and lines of the same color, and continue the shapes that are broken up. The use of law of continuity here makes for a visually interesting design as well as creates clear relationships of where every piece of information belongs.

8 Trends in Business Communications and Collaboration #InfographicImage source: Visualistan

The Law of Closure

According to Gestalt psychology, our visual brain naturally desires a closure of space. When our mind sees an disconnected elements with a familiar form, it will automatically start to “fill in the gaps” so to speak. Marketers use this shape to develop captivating images, logos and advertisement posters.

The WWF logo we cited in the beginning of this article is a classic example of it. We see the panda even when the form is incomplete. The key is to prompt the brain with enough information to recognize the whole. It is also important to design such forms with unified elements to forge the association, such as the same color. 

In information design, the law of closure can be used to create dynamic, playful content. In the example below, our mind “close the gap” between disconnected stats bars, because we tend to see the underlying human figure that unify the bars. Leveraging visual psychology, you can create design pieces like this that communicate information as well as engage attention.

download

Image source: ESPN FC

Your Turn

There is no hard and fast rule for applying these laws or principles; nor are there any limitations. Their design and ultimate success completely depends on your creativity and understanding of the principles and the people’s perception. These principles work both for real life and online marketing.

The use of Gestalt psychology principles therefore depends on your needs (or your client’s needs), on your audience and your creativity. You can read more about the scholarly discovery and debate of Gestalt psychology here and here. And if you are inspired to create your own infographic design, Visme is an infographic design tool that comes with great templates.

Have you successfully used psychology principles in your design? Does this post inspire you to delve deeper into visual psychology? Share your thoughts with us in the comment section below.

About the Author:

Lucia Wang currently leads user growth at Visme, a browser-based infographic & presentation tool for non-designers. She is fascinated by how design influences user behaviour. You can find Lucia on Twitter at @luciazw and Medium @luciaw.


Earn a Certificate in Infographic Design from HOW Design University

hxofcrf2ctlw5iotyil3

COMMENT