Analytics Dashboard Design
Use this skill when the page exists to help someone monitor, compare, diagnose, or decide from data.
Goal: answer the top questions in one screen before showing supporting detail. Optimize for trends, context, and confidence, not decoration.
Working model
Before building, define three things:
- primary questions: the top 3 questions the dashboard must answer
- decision owner: who acts on the data and how often
- freshness model: real-time, hourly, daily, weekly, or static
Default structure
- Global controls: date range, environment, segment, saved view
- Key metrics: 3-5 headline KPIs with clear labels and deltas
- Trend zone: one or two charts showing movement over time
- Breakdown zone: dimensions, cohorts, channels, regions, or segments
- Diagnostic detail: table, funnel, or event list
- Notes and exceptions: anomalies, alerts, definitions, freshness
Chart rules
- Pick charts by question, not by novelty.
- Line charts for trend, bars for comparison, area only when cumulative context matters.
- Use consistent units, decimal precision, and time buckets.
- Label axes and legends clearly; never rely on hover alone to explain the chart.
- Reserve accent color for the main series and use muted support colors for context.
- If a chart needs a paragraph to explain it, simplify it or split it.
Layout rules
- Put the most decision-driving metric in the first visual band.
- Keep filters visible and predictable.
- Align related charts to the same time range and vocabulary.
- Use cards only when they group meaningfully; avoid a wall of equal-weight boxes.
- Show metric definitions and last-updated times near the data.
Interaction rules
- Drill-down should preserve global filters.
- Hover states add detail; they should not reveal the only useful information.
- Empty states must explain whether data is missing, filtered out, or delayed.
- Export actions must reflect the current filter state.
Reject these failures
- Decorative gradients behind production charts
- Too many chart types on one page
- KPI rows with no time context or comparison baseline
- Legends that require color memory without labels
- Full-screen "executive summary" banners that push real data below the fold
Final checks
- Can a user answer the top three questions in under 10 seconds?
- Are metric definitions and freshness visible without hunting?
- Does every chart earn its space by changing a decision?
1---2name: analytics-dashboard-design3description: Use when the task is to design a BI dashboard, 数据大屏, analytics workspace, reporting console, KPI board, or monitoring page. Focus on question-first information hierarchy, chart choice, filter clarity, metric context, and decision-ready layout.4---56# Analytics Dashboard Design78Use this skill when the page exists to help someone monitor, compare, diagnose, or decide from data.910Goal: answer the top questions in one screen before showing supporting detail. Optimize for trends, context, and confidence, not decoration.1112## Working model1314Before building, define three things:1516- primary questions: the top 3 questions the dashboard must answer17- decision owner: who acts on the data and how often18- freshness model: real-time, hourly, daily, weekly, or static1920## Default structure21221. Global controls: date range, environment, segment, saved view232. Key metrics: 3-5 headline KPIs with clear labels and deltas243. Trend zone: one or two charts showing movement over time254. Breakdown zone: dimensions, cohorts, channels, regions, or segments265. Diagnostic detail: table, funnel, or event list276. Notes and exceptions: anomalies, alerts, definitions, freshness2829## Chart rules3031- Pick charts by question, not by novelty.32- Line charts for trend, bars for comparison, area only when cumulative context matters.33- Use consistent units, decimal precision, and time buckets.34- Label axes and legends clearly; never rely on hover alone to explain the chart.35- Reserve accent color for the main series and use muted support colors for context.36- If a chart needs a paragraph to explain it, simplify it or split it.3738## Layout rules3940- Put the most decision-driving metric in the first visual band.41- Keep filters visible and predictable.42- Align related charts to the same time range and vocabulary.43- Use cards only when they group meaningfully; avoid a wall of equal-weight boxes.44- Show metric definitions and last-updated times near the data.4546## Interaction rules4748- Drill-down should preserve global filters.49- Hover states add detail; they should not reveal the only useful information.50- Empty states must explain whether data is missing, filtered out, or delayed.51- Export actions must reflect the current filter state.5253## Reject these failures5455- Decorative gradients behind production charts56- Too many chart types on one page57- KPI rows with no time context or comparison baseline58- Legends that require color memory without labels59- Full-screen "executive summary" banners that push real data below the fold6061## Final checks6263- Can a user answer the top three questions in under 10 seconds?64- Are metric definitions and freshness visible without hunting?65- Does every chart earn its space by changing a decision?
mr-q526