Skip to content
UX Atlas
PatternCraft conventionIntermediate

Dashboards

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

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 page
  1. Definition
  2. Designing one
  3. Composition
  4. In practice
  5. Continue from here

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.

In practice

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.

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.