Categories: Thoughts

How to Use the Gestalt Principles for Visual Storytelling #PoDV

This article is the fifth and final post in our series ‘Principles of Data Visualization’ #PoDV. We’ve talked about the goals of data visualization and how preattentive attributes and analytical patterns help us process visual information over the last few weeks. When designing visualizations, however, we frequently want to emphasize certain aspects of the visual over others. Gestalt’s Principles come in handy in these situations. In this post, we’ll show you how to apply the gestalt principles to visualizations to see patterns as well as visual storytelling. If you’re looking for a Data Visualization Tool, we suggest using fusioncharts for data visualization.

Table of Contents

Using Gestalt Principles to Bring Out Patterns in Visualizations

Gestalt principles describe how our mind organizes individual visual elements into groups to make sense of the entire visual. When designing a visual, these principles can highlight essential patterns and downplay other patterns. The image below illustrates the principles of Gestalt, which are relevant to visualization (you can see a more extensive list on Wikipedia).

Here’s what we notice from each of the illustrations:

Proximity: We see three rows of dots instead of four columns of dots because they are closer horizontally than vertically.
Similarity: We see similar-looking objects as part of the same group.
Enclosure: We group the first four and last four dots as two rows instead of eight dots.
Symmetry: We see three pairs of symmetrical brackets rather than six individual brackets.
Closure: We automatically close the square and circle instead of seeing three separate paths.
Continuity: We see one continuous path instead of three arbitrary ones.
Connection: We group the connected dots as belonging to the same group.
Figure & ground: We either notice the two faces or the vase. Whichever we see becomes the figure, and the other the ground.

These principles allow us to perform many tasks, such as reducing the noise from charts, choosing the ideal aspect ratio, and clearly showing relationships between elements. Let’s look at a dashboard and see these principles in action.

An Example From Recorded Future

We’ll consider the following visualization from Recorded Future, a web intelligence company. This visualization compares the mentions of Apple, Google, and Microsoft across the web over the next five years.

This visualization features two chart types – An area chart, which is grayed out in the background, and a bubble chart, which is color-coded in the foreground. Let’s analyze this simple visualization and identify which elements from this white paper it uses.

Gestalt Principles

Figure & Ground

The first thing you notice when looking at this visualization is that the bubbles stand out against the backdrop of the area charts. This is appropriate considering the designer wants the viewer to explore deeper information embedded within the bubbles. The area chart, which is grayed out, shows the trend over time and isn’t meant to be explored. This is an excellent example of the Gestalt principle of Figure & Ground.

Proximity

The bubbles are organized in three distinct groups along the horizontal line. We can identify the three groups of bubbles quickly because of how close they are to each other. Notice that enough space is given between each group to make them distinct. This uses the principle of Proximity.

Similarity

Further, we notice that the bubbles are of three colors – green, purple, and blue. This Similarity brings out the grouping even more clearly. To fully understand the following few pointers, read last week’s post if you haven’t already.

Analytical Patterns

Going Up, Going Down, Remaining Flat

These patterns are most visible in the area chart. We notice that the overall trend for Apple is upward, while Google’s Microsoft stays flat.

Wide, Narrow

There are many peaks within the area chart, but one of them for Microsoft is particularly noticeable in January 2015. This peak is narrower than the other peaks.

Tightly, Loosely Distributed

We notice the loose distribution of bubbles for all three companies around 2018 and 2019 and tight distribution around 2014.

Normal, Abnormal

Zoning in on the bubbles for Microsoft, we notice an outlier for Microsoft in mid-2015. The other bubbles fall within a more normal range. Seeing these patterns makes us want to further probe into them.

Preattentive Attributes

Spatial Position

We use the preattentive attribute of position to track the rise and fall of the area chart. Similarly, we notice the abnormal bubble in Microsoft’s chart because of its higher position than the other bubbles.

Size or Area

The bubbles vary in size. Their size corresponds to the number of web mentions for a particular topic. This makes it easy to spot the essential mentions and explore them in detail.

Hue or Color

As mentioned earlier, the color of the bubbles makes it easy to classify them into three groups. This employs the preattentive attribute of Hue.

Intensity

Finally, the low intensity of the area chart places it in the background, giving priority to the bubbles. Being aware of the preattentive attributes, analytical patterns, and Gestalt principles can make a visual come alive. Also, when designing visualizations, the Gestalt principles allow us to prioritize basic patterns and downplay the noisy ones. Understanding these basic principles of data visualization will help us craft outstanding visualizations and tell compelling stories, much to the delight of our colleagues and end-users. If you’ve missed any of the previous posts in this series, here they are:

Additionally, if you’d like to read the entire series in one sitting, get our white paper ‘Principles of Data Visualization.’

Twain Taylor