fbpx
Shopping Cart

🔥  First Time? Get 15% off with the coupon “NEWHERE”

Display methods

4. Display methods

4.1. Data visualizations

Data cannot simply be thrown together and tossed on a dashboard. They must be displayed properly to maximize data visualization. When information is displayed properly, people can glance at a dashboard and quickly understand complex information. The right dashboard display does an excellent job of making data stand out among the noise.

You can display data in a variety of ways, but four options stand out. A good dashboard design typically includes:

  • Line charts
  • Bar charts
  • Gauges
  • Tables

You’ll use these display methods for different pieces of information. Using them correctly is critical.

“An effective dashboard is the product not of cute gauges, meters and traffic lights, but rather of informed design: more science than art, more simplicity than dazzle. It is, above all else, about communication” Stephen Few (from Information Dashboard Design: The Effective Communication of Visual Date, 2006)

Dashboard - Line Chart

Line Charts

Line charts consist of a line that plots values to illustrate trends over a length of time. Add these charts to your dashboard whenever you have a continuous data set that you need to showcase, especially when that data set is a trend-based visualization that has more than 20 data points.

Dashboard - Bar Chart

Bar Charts

Bar charts use vertical or horizontal bars to represent data. Use this when people need to compare values from seven or fewer categories. People can glance at these charts and quickly identify trends or top performers without having to spend much time digging into the data for a deep analysis.

Dashboard - Gauge Chart

Gauges

Gauges illustrate progress. Use the gauge icon and various colors to indicate how close the company is to achieving a goal. These are best gauging key performance indicators, such as leads collected or sales made. As the gauge fills up and turns green, viewers know they are reaching their goals.

Dashboard -Bullet Chart

Bullet Graph

When you create a dashboard, you are faced with the challenge of providing a robust amount of information in a small space. Because of that, many designers use bullet graphs instead of meters and gauges or traditional bar graphs. Bullet graphs provide an ample amount of information, and they don’t take up much space.
Components of a Bullet Graph

Bullet graphs consist of five key components.
The text label is used to define the purpose of the chart. This is a caption for your chart.

The quantitative scale is placed on the bottom of the graph and is used to measure the values that you provide. It contains tick marks, as well as text labels.

The comparative measure refers to the value that you use to compare the value that is located on the quantitative scale.

The qualitative scale represents various ranges, such as bad and good or low and high. You fill the background with the qualitative scale so people can easily interpret the data.

While bullet graphs are relatively straightforward, you can implement some design elements that allow you to show positive and negative values. You can also create a series of graphs that use different qualitative scales. For instance, a low value might be good on one graph and bad on anther graph. You would reverse the shading to represent that.

Dashboard - Maps

Maps

Spatial maps illustrate data trends and patterns. The map represents actual physical space. In many cases, it is used to represent a geolocation, but you can also use a spatial map to represent your business. These maps use color hues to represent data. Use this map when you want people to be able to compare groups of data and easily see patterns and trends.

Dashboards - Card or Widgets

Cards (or Widgets)

Cards or Widgets are defined as the basic unit of graphical information. They highlight an indicator or a number, allowing you to notice that very important value easily.

Dashboard - Icons

Icons

Icons are designed to grab people’s attention. Icons are used for alerts, navigation, and toggling (up/down, on/off). Your icons should be bold, clear, and easy to follow. They should stand out above all else, and people should immediately understand what they mean. Only use icons for important information. If you overuse them, people will develop icon blindness.

Dashboard - Sparkline Table

Tables

Tables place data into columns and rows and can contain sparklines and bullet charts. They are the perfect choice for comparing and analyzing relationships, as long as there aren’t many variables or data points involved. You can use tables to compare individual values and values that include various units of measurement. Tables can also represent precise values.

4.2. Chart Types to Avoid

Having the right chart is only half the battle. You also need to avoid some charts when building a dashboard display.

Chart Types to Avoid - Pie chart

Pie Chart

Pie charts are a great idea in theory, but in reality, they don’t provide any useful data. You have to dig deeper to understand what they mean, especially if have more than three categories. The more categories you have with a pie chart, the harder it is to understand them. The pieces of pie get smaller and smaller, so the pie chart gets harder and harder to read.

Dashboard - Donuts chart example

Donut Chart

A donut chart is really just the same thing as a pie chart, so the same rules apply. Avoid donut charts whenever you can, especially if you have more than three categories. Viewers won’t be able to glean any real information from them.

Chart Types to Avoid - 3D Chart

3D Chart

Three-dimensional charts look cool, but they are difficult to understand. Viewers are left crossing their eyes and trying to make sense of the data. Make it easier for them by staying with two-dimensional charts.

4.3. Eliminating Chartjunk

Your dashboard should be clean and easy to read, so you must eliminate chartjunk. Chartjunk is a term for all of the unnecessary elements on charts and graphs. Strip your graphics down so you have the bare minimum. Avoid heavy grid lines, complex fonts, and 3-D graphics. Get rid of your backgrounds and your frames. You don’t need them.

4.4. Table Design

Tables play an essential role in dashboard design. There are two main components involved in table design.

First, include white space. White space is an effective way to group data without providing a distraction.

Second, be mindful of how you separate the data. Rules and grids are a popular choice, but that doesn’t mean they are the right option. Rules and grids make dashboards look cluttered. Instead of using rules and grids, consider fill color.

Notice in the dashboard below that every other line is light gray. This allows designers to differentiate between the lines without creating a distraction.

Dashboard Table Design - before
BEFORE
Dashboard Table Design - after
AFTER
Recognized Worldwide

approved templates worldwide

Practicality and Agility

easy-to-use templates

Humanized support

real people to serve you

100% Secure Checkout

hight security of paypal and stripe

[{"code":"","label":"Kanban Template","win":false},{"code":"luckyywheel10%","label":"10% Off","win":false},{"code":"solucky!","label":"To-Do List Template","win":true},{"code":"10OFF","label":"15% Off","win":false},{"code":"","label":"No luck today","win":false},{"code":"luckyywheel20%","label":"20% Off","win":true},{"code":"","label":"Spin again","win":false},{"code":"10OFF","label":"CRM Template","win":false},{"code":"25OFF","label":"25% Off","win":false},{"code":"solucky!","label":"HR Metrics Template","win":false},{"code":"","label":"Almost","win":false},{"code":"25OFF","label":"10% Off","win":false}]
[{"code":"","label":"Kanban Template","win":false},{"code":"luckyywheel10%","label":"10% Off","win":false},{"code":"solucky!","label":"To-Do List Template","win":true},{"code":"10OFF","label":"15% Off","win":false},{"code":"","label":"No luck today","win":false},{"code":"luckyywheel20%","label":"20% Off","win":true},{"code":"","label":"Spin again","win":false},{"code":"10OFF","label":"CRM Template","win":false},{"code":"25OFF","label":"25% Off","win":false},{"code":"solucky!","label":"HR Metrics Template","win":false},{"code":"","label":"Almost","win":false},{"code":"25OFF","label":"10% Off","win":false}]