UI Design

Simplify UI Data Visualizations – in 7 Simple Steps

data-visualizations-main

To give you some context as to the importance of designing effective data visualizations, I’d like to give you a scenario to consider.

Imagine that you’re standing in a room with 100 other people, all of whom are shouting at you at the very top of your lungs. Now imagine that you are expected to:

  1. hear every word of what each person is shouting,
  2. fully understand what each person is shouting, and
  3. recognize all the ways in which each person’s diatribe is related to all the others.

Impossible, right?

Of course it is. But that’s exactly what happens when a user is confronted with poorly designed data visualizations.

The purpose of data visualization is to bring order to chaos, to allow a user to quickly read and understand multiple attributes of a particular issue, topic or data point. However, the majority of data visualizations I see do the exact opposite; the UI design styling adds complexity instead of simplifying it.

For all the hype about “big data” over the past 20+ years, a significant number of enterprise organizations have yet to reap its benefits. For most enterprise organizations, it’s a promise that’s never been kept.

Why?

Because while it’s easy to get access to data and slice it in any number of ways, the way it’s typically presented makes it nearly indecipherable for everyone who isn’t an experienced data scientist.

Here’s the thing: if you can’t understand that data or easily interpret the trends it describes, there is no way you’ll ever be able to act on it.

If you’ve ever wondered what the best way to visually represent a specific data set might be, download my FREE Guide to Data Visualization Formats.

It walks you through 18 different data viz formats — from bar graphs to tree diagrams — and explains when (and why) to use each format.

People can’t use data they don’t understand.

In at least 75% of my work with large enterprise organizations, I’ve encountered people — from to product managers to marketing folks to CIOs and CEOs — who don’t truly understand any of the complex reports they’re supposed to use to base their strategic decisions on.

That’s because the charts in those reports look like this:

bad-data-visualizations-3D-bar bad-data-visualization-3D-scatter bad-data-visualizations-spiderweb bad-data-visualizations-scatter-chart-hell

Ridiculous, every one. Complexity for the sake of complexity, where no one is considering just how much cognitive effort is required to line up data points with labels or to decipher the contextual relationships implied.

Three-dimensional charts in particular should be banned, made illegal, punishable by life in prison.

Newsflash: it is nearly impossible for the brain to identify — and capture and hold on to — these contextual relationships across the 3D space here.

Put simply, what happens is like re-reading a paragraph three or four times because you just can’t seem to make it stick in your brain.

And you’d be shocked at how many times I’ve seen this particularly hellish flavor of data visualization, which breeds spectacular failed attempts to use and discuss them in meetings:

bad-data-visualizations-metallica

Yes, the example here is mapping Metallica song lyrics across songs and albums, but the model is all-too-often used. Too many data points, obtuse, jargon-riddled labeling, blurred visual relationships. Visual complexity to the nth degree.

The time and effort required to make sense of this is a waste of both.

People’s decisions aren’t any more informed than before they saw this, and they’re often too embarrassed to ask for an explanation.

Here’s my rule:

The more complex the underlying data set, the harder you should be working to simplify its presentation.

If it can be done with a bar or pie chart, then do it that way. Don’t overcomplicate because you’ve fallen in love with how complex or cool something looks.

The end result will only be a waste of everyone’s time.

7 steps to simplify data visualizations

So how do we simplify complexity in data visualizations? Let’s walk through an example together.

Note: for the sake of transparency, I want to say that I didn’t invent this 7-step process! An article I read quite awhile back outlined this method, and it’s stuck with me ever since. So — props to that individual, whose name and article I regretfully cannot locate.

Let’s assume you’re working with a typically garish bar chart like this one:

01-cluttered-data-visualizations-chart

In 7 moves, we’re going to make this a LOT less cluttered — and a lot simpler to quickly read and understand.

1. Remove backgrounds.

02-data-visualizations-chart-remove-backgrounds

2. Remove redundant labels.

03-data-visualizations-chart-remove-redundant-labels

3. Remove unnecessary borders and containers.

04-data-visualizations-chart-remove-borders-enclosures

4. Reduce colors; highlight most important data.

05-data-visualizations-chart-reduce-colors

5. Remove all effects (3D, shadows, etc.).

06-data-visualizations-chart-remove-effects

6. Visually separate labels/lines from data.

07-data-visualizations-chart-separate-labels

7. Remove extraneous lines and labels.

08-data-visualizations-chart-remove-guides

Less is definitely more.

All of these small design tweaks work together to separate things visually, which allows people to scan, identify and associate more quickly. Faster cognition means greater understanding, which means what’s there is infinitely more valuable.

Remember that people have to be able to draw conclusions and act on what they see. When the cognitive effort required to do that is high, people struggle to make sense of it all.

These rules apply to any kind of chart or graph, using any kind of data. Apply them to your next venture into chart design and I’m confident the results will speak for themselves.

Blog Categories