Дизайн дашборда: как разместить метрики, чтобы отчёт читали

Дашборд создаётся для того, чтобы человек за короткое время понял положение дел и решил, что делать. Если для этого нужно разглядывать мелкие графики, искать нужную цифру и вспоминать, что означает цвет, дашборд не работает, как бы эффектно он ни выглядел. Хороший дизайн отчёта — это не украшения, а порядок.

Начните с вопросов, а не с данных

Перед проектированием запишите вопросы, на которые дашборд должен отвечать. Для руководителя отдела продаж это может быть:

• выполняем ли мы план месяца
• какие менеджеры отстают
• откуда приходят заявки и какие каналы дают продажи
• где застревают сделки

Каждый блок дашборда должен отвечать на один из вопросов. Если блок ни на что не отвечает — он лишний.

Один дашборд — одна аудитория

Директору, руководителю отдела и менеджеру нужны разные отчёты. Директору — несколько итоговых цифр и тренды. Руководителю отдела — разбивка по сотрудникам и этапам. Менеджеру — его собственные сделки и задачи. Попытка сделать один отчёт для всех приводит к перегруженному экрану, на котором каждый ищет своё.

Иерархия информации

Люди читают экран сверху вниз и слева направо. Используйте это:

1. Вверху — ключевые показатели крупными цифрами: выручка, план, количество сделок, с изменением к прошлому периоду
2. В середине — графики динамики и сравнения, объясняющие эти цифры
3. Внизу — детальные таблицы для тех, кто хочет разобраться глубже

Такой порядок позволяет за несколько секунд получить ответ на главный вопрос, а при необходимости — углубиться.

Сетка и выравнивание

Размещайте элементы по единой сетке, с одинаковыми отступами. Блоки одного уровня важности — одинакового размера. Выравнивание кажется мелочью, но неровный дашборд воспринимается как неаккуратный, и доверие к цифрам снижается.

Выбор графика

• Динамика во времени — линейный график
• Сравнение категорий — горизонтальные столбцы, отсортированные по значению
• Доли целого — столбец с накоплением или, если сегментов немного, круговая диаграмма
• Отклонение от плана — столбцы с линией цели или маркер
• Одна ключевая цифра — карточка с числом и динамикой

Избегайте трёхмерных диаграмм, спидометров, которые занимают много места ради одной цифры, и графиков с двумя осями, которые легко неправильно прочитать.

Цвет

Цвет должен нести смысл. Правила:

• один основной цвет для данных, акцентный — для того, что требует внимания
• красный и зелёный — только для «плохо» и «хорошо», и с дополнительными обозначениями для людей с особенностями цветового восприятия
• одна и та же категория — одного цвета на всех графиках
• серый для второстепенного: прошлые периоды, сравнительные линии

Если на дашборде всё яркое, ничего не выделяется.

Подписи и контекст

Цифра без контекста ничего не говорит. Рядом с показателем укажите: за какой период, по сравнению с чем, какова цель. Заголовок графика лучше формулировать как вывод или вопрос: «Заявки из Telegram растут третью неделю» информативнее, чем «Заявки по каналам». Подписывайте оси и единицы измерения. Указывайте дату обновления данных.

Фильтры

Фильтры размещайте в одном месте — обычно вверху или слева. Самые частые: период, подразделение, менеджер. Значения фильтров по умолчанию должны показывать самое востребованное — например, текущий месяц. Слишком много фильтров усложняют отчёт: если ими никто не пользуется, уберите их.

Проверка на пользователях

Покажите черновик дашборда будущим пользователям и попросите ответить на вопросы, для которых он создавался. Засеките, сколько времени это займёт, и посмотрите, где они путаются. Такая проверка выявляет проблемы, которые автор не замечает. После запуска смотрите, какие страницы открывают, а какие нет.

Частые ошибки

• Всё на одном экране без иерархии
• Сложные графики там, где хватит цифры
• Разная цветовая логика на соседних графиках
• Нет сравнения с планом или прошлым периодом
• Дашборд создан без участия тех, кто будет им пользоваться

Если нужен дашборд, который руководители действительно открывают каждый день, напишите — спроектируем его под ваши вопросы и данные.