Ниже — разбор реального графика с популярного дашборда в Авито. Цифры и разрезы приведены условно, но дизайн визуализации воспроизведён точно. Это хороший пример того, как привычные инструменты — линейный график и двойные оси — могут работать против пользователя, а не на него.
Что было не так с исходным графиком
На исходном графике отображалась доля жалоб на заказ от общего числа заказов в разрезе категорий товаров. На первый взгляд — стандартная визуализация. Но у неё было сразу три проблемы.
- Категории товаров соединены линейным графиком. Линия подразумевает непрерывность и динамику во времени, но здесь ось X — это категории, а не даты. В результате вместо сравнения категорий пользователь видит псевдодинамику: ощущение, что метрика «растёт» или «падает», хотя никакого тренда нет.
- Фокус смещён не на ту метрику. График посвящён жалобам, но внимание пользователя фактически уходит на количество заказов — именно по ним выполнена сортировка и именно они визуально доминируют.
- Используются двойные оси. Два разных масштаба на одном графике усложняют считывание: мозг вынужден переключаться между осями. Ключевая функция дашборда — быстрое и прозрачное восприятие данных, и двойные оси прямо противоречат этому принципу.
Как выглядит исправленная версия
Чтобы пользователь мог быстро и однозначно получить нужную информацию, акцент был перенесён на долю обращений. Вместо одного перегруженного графика — три отдельных горизонтальных барчарта.
- Первый барчарт — доля обращений по категориям с подсветкой тех, по которым не выполняется целевой показатель (таргет). Пользователь сразу видит проблемные зоны.
- Второй барчарт — абсолютное число обращений. Он даёт понимание масштаба проблемы: высокая доля в маленькой категории и высокая доля в крупной — это совсем разные ситуации.
- Третий барчарт — вспомогательный, с количеством заказов. Он даёт контекст, но намеренно вынесен на третье место, чтобы не отвлекать от главного.
Почему горизонтальный барчарт лучше
Горизонтальный столбчатый график — один из наиболее универсальных инструментов для сравнения дискретных категорий. Он не создаёт иллюзии тренда, позволяет читать длинные названия категорий без поворота головы и легко масштабируется при добавлении новых строк. Разбивка одной сложной визуализации на несколько простых также снижает когнитивную нагрузку: каждый чарт отвечает ровно на один вопрос.
Что сделать на практике
- Перед созданием графика сформулируйте один главный вопрос, на который он должен отвечать.
- Избегайте линейного графика там, где ось X — категории, а не временной ряд.
- Откажитесь от двойных осей: если метрики нельзя показать на одной шкале — лучше разделить их на два отдельных графика.
- Используйте сортировку, которая отражает приоритет задачи: если важна доля жалоб — сортируйте по ней, а не по объёму заказов.
- Подсвечивайте выбросы и нарушения таргета цветом — это быстрее, чем любой текстовый комментарий.
Вывод
Улучшить визуализацию можно даже в рамках ограниченного BI-инструмента — в данном случае это был Redash, менее гибкий, чем Tableau, но достаточный для правильной подачи данных. Главное — сначала решить вопрос структуры и фокуса, а потом уже думать об инструменте.