Data visualization is a powerful catalyst to translate raw data into insights. These insights occur when data is transformed, analyzed, interpreted and visualized. Insightful data is often actionable. This meaning; the data is at a state that can be used to spur conversations, test, experiment, validate, explore et al. Actionable data helps users understand the data in context and helps them make decisions.

Designing Data Visualizations

The challenge with designing data visualizations start with “unboxing” all of the elements. Taking raw data and visualizing it’s contents verbatim is similar to re-skinning a design for the sake of visual aesthetics. Often there is not much value add. Value is added when data is displayed in context to the user’s goals and behaviors. As a designer you must discern the data available and find the “why?” and what problem you are trying to solve. By understanding the “why?” your design objectives will shift more inline with your user’s goals and behaviors.

Qualitative user research is one method to understand more about your user’s goals and behaviors. During this process it’s important to understand how the information you are displaying will be used. The “why” is used to inform the “how”. Often designers confuse “why” and “how” as a singular process. It’s a separate process with two varying outcomes.

A great example is the YouTube video player (data visualization can come in multiple forms not just a chart). YouTube displays time onHover via the scrub bar to provide user orientation (answers: “why display time”). In this scenario, time is used as a variable when sharing videos—which is to share a video at a particular start time(answers: “how time is used”). The “how” can provide delight, which is a form of empathy in the user-centric design process.

Designing with data

I’m going to switch gears a bit and talk about some of the challenges associated with creating visualizations. Those of you with an analytic/BI background will definitely have some ‘aha’ moments.

When designing visualizations (specifically graphs/charts) it’s easy to fall into the trap of producing the most visually appealing visualization. In reality data can be pretty volatile. They’ll be missing values, bad data, outliers, and anomolies. It’s important to treat these scenarios the same way you would a “fallback” in an interface. There’s an underlying importance to correctly visualize data and to have ‘data integrity’. When data visualizations seem broken user credibility and trust diminishes.

Visually it’s important to recognize utility and understand that analyzing and interpreting data should be efficient. Great visualizations shift the burden of calculating/aggregating information from the user to the visualization. Since data visualization is goal-oriented and requires quickly discerning data—choosing the right display vector is important. Often a simple visualization such as a bar graph is a better display vector than a fancy bubble chart because it minimizes cognitive load.

It’s also important to keep in mind accessibility and format. Color can be used as an indicator to emphasize or deemphasize data but contrast can hinder its effectiveness. If contrast is low—printed visualizations will loose context and people who suffer from color blindness (complete, protanopia, deuteranopia, or tritanopia) will be affected.

Technology is another challenge when creating visualizations. Browser support, graphing library constraints, and data availability all play key roles in how or what you can visualize. Some data may be raw, some may be expensive through multiple DB calls, and others may be formatted incorrectly for your specific task. It’s important to understand engineering constraints as a designer. This will enable you to know what’s possible and what needs more engineering effort.

In an ideal scenario you will have access to real data or mock data. If you’re using mock data try to use high fidelity data (as close to a real data set as possible). This will help you catch edge cases and see more realistic visualizations before you push a design live. With high fidelity data you can test items such as:
1)Data Points: Check number of data points to have accurate peaks and troughs when the viewport expands or contracts
2)Performance: You can optimize rendering time or use progressive disclosure techniques to separate “must-have” data from “drilldown views”
3)Interactions: You can include tooltips or gestures help remove clutter and provide needed information on user-request

There are two use cases for data visualizations—To explore (find a story the data is telling you) and to explain (tell a story to an audience). In each use case it’s important to help the user discern information and relationships between the data.

Let me hear your thoughts, opinions — Follow me @PaulFarino