Vlad VityukInteractive Explainers

The Anatomy of a Fleet Dashboard

You're building one screen to watch a fleet of agents. There are four design mantras everyone repeats — and they sound like they compete. They don't. Each lives on a different layer, and a good dashboard stacks all four.

Every window below reads the same fleet — one seeded set of accounts, orgs and agents. Change nothing about the data; just change the lens, and watch the screen reshape.

Show what needs you, not everything

How do you show a fleet of thousands at a glance? The instinct is a grid: one cell per agent, the whole fleet at once. Push the size up and feel that instinct break — then flip the lens.

1 — Analyse-first (Keim)
fleet size
view
1,000 cells on screen

Push the slider to 5000 and try to spot the red cells — then flip to Analyse-first and they're a short list.

Drag the fleet up to 5000 agents, then flip the view. Everything-at-once floods you with cells — the few that are on fire drown in a field of green; analyse-first throws the healthy away and hands you only what needs a human.

At twelve agents, the overview is fine. At five thousand, it's noise: the handful of agents that are actually on fire are lost in a field of green. Analyse first — compute the exceptions and surface only those. (Keim et al., 2006: analyse first, show the important, zoom and filter, then details on demand.)

Once something needs you, how do you reach it?

The list told you what is wrong. Now you have to get to it. Drill down — and notice the shape never changes.

2 — Overview → zoom → details (Shneiderman)
status
Accounts

Click an account, then an org, then an agent — notice the rollup-filter-details shape never changes.

The same shape at every level: a rollup, a status filter, details on demand. Click to descend; the breadcrumb climbs back.

Account → org → agent → detail. At every level it's the same grammar: an overview that rolls the level up, a filter by status, and details on demand when you click. Learn it once, use it everywhere. (Shneiderman, 1996: overview first, zoom and filter, then details-on-demand — the visual-information-seeking mantra.)

Let the healthy stay silent

Which of these numbers actually deserves your eyes? Show a metric for every agent and you've built a wall no one reads. Fold the healthy away instead.

3 — Management by exception (Few)
density
fleet health
notify-0001err 26%p95 1644ms
render-0002err 3.1%p95 559ms
payments-0003err 0.1%p95 82ms
notify-0004err 36%p95 1736ms
notify-0005err 0.5%p95 74ms
ingest-0006err 2.6%p95 541ms
render-0007err 0.2%p95 120ms
payments-0008err 0.4%p95 126ms
payments-0009err 0.1%p95 44ms
notify-0010err 5.6%p95 477ms
render-0011err 0.0%p95 139ms
render-0012err 0.4%p95 161ms
ingest-0013err 0.3%p95 117ms
notify-0014err 0.1%p95 147ms
payments-0015err 0.3%p95 120ms
notify-0016err 0.2%p95 167ms
payments-0017err 0.4%p95 106ms
payments-0018err 0.5%p95 156ms
payments-0019err 0.1%p95 131ms
render-0020err 0.3%p95 33ms
notify-0021err 0.0%p95 114ms
ingest-0022err 0.5%p95 55ms
render-0023err 0.2%p95 155ms
payments-0024err 0.4%p95 100ms
billing-0025err 0.4%p95 51ms
notify-0026err 0.5%p95 50ms
ingest-0027err 0.5%p95 147ms
payments-0028err 0.5%p95 80ms
notify-0029err 0.3%p95 92ms
notify-0030err 0.5%p95 142ms
billing-0031err 0.0%p95 142ms
billing-0032err 0.5%p95 29ms
billing-0033err 4.6%p95 448ms
payments-0034err 0.2%p95 52ms
billing-0035err 0.5%p95 129ms
payments-0036err 0.5%p95 136ms
ingest-0037err 0.0%p95 81ms
billing-0038err 0.1%p95 132ms
search-0039err 0.3%p95 37ms
payments-0040err 0.3%p95 72ms
notify-0041err 0.4%p95 129ms
notify-0042err 0.5%p95 102ms
render-0043err 0.5%p95 110ms
notify-0044err 0.5%p95 89ms
notify-0045err 0.3%p95 44ms
search-0046err 0.3%p95 58ms
notify-0047err 3.1%p95 598ms
billing-0048err 0.1%p95 110ms
search-0049err 0.4%p95 82ms
render-0050err 0.2%p95 98ms
search-0051err 0.2%p95 150ms
ingest-0052err 0.0%p95 94ms
billing-0053err 0.0%p95 123ms
render-0054err 0.6%p95 49ms
billing-0055err 0.5%p95 120ms
payments-0056err 0.1%p95 39ms
render-0057err 0.2%p95 110ms
render-0058err 0.5%p95 120ms
payments-0059err 0.4%p95 53ms
billing-0060err 0.5%p95 77ms
notify-0061err 0.5%p95 148ms
billing-0062err 0.2%p95 112ms
ingest-0063err 0.3%p95 117ms
render-0064err 0.4%p95 136ms
ingest-0065err 0.2%p95 138ms
payments-0066err 0.5%p95 143ms
search-0067err 0.1%p95 158ms
billing-0068err 0.4%p95 72ms
billing-0069err 0.4%p95 33ms
payments-0070err 0.6%p95 165ms
search-0071err 0.5%p95 48ms
notify-0072err 0.5%p95 66ms
ingest-0073err 0.3%p95 33ms
billing-0074err 0.5%p95 131ms
render-0075err 0.0%p95 167ms
billing-0076err 0.6%p95 165ms
billing-0077err 0.4%p95 81ms
payments-0078err 0.5%p95 82ms
notify-0079err 0.5%p95 163ms
ingest-0080err 0.3%p95 45ms
render-0081err 0.5%p95 70ms
search-0082err 0.2%p95 85ms
ingest-0083err 0.3%p95 29ms
ingest-0084err 0.4%p95 134ms
billing-0085err 0.5%p95 47ms
search-0086err 0.4%p95 149ms
search-0087err 0.2%p95 127ms
payments-0088err 0.5%p95 124ms
notify-0089err 0.5%p95 165ms
render-0090err 0.2%p95 106ms
search-0091err 5.8%p95 613ms
billing-0092err 0.5%p95 168ms
render-0093err 0.0%p95 128ms
render-0094err 0.4%p95 150ms
notify-0095err 0.3%p95 98ms
billing-0096err 0.6%p95 110ms
notify-0097err 0.5%p95 88ms
notify-0098err 0.2%p95 47ms
payments-0099err 0.4%p95 155ms
billing-0100err 0.0%p95 91ms
render-0101err 0.5%p95 74ms
render-0102err 5.9%p95 620ms
ingest-0103err 0.4%p95 159ms
notify-0104err 0.1%p95 136ms
render-0105err 0.3%p95 78ms
payments-0106err 0.4%p95 152ms
search-0107err 0.1%p95 85ms
billing-0108err 0.1%p95 71ms
ingest-0109err 41%p95 1992ms
render-0110err 0.2%p95 112ms
search-0111err 0.6%p95 150ms
ingest-0112err 0.5%p95 137ms
ingest-0113err 4.3%p95 350ms
render-0114err 0.5%p95 30ms
render-0115err 0.2%p95 68ms
search-0116err 0.1%p95 60ms
notify-0117err 0.1%p95 49ms
notify-0118err 29%p95 1765ms
ingest-0119err 0.3%p95 37ms
render-0120err 0.2%p95 76ms

Flip to Exceptions: hundreds of healthy rows collapse to one, and the problems float up.

Everything shows a metric for every agent — a wall you can't read. Exceptions folds the healthy into a single silent line and surfaces only what's off.

In Exceptions mode the hundreds of nominal agents collapse into a single line, and only what's off stays on screen. Management by exception: silence is the default; problems are what break it.

One UI for the novice and the expert?

A first-timer wants one number and a path. A power user wants to get out of the way — search, density, saved filters. The same screen can serve both if depth is disclosed on demand.

4 — Progressive disclosure (expert-calibrated)
audience

23 agents need attention.

Switch to Expert, then type a region or click a saved filter — depth that was hidden is now the default.

Guided shows a novice one number and hides the rest until asked. Expert makes search, density and saved filters first-class — because for the experienced, search IS the disclosure.

Guided shows the minimum and hides the rest behind a click. Expert promotes search and saved filters to first-class — because for someone who knows the fleet, typing a query is the disclosure. Progressive disclosure, expert-calibrated.

Four layers, one UI

None of these mantras replaced another. They stacked. Here is the same fleet assembled into one dashboard — toggle each chip to outline the part of the screen that mantra shapes.

5 — Four layers, one UI
highlight a layer
What needs you23
ingest-0109err 41%p95 1992ms
billing-0224err 41%p95 1470ms
notify-0004err 36%p95 1736ms
+20 more
billing-01837.9%
ingest-01557.3%
ingest-01876.6%
217 healthy — folded

Toggle the four chips: each lights up a different region. Together they are the whole dashboard.

The same fleet, assembled. Toggle a layer to outline the part of this dashboard it shapes — they don't compete, they stack.

What surfaces (Keim), how you navigate (Shneiderman), what stays silent (Few), how depth unfolds (progressive disclosure) — four layers, one screen.


A note on lineage: Keim et al. (2006) and Shneiderman (1996) are the named sources above. "Management by exception" is a classic management idea that Stephen Few applied to dashboards; progressive disclosure predates its NN/g formalisation (the term goes back to the 1980s). The mantras are older than any one dashboard — what's new each time is how you stack them.