---
name: Dashboard Screen
description: Design recommendations for dashboard screens with metrics, charts, and actionable insights
---

# Dashboard Screen Design Guidance

When designing dashboard screens, consider the purpose and user needs. Dashboards can serve different functions: monitoring key metrics, analyzing data trends, or enabling quick actions. Choose the appropriate variation based on the primary use case.

## Dashboard Variations

### Classic Dashboard (Metrics + Charts + Tables)

The classic dashboard focuses on presenting key information at a glance with a clear visual hierarchy.

1. **Metric Cards at the Top**: Display primary KPIs in card format at the top of the screen. Each metric card should show the metric value prominently (follow number formatting guidelines), include a label describing what the metric represents, and display trend indicators (up/down arrows, percentage changes) when relevant. Arrange in a responsive grid (2-4 columns on desktop, 1-2 on mobile).

2. **Chart Components**: Place charts below the metrics to show trends and comparisons. Use appropriate chart types (line for trends, bar for comparisons, pie for distributions), include clear axis labels and legends, and make charts interactive when possible. Group related charts together visually and use consistent color schemes.

3. **Data Tables**: Include detailed breakdowns in table format below charts. Use sortable columns, pagination or virtual scrolling for large datasets, and make rows clickable to navigate to detail views.

4. **Layout Structure**: Use a grid-based layout with consistent spacing. Visual hierarchy: metrics (top) > charts (middle) > tables (bottom). Ensure responsive behavior (stack vertically on mobile).

### Analytical Dashboard (Deep Data Insights)

The analytical dashboard focuses on exploration, filtering, and multi-dimensional data analysis.

1. **Filtering and Drill-Down**: Include prominent filter controls at the top (date ranges, categories, dimensions). Provide drill-down functionality in charts and tables. Show active filters clearly with ability to remove them, and persist filter state when navigating away.

2. **Interactive Charts**: Enable zooming and panning, support comparison modes (compare periods, compare categories), and allow users to toggle series on/off in multi-series charts.

3. **Date Range Selectors**: Include preset ranges (Today, This Week, This Month, This Year) and allow custom date range selection. Show comparison options (compare to previous period) and display the selected range prominently.

4. **Multi-Dimensional Views**: Allow switching between different data dimensions, provide pivot table capabilities when appropriate, and enable grouping and aggregation options.

5. **Exploration Workflows**: Provide breadcrumbs for navigation through drill-downs, include "Reset" or "Clear Filters" actions, and display data freshness indicators (last updated timestamp).

### Actionable Dashboard (Metrics + Highlights + Navigation)

The actionable dashboard focuses on enabling quick decisions and next steps.

1. **Metrics and Highlights**: Display critical metrics that require attention. Use color coding to indicate status (red for urgent, green for good), highlight anomalies or items requiring action, and show progress toward goals or targets.

2. **Action Cards with Navigation**: Include cards that link to relevant app sections with clear call-to-action buttons. Group related actions together and show action status or completion indicators. Make cards visually distinct from metric cards.

3. **Quick Actions and Shortcuts**: Provide frequently used actions prominently, show recent actions or quick links, and display contextual actions based on current state.

4. **Recent Activity or Notifications**: Show recent changes or updates, display notifications or alerts that need attention, and make it easy to dismiss or act on notifications.

5. **Decision-Making Support**: Provide recommendations or suggestions, show priority indicators for tasks, and include context about why actions are needed.

## Common Guidelines

1. **Loading States**: Show loading states when fetching data. Use skeleton screens that match the final layout, display partial data when some metrics load faster than others, and prioritize metric cards over charts.

2. **Empty States**: Handle cases when there's no data to display. Show helpful messages explaining why there's no data, provide actions to populate data, and avoid showing empty charts or tables without context.

3. **Data Refresh**: Allow users to update dashboard data. Include a refresh button, show auto-refresh indicators when applicable, and display last updated timestamp.

4. **Responsive Layouts**: Stack components vertically on small screens, reduce metric card columns to 1-2 on mobile, and simplify tables or use card-based layouts on mobile.

5. **Visual Consistency**: Use consistent spacing between components, group related metrics and charts visually, apply consistent card styling, and maintain consistent typography hierarchy.

6. **Visual Hierarchy**: Make the most important information most prominent. Use size, color, and position to establish hierarchy, and balance information density with readability.
