ux-dashboard

Dashboard Skill

How this skill behaves (read first)

This is a generative skill, and dashboards have a signature over-design trap: cramming every available metric onto one screen. As the lessons put it — "when everything is important, nothing is." The default instinct is to show all the data; a good dashboard shows the few things that answer the user's question. So this skill gates:

1. Establish who's looking and what decision they're making — that determines what belongs on the screen.
2. Apply the always-true core — organization, hierarchy, and chart-fit principles that hold for any dashboard.
3. Decide density, detail, and chart types deliberately — surface the context-dependent choices instead of defaulting to "show it all."

Then hand off to the audits — especially aesthetics (clutter/hierarchy is the make-or-break here).

---

Step 0 — Establish context before designing

• Audience & the decision they make — when and why they look at this, and what action the data should drive. (User research is the real answer; ask if unknown.) This is the filter for what belongs.
• Dashboard type:
  • Operational — real-time, monitoring, needs an immediate response (patient vitals, flight traffic). Comprehensive at a glance, frequent updates.
  • Analytical — for investigation and thoughtful decisions (a sales dashboard); not time-sensitive, supports drill-down.
• Roles — one audience or many? Multiple roles → customization matters.
• Platform — screen size shapes how many widgets fit and the responsive layout.

State assumptions if proceeding without answers.

---

The always-apply core (true for any dashboard)

• Start from the user's question, not the data you have. For each widget ask: "what decision does this support?" If nothing, cut it. Let goals + user needs + data nature pick the widgets.
• Don't overwhelm. Relevant few over comprehensive many. Density without hierarchy is a mess.
• Prioritize for scanning. People scan, not read. Put the most important metric where the eye lands first; arrange by importance.
• Group related content. Use containers, dividers, and white space so related metrics read as a group (common-region principle); section labels/titles act as visual anchors — make them distinct.
• Use white space to segment and highlight — it improves legibility in data-dense screens and gives key numbers breathing room.
• Keep structure consistent — shared alignment, title sizes, and margins across containers; this also makes responsive layouts scale.
• Keep comparison data visible together. Don't bury things users need to compare behind tabs/pop-ups; never hide always-needed info. Use tabs only for content that isn't compared side by side.
• Match the chart to the data (see reference below) — the single highest-leverage correctness decision.