Dashboards: big numbers first

Key numbers first, then the main trend, supporting charts, then detail.

From refactoring-ui: Data Visualization, “Dashboard Layout”.

Arrange the dashboard

Shuffle, then drag the blocks back into order.

Your dashboardGood
  1. Key metrics
    Revenue$45.2K↑ 12.3%
    Users1,234↑ 4.1%
    Conversion78.3%↓ 1.2%
    Rating4.2↑ 0.1
  2. Revenue, last 30 days
  3. Supporting charts
  4. Recent transactions
    CustomerDateAmount
    Acme CoSep 23$1,240.00
    NorthwindSep 22$860.50
    GlobexSep 21$2,115.00

One metric card, two weights

Enter a negative change, then tick Grayscale.

Color onlyBad
Revenue $45,234 12.3%
label, value, change: all 16px/600
Big value + arrowGood
Revenue $45,234 ↑ 12.3%
4.5:1

Equal charts vs one primary

Press Glance test, then say whether revenue went up.

Four equal chartsBad

Is revenue up or down?

0 / 0 right
Primary + supportingGood

Is revenue up or down?

0 / 0 right

Why it matters, pros and cons

Why it matters

People open a dashboard to ask "how are we doing?" and scan top-down. Answer first and biggest.

Pros

  • The first glance answers the question.
  • One primary chart gives the eye a landing.
  • Arrow plus color survives colorblindness.

Cons

  • "Up" is not always good: churn, cost, latency.
  • Past five big numbers, none is big.
  • Ops boards should lead with what is broken.