Dont Tell Me Show Me

If you have a smartphone then you're likely to have used a data visualisation to count your steps or monitor your phone usage.

These interactive visualisations (ideally) enable people to reflect and make decisions based on the data they view. They're commonly found in health and financial services applications but most products or services rely on them to some degree.

Why does data visualisation matter?

Humans can process an image in 13 milliseconds - 60,000 times faster than text. Our visual processing abilities mean it's easier and quicker to process, comprehend and identify patterns in visualised data compared to tabular.

However, visualising data can be done well just as easily as it can be done badly. With users interacting with visualisations on a daily basis you need to take a user-centred approach to visualising data. With that in mind, here are some principles that will help you create interactive visualisations that users will want to engage with.

Keep the user in mind

Most users are not scientists or statisticians; people don't spend hours looking at charts. This means insights from visualisations must be easy to understand. Here are some questions to ask yourself when designing for data visualisation:

1. Who is the visualisation for?

The familiarity with visualisations for an everyday user will differ from that of an experienced stockbroker. That means it is important that we understand who the visualisation is for as this is likely to influence the complexity and appearance. While the users might change, the basic principles of good data visualisation should remain the same.

2. What will it be used for and in what context of use?

Purpose: The reason why the user is using a visualisation; are they looking to explore data or wanting to draw conclusions. This is likely to influence the complexity and functionality of interactive visualisations.
Setting: Whether the user interacts with the visualisations in a personal or work setting should be considered – each comes with different demands and different motivations.
Device: Visualisations on a mobile phone application will differ from desktop visualisations. Aside from differing screen size, mobile phone usage occurs in quick, short bursts: people don't want to spend significant amounts of time staring at a small screen, trying to figure out what a visualisation is trying to show them.

Minimal does not always mean better

Additional design elements can be added to data visualisation which is known as "chart junk". This includes 3D effects or other visual embellishments that can help or hinder how people understand data. Studies have shown that additions to visualisations can have significant benefits for recall over longer periods of time.

However, visually embellished charts are not always recommended, as more detailed analysis could be hampered by visual clutter. Take safety-critical applications, where more detailed analysis is necessary.

It's important to take into account what a user is trying to achieve when designing data visualisations: if you want to allow users to make decisions quickly, comprehension is key. Avoid overloading a page with unnecessary information or design choices that detract from data presentation and comprehension. This doesn't mean removing all colour and style rather it's about making design choices based on what you've learnt about your users.

Use colour effectively

Colour is used as one of the most common design elements of visualisations. It can be used to represent data values or highlight different data groups. Here are some tips to using colour most effectively:

If you want to use colour to differentiate between groups in categorical data, use colours that are distinct from one another i.e. far away from one another on the colour wheel.

If you want to use colour to represent continuous data, use sequential colour schemes where the colour hue increases in intensity to represent higher values.

If you want to use colour to highlight deviation from a central value (or positive or negative values), use a diverging colour scheme where two distinct colours increase in intensity as you diverge from the neutral coloured central value.

Effective visualisations are also accessible. Colour blindness is common – 1 in 200 women and 1 in 12 men are affected by it – where possible use other visual cues such as length, size or angle to represent magnitude.

Overview, filter and zoom, then details on demand

It's natural to want to present as much data as possible. More data = more information, which means better decisions, right? Wrong!

Information overload can affect our ability to extract patterns. Ben Shneiderman explains that the most powerful visualisations follow the mantra: overview first, zoom and filter then details-on-demand.

This means that in interactive visualisations, a dashboard should provide a user with an overview - the most important parts of the data. The user is then likely to want to focus on the aspects that are of most interest – where they can zoom and filter. Control over data is important at this stage: users should be able to change views, modify range and filter according to their needs.

For some users, particularly those with specialist needs, filtering data may not be enough. It's for this reason that detail should be available on demand – such as, providing raw data for particular data points as additional information can help to inform decision-making.

A good example from the Fitbit app of overview first, zoom and filter then details-on-demand can be found below.

Design then evaluate

Applying design thinking techniques like rapid ideation helps create more innovative solutions for visualisation problems - this can be done using just a pen and paper.

Once you've created a digital or physical visualisation prototype, like you would with an interface, application or website, evaluate it. Testing through qualitative and quantitative methods provides useful insight into how users might interact with visualisations and the extent to which the data you've visualised is understood by your users. This will help inform the design of more usable, functional interactive visualisations.

Summing up

Creating effective data visualisations should be approached in the same way as any design problem. Through understanding users and their needs, you build a set of requirements about what your visualisation needs to achieve. Then go forth and prototype, test and iterate. This will help improve the user experience and build visualisations that are engaging and fit for purpose for your users.

View All

Big data vs UX measurement

Two illustrated bar charts with particles highlighting the importance of data to design

Data & Analytics

Big data vs UX measurement

By Elsa Plumley

Big Data is being heralded as central to the future success of companies. But is Big Data complementary to UX measurement? Or is it a resource, which supersedes the need for traditional UX measures?

Unlocking design's data layer

A graphic showing how data can contribute towards the better design of digital products and services

Data & Analytics

Unlocking design's data layer

By Tom Wood

Tom explores design and its uncharted data layer with the help of Mezzo Labs' Adrian Kingwell.