Interface Lab
Login
Back to knowledge
Data Visualization

Dashboard Metric Card Contract

A metric card is not decorative big-number UI; each card needs metric definition, time range, comparison baseline, unit, data state, and next action.

dashboardmetric-cardkpidata-viz

Design Principle

A dashboard first screen should answer what users should judge now, not compress all data into an equal chart wall. Metric cards are decision entry points and need semantics plus evidence.

Large Theory

Many dashboards fail not because charts are ugly, but because key metrics lack explanatory context. A big number without unit, period, baseline, change direction, freshness, anomaly explanation, and drill-down path leaves users guessing whether it is good or bad. A metric card should be the smallest decision unit in a dashboard: current state, compared against what, how trustworthy it is, and where to look next.

Small Points

  1. Metric names should use business language, not only internal field names; provide a definition tooltip or glossary link when needed.
  2. Values show unit, precision, currency/percentage/count, time zone, and data window such as last 7 days, MTD, or rolling 30d.
  3. Delta declares the baseline: vs previous period, vs target, vs forecast, or vs cohort. Do not show only a green upward arrow.
  4. Direction has business meaning: cost up can be bad, conversion up can be good; color cannot be separated from semantics.
  5. Cards show data freshness and loading/error/partial states; stale data should not pretend to be live.
  6. Clicking or secondary actions should open corresponding detail, filtered table, chart explanation, or action, not a generic dashboard route.

Design Judgment

A metric card works when users can tell within five seconds what the metric is, what it is compared against, whether action is needed, and where to verify details. If it only shows a prominent number and vague trend, it is decorative data.

Implementation Notes

Create a metric card schema: id, label, definition, value, unit, precision, timeRange, baseline, deltaValue, deltaDirectionMeaning, target, status, updatedAt, source, drilldownHref, empty/error/loading copy, and accessibilityLabel. Visually keep the primary value, delta, period, source, and action in stable positions. On mobile, avoid compressing many cards into horizontal scrolling numbers without labels.

Counterexamples/Risks

All upward metrics are green, time range is missing, YoY and period-over-period deltas are mixed, loading renders as 0, source failure still shows an old value, clicking a card opens a generic dashboard, and screen readers only announce '42 percent up'.

Case Study

USWDS data-visualization guidance emphasizes communicating patterns and relationships in data, with usability and accessibility as complementary goals. Mobbin's dashboard pattern collection shows real products mixing segmented controls, filters, cards, charts, tables, and progress indicators. The reusable lesson is that metric cards should connect to filters, time ranges, details, and accessible explanations rather than stand alone as number widgets.

Source Links

USWDS Data Visualizations: https://designsystem.digital.gov/components/data-visualizations/ Mobbin Dashboard screens: https://mobbin.com/explore/web/screens/dashboard Carbon Data Table: https://carbondesignsystem.com/components/data-table/usage/ Observable Plot: https://observablehq.com/plot/

Agent Directive

When generating dashboard metric cards, output metric schema, time range, baseline, data state, source, and drilldown; do not output big-number cards alone.