Information Design
By: Dan Bayn
Tags: UX, Data Visualization, Enterprise Software

Effective data visualization for web applications.

Making information understandable is a large part of any designer’s job, even more so when that information is data. The internet has a lot to say about what makes a bad data visualization, but good advice on information design is harder to come by.

Over the last five years, I’ve spent a great deal of time designing graphs and other visualizations for enterprise web applications. I’ve struggled through a lot of trial and error, sought out education from many sources, and now I’d like to share the results of that work with you.

My biggest source of inspiration has been Edward Tufte, professor emeritus of statistics at Yale. His relentless focus on clarity and simplicity meshes well with my natural minimalism and the very no-nonsense needs of enterprise software. I highly recommend his books…

The Visual Display of Quantitative Information

Envisioning Information

Visual Explanations

Beautiful Evidence

I’ll also add a heapin’ helpin’ of usability best practices from my twenty years of experience in the field. Together, we’ll learn how to design effective information visualizations for the web.

Objectives of Information Design

Unlike most things you’ll encounter as a design professional, graphs and visualizations aren’t about communicating a brand or value prop. They’re about communicating an insight.

An effective graph should answer questions like…

What’s the relationship between two (or more) variables?

Is a value unusually high or low? Trending up or down?

How has a variable changed over time?

How should I expect it to change in the future?

Pixels spent on anything else aren’t just wasted, they may obscure the key insight. Effective graphs don’t need to sing and dance. If the insight being offered is useful and interesting, effective communication will be plenty engaging all on its own.

Elements of Information Design

When kicking off an information design, a lot of people will pull up a pattern library like https://datavizproject.com and just pick out something they like. Maybe they’ll give some thought to the strengths and weaknesses of each chart type, but I want you to go deeper. Really think about the basic elements of a design and how you can encode information in each of them.

Information Visualization Elements

Shape, Size & Position

Each piece of data in your visualization will be represented by a shape: point, line, rectangle, circle, etc. The size of these shapes is an intuitive way to encode quantity, but simple shapes are best. It’s easier to compare lengths than areas, so avoid rounded bars and pie charts.

Line graphs intuitively encode change over time. If you’re feeling adventurous, the width of a line can also encode an additional quantity, or you can split a line into multiple parts (see Alluvial Diagrams).

Maps use shape and position to communicate geographical data.

Generally speaking, if something in your visualization is larger than something else, users will infer that there is more of it, and that the difference between them is proportional. Using size to encode anything else is like ice skating uphill.

Color & Contrast

Everyone’s first instinct is to color-code things by type, but color and contrast are your best tools for directing users’ attention and guiding their value judgments. Don’t squander it! (More on this below.)

Due to the way light scatters through the atmosphere, we perceive low-contrast elements as further away than high-contrast (or highly saturated) ones. Use this effect to make less important elements fade into the background, so the important data can take center stage.

Fill & Pattern

People will perceive an outline shape as less “real” or important than a solid fill; likewise for a dashed or dotted line. This makes fill another great way to create visual hierarchy or show what’s in focus.

Finally, try to avoid using multiple elements to encode the same information. If larger values are already larger or taller, there’s no need to also give them a solid fill or brighter color. Simplicity is the strongest foundation for any information design, as we’ll see next.

Principles of Information Design

The first three of these are taken directly from Edward Tufte, with examples and guidelines based on my own experience. The fourth is an essential principle from usability. Keep them in mind when assembling and styling any of the elements discussed above.

Minimum Necessary Contrast

Graphs have a lot of chrome: gridlines, labels, axes, legends, etc. These elements are not data, but they help users make sense of data. They work best when they fade into the background: there when needed, but never pulling attention away from the key insight.

Always start your design with the minimum necessary level of contrast.

For example, gridlines should be toned down to low-contrast grays and the thinnest possible lines, if not removed from the design entirely. Tufte suggests using white gridlines that cut across the color fills of a bar graph, so that they almost disappear.

Gridlines

Starting with the minimum necessary contrast is just good design. You can apply this principle to site navigation, column headers, or any other kind of UI chrome. Let you content shine through!

Data/Ink Ratio

If it’s not communicating information, get rid of it! Tufte refers to any visual element as “ink,” terminology from the world of print. We could as well call it the “Data/Pixel Ratio,” but… we won’t.

Optimizing your data/ink ratio usually means removing non-data elements. The typical box plot, for example, uses a rectangle to represent the normal range of values in a set. The vertical lines mark out the highest and lowest values. In Tufte’s redesign, the boxes are replaced with dots (usefully marking the averages) and remove the rectangles entirely, cleverly allowing users to infer the normal range from negative space.

Box Plots

Another optimization strategy is to consolidate repetitive elements, like x-axis labels, so that they’re only displayed once. For example, an hourly graph does not need to repeat AM/PM labels ad nauseum. Instead, you can display this information only when it changes (i.e. midnight and noon). You can use the same technique for day, month, and year.

Consolidated X-Axis Labels

Perhaps the most interesting approach is to find ways of encoding new data in otherwise non-data elements. For example, Tufte argues that static y-axis labels would be more useful if they omitted values outside the data set. This transforms them into range indicators that actually add new information to the graph.

Range Indicators

I’d even extend this principle to legends, those ubiquitous keys that tell you how to read a graph or map. For web applications, these amount to a first-time user experience. Once a user understands the visualization, they become non-data ink… unless you can embed real data in them.

One useful method is to combine them with summary statistics that, like range indicators, provide new information. In addition to explaining that different lines in a graph represent different years, for instance, your legend could also report the total dollars spent in each year.

Put that all together, and you get something like this…

Multiple Lines, Summary Stats, Range Indicator

These changes actually get you more information with less ink: monthly totals, yearly totals, and the total range. Plus, the increasingly solid line patterns use contrast to intuitively visualize the progress of time, but that’s getting ahead of ourselves…

Visual Hierarchy

Okay, so you’ve ruthlessly simplified your graph. Now it’s time to dial up that data. There are a lot of design levers you can pull to create an intuitive hierarchy of information in a graph, which is especially useful for layering on reference or comparison values.

In Bar Graphs: When displaying multiple data sets (e.g. a person’s savings vs the national average), you’ll need to use color and contrast to give the reference data less weight. It’s only there to put the primary data in context, after all. A target value could be layered on as a line, which has less visual weight than the bars.

Multiple Bars, Reference Line, Range Indicator

You can keep going with this — adding lower-contrast bars, dashed or dotted lines, etc. — but exercise caution! Every additional element adds cognitive load, making users work harder to understand. If your graph is telling more than one story, consider splitting it into multiple graphs.

In Line Graphs: It’s quite common to graph multiple time-series data as overlapping, transparent area charts (lines with a fill color), but this approach creates confusing color and contrast variations, and it treats every data set as equally important, which is rarely the case.

Instead, you should use fill and line styles as tools for creating visual hierarchy. In the below example, only the primary data set has an area fill. The reference value is just a line and has a less saturated color. Finally, a dangerous threshold is represented by a straight, red line that intersects the range indicator.

Multiple Lines w/ Color

Progressive Disclosure

If all of this minimalism and lack of traditional legends makes you nervous, fear not! The interactivity of web applications allows us to display helpful explanations and additional details whenever the user needs them.

In bar graphs, that might mean clicking on a specific bar to see its label and specific value in a fly-over panel. In line graphs, you’d click on a column (i.e. a date or time) to see all values for that period. Be sure to include an end dot for each line — one that’s large enough to tap on a touchscreen — so you can display its label and any other explanatory text that might be helpful.

Fly-Over Panels (a.k.a. Pop-Ups, Tooltips, etc.)

Putting Numbers into Context

There’s one more arena where these techniques can prove useful: helping users interpret unfamiliar numbers. Even dollar values, when they get large, can become difficult to evaluate. Highly technical information starts at difficult and gets impossible.

Simple visualizations can give people an intuitive sense of whether a value is a lot or a little, whether it’s trending up or down, and how they should feel about it. You’ll want to keep them extremely compact, so they fit comfortably within text or tables.

Bullet Graphs

Named because they look like bullets flying from a barrel, these compact visualizations show the relative size of two values. This could be an actual, measured value versus a target, versus a normal range, or versus any other reference value.

Bullet Graphs based on Target Value

With some color-coding, bullet graphs can also tell users whether they should be pleased or concerned about a value outside the normal range.

Bullet Graphs based on Normal Distribution

A full explanation of the comparison value — Is it a target? A normal range? — should be deferred to an on-click event, as described under “Progressive Disclosure” above. Once users understand the bullet graph, it will deliver these essential insights at a glance, which reduces cognitive load and increases productivity.

Sparklines

You’ve seen these little beauties on stock tickers. Rather than compare two values, they visualize how a single value has changed over time. Structurally, it’s just a line graph without any axes or labels.

Sparklines w/ Normal Range

These extremely simple visualizations answer important questions for any time-series data: Is this value increasing or decreasing? How quickly?

Status Pills

The simplest visualization of all has to be a pill style status message. You can wrap a color background around any string of text to indicate how a user should judge its content. For example, a status message can use color to quickly draw attention to problems.

Project Status Pills

This is particularly useful in data tables, where users often need to scan across dozens of records looking for items that need attention.

Pills can put numbers into context by identifying values that are abnormally high or low, above or below a target, etc.

Numerical Status Pills

Benefits of Information Design

Effective data visualizations can provide significant return on investment, mostly in the form of higher productivity and lower error rates. Both benefits come from reducing the cognitive load of working with data. Making tasks easier allows people to do them faster and better. Who knew?!

For purely consumer-facing applications, good information design can build trust and loyalty through improved user experience. A solid, minimalist visualization is the best base on which to add branding.

I hope you’ll continue to use great pattern libraries for data visualization ideas, but take the time to deconstruct your design and apply these principles to build something truly great.