Dashboard
The command center of an application. How to design dashboards that inform, prioritize, and guide action without overwhelming.
What is it?
A dashboard is a screen that provides a high-level overview of a system's current state, surfacing the most important metrics, status indicators, and actionable information in a single view. Dashboards exist to answer: "What needs my attention right now?" The answer to that question should be immediately visible.
Why it matters
Dashboards are often the first screen users see after login — and the screen they return to most often. A well-designed dashboard reduces the time to insight, surfaces problems before they escalate, and guides users toward the actions that matter. A poorly-designed dashboard presents overwhelming data that paralyzes rather than guides.
Best Practices
- Design for the most frequent question, not all possible questions. Ask: what does this user need to know right now?
- Limit primary metrics to 5–7 KPI cards. More than this creates cognitive overload.
- Prioritize exceptions and anomalies — dashboards should surface what's unusual, not just what's routine.
- Use consistent chart types: line for trends over time, bar for comparison, pie only for part-of-whole (max 5 segments).
- Provide time period controls (Last 7 days, Last 30 days, Custom) for all time-based data.
- Status indicators need legend — what does red/yellow/green mean in this context?
- Group related metrics visually — revenue metrics together, engagement metrics together.
- Empty state design: what does the dashboard show before there's any data? Guide users to generate data.
- Allow personalization — let users rearrange or hide widgets they don't need.
- Ensure mobile-responsive layout — a 6-column desktop grid needs a different layout on mobile.
Common Mistakes
- Putting every available metric on the dashboard — 30 charts is not a dashboard, it's a data dump.
- No hierarchy — all metrics presented at equal visual weight, making everything equally important (and therefore nothing is important).
- Charts without labels or with unclear axes.
- Status lights without a legend — what does amber mean?
- No empty state for new accounts — blank dashboard with no guidance.
- Data that updates on page load only — dashboards with time-sensitive data need real-time or frequent refresh.
- Dashboard that shows data but no actionable next steps.
Checklist
Research & Theory
Information Hierarchy and Pre-Attentive Attributes
Color, size, and position are pre-attentive — processed before conscious attention. Using these to encode the most important data ensures users see what matters first.
Why it's relevant
Dashboard design is fundamentally about encoding priority through pre-attentive visual attributes. Red = alert. Large = important. Top = primary.
Few's Dashboard Design Principles (Stephen Few)
Stephen Few's work on dashboard design established that dashboards should fit on a single screen without scrolling, using a structured visual hierarchy to guide the eye.
Why it's relevant
The "single screen" principle for primary dashboards remains relevant. The first screenful should answer the core question completely.
Real-World Examples
Stripe
Revenue dashboard: top-level KPIs, trend chart, recent transactions list. Clean hierarchy. Time period selector. Anomalies surfaced with color. The benchmark for SaaS dashboards.
Linear
Project dashboard shows cycle progress, team velocity, completed vs. open issues. Each metric is actionable — clicking reveals the detail.
Vercel
Deployment dashboard: success rate, build duration, recent deployments. Red/green status with no ambiguity. One-click access to deployment logs.