datadesign
Dashboard Design
Design effective data dashboards — choosing the right chart types, establishing visual hierarchy, defining KPI layouts, and creating interactive filters that help users answer questions without analyst support.
dashboardsdata-visualizationchartsKPIsanalytics
Works well with agents
Works well with skills
dashboard-design/
SKILL.md
Markdown| 1 | |
| 2 | # Dashboard Design |
| 3 | |
| 4 | ## Before you start |
| 5 | |
| 6 | Gather the following from the user before designing: |
| 7 | |
| 8 | 1. **Who is the primary audience?** (Executive, manager, analyst, operator — each needs different density and interactivity) |
| 9 | 2. **What decisions will this dashboard support?** (Not "what data do you want to see" but "what will you do differently based on this data") |
| 10 | 3. **What are the 3-5 key questions this dashboard must answer?** (Every element must tie back to a question) |
| 11 | 4. **What is the data source and refresh cadence?** (Real-time stream, hourly batch, daily ETL — this constrains layout) |
| 12 | 5. **Where will it be viewed?** (Desktop monitor, laptop, TV wall, mobile, embedded in another tool) |
| 13 | |
| 14 | If the user says "I want a dashboard with all our metrics," push back: "A dashboard that shows everything answers nothing. Which 3-5 questions should someone be able to answer in under 10 seconds?" |
| 15 | |
| 16 | ## Dashboard design template |
| 17 | |
| 18 | ### 1. Define the KPI bar |
| 19 | |
| 20 | Place 3-5 headline metrics at the top of the dashboard. Each KPI card must include: |
| 21 | |
| 22 | - **Metric name** in plain language (not column names like `mrr_net_new`) |
| 23 | - **Current value** with appropriate formatting (currency, percentage, count) |
| 24 | - **Comparison value** — period-over-period change or target attainment |
| 25 | - **Trend indicator** — directional arrow or sparkline for context |
| 26 | |
| 27 | Layout rule: KPIs read left to right in order of importance. The leftmost metric is the one the viewer checks first. |
| 28 | |
| 29 | ``` |
| 30 | [ Revenue: $1.2M +12% vs last month ] [ Active Users: 45.2K -3% ] [ NPS: 72 +5pts ] |
| 31 | ``` |
| 32 | |
| 33 | ### 2. Select chart types by question |
| 34 | |
| 35 | Match each question to the right chart type. Use this decision framework: |
| 36 | |
| 37 | | Question type | Chart type | Avoid | |
| 38 | |---|---|---| |
| 39 | | How has X changed over time? | Line chart (continuous) or bar chart (discrete periods) | Pie chart | |
| 40 | | How does X compare across categories? | Horizontal bar chart (ranked) | 3D charts, radar charts | |
| 41 | | What is the distribution of X? | Histogram or box plot | Pie chart with 10+ slices | |
| 42 | | What is the relationship between X and Y? | Scatter plot | Dual-axis charts (misleading scales) | |
| 43 | | What is the composition of X? | Stacked bar (few categories) or treemap (many) | Pie chart with >5 slices | |
| 44 | | Where does X happen? | Choropleth map or heat map | Pin maps with overlapping markers | |
| 45 | |
| 46 | Rule: if you cannot justify why a chart type is better than a simple table for your data, use the table. |
| 47 | |
| 48 | ### 3. Establish visual hierarchy |
| 49 | |
| 50 | Arrange the dashboard in an inverted pyramid: |
| 51 | |
| 52 | - **Top row**: KPI bar — answers "are we on track?" in 5 seconds |
| 53 | - **Middle section**: 2-3 primary charts that answer the core questions — each with a clear title stating the question it answers |
| 54 | - **Bottom section**: Detail tables, drill-down views, or secondary charts |
| 55 | |
| 56 | Title every chart as a question: "How has revenue trended this quarter?" not "Revenue Chart." The viewer should know what to look for before reading the data. |
| 57 | |
| 58 | ### 4. Design filters and interactivity |
| 59 | |
| 60 | Define filters that let users slice data without building new charts: |
| 61 | |
| 62 | - **Global filters** (top of dashboard): Date range, business unit, region — affect all charts simultaneously |
| 63 | - **Chart-level filters**: Applied to individual visualizations only — use sparingly to avoid confusion |
| 64 | - **Cross-filtering**: Clicking a bar in one chart filters related charts — state this behavior explicitly in design notes |
| 65 | |
| 66 | Filter rules: |
| 67 | - Default to the most common view (current month, all regions) |
| 68 | - Show the active filter state visibly so users know what they are looking at |
| 69 | - Never hide data silently — if a filter excludes records, display the count of excluded items |
| 70 | |
| 71 | ### 5. Specify data formatting standards |
| 72 | |
| 73 | Document these for every metric on the dashboard: |
| 74 | |
| 75 | - **Number formatting**: Thousands separator, decimal places, abbreviations ($1.2M vs $1,200,000) |
| 76 | - **Date formatting**: Consistent across all charts (Q1 2025, Jan 2025, 2025-01) |
| 77 | - **Color usage**: Green/red only for good/bad when the direction is unambiguous. Use a colorblind-safe palette. Never encode meaning in color alone |
| 78 | - **Null/missing data**: Show gaps in line charts (do not interpolate), display "No data" in cards (not $0) |
| 79 | |
| 80 | ## Quality checklist |
| 81 | |
| 82 | Before delivering the dashboard design, verify: |
| 83 | |
| 84 | - [ ] Every chart answers one of the stated key questions — no decorative visualizations |
| 85 | - [ ] KPI bar is limited to 3-5 metrics with comparison values and trend indicators |
| 86 | - [ ] Chart types match the question type from the selection framework above |
| 87 | - [ ] Chart titles are phrased as questions, not labels |
| 88 | - [ ] Filters default to the most common view and show active filter state |
| 89 | - [ ] Color use is consistent, colorblind-safe, and never the sole means of conveying information |
| 90 | - [ ] Null and missing data are handled explicitly, not silently dropped or shown as zero |
| 91 | - [ ] The dashboard answers its core questions within 10 seconds of viewing |
| 92 | |
| 93 | ## Common mistakes |
| 94 | |
| 95 | - **Starting with data instead of questions.** "We have this table, let's chart it" produces dashboards nobody uses. Start with decisions, then find the data. |
| 96 | - **Too many charts.** More than 6-8 visualizations on a single view creates cognitive overload. Split into tabs or linked dashboards if needed. |
| 97 | - **Pie charts for comparison.** Humans are poor at comparing angles and areas. Use horizontal bar charts for categorical comparison — they are faster to read and rank. |
| 98 | - **Dual Y-axes.** Two scales on one chart let you imply false correlations by adjusting axis ranges. Use two separate charts side by side instead. |
| 99 | - **Missing context on KPIs.** A number without a comparison is meaningless. "$1.2M revenue" says nothing. "$1.2M revenue, +12% vs last month, 96% of target" tells a story. |
| 100 | - **Ignoring mobile or TV display.** A dashboard designed for a 27-inch monitor is unreadable on a laptop. Specify the target viewport and test at that size. |
| 101 |