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

Вот каким дашборд был изначально:

На первый взгляд, выглядит неплохо. Сдержанная цветовая гамма, лаконичный дизайн. Претензии к заголовкам карточек и значку ''₽ исключались — такова была воля заказчика.

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

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

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

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

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

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

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

У верхнего и нижнего барчартов различается высота элементов. Из-за этого верхний выглядит грузным, а нижний мельчит и сливается. Метки данных явно будут читаться лучше, если сделать их ярче и крупнее. Тем более что места на графиках хватает.

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

Автору дашборда здорово досталось от команды при прожарке. Особенно за график, визуализирующий выручку с накоплением.

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

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

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

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

В таблице есть условное форматирование. Выделение строк накладывается на цветовое деление шрифта, и приходится напрячься, чтобы считать информацию. В таком случае разумнее изменить стиль таблицы на «Минимальный».

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

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

Чуть больше внимательности, чуть больше аккуратности — и результат уже будет совсем другим.

В результате заказчик получил на выбор два варианта с исправленными недостатками — на светлом и на темном фоне. Выбрал светлый.

Получается, вот что такое «неэлегантно» в глазах заказчика:

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

• 
  

Переделанный дашборд клиент посчитал вполне элегантным для своего забугорного начальства :) На нем нет кардинальных изменений — визуализации и их расположение остались прежними. Но мелочи изменили многое. Бывает и такое — заказчик видит эти мелочи лучше аналитика. Даже если не может объяснить, что именно ему не нравится.