mai-li

Data Visualization Part I: Gestalt Principles

Blog Post created by mai-li on May 13, 2016

You may have heard the phrase “whole is greater than the sum of its parts," which has its roots in German cognitive theories developed during the early 20th century. Gestalt theory seeks to understand the laws of human visual perception: how the mind organizes and creates relationships between elements and puts them in groups or unified wholes.

 

What does this have to do with data visualization? Their guidance help designers achieve enhanced visual hierarchy, and reduce cognitive load so that users can more quickly and meaningfully digest information. That means less time trying to uncover trends in data, and more time to accomplish other things.

 

While there are additional principles, we’ll cover a few key laws that can help improve the usability of data visualizations:

 

The Law of Similarity

This law theorizes that objects sharing similar characteristics—such as color, shape, scale, and orientation—are perceived as a group. To leverage this law, designers should ensure that objects having no intended association are as visually distinct as possible, and apply similar styling to related elements so that users can perceive those elements as a unit.

 

chart1.png

 

Compare the two pie charts above—paying special attention to treatment and not chart type (best charts for different types of data will be covered in a later post). The first chart leverages distinct colors for each type of data. While establishing visual delineations between data types can be helpful, its use here is not strategic. The second chart leverages similar attributes to establish groupings: sold fruit and unsold fruit, sold fruit and sold fruit types, unsold fruit and unsold fruit types, and fruit types. This makes it easy to see associations immediately.

 

The take away: meaningfully use shared and contrasting attributes to reinforce relationships in your data.

 

 

The Law of Continuity

The human eye is apt to uncover or create relationships by scanning from one object to another in a continuous movement. Aligning related objects increases legibility and facilitates meaningful perception of information.

 

chart2.jpg

In the examples above, we see two bar charts with the same data but different organization methods: the first chart is organized alphabetically, and the second chart is organized by ascending percentage. The second chart is more meaningfully arranged than an alphabetical sequence.

 

The take away: Leverage an arrangement of data that intuitively lends comparison or a narrative. Avoid disparate representations that appear unorganized.

 

 

The Law of Focal Point

This law is the opposite of the law of similarity: visually distinct objects are a focal point in a composition and draws the user’s attention. Use this rule when there’s an element or data point that the user should focus upon.

 

chart3.png

 

Above we see two stacked bar charts with data from a survey for kindergarteners about their favorite fruit. Since the study’s audience is the fictional Cherry Farmers Association, the second chart is the better option because cherry performance is most relevant to this particular audience.

 

The take away: in instances where a focal point is useful, use distinct attributes to highlight the object(s).

 

We'll cover choosing the optimal type of chart and graph for a given set of data in the next blog post.

 

Sources:

Gestalt Principles: How Are Your Designs Perceived? - Vanseo Design

The Gestalt Principles

How to Make Data Visualization Better with Gestalt Laws

Outcomes