Table of Contents
Using Gestalt Principles to Bring Out Patterns in VisualizationsGestalt 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.
An Example From Recorded FutureWe’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.
Figure & GroundThe 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.
ProximityThe 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.
SimilarityFurther, 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.
Going Up, Going Down, Remaining FlatThese 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, NarrowThere 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 DistributedWe notice the loose distribution of bubbles for all three companies around 2018 and 2019 and tight distribution around 2014.
Normal, AbnormalZoning 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.
Spatial PositionWe 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 AreaThe 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 ColorAs mentioned earlier, the color of the bubbles makes it easy to classify them into three groups. This employs the preattentive attribute of Hue.
IntensityFinally, 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:
- Everyone Does it, but No One Talks About It – Data Visualization
- To Explain, or Explore: That is the Question in Data Visualization
- Two to Tango: The Role of Eyesight & Memory in Data Visualization
- How We Decode Visual Information