UI DESIGN LAB
  • Home
  • 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