Vlad VityukІнтерактивні пояснення

Анатомія флотового дашборда

Ти будуєш один екран, щоб стежити за флотом агентів. Є чотири дизайн-мантри, які всі повторюють, — і звучать вони так, ніби конкурують. Насправді ні. Кожна живе на своєму шарі, і добрий дашборд складає всі чотири разом.

Кожне вікно нижче читає той самий флот — один засіяний набір акаунтів, оргів і агентів. Дані не змінюються; змінюється лише лінза — а з нею перебудовується й екран.

Показуй те, що потребує уваги, а не все

Як показати флот із тисяч агентів одним поглядом? Перший інстинкт — сітка: по клітинці на агента, увесь флот одразу. Збільш розмір — і відчуй, як цей інстинкт ламається. А потім перемкни лінзу.

1 — Спершу аналіз (Keim)
розмір флоту
вигляд
1,000 клітинок на екрані

Витягни повзунок на 5000 і спробуй знайти червоні клітинки — а тоді перемкни на «Спершу аналіз», і вони стануть коротким списком.

Збільш флот до 5000 агентів і перемкни вигляд. «Усе одразу» заливає екран клітинками — ті кілька, що горять, тонуть у морі зеленого; «спершу аналіз» прибирає здорових і лишає тільки те, що потребує людини.

На дванадцяти агентах огляд цілком робочий. На п'яти тисячах — це вже шум: жменька агентів, що справді горять, губиться в морі зеленого. Спершу аналіз — обчисли винятки й покажи тільки їх. (Keim et al., 2006: спершу аналіз, покажи важливе, наближай і фільтруй, тоді деталі на вимогу.)

Коли щось потребує уваги — як до нього дістатися?

Список сказав, що не так. Тепер треба дістатися до нього. Заглиблюйся — і поміть, що форма щоразу та сама.

2 — Огляд → наближення → деталі (Shneiderman)
статус
Акаунти

Клікни акаунт, тоді орг, тоді агента — і поміть, що форма «огляд → фільтр → деталі» щоразу та сама.

На кожному рівні — та сама форма: загальна картина, фільтр за статусом і деталі на вимогу. Клікай, щоб заглибитися; шлях угорі веде назад.

Акаунт → орг → агент → деталі. На кожному рівні це та сама граматика: загальна картина, фільтр за статусом і деталі на вимогу, коли клікнеш. Вивчив раз — користуєшся всюди. (Shneiderman, 1996: спершу огляд, наближай і фільтруй, тоді деталі на вимогу — мантра пошуку візуальної інформації.)

Дай здоровому мовчати

Які з цих чисел справді варті твоїх очей? Покажи метрику для кожного агента — і ти збудував стіну, якої ніхто не читає. Натомість згорни здорове.

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

Перемкни на «Винятки»: сотні здорових рядків стискаються в один, а проблеми спливають угору.

«Усе» показує метрику для кожного агента — стіну, якої ніхто не читає. «Винятки» згортають здорових в один тихий рядок і лишають на видноті лише те, що не так.

У режимі Винятки сотні справних агентів стискаються в один рядок, а на екрані лишається тільки те, що не так. Керування за винятками: тиша — це норма, а проблема — те, що її порушує.

Один UI і для новачка, і для експерта?

Новачок хоче одне число й підказку, куди йти. Досвідчений хоче, щоб ти не заважав — дай пошук, щільність, збережені фільтри. Той самий екран може служити обом, якщо глибина розкривається на вимогу.

4 — Прогресивне розкриття (під рівень експерта)
аудиторія

23 агентів потребують уваги.

Перемкни на «Експерт», введи регіон або клікни збережений фільтр — і глибина, що була схована, стає тим, що бачиш одразу.

«З гідом» показує новачку одне число, а решту ховає до першого кліку. «Експерт» виносить пошук, щільність і збережені фільтри на передній план — бо для досвідченого пошук і є розкриттям.

З гідом показує мінімум, а решту ховає за кліком. Експерт виносить пошук і збережені фільтри на передній план — бо для того, хто знає свій флот, ввести запит і є розкриттям. Прогресивне розкриття, відкаліброване під експерта.

Чотири шари, один UI

Жодна з цих мантр не замінила іншу. Вони наклалися. Ось той самий флот, зібраний в один дашборд, — перемикай чіпи, щоб обвести ту частину екрана, яку формує кожна мантра.

5 — Чотири шари, один UI
підсвітити шар
Що потребує твоєї уваги23
ingest-0109пом 41%p95 1992мс
billing-0224пом 41%p95 1470мс
notify-0004пом 36%p95 1736мс
ще +20
billing-01837.9%
ingest-01557.3%
ingest-01876.6%
217 здорових — згорнуто

Перемикай чотири чіпи: кожен підсвічує свою ділянку. Разом вони — увесь дашборд.

Той самий флот, зібраний докупи. Вмикай шар, щоб обвести ту частину дашборда, яку він формує — вони не конкурують, а нашаровуються.

Що спливає (Keim), як ти навігуєш (Shneiderman), що лишається тихим (Few), як розгортається глибина (прогресивне розкриття) — чотири шари, один екран.


Про походження: Keim et al. (2006) і Shneiderman (1996) — це названі джерела вище. «Керування за винятками» — класична управлінська ідея, яку Стівен Ф'ю переніс на дашборди; прогресивне розкриття старше за формалізацію від NN/g (сам термін сягає 1980-х). Мантри старші за будь-який окремий дашборд — нове щоразу те, як ти їх складаєш.