Карьерный рост аналитика. Статья Алексея Колоколова

7 ошибок аналитика, или Как разработать элегантный дашборд

Дашборды моих аналитиков не всегда идеальны. И не всегда они нравятся клиентам. Эта история — как раз о таком случае. Заказчик не принял дашборд и объяснил это вот так:

— Ну… как-то неэлегантно. Мы не сможем показать такое нашим руководителям из Германии. Сделайте как-то по-другому?

«Неэлегантно» — не самая точная формулировка. Кто-то даже скажет, что чистая вкусовщина. Но нет. Просто клиент не всегда может указать на конкретные недостатки. Аналитик же обязан их видеть.
Вот каким дашборд был изначально:
Дашборд в Power BI, которому нужна переверстка
Дашборд, который клиент назвал неэлегантным
На первый взгляд, выглядит неплохо. Сдержанная цветовая гамма, лаконичный дизайн. Претензии к заголовкам карточек и значку ''₽ исключались — такова была воля заказчика.
Я решил отдать дашборд на растерзание своей команде аналитиков и дизайнеров. И заодно проверить, смогут ли они найти откровенные косяки как в визуальном оформлении, так и в подаче данных. Расскажу, что нашли.

1. Фон заголовка

Есть такая фраза: «Мелочи решают все». И она вполне подходит для описания этого недостатка дашборда.

Фон заголовка — на несколько тонов темнее, чем фон самого дашборда. В некоторых случаях такой прием действительно добавляет выразительности. Но в выбранной цветовой гамме он сделал дашборд «грязным».
Слишком темный фон заголовка делает дашборд «тяжелым»
Неправильный цвет может добавить «тяжести» дашборду

2. Форма карточек KPI

Закругленные углы у карточек ключевых показателей (KPI) резко контрастируют с формой других визуальных элементов. В результате восприятие вертикальной структуры дашборда просто теряется.

А еще у меня есть четкое правило о количестве карточек на дашборде: их должно быть не больше 6. В этом случае заказчик настоял, чтобы оставили 7.
Форма карточек на дашборде должна быть такой же, как и у других элементов
Карточки KPI: соблюдайте форму. Да и количество тоже

3. Кнопки-переключатели

Иногда аналитиков явно тянет на бессмысленные украшательства. В кнопках-переключателях — сразу два явных косяка:

  1. в некоторых надписях — Caps Lock, в некоторых — строчные буквы;
  2. цвет активных кнопок тоже разный. Еще бы вариант с золотом добавил, ей-богу.
Сходные по смыслу и функциям элементы должны быть оформлены единообразно! Если вас тянет сделать по-другому — остановите себя.
Кнопки-переключатели на дашборде должны быть одинаковыми
Иногда разнообразие нарушает логику

4. Барчарты

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

У верхнего и нижнего барчартов различается высота элементов. Из-за этого верхний выглядит грузным, а нижний мельчит и сливается. Метки данных явно будут читаться лучше, если сделать их ярче и крупнее. Тем более что места на графиках хватает.
Барчарты на дашборде: следите за балансом
Выстраивайте элементы по одной оси
Лично я предпочел бы вместо верхнего барчарта использовать буллетчарт, чтобы показать выполнение плана по каждой группе товаров. Такое решение мы тоже предлагали заказчику, но в итоге заменили его на более «продвинутый» вариант. Сохранили вертикаль и единообразие барчартов, но к тому же вывели показатели выполнения плана по группам товаров с помощью дополнительных меток данных и Calculation Groups.

5. График выручки

Автору дашборда здорово досталось от команды при прожарке. Особенно за график, визуализирующий выручку с накоплением.
Не располагайте легенду под графиком
Ошибки в графике по выручке
Легенда — внизу, реально?! Хотел спросить, откуда взялась эта гениальная находка, но не нашел цензурных слов. Человек читает график слева направо и сверху вниз, если вдруг кто не знал. Поместить легенду под графиком — это все равно что назвать имена главных персонажей книги в послесловии! Абсурд, одним словом.
Не будем придираться к оси Y — посчитаем, что с такой плотностью данных это отображение оправдано. Но нужно учесть, как это сказывается на визуальном восприятии! Толстая серая сетка делает график тяжелым и грубым. Избежать этого поможет даже небольшой апгрейд — пунктирные линии вместо сплошных.

Отдельные претензии — к линии отклонения от плана. Ну ведь очевидно, что серое на сером не читается! Во-первых, здесь напрашивается контрастное цветовое разделение положительных и отрицательных величин. Во-вторых, эту линию вполне можно отделить от основного план-факта и переместить наверх.

Забегая вперед, скажу, что в итоге эту визуальную связку решили не разрывать — клиенту было легче и привычнее читать данные именно так. Но положительные и отрицательные показатели разделили по цветам, чтобы результат был понятен с первого взгляда.

6. Таблица

Кроме графика, есть еще и таблица с данными по выручке. И к ней не меньше вопросов. Во-первых, оформление строк. Сразу видно: аналитик хотел сделать «красиво». А получилось черт знает что.

В таблице есть условное форматирование. Выделение строк накладывается на цветовое деление шрифта, и приходится напрячься, чтобы считать информацию. В таком случае разумнее изменить стиль таблицы на «Минимальный».
Явный косяк: один тип форматирования — и для абсолютных, и для относительных величин! Так. Делать. Нельзя. Разделяйте цветом относительные величины, а для абсолютных используйте форматирование гистограммами.
В относительных величинах мы обычно отслеживаем отклонения показателей, и цветовое выделение акцентирует внимание именно на этом. Сразу видно, где рост, а где провал. А вот в абсолютных числах нам важно отследить распределение показателей внутри категории. И гистограмма четко иллюстрирует, кто работал эффективно, а кто «просел».

7. И снова мелочи. Которые решают все

Из одних только «мелочей» можно собрать целый список косяков. Сразу режет глаз несимметричное расположение элементов и расстояние между ними. График справа буквально врезается в край дашборда: кажется, что он показан нам не полностью. Из-за таких вещей дашборд становится небрежным и неопрятным.
Элементы на дашборде нужно располагать симметрично

А как надо было?

Чуть больше внимательности, чуть больше аккуратности — и результат уже будет совсем другим.
Сказать честно, я бы перечисленными переделками не ограничился: этот дашборд можно сделать лучше. Но последнее слово остается за клиентом — ему понравился именно тот вариант, что мы предложили после коллективной прожарки.
В результате заказчик получил на выбор два варианта с исправленными недостатками — на светлом и на темном фоне. Выбрал светлый.
Получается, вот что такое «неэлегантно» в глазах заказчика:

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

Переделанный дашборд клиент посчитал вполне элегантным для своего забугорного начальства :) На нем нет кардинальных изменений — визуализации и их расположение остались прежними. Но мелочи изменили многое. Бывает и такое — заказчик видит эти мелочи лучше аналитика. Даже если не может объяснить, что именно ему не нравится.
Если вы еще не получаете все новости и полезные материалы Института бизнес-аналитики первыми, подписаться на рассылку можно внизу этой страницы. Надеюсь, статья была вам полезной и подарила парочку инсайтов.
Читайте также
Подпишись на рассылку и получи в подарок «Каталог лучших отраслевых дашбордов»!
Хочешь получать актуальные статьи о визуализации данных?