Analytics dashboards need to present complex information quickly. These patterns ensure consistency across our product while optimizing for rapid comprehension and decision-making.
Metric Cards
KPI cards are the primary way users consume top-level metrics:
- Primary number: Large, bold typography (32-48px) draws the eye immediately to the key value.
- Comparison indicator: Green up arrow or red down arrow with percentage change from previous period.
- Sparkline optional: Small inline chart showing 7-day trend provides context without overwhelming.
- Label clarity: Metric names are short (2-3 words max) with info icon for detailed explanation.
Time Range Selectors
Consistent time controls across all dashboard views:
- Preset options: Today, Yesterday, Last 7 days, Last 30 days, Last 90 days, Last 12 months.
- Custom range: Date picker with visual calendar for precise selection.
- Comparison toggle: One-click enable to overlay previous period data on charts.
- URL persistence: Selected range is stored in URL params for shareable dashboard states.
Filter Patterns
Filters narrow down data without leaving the current view:
- Filter bar: Horizontal row of dropdown filters for common dimensions (country, device, source).
- Active filter pills: Selected filters appear as removable pills showing current state.
- Segment builder: Advanced mode for complex conditions with AND/OR logic.
- Saved segments: Users can save and name filter combinations for quick reuse.
Real-Time Indicators
Live data needs clear visual signals:
- Pulsing dot: Green animated dot indicates live connection to real-time data stream.
- Last updated: Timestamp showing "Updated 3s ago" with automatic refresh.
- New data highlight: Briefly highlight rows or metrics that just changed (subtle yellow flash).
- Connection status: Toast notification if real-time connection drops with reconnection attempt.
Empty States
What users see when there's no data yet:
- Helpful illustration: Friendly graphic that matches the context (chart with no data points, empty list).
- Clear explanation: Why there's no data—"No visitors in this time range" vs "Tracking not yet installed."
- Action prompt: Button or link to resolve the empty state (install script, change date range).
- Sample data option: For new users, offer to view demo data to understand the interface.
Loading States
Perceived performance matters as much as actual speed:
- Skeleton screens: Gray placeholder shapes that match the expected layout reduce perceived load time.
- Progressive loading: Show cached data immediately, update with fresh data when available.
- Staggered animation: Skeleton elements animate in sequence to indicate activity.
- Timeout handling: After 10 seconds, show retry option rather than infinite loading.
Table Patterns
Data tables for detailed exploration:
- Sortable columns: Click headers to sort, with clear ascending/descending indicators.
- Sticky header: Column headers remain visible while scrolling long tables.
- Hover actions: Row actions (view, edit, delete) appear on hover, hidden by default.
- Pagination vs infinite: Use pagination for data exploration, infinite scroll for real-time feeds.
Drill-Down Navigation
Moving from overview to detail:
- Click to filter: Clicking a chart segment filters the entire dashboard to that dimension.
- Breadcrumb trail: Shows current drill-down path with links to return to higher levels.
- Side panel detail: Clicking a row opens a slide-out panel with full details without losing context.
- Back navigation: Browser back button works correctly through drill-down states.