Дизайн дашборду: 12 правил, щоб ним справді користувалися

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

#1. Одне рішення — один екран

Перед дизайном запишіть: хто дивиться, як часто і яке рішення ухвалює. «Власник щопонеділка вирішує, куди перерозподілити рекламний бюджет» — це ТЗ для екрана. Детальніше — у гайді з бізнес-дашбордів.

#2. Ієрархія: зверху — головне

Око читає зверху вниз і зліва направо — найважливіше має бути в лівому верхньому куті.

#3. Кожне число — з контекстом

«Виручка 412 000 грн» нічого не каже. «412 000 грн, +8% до минулого місяця, 92% плану» — каже. Додавайте до KPI порівняння з попереднім періодом, планом або тим самим періодом минулого року.

#4. Правильний тип графіка

Уникайте 3D, «спідометрів» і кругових діаграм з десятьма секторами.

#5. Не більше 7–9 віджетів на екрані

Якщо треба більше — це інший екран або інша аудиторія.

#6. Колір несе зміст

• нейтральна основа (сірий, один фірмовий колір);
• червоний/зелений лише для «погано/добре»;
• однаковий колір для того самого каналу на всіх графіках.

#7. Не лише колір

Близько 8% чоловіків мають порушення розпізнавання кольорів (за даними NEI). Дублюйте колір знаками (▲▼), підписами або формою. Контраст тексту — щонайменше 4.5:1 за WCAG.

#8. Вісь Y стовпчиків — від нуля

Обрізана вісь робить 3% різниці візуально подвійною. Для лінійних графіків допустимо не від нуля, але явно позначайте масштаб.

#9. Зрозумілі назви й визначення

«CR» — для кого? Пишіть «Конверсія в оплату», а в підказці — формулу. Назва графіка може бути висновком: «Повторні покупки ростуть третій місяць».

#10. Фільтри — мінімум і однаково

Період, канал, регіон — у шапці, діють на весь екран. Поточний стан фільтрів має бути видно.

#11. Мобільна версія — окремо продумана

Власники часто дивляться дашборд з телефону. На вузькому екрані: KPI-картки в одну колонку, графіки на всю ширину, таблиці — з горизонтальним скролом або скорочені до топ-5. Для простих випадків підходить статичний мікродашборд.

#12. Свіжість даних на видноті

«Оновлено: сьогодні 07:00» у кутку екрана знімає половину питань «а це актуально?».

#Типові помилки

#Чекліст перед запуском

• Записано аудиторію і рішення для кожного екрана
• 4–6 KPI зверху з порівнянням
• Типи графіків відповідають задачам
• Колір не єдиний носій змісту, контраст ≥ 4.5:1
• Визначення метрик у підказках
• Перевірено на телефоні
• Видно час оновлення даних
• Завантаження до кількох секунд

#Приклад: редизайн перевантаженого екрана

Типовий екран «до» в ілюстративному дашборді магазину: 18 віджетів, серед них 6 кругових діаграм, два «спідометри», таблиця на 25 колонок, виручка в трьох місцях (одна з ПДВ, дві без) і жодних порівнянь.

Редизайн покроково:

1. Інтерв'ю з головним користувачем — власником: «Щопонеділка вирішую, чи міняти рекламні бюджети і чи дозамовляти бестселери».
2. Лишаємо лише віджети, що служать цим двом рішенням. Їх 7.
3. Чотири KPI нагорі: виручка, замовлення, маржинальний прибуток, реклама — кожен з «до минулого тижня» і «до плану».
4. Кругові діаграми замінюємо одним відсортованим стовпчиковим графіком: маржа за каналами.
5. Таблицю на 25 колонок замінюємо топ-10 товарів на 5 колонок: одиниці, виручка, маржа %, днів запасу, зміна.
6. Виручка — одне визначення, з підказкою.
7. Решту переносимо на другий екран «Деталі» для маркетолога.

Тест з останнього рядка — з чекліста нижче. Застосуйте його до своїх екранів: попросіть цільового користувача відповісти на його головне запитання і засічіть час.

#Правила форматування чисел

Дрібні рішення у форматуванні визначають, чи читається екран миттєво, чи доводиться вдивлятися:

Вирівнюйте числа в таблицях праворуч, щоб розряди стояли один під одним, і використовуйте табличні (моноширинні) цифри, якщо шрифт їх підтримує.

#Таблиці, що працюють

Таблиці часто найвикористовуваніша частина дашборду — і найменш продумана:

• Сортування за замовчуванням відповідає на головне запитання (для екрана перегляду — спершу найгірші)
• 5–7 колонок у першому вигляді, решта — за перемикачем чи у вивантаженні
• Умовне форматування лише на одній важливій колонці, а не всюди
• Рядок підсумків угорі або чітко відокремлений унизу
• Обмеження рядків із посиланням «показати всі» — 87-й рядок ніхто не читає
• Закріплені заголовок і перша колонка на телефоні

#Анотації — найдешевший контекст

Позначайте події прямо на графіках у часі: зміну цін, реліз сайту, запуск великої кампанії, виправлення трекінгу. Маленька точка з підписом («виправлення оформлення, 14 жов») економить цілу нараду на тему «а що тут сталося?». Тримайте список анотацій у простій таблиці у сховищі, щоб кожен графік міг її читати, і додавайте записи в межах щотижневої рутини.

#Доступність — не лише колір

Доступні дашборди легше читати всім. Крім контрасту і палітр, безпечних для дальтоніків:

• У графіків є короткий текстовий підсумок для екранних читачів (і для тих, хто читає побіжно)
• Інтерактивні елементи доступні з клавіатури, з помітним фокусом
• Розмір шрифту підписів — щонайменше 14 px, приміток — 12 px
• Ключові числа не лише в підказках при наведенні: на сенсорних екранах наведення немає

Повний перелік критеріїв — у короткому довіднику WCAG 2.2.

#Часті запитання

#Скільки екранів має бути в дашборді?

Стільки, скільки різних аудиторій і рішень. Для малого бізнесу часто вистачає 3–5: загальний огляд, маркетинг, продажі, фінанси.

#Чи потрібен дизайнер для дашборду?

Для внутрішнього дашборду достатньо дотримуватись правил вище. Для клієнтського продукту чи звітів для клієнтів агенції дизайн окупається.

#Темна чи світла тема?

Обидві працюють, якщо дотримано контрасту. Важливіше узгодженість кольорів і читабельність.

#Як перевірити, що дашборд зрозумілий?

Дайте його людині з цільової аудиторії і попросіть за 30 секунд відповісти, чи все добре. Якщо не може — спрощуйте.