Interface Lab
Back to knowledge
Design Systems Page Patterns

Dashboard Hierarchy and Alerts

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

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. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

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.