Data visualization for Product Designers

Designers work with different types of data on a daily basis. It’s one of the most crucial aspects of the work. This article will explain the most common mistakes we make and provide tips about improving our perceptions.

It is sometimes problematic to choose the proper chart type. Source: FlowingData

What is data visualization and why should I care?

Data visualization is perceived as a modern aspect of visual communication. It involves representations of data, visually, so that it can be more easily understood by the viewer. The main goal is to simplify it in a way that makes the data more accessible, understandable and usable. As designers, we have a vast impact on what the end user will perceive while reading our data. It is crucial that we leave no doubts for the user while presenting complex chunks of data.

The main goal of data visualization is to communicate information clearly and effectively through graphical means. — George Friedman

Showing current trends

The most frequently misused chart types are line charts and histograms. By no means can they be substituted for one another. In fact, line charts should only be used for data that is correlated and depicts a continuous interval or a time period. There are loads of examples that would be great for line charts, including stock prices or sales numbers.

When we want to visualize data that has no correlation, such as our spending or the number of users, we should use histograms. This is because they visualize the distribution of data over a certain time period for types of data that aren’t correlated.

While showing data that is not correlated, we shouldn’t connect the values together.

Messing with the scale

When we first think of manipulating data, we mostly think of changing the values. Sure, this is undoubtedly the most common form of manipulation. However, there are many other ways we can actually make false impressions on the users.

One way is to change the scale of our chart. This results in a false perception of real values. By no means is 40% twice as much as 36%, but as you can see in the example below, changing the scale of your chart can change the way the data looks.

Changing the scale can have a dramatic impact on the end perception.

Same values, different perception

Even if we use the right chart type and scale, we can still give the users an incorrect perception of our data. This is an example that comes from an influential mobile network provider. When it comes to the amount of mobile data we can consume, we are used to focusing on the amount of data we have used, rather than the amount of data that is left. It can give us a totally different impression when presented the other way round.

The same data can be perceived in a dramatically different way,

Accessibility is vital

Another key aspect of presenting data, that we undoubtedly must consider, is accessibility. We must take into account that not every user will be adopting our data in perfect conditions, for instance, a well-lit office or apartment. In fact, most of our users might be using our products in conditions we have never considered.

It is vital that the way we present data that is accessible to everyone.

The second aspect when it comes to accessibility is visual impairment, which many people experience. Due to the extensive use of smartphones and computers on a daily basis, the number of people with visual impairment is dramatically increasing. It’s estimated that around 14 million people in the US are visually impaired. While choosing colors that represent various sets of data we must think about this rapidly growing group of users.

Here’s a simulation of what would the same chart look for a person with deuteranomaly.

Is it real life, or is it just Dribbble?

This platform is undoubtedly one of the most prominent sources of design inspiration. However, if we decide to investigate this phenomenon further, we will see a lot of really cool looking designs for data visualizations, but in reality, they are often completely unrealistic.

The work that is shared on Dribbble has no limits. We come across designs that are based on unrealistic data (or no data at all), use charts that don’t match with the type of data or are simply impossible (or extraordinarily expensive) to implement.

Even without real data, we can save a lot of time while designing charts.

Writing chart libraries from scratch is insanely time-consuming. We must be aware of which libraries the developers will be using and examine what the styling possibilities are and what we can achieve. Examples could be Chart.js or NVD3. In the video above I based my styling limits on the Chart.js library so that my design is possible to implement in this specific instance.

Designers often fail to achieve a balance between form and function, creating gorgeous data visualizations which fail to serve their main purpose — to communicate information — George Friedman

What can designers do about it?

We have a tendency to undervalue the form and function of the data we want to represent and just focus purely on the visuals. This can have a dramatic impact on the end user and their understanding of the information we are trying to portray. There are a few good practices that will undoubtedly improve the way we work with data.

1. Make sure that the way you present the data meets the business requirements.
2. Use real data provided by the client whenever possible. If not, try to base your designs on data that is commonly available.
3. Use color values that are easy to differentiate. This makes your data visualization accessible for people who are visually impaired or that are colorblind.
4. Be familiar with chart libraries, know what the limitations are.
5. Don’t draw charts from scratch, it’s too time-consuming. It’s better to focus on the form.

Data visualization is a powerful tool

Data visualization is one of the most powerful weapons in any designer’s arsenal. It has a significant impact on the business end of every product. My advice is to keep it simple and focus on what’s actually important for the business. It’s so important to select the correct type of chart for the data you are going to display, while also making it accessible!

Helpful links

1. The Data Visualisation Catalogue — a great source of knowledge, when it comes to data visualization tools
2. Chart — a comprehensive plugin for Sketch that lets you generate various types of charts in seconds
3. Stark — a powerful plugin for Sketch that lets you simulate different types of colorblindness
4. Google Sheets content sync — another Sketch plugin that lets you use data from Google Sheets
5. Chart.js — a popular chart library for designers and developers
6. NVD3 — a huge library of reusable charts and chart components

If you’re going to do it, do it right!

Tap the 👏 button if you found this article useful!

About the Author

Jakub is a UI/UX Designer at EL Passion. You can find him on Dribbble and Medium.