Data visualization has quickly become the standard for disseminating information on the web. It is used in a variety of industries, from business intelligence to journalism, to help us understand and communicate insights.
Our brains are good at processing visual information, which makes it easier for us to understand data visualized in charts or graphs rather than listed in tables and spreadsheets. A great data visualization should take advantage of the human visual system to present data so that it can be absorbed and understood. It should take into account the user’s knowledge of visual processing, improving and simplifying the user’s data experience.
With so many tools and frameworks available for building these graphs, it’s time to go back to basics. What makes data visualization effective? What guidelines should we follow when designing data?
The following best practices will help you design rich, insightful data experiences.
01 Design for a specific audience
Visualizations are used to reveal patterns, provide context and describe relationships in data. Although the designer has no influence over the patterns and relationships in a given set of data sets, she can choose which data to display and what context to provide based on the needs of the user. After all, like any other product, a visualization is meaningless if users can’t use it.
Visualizations designed for novice users should be structured, clear and engaging. They should directly state in words what the audience should expect from the data.
Switching Parent Work Hours: Mom VS Dad
On the other hand, visualizations for expert users can display a more granular view of data to drive user exploration and discovery. Details and data density should be straightforward.
Jobs Come and Go: National Unemployment
02 Use (but don’t rely on) interactions to facilitate exploration
Here’s a sobering figure: only 10-15% of visitors to the New York Times website who engage with a visual interaction actually click the button. The graphics team at The New York Times produces some of the best work in the business, yet hardly anyone interacts with them!
This shows that, with respect to interactive visualization design, we cannot rely on interaction to build understanding. Critical data cannot be hidden behind interactive elements, but should be visible without interaction.
However, what kind of interaction is better? Allowing for more data to be integrated (that might otherwise be excluded) allows interested readers to delve deeper into the dataset. Nathan Yau’s Flowing Data has cornered the market for this style of interactive visualization, as shown in his charts on causes of death and life expectancy.
Mortality data from 2005 to 2014: How causes of death vary by sex and race
Alternatively, an interaction can be used as a draw point, a point of interest that engages your readers in the item themselves before skimming from afar. Check out this entertaining piece of writing and culture from Quartz. The piece begins by asking the reader to simply draw a circle—before continuing with the analytical overview of cultural formations—to characterize the simple yet effective visualization.
The way you draw circles says a lot about you
Likewise, The Pudding recently released an interactive visualization that teaches readers about the birthday paradox (the birthday paradox, which states that if there are 23 or more people in a room, at least two of them have the same birthday. The probability is greater than 50%.).
While most non-statisticians may find the birthday paradox, a standard problem in probability theory, to be quite dry and unintuitive, this visualization makes it seem downright fascinating. The way creators incorporate recent user interactions makes the whole experience very relatable.
Birthday Paradox Experiment
Both of these interactive examples work because they allow the reader to engage with the data without interacting to understand it.
03 Use visual prominence to focus and guide the experience
Visual prominence, the property of making a visual element stand out from its surroundings, is a powerful tool in data visualization. It can be used to direct the user’s attention to the most important information in a visualization to help prevent information overload. By using visuals to highlight some details and suppress others, we can make our designs clearer and easier to understand.
A few visual variables—color and size—are key to our ability to create and control visual salience.
Color schemes are key to great data visualization. Color is known to be particularly good at breaking through camouflage. We can use warm, highly saturated colors to highlight key data points and apply cool, desaturated colors to put less important information into the background.
2014: Hottest year on record
The size is also noticeable. Larger elements are more attractive than smaller elements, so expand the elements you want readers to read first, and shrink less relevant text and elements.
04 Use position and length to express quantitative information and use color to express categorical information
Cleveland and McGill’s famous work on information visualization studies the effectiveness of visual encodings (ie, the mapping of data dimensions to visual attributes). They rank the different types of visual encodings according to how accurately people perceive them, giving the following (simplified) list:
- Orientation through a common scale
- length
- angle
- area
- color
What this means for data visualization design is that our first choice for displaying quantitative information should be coded by location (as seen in classic scatterplots and bar charts). As opposed to angle-based (like pie charts) or area-based (like bubble charts), position-based coding helps viewers make more accurate comparisons in less time.
However, that’s not to say that all visualizations have to be bar charts or scatterplots. It’s a good idea to keep these principles in mind when researching new ways to visualize data.
What I really want to emphasize is that color should not be used to encode quantitative information, but rather categorical information. That is, we can use colors to represent data belonging to different categories.
Life Expectancy at Birth
05 Make structural elements like tick marks and axes clear but unobtrusive
Whether or not you support Edward Tufte’s extreme approach to minimalism in design, do yourself a favor and remove visual clutter from your diagrams. Make your data shine by creating visual contrasts between data elements and non-data elements, as Nadieh Bremer did in his award-winning Birth Time in the United States.
Baby Boomer: Peak Birth During Daytime Working Hours
Remove structural elements that serve no purpose to make data clear (such as backgrounds, lines, and borders) and weaken essential structural elements (such as axes, grids, and tick marks) that would otherwise compete with your data for attention. The grid is light gray with a maximum width of 0.5 pt, and the axes are black or gray with a maximum width of 1 pt.
06 Mark data points directly
Every element of encoded data needs to be tagged so readers understand what it represents. simple right?
wrong. Too many designers rely on legends to tell readers which symbols or colors represent which data series in a chart. Listing legends, while easy for designers, is hard for readers. They force the reader to scan back and forth between legends and figures, putting unnecessary strain on the reader’s memory.
A better approach is to label the data series directly on the chart. It tends to be more of a challenge, but hey, you’re a designer. Your job is to do the work so that the reader doesn’t have to. In the example below, Nathan Yau has done the work of avoiding the legend, creating a small interactive multiple display with lots of direct labels.
Average daily consumption per person
07 Create a narrative flow using messaging and visual hierarchy
The best visualizations tell compelling stories. These stories arise from trends, correlations, or outliers contained in the data and are reinforced by elements surrounding the data. These stories turn raw data into useful information.
On the surface, it may seem like data visualization is all about numbers, but a great data story cannot be told in words. Information delivery has a clear visual hierarchy in order to guide readers step by step through the data.
For example, the title of a visualization should clearly articulate a key idea so readers can grasp it. Tiny annotations scattered throughout the data can draw readers’ attention to outliers or trends, thereby supporting key ideas.
What I’m trying to say here is: help the reader, tell them exactly what to look for in the data!
08 Overlay contextual information directly onto the chart
As I just mentioned, we can use annotations in visualizations to help in the process of creating data stories. Sometimes we can make these annotations more meaningful by adding graphical elements to relate this information more directly to our data.
Take this image from Susie Lu, for example. The data overlap of “summer blockbusters” and “Oscar season” gives meaning to otherwise seemingly random peaks and troughs. They help viewers understand the significance of the data more directly than subtitles or annotations alone.
2015 – 2017.08 box office trend: strong opening and late burst
09 Designing for Mobile Experiences
Static visualizations are often published in bitmap image formats such as JPG and PNG, which presents an obvious challenge for mobile users. The beauty of many data visualizations is their visual details—tiny data points and subtle encodings—and many of these details are lost on small screens in static formats.
Example: Accurat Studio’s beautifully intricate work on the Nobel Prize, which looks great full-size in print and on high-resolution retina displays, is barely legible on mobile.
Design for a mobile experience, or build responsive visualizations using a JavaScript visualization library like D3.js or Highcharts, or create the same static visualization design for print, desktop, and mobile.
10. Balancing Complexity with Clarity to Promote Understanding
All of the best practices I’ve talked about today boil down to one thing: finding the right balance between complexity and clarity to meet your audience’s needs.
It’s always tempting to craft beautiful, exploratory visualizations of detail, but it’s not necessarily the most appropriate approach. Be thoughtful when designing graphics, let the reader’s knowledge and goals dictate what and how much data should be included, and organize the data to tell the story you want to tell.
