Dashboard design: metrics, charts and hierarchy

Step 1

Who the dashboard is for and what decision it supports

Nielsen Norman Group defines a dashboard as a collection of data visualizations on a single page that gives at-a-glance information people can act on quickly. The metaphor is a car's dashboard: am I speeding, am I about to run out of fuel. NN/g distinguishes two types:

• •operational: for time-sensitive tasks such as monitoring servers or support calls. Data updates constantly and deviations must be spotted at once;
• •analytical: for analysis and decisions without that urgency, for example a sales dashboard updated once a day;
• •before drawing, write down who looks at the dashboard, how often, and which key questions it must answer (“Are sales up this week?”, “Which orders are stuck?”).

💡 If a metric answers none of these questions, it probably doesn't belong on the main screen. It can move to a drill-down or a report.

Step 2

Hierarchy: the main things at the top and large

A dashboard is read in seconds, so order matters more than in almost any other interface. Lay out metrics by importance:

• •at the top, a few key numbers as cards: the metric's name, its value, and a comparison with the previous period or a target. A number without comparison says little;
• •below, charts that explain changes in the key numbers: trends, distribution, comparison;
• •further down or on a separate screen, tables with details;
• •group related things: NN/g points to the Gestalt principle that items close together or similar in color and shape are perceived as related.

💡 The same metric uses the same format everywhere: the same units, number of decimals and period labels. Otherwise people waste time “translating”.

Step 3

Choose the right chart

NN/g explains that people compare length and 2D position very accurately, so bar charts, line charts and scatter plots are read fastest. We notice area and angle but are poor at judging how much bigger one is than another.

• •comparing categories: bars, ideally sorted by value;
• •change over time: a line chart;
• •NN/g advises avoiding pie and donut charts most of the time: they're fine at most for showing that one share vastly outweighs the rest;
• •gauges take a lot of space and are harder to read than linear scales, and 3D charts distort values;
• •use color for categories, not magnitudes: people don't perceive colors as an ordered scale. And color must not be the only carrier of meaning, as WCAG requires, so add labels, shapes or markers.

Step 4

Tables, filters and states

Charts give the big picture, but people often work in tables. NN/g names four main table tasks: finding records that fit criteria, comparing data, viewing or editing a single row, and taking actions on records. Think through each:

• •filters and search above the table, with a visible list of active filters and a quick way to reset them;
• •column sorting, numbers right-aligned so they're easier to compare;
• •loading: a skeleton or an indicator. NN/g specifically warns against showing “No records” while loading and then replacing it with data: it misleads;
• •empty: “No data for the selected period” and a hint about what to change, instead of an empty frame;
• •error: what failed to load and how to retry. Nielsen's first heuristic is visibility of system status.

Step 5

Realistic data and testing

A dashboard with perfect round numbers looks great until it meets reality. Fill the layout with plausible data and check the edge cases:

• •long names, seven-digit amounts, zero, negative values, a very short and a very long period;
• •a chart where one category is tens of times larger than the others;
• •lines and chart elements must contrast with the background: for essential graphical elements WCAG requires at least 3:1;
• •a test with a person: show the dashboard, ask “Are sales OK this week?”, and time how long the answer takes.

💡 Exercise: design a dashboard for an imaginary café: revenue per day, number of orders, popular drinks, peak hours. Make up the data yourself and say so in the case study. Show the result in the community and ask people to answer your key questions using only the dashboard.