Make better infographics

Let's face it; we're living in an age of total data overwhelm. We need to be able to quickly understand what's going on in a set of data. We need the story, or at least powerful tools to help us get the data that helps us visualize trends, movements and comparisons. So how do we do this better?

It's about story, not information
Having graphics and charts with no rhyme or reason is a terrible user experience - here's a typically awful example (click view demo). In this example, I'm unsure about what I am looking at. I have zero context, zero reason for consuming these charts, and thus no reason to engage or interact. Stories give us context. Stories are memorable. Stories help us better understand the complex world around us. They tie together the loose and chaotic threads of the world's events. If we're using charts and graphs, we're visual communicators. But what are we saying? Is it visual clutter, mere gibberish - or are we delivering something understandable, consumable, relatable? Big data may be the band wagon that everyone is on, but the bedrock of visual communication remains actually having something interesting to say or show. And that will be the true differentiator between products in the marketplace.

Screen Shot 2014-05-23 at 10.35.04 AM

To that end, here's one of my favorite data visualizations in the last few weeks - the depth of the ocean vs. trying to find the sunken Malaysian Airlines, via the Washington Post. I love that it uses the long scroll, a semi-unpleasant user experience, to illustrate the depth of the ocean in the area of the downed aircraft - and thus the difficulty of the search. Absolutely brilliant.

Good infographics are based on clean, reliable data
This is less obvious, I know. Less obvious to the person making the chart, graph or infographic. And less obvious to the audience, who implicitly trusts what's being presented. (Aside: If you want to really get people to trust you, have a picture of an MRI or brain scan - doesn't matter what or why - just the presence of that image makes reader trust skyrocket)

Here's the truth - when you build a building, you better build a damn good foundation. Similarly, if you are presenting a chart or graphic, you take responsibility for the numbers behind it. People probably won't notice immediately, but if they get into an argument and use your data, and they get called out, you better believe that experience will stick with them. The shame of being wrong will override any sense of wow or interest that they had in the story. And the shattered trust won't (and shouldn't be) easily repaired. By presenting information in a visual way, you are relying on the audience's good will and trust. Don't disappoint them.

Good infographics are attractive and easy to read
This is a basic rule of good design, but I see it violated all over the place, even on infographics that are featured on 'best infographic' sites. Eliminate clutter, and make it easy for me to make my own conclusions about the data - remember, it's about story, NOT about information.

Relationship visualizations

Given how opaque and overwhelming data can be, it's incredibly important to distill all those numbers into a coherent, emotional story - particularly when presenting those numbers in a visual format. In the case of visualizing relationships, not only is it important to show the connections between groups, but also show different ways individuals can connect, the strength of those connections, and different ways of organizing various groups.

Visualizing connections between people
In researching data visualizations within social networks, I've found a standard way for displaying these relationships - circular or profile picture-based nodes, connecting lines representing relationships and all nodes more or less being the same size. This works well when the only data point is people and connections, but it seems to wither when we're looking at other metrics - people connected by locations, phone numbers etc. Here's the common way to visualize relationships within a network (from Vizster, a product whose name sounds like a parody of itself):


This 2-D graph is prevalent in the data visualization world and I'm going to assume that the constellation visual is the best way to represent this kind of information. But I'm wondering if there's not a better way of breaking down the data to have it display intra-networks - networks within networks.


Anyone who's looking to analyze a network isn't looking to view the whole network at a 1,000-mile view - they're going to want specific, actionable information about sub-groups within networks. For instance, what are sub-groups within this network that are most closely aligned? Who are the connectors between large numbers of individuals? Who holds the power in this network?

Think of these as a visual way of doing the classic 'filter' functionality.


In this example, I'm still able to keep the original data set in mind, but I'm also able to view a filtered set of information. This kind of information helps users make decisions and conclusions based on a limited data set.

In the following examples, each graph node is always of the same type - we're always comparing one thing. But what if we want to view nodes of different types on a 2-D surface?

Comparing different types of connections
Instead of viewing the connections between people only, what if I wanted to see how people were connected via a physical location (like a school)? A graph like this might consist of users, phone numbers, email addresses, physical locations, usernames, shared spaces (such as a school or work place) etc. Graphs of these types allow the user to view more information, but using the standard 'constellation view' risks equating nodes that are not actually equal, or delivering a messy UI. As an example of this:


Even though the nodes are all differentiated by color, it's difficult to understand what's going on. With no distinction being made by color saturation, size etc., it's tough to make any kind of quick judgments about what I'm seeing. A better view might be sizing the nodes differently, giving relative weight to human actors in this relationship graph.


Above, it's difficult at first glance to determine what nodes are shared between users (since the nodes all have equal color saturation and the sizing difference doesn't seem to matter much - people have a notoriously hard time distinguishing the relative sizes of circles).


Here, it's much easier to see the human actors at the middle of this connection (and this could be done for any kind of node on the graph).


Above I've made the connection point the largest. This kind of sizing, color and saturation treatment could be done for many different aspects of a social connection graph. Using just a few visual treatments we're able to tell a myriad of stories about the ways people connect, where they're connected, etc. With applications for work, social networking, law enforcement and espionage, you can bet that not only will this kind of data visualization become sought after, but it will become an important tool in understanding and shaping the world we live in.