Making Complex Data Readable

February 20, 2019
Imagine your job requires you to sift through thousands of data points to find a needle in the haystack under the pressure of time. No human being can do this on his own. They need tools that organize data into information so they can make decisions quickly. Readability plays a critical role in organization. The most iconic typographic system that has helped millions of people navigate through a complicated infrastructure, the NYC Subway system, inspired me to rethink my approach to make data more comprehensible at first glance for people who live in the data realm.

Understand the environment

Onsite visits

Just like Massimo Viagnelli spent several years observing people coming in and out of the subway for several years, the first step is to observe customers under the pressures of their job. Observation is worth a thousand times referencing material design guidelines, reading articles or copying trendy patterns from other products. Through observation our team learned to distinguish the interactions people have between a dashboard on a computer monitor versus a dashboard on a large monitor in a triage room.

Dynamic spaces

Next, see the layout of the virtual space where the data will be displayed. What is the current grid the product uses for a dashboard versus a regular page? What are the breaking points for different screen sizes? A clear grasp of the grid will help you see where the trade-offs are around sizing, special characters’ spacing and rules for truncation or wrapping.

Consider stress testing different variations of types because those little details in glyphs can make users question the accuracy of their data instead of navigating across their data.

Information Hierarchy

Often times people are looking at data in the context of visualizations. To avoid creating noise without purpose, when experimenting with typefaces, it’s also critical to take into account the interaction between data and secondary focal points. In the example below for Single Value panels, we considered the number along with the visualization, labels and title when we defined the information hierarchy that helped the user find the information he needed quickly.
An iteration of single values paired with averages, latest value, minimum/maximum, count and sum components.

Create Effective Patterns

Labels for basic charts

When text is compressed due to panel resizing in a dashboard, it’s easy to add embellishments to bring focus to small details. However, there are times when removing some elements (skipping intervals) can help people understand the data better. Less noise with a hint of time intervals is an approach to keep the data the star of show.

Labels for complex charts

Caution: Labels in advanced visualizations need to be more visible since people face a high learning curve in understanding the interaction. In this case, withholding information (time interval) doesn’t add value.

Legend placement

In common visualizations (area, line or bar charts), legends are placed next to the chart. However this pattern breaks down in the world of high cardinality data - too many data points and long strings of text the users needs to see for his job. Truncation is not best solution.

People are better able to read long strings of text when the legend is below a chart. A more subtle solution is to use hovering to highlight the time series and reveal the full name of the item. This allows the user to stay within one area instead of going back and forth between the legend and chart area.

Formatting consistency

Formatting tends to be the most overlooked element since different people work in different product areas and don’t always connect the dots from one product area to another. Number formatting reduces the cognitive load when people are comparing numbers across different visualizations. Take an inventory of all visualizations across the product to find the discrepancies.

Often times people are cross-referencing data from a panel on a dashboard and then jumping to several other product areas. If formatting is not consistent across these touch points, people end up putting more effort into deciphering instead of analyzing their data.

Color

Color can enhance or ruin readability of data. If colors are critical for users to read the data, then determine the amount of flexibility given to the user. Too much flexibility can lead to a rainbow that’s not accessible and takes away from directing the user to the right content. Limited options champions the essential and eliminates cognitive load.

Numbers tend to be tied to alerts in the on-call world. By giving users the option to color the value, we sacrificed readability. Hence in the beta iteration, we constrained the option to the background color for both light and dark theme.

Conclusion

An effective data visualization strikes a balance between data density and readability. Designing readable data is not just about adjusting visual design details but also developing a deep understanding of the people analyzing the data so those choices don’t hinder their work. In the DevOps world, every second of downtime comes at a cost -- people need insights quickly. Learn more about your users first before jumping into details to create a succinct experience that fits their context.