UI Design
7 minute read

Top Data Visualization Examples and Dashboard Designs

Shane Ketterman
Shane comes from a background in architecture, information technology, customer experience, and UX design.

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
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 which 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

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.

An example of data visualization best practices
Napoleon's 1812 March is one of Charles Minard's greatest visualizations from 1861, showing thousands of data points using superior graphical excellence.

John Snow’s Cholera Map

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.

Visual display of data using stacked bars and a simple 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.

History of Rock Music

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.

A benefit of data visualization is helping to display highly complex information.
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

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 on the interactive version that allow for even more data exploration, such as birth rates.

A top data visualization example showing thousands of data points in a non-complex graphic
Data visualization showing graphical excellence with thousands of complex data points.

Daily Routines of Iconic Famous People

Not only is this data visualization interesting, it’s 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.

Data visualization dashboard design displaying many data points
Data Visualization showing multiple data points without overwhelming the user. (Podio)

World Languages Graphic

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.

One of the data visualization techniques is to use graphics depicting data.
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

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 the 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.

A dashboard design best practice is to use color to enhance the meaning of the information.
Sparse colors and showing the information that is pertinent to the user are principles of good dashboard design. (Artyom Sokolov)

Stripe Dashboard

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

A user dashboard that shows a great visual display of data
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)

Telemedicine Dashboard

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.

Dashboard design best practice with well laid out silos of information and good information flow
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

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.

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

Web Audience Dashboard

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.

Dashboard design UX applied with regards to readability and an understanding of the data
A dashboard design example showing web analytics in a thoughtful way, aligned with what users want to see the most.

Documentation Management Dashboard

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.

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

Plant Seeding Weather App – Mobile Dashboard

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.

Mobile visual display of data
A plant seeding weather app which presents a mobile dashboard that isn't cluttered with "chart junk." (Tomasz Zych)

Credit Card Dashboard – Mobile Dashboard

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.

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

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.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What is dashboard UX?

Dashboard UX encompasses the principles of good UX design to deliver a superior user experience such as showing insights and not just data, designing for the user, following sound design principles, showing truth in data, and having a high data-ink ratio.

What is data visualization and why is it so important?

Data visualization is the graphical representation of information and data. It can be depicted as a chart, diagram, picture, etc. By using these elements, data visualization can provide a better way to see and understand trends, outliers, and patterns.

How does data visualization help?

Data visualization helps users identify trends and patterns in data. Its strength lies in the graphical representation, which allows people the ability to make better sense of complex and sometimes voluminous amounts of information.

What is a dashboard design?

Dashboard design is the ability to compile and display crucial data/information into a single, viewable space. It follows UX design principles and data visualization best practices, and it is organized so users can navigate directly to various areas that require the most attention.

How do you make a good dashboard?

Good dashboard design follows well-established data visualization best practices, standards, and conventions. They have a purpose and present data clearly and consistently. Good dashboard design layouts flow naturally from left to right, use wide margins and padding, and display the right amount of information.