Earlier, Zach wrote a blog post on the ins and outs of chart selection. It reminded us how important it is to balance the right chart with the right visual presentation as dimensions and complexity change.
But your data presentation decisions don’t end there! Once you have a good handle on the right structure for organizing the presentation, you have to make it look good - making it function good and accomplish original goals. As promised in the previous post, here are the chosen chart structures at each stage of complexity redesigned for presentation. We’ll keep this simple with before and after shots, key design principles highlighted, and a freeform reflection on some practical design decisions. The explanations aren’t meant to be exhaustive but rather are a glimpse into design thinking.
Phase 1 | Sales + Calls, Aggregate Performance
Before & After
Design Principles
- Visualisation is not always the best solution
- Emphasise the interesting
Design Reflection
- For fonts, often the best choice is sans-serif, tabular fonts (like this). For this demonstration I simply used Helvetica because it gets the job done and everyone has access to it. The font size is 18pt for primary values and 12pt for secondary.
- Qualitative values (calls, sales) will often be the text that should be treated with grey (50% black will do for most situations).
- Quantitive values (559, 71,739) should be clear and easily distinguished from less immediately critcal information. Here they are bold, 80% black.
- Superscript the dollar sign since its an unchanging qualitiative value.
Phase 2 | Sales + Calls / Product, Aggregate Performance
Before & After
Design Principles
- Use color carefully
- Use 50% grey carefully
- Visual rhythm
- Consider text style needs for dynamic content
- Organize data visuals in a way that mimics thought process comparisons where appropriate
Design Reflection
- Stacking the calls and sales bars should only be done with the right audience in mind. Though a dollar to calls value is not comparable in and of itself, in the midst of the context of other products, this makes it easier to visually compare the proportions of these values against each other from product to product. For example, immediately one can notice ’Ceramic Smoking Baby’ is a lucrative product.
- Add consistent, distinct visual rhythm with light separation lines
- Again, color should only be used to distinguish commonly changing quantitative values: numbers and bars in this case. But sometimes carefully using color on qualitative values can be helpful. The title (’Calls’), value (’202’), and visual representation (longest bar in this case) is an example good color management. No legend is needed, because the content itself explains visual relationships. The content is the legend.
- Choose your 50% grey visuals wisely. Product names are secondary in visual weight to colored data values, because they are secondary mentally in the thought process of reading this chart.
- Placing metric values to the left of the bars overcomes problematic rendering issues when values are very small.
- Dollar signs are not superscripted because they would become unreadable.
Phase 3 | Sales + Calls / Time, Aggregate Performance
Before & After
Design Principles
- Minimize chart junk
- Use white space for comfortable reading
- Remove text values that can easily be interpreted with visual counterparts
Design Reflection
- Center trend values on vertical hash marks
- Measurement dimensions should be grey
- Distinguish current date with value and endpoint
- Remove extraneous date values that can be easily interpreted with well placed light hash marks
- Distinguish every 5 hash marks with length difference
Phase 4 | Sales + Calls / Product + Time, Aggregate Performance
Before & After
Design Principles
- Give values context
- Red is easily noticeable when used sparingly
- Allow for easy comparison
Design Reflection
- I put the sparklines first in the visual reading for two reasons: 1) the width of this graphic is always the same/dependable and 2) the context of data is often helpful to present first so subsequent values can be better understood. This little snapshot of time provides that context.
- On the sparklines, distinguish today’s value and the lowest value (red dot). Use red carefully. You don’t need much to draw attention (where color blind issues aren’t an issue)
- Be sure to provide ample space between elements, and that all graphical elements are aligned on your grid.