dashboard

Files (1)

• SKILL.md

SKILL.md (first lines)

# Dashboard

A dashboard is a decision tool, not a collection of charts. Stephen Few defines
it as "a visual display of the most important information needed to achieve one
or more objectives, consolidated and arranged on a single screen so the
information can be monitored at a glance." Work backward from the decisions the
dashboard supports. Encode the most important data with the most accurate
channels. Show context and uncertainty honestly. A dashboard looks good when it
is restrained and consistent, not when it is decorated.

## Start with purpose, not data

- Write down the audience, the decisions they make, how often they look, and
  the device or setting (desk, phone, wall TV).
- Ask users: what do you need to know, what will you do with it, and which
  decisions depend on it? Never design a dashboard without talking to the
  people who will use it.
- Pick the genre first, because each one follows different rules:
  - **Static or executive**: single screen, no interaction, glanceable.
  - **Analytic**: faceted views, filters, drill-down. Avoid scrolling, because
    it makes comparison harder.
  - **Operational or monitoring**: real time, built around how the system
    behaves, and paired with alerts.
  - **Magazine or public**: narrative text, annotations, and a guided story.
- Only build a dashboard for high-priority indicators that are updated often
  and revisited. A one-off question is better answered with a report or a
  single chart.

## Choose metrics deliberately

- For every metric, ask: "What would I do differently if this went up or
  down?" If the answer is nothing, remove the metric.
- Prefer actionable metrics over vanity totals. Pair lagging outcomes
  (revenue, churn) with leading indicators (pipeline, engagement).
- Expect metrics to be gamed once they become targets (Goodhart's law). Add a
  counter-metric, such as speed paired with quality.
- Give every KPI a name, definition, calculation, source, owner, target, and
  refresh cadence. Keep definitions in one shared place so different
  dashboards don't disagree.
- Show only a few headline numbers. Working memory is limited. There is no
  magic number, so cut until every remaining tile earns its place.
- Never show a number alone. Pair it with at least one of: target, prior
  period, same period last year, forecast, benchmark, or normal range.

## Encode for accuracy

- Perceptual accuracy, from most to least accurate: position on a common
  scale > position on unaligned scales > length > slope or angle > area >
  volume > color saturation. Put the most important quantity on position or
  length.
- Use hue for categories and lightness or saturation for ordered values.
  Never use hue to show a quantity.
- Make one thing stand out with a single feature, such as one saturated color
  against grey. Readers cannot quickly find an item defined by a combination of
  two features, such as "red and square".
- Keep graphical integrity: the visual effect should match the data effect,
  never add visual dimensions the data doesn't have, and never strip the data
  of its context.

### Pick the right form

| Need | Use | Avoid |
| --- | --- | --- |
| Compare magnitudes | Bars or dots; bars start at zero | 3D bars, truncated bars |
| Trend over time | Line; sparkline for compact trend | Animation instead of small multiples |
| Progress vs. target | Bullet graph | Gauges, dials, speedometers |
| Part-to-whole | Stacked bar, or a pie with 5 or fewer slices | Many-slice pies or donuts |
| Many series or entities | Small multiples with shared scales | Spaghetti lines |
| Exact lookup, mixed units | Table | Charts that make users estimate values |
| Two measures with different units | Two aligned panels | Dual-axis charts |
| Units of very different sizes | Funnel plot with control limits | League-table rankings |

### Building blocks

- **KPI tile**: value (largest), short label, comparison, gap in absolute and
  percent terms, and a small trend. Color the gap by good or bad relative to
  the target, not by arrow direction (costs going down is good). Always pair
  color with a symbol or sign.
- **Bullet graph**: label, linear scale, a bar for the measure, a tick for the
  target, and 2–5 qualitative bands in shades of one hue.
- **Sparkline**: a word-sized trend for context. Rows with independent y-axes
  are not comparable to each other.
- **Tables**: right-align numbers and left-align text. Use consistent
  precision, tabular figures, and units stated once in the header. Use light
  dividers instead of grids, and add zebra stripes only on wide tables. Sort by
  the most meaningful column. Highlight outliers. Add in-cell bars,
  sparklines, or heatmap shading where they help.

## Layout and hierarchy

- Readers scan top-left first, then across, then down the left edge. Put the
  main message or headline KPIs top-left. Start labels with the words that
  carry the meaning.
- Order the page as overview, then trends and breakdowns, then detail
  ("overview first, zoom and filter, then details on demand"). Put secondary
  material behind tooltips, drill-downs, or extra pages.
- Group related items with proximity and whitespace before adding boxes. Use
  more space between groups than within them.
- Align everything to a grid. Panels that will be compared need the same
  scales, time ranges, and sizes.
- Manage the trade-off between screen space, abstraction, number of pages,
  and interactivity. Shrinking one forces growth in another, so decide
  deliberately.
- Minimize interaction. If something can be solved without a click, solve it
  that way.

## Color

- Match the palette to the data: sequential for ordered values, diverging
  around a meaningful midpoint, qualitative for categories, cyclic for
  wrap-around values such as hour of day.
- For continuous data, use perceptually uniform maps such as viridis or
  cividis. Never use rainbow or jet.
- Make grey the default and use one accent color for what matters. Use at
  most 5–7 categorical colors; beyond that, group categories or change the
  chart.
- The same entity gets the same color in every panel and every dashboard.
- Avoid encoding meaning with red and green alone. Blue and orange is a safer
  pair. Make colors differ in lightness, and check that the dashboard still

From caarlos0/dotfiles, MIT.

More from caarlos0/dotfiles