Top data visualization examples and dashboard designs
By: Shane Ketterman
Tags: Product Design, Data Visualization, Dashboard, UI, User Experience

Data visualization and dashboard design are both art and science and not as easy to create as they may first appear. How do top UX designers and visual designers illustrate complex information without confusing users?

Three ways: a better understanding of the UX principles behind good dashboard design, the application of graphical excellence, and practice.

UX dashboard design follows specific principles and best practices. Graphical excellence, on the other hand, requires a more thorough examination.

Data visualization and dashboard design best practices provide users with an efficient and interesting way to better view and understand complex ideas. (Ramotion)

Graphical excellence is defined as:

A well-designed and efficient presentation of interesting data.

Complex ideas communicated with efficiency, clarity, and precision.

Giving the viewer the highest number of ideas requiring the least amount of time within a small space and using the least amount of ink.

Telling the truth about the data.

An excellent resource for a better understanding of graphical excellence is Edward Tufte’s work. He is considered “The Leonardo da Vinci of data” and has a large number of published works, books, and lectures. David McCandless, who founded information is beautiful, a website that represents the best in data visualizations and graphical excellence is another excellent resource.

The principles of exemplary UX design and graphical excellence apply to both dashboard design and data visualizations. Here are some of the top data visualization and dashboard design examples.

Top Data Visualizations

Napoleon’s 1812 March

Napoleon’s 1812 March is one of Charles Minard’s greatest visualizations from 1861, showing thousands of data points using superior graphical excellence.

Minard’s visualization of Napoleon’s 1812 march is regarded as one of the “ best statistical drawings ever created “: Creating a visualization with as much information as Minard has done would have been impossible if it were not for the application of graphical excellence.

This single visualization shows the number of Napoleon’s troops by location, the temperature experienced by the troops, and the path the troops took to and from Moscow.

John Snow’s Cholera Map

John Snow’s data visualization is one of the best examples of telling a story with multiple data points and keeping it both engaging and understandable.

John Snow’s 1854 graphic showing the location of London’s 13 public wells and 578 cholera deaths using stacked bars perpendicular to their location: It’s easy to understand, reveals the truth in the data, and gives the user all of the information they need to draw a proper conclusion regarding cholera deaths.

John Snow’s data visualization is one of the best examples of telling a story with multiple data points and keeping it both engaging and understandable.

History of Rock Music

One of the benefits of data visualization is displaying highly complex information in a way that is both understandable and beneficial.

Representing only a fraction of the entire data visualization, the graphic below shows a portion of more than 30 styles of music from over 700 artists during the time period of 1955 to 1978.

It does not merely represent artists and styles but shows influences, the volume of record sales, stylistic categories, and where these ended or continued. To achieve this sort of graphical excellence is no small feat.

One of the benefits of data visualization is displaying highly complex information in a way that is both understandable and beneficial.

Where the Population of Europe Is Growing and Declining

Data visualization showing graphical excellence with thousands of complex data points.

A top data visualization showing how to deal with an immense amount of data in an uncomplicated, well-designed, and truthful way. There are also filters included in the interactive version that allows for even more data exploration, such as birth rates.

Data visualization showing graphical excellence with thousands of complex data points.

Daily Routines of Iconic Famous People

Data Visualization showing multiple data points without overwhelming the user. (Podio)

Not only is this data visualization interesting, but it’s also a classic example of graphical excellence. In one single graphic, we can see a detailed depiction of the daily habits, rituals, pursuits, and priorities of iconic famous people.

Using a simple color-coded chart, this visualization is easy to understand, simple, effective, and above all, informational.

World Languages Graphic

An iconic data visualization showing thousands of data points in a way that is both elegant and easy to comprehend.

This classic data visualization depicts the number of languages that exist on the planet, where they are spoken, and who speaks them in various pockets of the world.

Without a high level of graphical excellence, it would be hard to show this much data in such an elegant way that is also informative and easy to understand.

An iconic data visualization showing thousands of data points in a way that is both elegant and easy to comprehend.

Top Dashboard Designs

For a dashboard to be considered superior, it must satisfy a set of specific UX criteria:

Clear and consistent naming conventions

The flow and layout of data prioritized

Margins are appropriate for readability

Data is neither hidden or overloaded

Understandable and easy to read

Marketing KPI Dashboard

Sparse colors and showing the information that is pertinent to the user are principles of good dashboard design. (Artyom Sokolov)

The example below is an excellent example of making complex business information easy to understand. The restrained color scheme is pleasing and the use of separate cards is soft on the eyes.

One of the reasons this dashboard is an excellent design is its data-ink ratio. The data and space complement each other. Instead of filling the screen with more graphs, separate cards with small tabs are used. This is an ingenious way of keeping critical information available (i.e., not hiding it) while giving the user an easy and instructive way of viewing it on their own terms.

Stripe Dashboard

The Stripe dashboard shows a great visual display of data in a way that is easy for users to see and understand quickly and easily. (Michaël Villar)

The Stripe dashboard is an excellent example of dashboard design best practice. It’s simple, answers the most pertinent user questions, and has near-perfect margins within each card.

Telemedicine Dashboard

This dashboard design follows sound data visualization best practices: generous margins, balanced layout, and good color contrast, which all contribute to the ability to interpret the data efficiently.

Telemedicine analytics are known for delivering a lot of raw data. Organizing that data into a meaningful and informative dashboard can be a challenge. This example uses dashboard design UX best practices. The margins are doubled, the information is presented with questions and answers, and data isn’t hidden from view.

This dashboard design follows sound data visualization best practices: generous margins, balanced layout, and good color contrast, which all contribute to the ability to interpret the data efficiently.

Stock Dashboard

A stock dashboard that shows a lot of data points and complex information in a simplified yet informative way. (WhiteonWhite Digital)

Stocks can be hard to conceptualize on a single dashboard due to the number of data points competing for space. This dashboard design example has managed to accomplish a clean, minimal look with all of the pertinent information front and center.

Web Audience Dashboard

A dashboard design example showing web analytics in a thoughtful way, aligned with what users want to see the most.

Google Analytics does a great job with their dashboards; however, it can take a lot of customization to achieve a specific goal. This dashboard has taken analytics to a new level by offering up a view that is simple, easy to understand, easy to read, and helpful, without increasing cognitive load.

A dashboard design example showing web analytics in a thoughtful way, aligned with what users want to see the most.

Documentation Management Dashboard

An example of a great dashboard design with a minimalist approach to a complex system of documents. (Jan Losert)

Managing documents is hard, but keeping them organized and easy to navigate can be even harder. An excellent solution is this dashboard which keeps things simple, understandable, and surprisingly sparse.

Even with a minimalist approach, this excellent dashboard design example gives the user everything they need in order to both understand and navigate the document system.

Plant Seeding Weather App — Mobile Dashboard

A plant seeding weather app that presents a mobile dashboard that isn’t cluttered with “chart junk.” (Tomasz Zych)

This mobile dashboard is informative as well as easy to understand. Breadcrumbs help with navigation, and icons with common language descriptions help to create great UX design.

Credit Card Dashboard — Mobile Dashboard

Credit card and banking dashboards are complex unless UX principles are applied along with data visualization best practices. (Raj Lal)

Much like banking, credit card dashboards are notorious for bad UX, especially on a mobile device. This mobile dashboard design turns in a new direction. The information is not only well organized but understandable and feature-rich without being overwhelming.

Superior data visualization and dashboard design require graphical excellence and an understanding and application of dashboard design principles. Applied congruently, users will benefit from data visualizations that are informative and dashboards that deliver a high-quality user experience.