The CX of Visualising Data

Introduction – Visualizing the abstract

I’ve been working on a project over the last couple of months that’s opened my mind to a whole new place in UX that I’ve fallen deeply in love with. It’s always been there and I’ve always admired it, but I’ve never had to interact with it first hand and given it much studying until now. The area of Data Visualisation or InfoViz as I’ve been calling it with my clients.

I’ve got some new heroes in the form of Hans Rosling and David McCandless. Men who not only do the visual part, but have become voices that help articulate the importance of visualising data in ways that the normal user can consume. I love that quality in people.

By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful. We should allow the dataset to change our mindset and if we can do that, then maybe it can also change behavior. It’s a fascinating area.

David McCandless in one of his Ted Talks said the following; “We’re suffering from information overload and data glut. We need to help visualize information, so that we can see the patterns and connections that matter and then design that information so it makes more sense, or it tells a story, or allows us to focus only on the information.” Never truer words spoken about ANYTHING we do in UX, not just InfoViz.

Data is the new oil?

Lots of wonderful comparisons to natural resources when I having my adventures round data land. If the data is the kind of ubiquitous resource that we can mine and can shape to provide new innovations and new insights, and it’s all around us, and it can be mined very easily if we set our UX up to gather and harvest at the right times.

Graphis diagrams: The graphic visualization of abstract data

I recently found out about this book by Walter Herdeg, which is truly a great great thing if you can actually find a copy of it. The original was published in 1974 but still has some genius to it and the v.2 book is also full of thoughtful quality. A seminal vision for the convergence of aesthetics and information value, which codified the conventions of contemporary data visualization and information design. One of the 100 most influential design books of the past 100 years, it features work by icons like legendary designer and animator Saul Bass, Brain Pickings favorite Milton Glaser, TED founder Richard Saul Wurman and many more.

For instance, check out this beauty:


During my exploration for this project I’m working on I’ve stumbled upon a whole wealth of amazing InfoViz and I wanted to share my favorites with you so you can marvel at the Data, but also at the incredible Interaction Design and Visual Design that go into making InfoViz so magical.

Four Ways to Slice Obama’s 2013 Budget Proposal

With Obama’s recent budget for next year proposed, Shan Carter et. al of The New York Times let you explore the plan in their new interactive graphic. It provides four distinct views of what the breakdowns look like, all the while keeping a distinct link between each click with smooth transitions and consistent objects. The transitions make this graphic. It’s often useful to see data from different angles, and the smooth transitions (rather than abrupt jumps) let you see how things are and how they have changed, effectively. This is fine work. Click here to check it out in all its interactive glory.

The London Riots from The Guardian

The Guardian newspaper in the UK are the bonafide gurus in visualizing news information. Here are two amazing examples from the same news topic – The London Riots – and both prove just how incredibly talented the Guardian designers and InfoViz experts are + just how fascinating some of the data from the London Riots is.

The shooting of Mark Duggan on 4 August sparked a series of riots, first in Tottenham then across England. This timeline was created to follow the spread in interactive realtime, culminating in what could be the most incredible catalog of an even ever put into digital form. Their version of it for the Arab Springs was similarly fascinating and groundbreaking!

It’s both Visual and Visceral. Articulating time as a road is very clever and breaking events across the timeline by location is equally captivating. Massive kudos indeed – Click here to go have a fiddle and marvel at this one.

However… it wasn’t the jewel in the interactive InfoViz crown for the Guardian. Oh no… they kept that back for this:

The analysis of 2.6 million tweets shows Twitter is adept at correcting misinformation – particularly if the claim is that a tiger is on the loose in Primrose Hill and that’s exactly what they did with this amazing info t0ol:

Throughout the UK riots, many scanned the internet in search of reliable information. In the absence of confirmed news, the web was often the only way of tracking events. Amidst the hubbub, countless topics came and went. As worries mounted, speculation grew. Rare individuals requested sources, countered hearsay, sought the truth. The rise and fall of rumours on Twitter is a striking display of social forces in action. Click here to have a play, it’s really quite a breathtaking thing they’ve created.

Rethinking the food nutrition label

The food nutrition label is on almost every food item, but it can be confusing in the sense that it doesn’t tell you much about whether something is good or bad for you. The UC Berkeley School of Journalism hosted a challenge for designers and food experts to rethink the label.

We are confused about what and how to eat and so we’re eating too much of the wrong things. In fact, we’re eating too much of everything. Two-thirds of American adults are overweight or obese. The obesity rate among preschoolers has doubled since 1970. Type 2 diabetes has become an epidemic. We want to make it easier to choose healthy food.

Visual designer Renee Walker won with her rework shown above. The rectangles on top of each label represent main ingredients, and bars on the bottom provide a quick thumbs or thumbs down for a breakdown of fat content, carbohydrates, etc. Icons of spoons and scoops are used to supplement serving size since no one knows what 182 grams looks or feels like. Click here to find out more.

Electricity Generated from Renewable Sources

I really enjoyed the simplicity and fluidness of this one. It’s basically a breakdown of energy consumption by country, by year. Simples. Check it out. This is the kind of thing that would normally be shown to the consumer as a table of data, or a bar chart. It’s a much more engaging experience when you can reach out and touch the data. Brilliant.

If you liked that one you might also like this one from the U.S, which is Your Electricity Bill redefined.

Political Climate Chart

Another great example of how to break 3 dimensions down into one clean interaction. Time, Issues & Political Party. The norm’ would be to add things onto a bar-chart or similar. This way we get something much more fun and something much easier to digest. Click here and have a go yourself. Some fascinating data.

Here’s another two from the U.S that give us interactive views of similar data scenarios. What a “Hundred Million Calls to 311 Reveal About New York” and the “US Health Care Spending: Who Pays?” breakdown.

Sources & great references

I’ve browsed A LOT of great resources recently and digested a lot of great InfoViz… here are some of the sources I’d recommend if you’re starting to fall in love with Data like I have like the carbonite offer codes:

Cartophile Cartographia
Chartsbin Chartporn
Cool Infographics Comicbook Cartography
Daily Infographic Daily Statistic
Data Visualization Everyday Venn
iGraphics Explained iLove Charts
This Is Indexed Information Design
InfoGraphic Directory Infographic Site
Info Graphic World Info Graphics News
Infograph Love Infosthetics
Information Is Beautiful Junk Charts
Flowing Data Fuck Yeah Visual Data
Mind Map Art Neoman Infographics
News Graphics Old Map
One More Graphic PD Viz
Social Media Graphics Mega Maps
Infographic Showcase Visualsing Data
Vizualize Viz World
Well Formed Data

Comments are closed.

Choose post category