Как сделать неплохой дашборд еще лучше: кейс от моего стажера

Покажу, как выполнил это задание один из стажеров, Артём Ганин. Он выбрал дашборд из галереи Tableau о работе колл-центра. Что-то похвалил, что-то поругал. И предложил вариант, который, по его мнению, улучшит продукт.

Для начала разберемся в исходном макете: как он составлен и о чем рассказывают разные блоки.

• В левом блоке — сводная информация по основным метрикам и срезам в работе колл-центра.

• Вверху справа — диаграмма с динамикой количества звонков по дням или по неделям: данные можно фильтровать.

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

Чаще всего основные показатели размещают в верхней части дашборда в виде карточек KPI. Здесь же они находятся в левом блоке, и гранулярность данных увеличивается слева направо. Это решение выглядит удачным, потому что у основных метрик есть базовые уровни детализации (например, город, оценка или причина звонка), которые нельзя объединить в один тотал.

Блок «Navigation» автор дашборда расположил в блоке с KPI. Более удачным решением стал бы его перенос: навигацию можно сделать в виде аккуратных вкладок сверху, чтобы они не отвлекали от основной визуализации. На освободившееся место перенести общее количество звонков, а рядом расположить показатель их средней длительности, который затерялся среди других диаграмм.

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

Во-первых, вызывает вопросы сортировка показателей в барчартах. Например, колл-центры отсортированы по убыванию количества звонков, оценки звонков — непонятно, по какому признаку, тональность звонков — от позитивной к негативной, без учета показателей.

Даже если просто выделить цветом максимальные значения (так как в целом нужно оценить эффективность колл-центров), это уже упростит восприятие.

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

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

Так как нам важно отслеживать тренд, сюда могла бы вписаться диаграмма area graph. Дельта между днями не очень большая, да и выделение min/max с помощью кругов было бы более удобным, понятным и наглядным.

Автор дашборда выбрал пай чарт для визуализации качества сервиса (SERVICE LEVEL AGREEMENT). Во-первых, если это дашборд для широкого круга пользователей, то не хватает какого-нибудь тултипа с пояснением, что это за метрика.

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

Артём не только раскритиковал дашборд, но и предложил свою версию. Даже немного пошутил, приложив к работе такой вот мем:

В общем-то, я с ним согласен: дашборд и правда стал выглядеть лучше, а восприниматься проще. Это особенно ценно, если учесть, что работа была сделана через месяц после начала стажировки.

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