The 2016 Data Visualization Format of the Year (Third Place): Style guides
Formatting all data visualization with best practice principles
You may have seen our first and second place winners of data visualization format of the year: Interactive Calculator and Interactive Map, respectively. While our third place winner isn’t technically a data visualization format, it’s something that’s imperative to all good visualizations: the formatting itself!
Data Visualization Style Guides
We’d love to say that in 2016, all data visualization were clear, engaging and beautiful. The technology and information needed are out there in this day and age. Though we wouldn’t be having this conversation if that was the case. And, unfortunately, even some of the most innovative data visualization concepts let themselves down when it comes to the design.
‘But who cares about the design so long as you’re getting the message across?’, you might ask. But that’s just the thing… the design is ultimately how the data is communicated. We’re talking about data VISUALIZATIONS here. And a bad design often results in bad communication.
That’s Where Style Guides Come In…
Corporate brand guidelines rarely cover data visualization formats. An organization’s website and email templates may be really distinguished… But all those beautiful brand assets and that pixel-perfect consistency tend to fly out the window when it comes to annual reports, interactive data formats, Annual General Meeting (AGM) presentations, infographics, research papers and basically any other collateral that data is presented in. And even if you send these works to a designer, they’re probably not a data expert.
A data visualization style guide can ensure:
- Design and data come together to create engaging and meaningful communications
- All text is legible and purposeful by outlining font sizes, families, colors and hierarchy
- White-space is used effectively and consistently to reduce unnecessary clutter and make it easier for the reader identify ‘blocks’ within the visualization
- Optimized layouts are used for the varying arrays of data content
- Color is used logically and consistently – For example, style guides can distinguish when to use categorical palettes (where data has no inherent order but should be differentiated, so contrasting color families could be utilized here) and when to use sequential color mapping (where data should be categorized but the categories relate, so perhaps different hues of the same color family will tell the data story better)
- The most effective chart or graph is used to convey the data set at hand which allows further insight and relationships to be conveyed
- The developer is informed of best practice tips as they go
- Additional graphical elements are utilized in places that can add context to, or simplify, the data
- Text labels are introduced only when necessary, and only where practical (for example, using hover over labels rather than text overlays to reduce clutter in charts)
- Your organization’s brand guidelines and reflected to create instantly consistent and distinguishable data communications
- Your data analysts and researchers (who aren’t designers) can effectively present beautiful, comprehendible data
These factors work together to make for visualizations that are intuitive and can be more quickly and easily digested.
Relationships between data can be readily identified and trends uncovered – without inflicting the frustration of a person who’s been concentrating on one thing for the past three hours to no avail… Basically, the reader is able to spend less time trying to understand what’s going on and more time putting the new found insights to use.
The Difference A Style Guide Can Make
Here’s just one example of how a bad design can impact the communication of data…
In the ‘Before’ image, we see the data – but it is not intuitive to digest. And it’s certainly not pretty, to say the least.
Consistency Is Key
The colors used to differentiate the categories in each pie chart in the ‘Before’ image aren’t consistent throughout the pie charts, even though the categories are the same. In other words, if you looked at one chart and identified the AV category as ‘teal green’ and scanned the other charts for ‘teal green’ to compare, you’d be interpreting the data wrong as the AV category is lime green or orange in other charts. Keeping this the same, especially where different data sets are displayed in the same page or viewing space, is a simple way of reducing the time taken to interpret data. Thus, it’s a simple way of communicating better.
Minimize Clutter To Increase Legibility
There are a number of ways the ‘After’ image reduces clutter and makes for an easier read. These ways can be attributed to the best practice methods outlined within a data visualization style guide. To name a few:
- Consistent font families and sizes allow the reader to identify and distinguish headings and labels within the graphs.
- Consistent white space separates information blocks so that the reader can skip over blocks that may not as relevant to them and focus on the ones that are without getting lost in the display.
- It also helps to distinguish the relationships between the data sets.
- Hover over labels are used to replace the jumbled text seen in the ‘Before’ image. This drastically reduces the clutter and means the reader can still see the label information only if they need to, and without the design being sacrificed.
- Icons have been employed to represent social platforms, which are easily recognizable. This reduces clutter, lifts the design and also allows for a quicker read (did you know visuals are processed 60,000X faster in the brain than text?)
- Instead of using the all too common pie chart for every set of data (which is pretty hard to decipher unless you have a compass handy), the ‘After’ image correctly makes use of a better alternative: grouped stacked bar charts. The grouping of the three data sets also tells the story of their relationship with one another, which is an extra insight the ‘Before’ image doesn’t communicate without further analysis.
Don’t just recreate raw data in pictures – Analyze and make meaningful visualizations
The ‘After’ image also goes above the standard recreation of numeric and text data into a visual. The ‘Revenue in Pipeline’ section in the ‘Before’ image cites some figures… but provides no context to the timeframes in which these figures relate to. In the ‘After’ image, all these figures are still there… though with the addition of a line graph depicting the fluctuations over time, along with hover over labels containing the start and end dates for the data. With the addition of a simple line graph, a lot more insight can be gained, and the data truly tells a story. A good data visualization style guide helps the developer choose the right chart for their data set by questioning the purpose of the data. Had the developer of the ‘Before’ image been asked these questions, perhaps he/she would’ve realized the data is near pointless without a timeframe…
The Good vs. The Bad
The GOOD: Here are some best practice examples of data visualization style guides and their features.
1. This Tableau Style Guide features tabs for each chart and graph, in addition to the general guidelines. On each tab, there is an explanation of the chart and when it’s best used, color information about the categories, background and text, font style information for consistency and legibility and a live example to show you how it’s done.
2. Urban Institute’s Data Visualization Style Guide outlines the color combinations for both categorical and sequential data sets and for the number of categories used in the visualization. Though when it gets to seven categories, it comically shows this gif and then suggests to consider breaking up the data or consolidate some categories:
Now … Have a look at these BAD data visualizations and imagine how they might’ve looked if they’d followed a data visualization style guide.
Data Visualization Style Guides – Our Hero!
These, among many other reasons, are why Data Visualization Style Guides are a true hero to all data viz formats. And also why they get our bronze tick of approval for best data viz formats of 2016. From interactive data visualizations to annual reports – data viz style guides ensure design doesn’t sacrifice your data message; and your data message doesn’t sacrifice your design.
Want your own data visualization style guide?
Get in touch with us directly by emailing email@example.com
or by clicking the Contact Us link in the navigation.
Want to keep looking? Find out about Data Visualization Style Guides here.