Dashboard Layout
Dashboard Types
| Type | Purpose | Density |
|---|---|---|
| Executive | High-level KPIs at a glance | Low |
| Operational | Monitor real-time status | High |
| Analytical | Explore and compare data | Medium-High |
| Personal | Track individual progress | Medium |
Layout Principles
- Most important metrics at the top. Above the fold, largest cards.
- Group related widgets. Revenue metrics together, user metrics together.
- Consistent grid. Use a 12-column grid, widgets span 3, 4, 6, or 12 columns.
- White space between widgets. 16-24px gaps minimum.
- Don't pack everything in. A focused dashboard with 6-8 widgets beats a cluttered one with 20.
KPI Cards
[Icon] Label
42,389 ↑ 12.5%
- Large number is the focal point
- Trend indicator (up/down arrow + percentage)
- Comparison period label ("vs last month")
- Subtle sparkline for trend visualization (optional)
Data Refresh
- Show last updated timestamp
- Auto-refresh interval (configurable)
- Visual indicator during refresh (subtle, not disruptive)
- Don't flash or jump when data updates
Personalization
- Allow widget reordering (drag and drop)
- Show/hide widgets
- Save layout per user
- Offer preset layouts for different roles