Cover image
UI Design
9 minute read

Data Visualization: Best Practices and Foundations

Data visualization is a coherent way to visually communicate quantitative content. Depending on its attributes, data may be represented in different ways, such as line graphs and scatter plots.

“Clutter and confusion are not attributes of data - they are shortcomings of design.” – Edward Tufte

What Is Data Visualization?

Michael Friendly defines data visualization “as information which has been abstracted in some schematic form, including attributes or variables for the units of information.” In other words, it is a coherent way to visually communicate quantitative content. Depending on its attributes, the data may be represented in many different ways, such as a line graph, bar chart, pie chart, scatter plot, or map.

It’s important for graphic designers to adhere to data visualization best practices and determine the best way to present a data set visually. Data visualizations should be useful, visually appealing and never misleading. Especially when working with very large data sets, developing a cohesive format is vital to creating visualizations that are both useful and visually appealing.

Displaying data visually makes it easier to understand in this data visualization best practice example
Wall Street Journal data visualization of US unemployment figures. (by WSJ)

Why Use Data Visualization

According to IBM, 2.5 quintillion bytes of data are created every day. The Research Scientist Andrew McAfee and Professor Erik Brynjolfsson of MIT point out that “more data cross the internet every second than were stored in the entire internet just 20 years ago.”

As the world becomes more and more connected with an increasing number of electronic devices, the volume of data will continue to grow exponentially. IDC predicts there will be 163 zettabytes (163 trillion gigabytes) of data by 2025.

All of this data is hard for the human brain to comprehend—in fact, it’s difficult for the human brain to comprehend numbers larger than five without drawing some kind of analogy or abstraction. Data visualization designers can play a vital role in creating those abstractions.

After all, big data is useless if it can’t be comprehended and consumed in a useful way. That’s why data visualization plays an important role in everything from economics to science and technology, to healthcare and human services. By turning complex numbers and other pieces of information into graphs, content becomes easier to understand and use.

Visual charts are particularly useful in dashboard design

When to Use It

Since large numbers are so difficult to comprehend in any meaningful way, and many of the most useful data sets contain huge amounts of valuable data, data visualization has become a vital resource for decision-makers. To take advantage of all this data, many businesses see the value of data visualizations in the clear and efficient comprehension of important information, enabling decision-makers to understand difficult concepts, identify new patterns, and get data-driven insights in order to make better decisions.

It is worth spending resources on data visualization design solutions. Understanding large data sets is necessary for making an informed decision—whether it be in business, technology, science, or another field. Clear visualizations make complex data easier to grasp, and therefore easier to take action on.

Consumer apps data visualization best practices


Define a Clear Purpose

Data visualization should answer vital strategic questions, provide real value, and help solve real problems. It can be used to track performance, monitor customer behavior, and measure effectiveness of processes, for instance. Taking time at the outset of a data visualization project to clearly define the purpose and priorities will make the end result more useful and prevent wasting time creating visuals that are unnecessary.

Know the Audience

A data visualization is useless if not designed to communicate clearly with the target audience. It should be compatible with the audience’s expertise and allow viewers to view and process data easily and quickly. Take into account how familiar the audience is with the basic principles being presented by the data, as well as whether they’re likely to have a background in STEM fields, where charts and graphs are more likely to be viewed on a regular basis.

US-based full-time freelance UX designers wanted

Use Visual Features to Show the Data Properly

There are so many different types of charts. Deciding what type is best for visualizing the data being presented is an art unto itself. The right chart will not only make the data easier to understand, but also present it in the most accurate light. To make the right choice, consider what type of data you need to convey, and to whom it is being conveyed.

Line Charts: Line charts should be used to compare values over time, and are excellent for displaying both large and small changes. They can also be used to compare changes to more than one group of data.

Line charts are an example of good data visualization techniques
(Source: <a href=”

Bar Charts: Bar charts should be used to compare quantitative data from several categories. They can be used to track changes over time as well, but are best used only when those changes are significant.

Bar charts are a good way to present certain data visually
(Source: Our World in Data)

Scatter Plots: Scatter plots should be used to display values for two variables for a set of data. They’re excellent for exploring the relationships between the two sets.

Scatter chart data visualization best practices
(Source: Our World in Data)

Pie Charts: Pie charts should be used to show parts of a whole. They can’t display things like changes over time.

Pie charts are great for data visualization design.

Keep It Organized and Coherent

Coherence is especially important when compiling a big data set into a visualization. A coherent design will effectively fade into the background, enabling users to easily process information. The best visualizations help viewers reach conclusions about the data being presented without being “in-your-face” or otherwise drawing attention to themselves. They simply show the data in the best possible way.

Creating a hierarchy of data shows the various data points in a relevant way for decision makers. You can sort highest to lowest to emphasize the largest values or display a category that is more important to users in a prominent way.

Even the order in which data is displayed, the colors used (such as brighter colors for the most important points, or gray for baseline data), and the size of various elements of a chart (like expanding certain slices of a pie chart beyond the chart’s regular border) can help users interpret data more easily. Beware of creating bias where there should be none when using these techniques.

Interactive data visualization best practices
Interactive data visualizations are also an excellent way to help people interpret data.

Make Data Visualization Inclusive

Color is used extensively as a way to represent and differentiate information. According to a recent study conducted by Salesforce, it is also a key factor in user decisions.

They analyzed how people responded to different color combinations used in charts, assuming that they would have stronger preferences for palettes that had subtle color variations since it would be more aesthetically appealing.

However, they found that while appealing, subtle palettes made the charts more difficult to analyze and gain insights. That entirely defeats the purpose of creating a visualization to display data.

Subscribe to the Toptal design blog and receive our eBook

If charts with similar colors—and less contrast—are difficult to read for the average person, they are even more difficult for people that don’t have perfect vision—and they represent a significant part of the population. According to WHO, an estimated 253 million people live with vision impairment.

Fortunately, there are tools available to check how an image will be visualized by people with these impairments, like the color blindness proofing in Photoshop and Illustrator. Other things like using sufficiently large font sizes and adequate contrast between type and the background are also helpful.

If the simulation tools reveal problems with the color palette, there are techniques that can improve the graph readability:

  • Use colors that have high contrast.
  • Complement the use of color with pattern or texture to convey different types of information.
  • Use text or icons to label elements.

A great example of good color combinations in data visualization
Even when a data visualization uses a scale model, it’s possible to use sufficient color contrast between each step. The interactive version of this graphic includes labels when users hover over each country. (Source: Our World in Data)

The font choice can affect the legibility of text, enhancing or detracting from the intended meaning. Because of this, it’s better to avoid display fonts and stick to more basic serif or sans serif typefaces.

Make sure the data visualization has a legible font size for its medium. Smashing Magazine suggests “16 pixels should generally be the minimum size for body copy in modern web design.”

Don’t Distort the Data

A great data visualization should tell the story clearly, avoiding distortions. Avoid the use of visual representations that don’t accurately represent the data set, like pie charts in 3D.

Bad data visualization design
3D pie charts like this make it hard to actually visualize the proportions of each slice. (by PSDgraphics)

Data visualizations can lead viewers to certain conclusions without distorting the data itself. This can be particularly useful in designing things like infographics for public consumption, usually created to support a specific conclusion rather than to just generally convey data. Things like color choices and calling out specific data points can be used to this end without creating graphics that are misleading (which could potentially call a designer’s credibility into question).

Examples of Bad Data Visualizations

An example of bad data visualization design
Not starting the Y-axis at zero can make data appear to have larger gains than are actually present. This makes the visualization misleading and doesn’t clarify the data being presented.

A misleading data visualization example
Another example of a chart that doesn’t start the Y-axis at zero, skewing the way results are shown.

An example of a bad color and scale combination in bad data visualization
This bar chart from a major brand is misleading in scale because there is no Y-axis. Even though there is only a slight difference of less than 1%, the outsized blue bar is magnified out of proportion.

A misleading data visualization example of a 70% increase in battery life
When Apple tried to illustrate that the New iPad battery had 70% longer battery life, they increased the height by 70% but also the overall scale, making the battery appear significantly larger than the previous iPad’s battery. (via Gizmodo)

Examples of Good Data Visualizations

Good color combinations include sufficient color contrast in this data visualization
A bar chart like this is a fantastic way to display differences between datasets, though heightened color contrast would make this image more accessible to visually impaired users. (by FiftyThirtyTwenty)

Presenting data visually can make dashboards easier to understand
This sales dashboard uses a couple of different visualization formats to present relevant data in easy-to-understand formats that make sense with just a glance. Data is also well-labeled, further clarifying things. (by Bagus Fikri)

A dashboard example of good data visualization
Combining clean, uncluttered design with easy-to-interpret data visualization with simple charts makes for great UX. (by Miklos Philips)

Google Audience Insights is a good example of interactive data visualization best practices
Google’s Audience Insights does a good job with its interactive data analytics suite making the data easily understood.


Good data visualization should communicate a data set clearly and effectively by using graphics. The best visualizations make it easy to comprehend data at a glance. They take complex information and break it down in a way that makes it simple for the target audience to understand and on which to base their decisions.

As Edward R. Tufte pointed out, “the essential test of design is how well it assists the understanding of the content, not how stylish it is.” Data visualizations, especially, should adhere to this idea. The goal is to enhance the data through design, not draw attention to the design itself.

Keeping these data visualization best practices in mind simplifies the process of designing infographics that are genuinely useful to their audience.


Further reading:

Understanding the basics

Data visualization is a type of visual communication that provides a coherent way to present quantitative content including large data sets. It makes complex data more accessible and easier to understand and use.

Contrasting colors have a significant difference in luminance or hue that makes them distinguishable from one another. For example, white and black are at opposite ends of the luminance spectrum and are therefore high contrast. Blue and orange are on opposite sides of the color wheel, and also have high contrast.

Sufficient color contrast on the web makes it easier for users to distinguish between objects or design elements, improving user experience. Adequate color contrast is also key to creating websites that are accessible to visually impaired users.