Критикуем авторитетов: как мы переверстали дашборд KPMG

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

Ежегодно KPMG выпускает исследование о слияниях и поглощениях в мировой бизнес-среде (M&A-Радар). Раньше оно было в PDF из 50+ слайдов, но в 2021 году вышло в формате интерактивного дашборда в Power BI. Вся информация уместилась на 10 страницах. Именно эту работу Екатерина и взяла на «прожарку».

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

Дашборд выглядит стильно и аккуратно, оформление полностью соответствует корпоративному стилю. И это не единственное очевидное преимущество. Рассмотрим несколько.

1. Слева есть меню, понятное каждому пользователю — однозначный плюс, которым часто пренебрегают.

2. Контрастные цвета помогают легко считывать информацию, а кнопки навигации в правом верхнем углу — удобно переходить по страницам.

3. Дата на панели слева (30 июня 2021 года) помогает сразу понять, на какой период все данные в исследовании были актуальными.

4. Дашборд адаптирован для пользователей с разной подготовкой. Кроме титульной страницы и описания методологии исследования, есть инструкция по использованию этого интерактивного инструмента.

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

Мы сделали такую инструкцию по-своему, и теперь каждый наш клиент получает встроенные в дашборд страницы с понятным руководством для новичков и даже с gif-анимацией. Пример того, как насмотренность принесла практическую пользу и нам. И помогла делать наши продукты лучше.

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

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

Где-то остались детали дополнительной оси — вроде мелочь, но +1 к неаккуратности. А местами есть даже диаграммы, которые просто дублируют информацию.

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

В отчете KPMG некоторые легенды находятся под диаграммами. Это усложняет и замедляет анализ данных. Мы увидели диаграмму, не поняли, о чем она, только потом наткнулись на легенду и… приходится снова возвращаться к диаграмме. На некоторых же визуальных элементах легенды просто нет. Значит, у пользователя нет возможности понять, что они показывают.

Переходим к отдельным страницам M&A-Радара. Сначала рассмотрим «Отраслевой анализ» и разберем нарушения правил визуализации данных. Вот как выглядел этот дашборд у KPMG.

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

Есть претензия и к расположению элементов в карточках. Правило все то же: в первую очередь мы должны понять, что показывает число. То есть сначала — заголовок, а уже под ним — показатель. Я не назову это фатальной ошибкой, но учитывать особенности восприятия все-таки стоит.

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

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

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

1. Карточки KPI разместили в верхней части дашборда, чтобы пользователь сразу видел главное.

2. Столбчатые диаграммы объединили, добавив переключатель в область фильтров — удобно смотреть данные о сделках в разрезе их сумм или количества.

3. Кольцевые диаграммы по географии сделок тоже объединили в одну: клик по переключателю слева выведет данные либо по суммам, либо по количеству. Метки категорий перенесли из легенды ближе к секторам.

4. Упорядочили уровни информации. Сначала — общие данные по географии, потом — по конкретным отраслям.

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

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

Что должен увидеть пользователь на этой карте и какой вывод он может сделать? К сожалению, это осталось секретом. Легенды для пояснения над картой нет. Впрочем, нет ее и под картой. Остается только домысливать, что хотели показать создатели дашборда. Мы видим только то, что этот визуальный элемент занимает 80% рабочего пространства при минимуме информации.

Главная ошибка на этом листе отчета — показатели вынесены в область фильтров! Это значит, что им достанется минимум пользовательского внимания. Или не достанется совсем.

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

В переделанном варианте эта страница изменилась значительно. Вот как она стала выглядеть.

1. Фильтры переместили в правую верхнюю часть дашборда: их всего два, и выделять им целую панель нецелесообразно.

2. Показатели с панели перенесли на отдельные диаграммы. Так информация становится наглядной и сразу видно, в какой отрасли самые дорогие сделки.

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

Нельзя не прожарить страницу KPMG о продажах иностранным инвесторам! Буйство красок, которое, к сожалению, никак себя не оправдывает. Судите сами.

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

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

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

Диаграмма с динамикой сделок по годам стоит первой. Но на ней уже все-таки частности: сначала необходимо проанализировать структуру по регионам. А значит, диаграммы нужно менять местами.

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

1. Перенесли фильтры и переключатель из левой панели в правую верхнюю часть дашборда. Так они занимают гораздо меньше ценного пространства.

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

3. Убрали карту справа, которую, судя по всему, делали исключительно для красоты. Она не несла никакой информации, а значит, просто занимала место и отвлекала.

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

5. Переделали диаграмму динамики с количеством сделок по годам — убрали нагромождение показателей. Чтобы посмотреть данные по конкретному региону, достаточно выбрать его в матрице, и диаграмма выведет только нужную информацию.

6. Переместили диаграмму динамики количества сделок, чтобы не нарушать правила уровней информации.

Вот как отличаются проанализированные страницы исследования до и после переверстки. Листайте, чтобы увидеть все варианты.

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

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

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

Я стараюсь следовать этому во всех направлениях своей работы. Например, в обучающих программах мы со студентами изучаем галереи Power BI и Tableau. Оптимизируем выбранные решения и обсуждаем, как сделать их лучше для бизнеса. Это развивает насмотренность и пополняет багаж знаний.

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