Originally published on the Digital Analytics Blog on Thursday, April 28, 2016 by Bernard Segarra, Editorial manager at AT Internet
With clear objectives in mind and a few notions of graphic design, UX and data visualisation, you’ve got all you need to bring life to your data! We’ve put together a special series on the theme of dataviz to help you give your digital analytics dashboards the visual impact they deserve.
Here in Part 1, we’ll focus on the basics of graphic design. If you want your dashboards to look professional and be relevant and understandable, be sure to apply these tried-and-true principles. Just follow the guidelines below!
1. Sketch out your dashboard
Before jumping into building your dashboard, it’s a good idea to first get your ideas straight: your objectives, KPIs, metrics, visuals to be used, etc.
Just like a designer would, map out the foundations of your dashboard on a blank canvas.
Practical tip: Think about the structure, the main parts, the visual representations you’ll use, and think especially about the people in your company who will be consulting this dashboard.
2. Keep it simple
Simplicity = Readability. Any visual elements or effects that don’t have a specific meaning will only hinder communication. Don’t forget that dashboards are meant to be shared – so keep things simple to keep things clear.
Practical tips:
- Don’t overcrowd your screen with too many graphs that are too close to one another.
- Avoid using borders around each graph.
3. Adapt your colours to the context
If you share your dashboards, everyone should be able to understand the colours you’ve chosen to use. Keep your colour choice in line with symbolism. The most common example is variation in values (an increase and decrease in traffic, for example).
4. Avoid too much visual noise
Choose and pair your colours intelligently. Select hues that complement each other: colours that are diametrically opposed on the colour wheel. This will help you highlight contrasts and facilitate understanding. The colour palettes available in your dashboard tool should respect this rule.
Practical tips:
- Be wary of using the same colour families in your dashboard. Avoid using only cold colours, for example (blue, green, purple, grey…).
- For your dashboard background, use a “pure” colour, meaning a hue that’s not mixed with other colours. White is always a good choice!
5. Don’t go overboard with shades
In a graph, you should use 6 shade variations maximum of a given colour. Add any more shades, and they will become difficult to distinguish.
Practical tip: On a map graph, for example, using too many different shades of the same colour will make it very hard to clearly compare countries, especially for very small areas.
6. Use strong contrasts
Beware of weak colour contrasts. By using strongly contrasting colours, your elements will stand out more clearly.
Practical tip: Avoid black text on dark backgrounds, or white text on light backgrounds.
7. Proportions: Showcase the data
It’s important to find the right balance between titles and visuals. Make sure your written text is large enough to be readable, but not so large that it competes with the main information – the data.
Practical tip: Try to make your data and main numbers bigger than your written text.
8. Be consistent with your icons
Be sure to use the same icons everywhere. Keep the same visual style in all tabs of your analytics dashboard (for example, tablet, smartphone or desktop).
Practical tip: To enhance readability, opt for simple icons without too many little details.
9. Limit the number of fonts
Don’t use more than 3 different font families within the same dashboard. As with colours, the idea is to create a sense of overall visual harmony in your dashboard. As much as possible, you should follow the official fonts in your company’s graphic charter or guidelines.
Practical tips:
- Use the same font (in the same colour and size) across all your titles. Likewise, use the same fonts, colours and sizes across all your subtitles, and so on. Be sure to adapt the font size based on the title’s importance.
- Just say no to serif fonts! Avoid Times New Roman, for example, if using a small font size.
- Avoid shadows around your text, which will weigh them down and make them hard to read.
10. Be sparing and thoughtful with text content
Where necessary, explain your graphs with clear, short titles that can be understood at a glance. Remember, the objective is to help your readers grasp the context and quickly understand where they are.
Practical tips:
- Stick to sparse text on the outer margins of your visuals, rather than long paragraphs (which are not very engaging, let’s be honest!).
- If you’ve named an element a certain way in one area, be sure to do the same everywhere. For example, if you refer to “cart completion rate” on one tab, don’t use “basket conversion rate” on the next one.
Stay tuned for our next article, where we’ll talk tips for your dashboards’ layout, usability, and user experience (UX/UI).
——-
Many thanks to Romain Zampieri, graphic and web designer at AT Internet, for his contributions to this article.