Skip to content
UX Atlas
Plate PAT·028 · PatternGrid F2 · Rev. 2026-09-14

Dashboards

A dashboard earns its place by supporting a decision. If nobody can name the decision, it is a report with a layout.

PatternCraft conventionIntermediate

Definition

A dashboard presents the current state of something so that somebody can decide what to do. The design problem is ranking and comparison, not visualisation technique.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Designing one
  3. 3Composition
  4. 4What each dashboard audience needs
  5. 5Checks before a number goes on the screen
  6. 6Equal tiles are a refusal to rank
  7. 7In practice
  8. 8Local chart
  9. 9Continue from here

Reach for this when

  • Designing an overview, analytics or monitoring screen.
  • People export to a spreadsheet instead of using the page.
  • A dashboard is being requested and nobody has said which of the three questions it answers.

Common mistakes

  • Widgets chosen from available data rather than from questions.
  • Numbers without comparison.
  • Metric definitions left unstated.
  • One screen serving monitoring, exploration and reporting at once.

Designing one

  1. 1

    Name the decisions

    Write the two or three questions this dashboard answers and who asks them. Every widget that answers none of those is a candidate for deletion.

  2. 2

    Rank the metrics

    One primary, a few supporting, the rest on demand. Equal-sized tiles are a refusal to rank.

  3. 3

    Give every number a comparison

    Previous period, target, or segment. A number alone cannot be interpreted, only read.

  4. 4

    Decide the density

    A wall display and an analyst's working screen want opposite spacing. Pick one and offer a density control if both audiences are real.

  5. 5

    Design the empty and failing states

    New accounts, filtered-to-nothing and a failed query are the three states most dashboards ship without.

Composition

Do

  • Put the answer in the headline: 'Churn up 1.2 points' beats 'Churn'.
  • Keep time range, segment and filter controls in one place, and reflect them in the URL.
  • Label series directly where there are few of them.
  • Use one accent colour for the subject and greys for context.

Do not

  • Do not use a pie chart for more than about five categories.
  • Do not animate on every data refresh.
  • Do not vary chart type for visual variety. Consistency is what makes comparison fast.
  • Do not hide the definition of a metric. Ambiguity there invalidates the whole page.

What each dashboard audience needs

The note below argues for splitting them. This is what each one looks like once split.

AudienceQuestionShape
MonitoringIs anything wrong right nowFew numbers, thresholds, and alerts rather than charts
AnalysisWhy did this changeFilters, comparison, and drill-down
ReportingWhat happened last monthA fixed period, exportable, and stable

Checks before a number goes on the screen

A dashboard is trusted or ignored on the strength of its worst number, and these are where the worst numbers come from.

  • The definition is written down and reachable from the tile, because two teams counting active users differently is the normal case.
  • The freshness is stated: as of, with a time, so nobody acts on yesterday's figure believing it is live.
  • The timezone is named, since daily totals differ by several percent depending on where the day is cut.
  • The population is stated: which accounts, which regions, and whether internal traffic is included.
  • Zero and no data are visually distinct, because a genuine zero and a broken pipeline look identical in most charts.
  • Rounding and units are consistent across tiles, so two numbers that should add up do add up.
  • Sampling is disclosed where the figure is estimated, along with the margin at the volumes this dashboard usually shows.

Equal tiles are a refusal to rank

Equal tilessix numbers, no answer,and nothing to compare againstRanked4.2%Churn, up 1.2 points on last monthtarget 3.0%one primary number with a comparison,then the supporting few
The grid on the left is what gets built when nobody decided which question the screen answers. The one on the right has made that decision visible.

In practice

  1. i.

    Alert instead of a wall

    If the real job is noticing when something goes wrong, a threshold alert with a link to the detail beats a dashboard nobody remembers to open.

  2. ii.

    The chart nobody could act on

    Analysis against monitoring

    A trend line with no comparison, no filter and no drill-down answered whether something moved and never why. Every question it raised had to be taken to somebody with database access.

Local chart

PAT·028 · Region III · Grid F2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Data Visualization ColorFND·029 · PRINCIPLES BEHIND THISDensityFND·016 · PRINCIPLES BEHIND THISVisual HierarchyFND·001 · PRINCIPLES BEHIND THISChartCMP·028 · OFTEN USED WITHData TableCMP·025 · OFTEN USED WITHFilteringPAT·004 · OFTEN USED WITHChoosing a Density for an Analytics DashboardCASE·004 · PRACTICAL EXAMPLEDashboard UX ChecklistCHK·004 · CHECK YOUR WORK

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.