Дизайн дашбордов: как сделать сложные данные понятными
Продвинутое4 минРедакция Innovialabs
Коротко
Понятный дашборд начинается не с графиков, а с вопроса, на который он отвечает: 3–5 ключевых метрик наверху, детали ниже, тип графика под задачу сравнения или динамики, а таблицы и фильтры — для тех, кому нужно действовать.
Главное: дашборд отвечает на вопросы, а не показывает всё
Хороший дашборд за несколько секунд отвечает пользователю на конкретный вопрос: «всё ли в порядке?», «где проблема?», «что делать дальше?». Если экран просто выводит все доступные данные, человек вынужден сам искать смысл — и чаще всего не находит.
Поэтому работа над дашбордом начинается с трёх вопросов:
- Кто смотрит — руководитель, менеджер по продажам, оператор поддержки.
- Как часто — раз в неделю для обзора или весь день как рабочий инструмент.
- Какое решение он принимает после просмотра.
Дашборд руководителя и рабочий экран оператора CRM — это разные продукты, даже если данные в них одни и те же.
Определите ключевые метрики
Для каждой роли выберите 3–5 метрик, которые действительно влияют на решения. Всё остальное — вторичный уровень, который открывается по клику.
Проверка для каждой метрики:
- Понятно ли, хорошо это значение или плохо? Число без контекста бесполезно. Добавьте сравнение: с прошлым периодом, с целью, с нормой.
- Может ли пользователь на неё повлиять? Если нет, ей место в отчёте, а не на главном экране.
- Одинаково ли её понимают все? «Активный клиент» в отделе продаж и в бухгалтерии часто означает разное. Договоритесь об определении до дизайна.
Карточка метрики обычно содержит: название, текущее значение, изменение относительно периода и, при необходимости, мини-график (sparkline) с трендом.
Приоритет в раскладке
Взгляд пользователя идёт сверху вниз и слева направо, поэтому раскладка строится по убыванию важности:
- Верхняя полоса — ключевые метрики в карточках.
- Середина — графики, объясняющие эти метрики: динамика, разбивка по сегментам.
- Низ — детальные таблицы и списки для работы.
Практические правила:
- Используйте сетку (например, 12 колонок) и единые отступы — визуальный порядок снижает когнитивную нагрузку.
- Связанные данные ставьте рядом, а не в разных углах экрана.
- Не делайте все блоки одинакового размера: размер сигнализирует важность.
- Цвет-акцент оставьте для отклонений и тревог. Если всё яркое, ничего не выделяется.
Как выбрать тип графика
Тип графика зависит от того, что пользователь должен увидеть.
| Задача | Подходящий график | Чего избегать |
|---|---|---|
| Динамика во времени | Линейный график, столбцы по периодам | Круговая диаграмма |
| Сравнение категорий | Горизонтальные столбцы, отсортированные по значению | 3D-эффекты |
| Доля от целого (2–4 части) | Stacked bar, иногда кольцевая диаграмма | Круг с десятью секторами |
| Воронка этапов | Воронка или столбцы этапов с конверсией | Разрозненные карточки |
| Распределение | Гистограмма | Среднее значение без разброса |
| Прогресс к цели | Шкала прогресса, bullet chart | Спидометры |
Общие правила: ось Y у столбцов начинается с нуля, подписи читаются без наклона, легенда стоит рядом с данными или заменена прямыми подписями, а количество цветов в одном графике минимально. Учитывайте дальтонизм: не кодируйте смысл только красным и зелёным, добавляйте знак, иконку или подпись.
Таблицы: рабочая лошадка админки
В админках и CRM большую часть времени пользователь работает именно с таблицами. Что делает их удобными:
- Числа выравниваются по правому краю, текст — по левому, используйте моноширинные (tabular) цифры.
- Самые важные колонки — слева; редкие можно скрыть и дать настроить набор колонок.
- Закреплённая шапка и первая колонка при прокрутке.
- Сортировка по клику на заголовок с понятным индикатором направления.
- Статусы — короткими цветовыми метками с текстом, а не только цветом.
- Массовые действия появляются при выборе строк, а не висят постоянно.
- Продуманные пустые состояния и состояния загрузки: «нет данных за период» лучше пустой таблицы.
Фильтры и плотность
Фильтры размещайте в одном предсказуемом месте — над контентом или в боковой панели. Активные фильтры должны быть видны всегда, с возможностью сбросить каждый по отдельности и все сразу. Период (дата) обычно главный фильтр — сделайте его заметным и добавьте быстрые пресеты: «сегодня», «7 дней», «месяц». Полезно сохранять состояние фильтров в URL, чтобы экраном можно было поделиться.
Плотность зависит от сценария. Обзорному дашборду нужен воздух. Оператору, который весь день обрабатывает заявки, нужна высокая плотность: больше строк на экране, меньше прокрутки. Хорошее решение — переключатель плотности (компактный / обычный) и единая шкала отступов в дизайн-системе.
Частые ошибки
- Десятки метрик на первом экране «на всякий случай».
- Числа без сравнения и без единиц измерения.
- Декоративные графики, которые выглядят эффектно, но не читаются.
- Разные форматы дат и чисел на одном экране.
- Дизайн на идеальных данных: проверьте длинные названия, нули, пропуски и очень большие значения.
- Нет ответа на вопрос «что делать дальше» — ни ссылки на детали, ни действия.