On this page
The sample used throughout this note is a dashboard for a fictional accounting firm in tax filing season. The people using it are team leads. Every morning they need to answer three questions: are we on track, what is at risk, and who needs to do what today.
Keep those three questions in mind. Each principle below is a way of making one of them faster to answer.
| Client | Due | Status | |
|---|---|---|---|
| Jansen HoldingCorporate tax | 28 Apr | No documents | Remind |
| Bakker & ZnIncome tax | 30 Apr | Unassigned | Assign |
| Visser LogisticsCorporate tax | 1 May | In review | Open |
01Prioritise the metrics that drive a decision
Most dashboards start as a list of everything that can be counted. The result is a row of tiles with equal weight, and the reader has to work out which ones matter. Start from the decisions instead. For each metric, ask: if this number changed overnight, would someone do something different today? If not, it belongs in a report, not at the top of the dashboard.
Eight equal tiles. "At risk" is in there, sitting at the same weight as logins.
Two numbers that change today's plan, each with the context needed to judge it.
Put three to five decision metrics at the top left, where reading starts. Give the most urgent one visual weight, here through colour and position.
Monitoring screens for operations teams often need many metrics at once, because the job is to spot any anomaly. There, equal weight is correct, and alerting does the prioritising.
02Group related information
A dashboard is read in chunks. People look for "the progress part" or "the risk part", then read within it. Group widgets by the question they answer, give each group a short heading, and keep the gap between groups clearly larger than the gap inside a group. Proximity does the work before any label is read.
Name groups after the question they answer, not the data source. "At risk?" helps more than "Deadlines table".
If different roles share one dashboard, grouping by role can beat grouping by question. Better still, give each role its own default view.
03Use one card and layout system
When every widget has its own header style, padding and corner radius, the screen looks busy even when it holds little data. Define one card anatomy and reuse it for metrics, charts and tables. Consistency here is not decoration: once the reader learns where the label, the value and the comparison sit, they stop reading the frame and start reading the data.
- Label. Names the measure in the user's words. Small, muted, always top left.
- Value. The largest text in the card. One number, rounded to the precision anyone acts on.
- Comparison. Against plan, target or the previous period. Without it the value cannot be judged.
- Shape. Optional sparkline for direction. No axes, no labels, just the trend.
- Way in. A link to the detail behind the number, in the same place on every card.
Build the card once, as a component with slots for header, body and footer. Use a grid with a fixed gutter so cards line up across rows.
The single most important element on the screen may break the pattern on purpose, for example a full-width alert above the cards. Make it the only exception.
04Avoid unnecessary chart complexity
A chart earns its space when it shows something a number cannot: a direction, a shape, an outlier. Most dashboard charts need one or two series. When more appear, the eye cannot follow any of them. Pick the chart for the question, then remove everything that does not help answer it.
Every line competes. The legend has to be read and matched six times.
The point of the chart, a team falling behind, is visible before any label is read.
A few defaults hold up well: line charts for change over time, bars for comparing categories, a single number when the trend does not matter. Avoid dual axes, 3D effects and pie charts with more than a few slices. Start bar charts at zero; line charts may zoom in, as long as the axis says so.
Decide the one sentence the chart should say, such as "Team North is falling behind". If the chart does not say it at a glance, simplify.
Analysts exploring data need dense, flexible charts. Give them that in an explore view, and keep the dashboard for the answer, not the investigation.
05Show trends and meaningful comparisons
A number on its own cannot be judged. Is 412 good? It depends on the plan, last week, last season and the time of year. Every key metric needs at least one reference point, and the reference should match the decision. A team lead managing a deadline cares about plan. A partner reviewing the season cares about last year.
Accurate, and impossible to act on.
The plan bar answers "are we on track?" The second line answers "is this normal?"
Label comparisons in words ("18 behind plan") rather than only with arrows and colour. Red and green alone fail for colour-blind users and say nothing about size.
Percentage change misleads on small numbers. Going from 2 to 4 overdue returns is "+100%". Show absolute numbers when the base is small.
06Use filters and search to support exploration
The default view should answer the common question without any filtering. Filters are for the next question: "only my team", "only corporate tax", "only clients due this week". When filters are present, the state of the screen must always be visible. A dashboard that silently shows a subset is worse than one with no filters at all.
Keep filter state in the URL so a filtered view can be shared and bookmarked. Offer saved views for the combinations people use every day.
If most users apply the same filter every time, it is not a filter. It is the default. Change the default view instead of adding a step.
07Make the next action obvious
The last principle closes the loop. If the dashboard shows that nine returns are at risk, the reader's next thought is "so what do I do?" Put the answer next to the problem. An inline action on each row, and a single primary action for the screen, turn the dashboard from a status page into a place where work starts.
The user has to leave, find the client, and work out what to do.
The action matches the status. The banner handles the batch case in one step.
Name actions with verbs that match the problem: "Remind", "Assign", "Open". Keep one primary button per screen so the most important action stands out.
Executive dashboards are often read-only by design. The next action there is a conversation, so the right link is to the owner or the detailed report, not a button.
08A review checklist
Use these questions in a design review. They are phrased as questions on purpose: the right answer depends on who uses the dashboard and what they decide with it.
- Can you name the decision each top-row metric supports?
- Does every key number have a stated reference: plan, target or previous period?
- Are widgets grouped by question, with clear gaps between groups?
- Do all cards share one anatomy, padding and radius?
- Can each chart be summed up in one sentence, readable at a glance?
- Is the filter state always visible, resettable and shareable?
- Does every problem shown on the screen have a next step next to it?
- Does it still work without colour, for example in greyscale?