Interface Lab
  • Home
  • Agents
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Dashboard Hierarchy and Alerts

Dashboards should show status overview first, then anomalies, trends, details, and action entries.

dashboardalertsmetrics

Design Principle

More metrics are not better; the priority is helping users decide whether action is needed.

Principle

More metrics are not better; the priority is helping users decide whether action is needed.

Design action

Place health state and key KPIs first, then anomaly lists and trend charts; alerts use semantic color plus icon and a clear next step.

Examples

Positive example: Operations dashboards, sales dashboards, and project status pages. Counterexample: All metrics have identical size.

Apply when

Operations dashboards, sales dashboards, and project status pages. Alerts and KPI changes exist.

Source notes

Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Place health state and key KPIs first, then anomaly lists and trend charts; alerts use semantic color plus icon and a clear next step.

Apply When

  • Operations dashboards, sales dashboards, and project status pages.
  • Alerts and KPI changes exist.

Avoid

  • All metrics have identical size.
  • Alerts are hidden inside ordinary cards.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026