Дашборд – лицо аналитика. В зависимости от того, насколько он понятен и красив, его пользователь будет принимать верные решения. Понятен и красив – очень субъективные понятия. В этой статье попробуем взглянуть на них через исследования, практику и опыт, чтобы сформулировать правила того, как можно и как лучше не стоит визуализировать данные на дашборде.
Привет, это Анна Васичко, методист Академии PIX. В марте мы выпустили новый урок в рамках PIX Триатлона, где вместе с моей коллегой, Анной Климковой, разобрали, как устроены визуализации на дашбордах и какие есть лучшие практики визуализации данных. В этой статье хочу чуть глубже копнуть в принципы UI/UX при разработке дашбордов и разобрать, какие случайные (или не очень) манипуляции в графиках могут привести вас на темную сторону.
Принципы UI/UX дизайна в разработке дашбордов
В PIX BI мы работаем с аналитическими приложениями, которые состоят из нескольких дашбордов. Такое аналитическое приложение можно сравнить с веб-сайтом, на который заходит пользователь. Он перемещается между дашбордами приложения, кликает на элементы визуализаций, нажимает на кнопки, то есть взаимодействует с интерфейсом.
При разработке аналитических приложений мы также можем ориентироваться на принципы UI и UX дизайна, чтобы наши приложения были понятными и удобными. О чем речь?
UI (User Interface), он же дизайн пользовательского интерфейса, служит для создания привлекательного и интуитивно понятного интерфейса. Акцент делается на эстетике и функциональности отдельных элементов.
UX (User Experience) дизайн – это про опыт пользователя при взаимодействии с продуктом, включая эмоции, удовлетворенность и эффективность выполнения задач. UX помогает сделать интерфейс удобным и устранить возможные проблемы.
Поскольку аналитические приложения в BI-системах по своей сути относятся к таким же веб-интерфейсам, принципы UI/UX применимы и к ним тоже. Предлагаю пройтись по ключевым принципам, наиболее актуальным для дашбордов, и разобраться, как их следует (или не следует) использовать.
Ключевые принципы UI-дизайна
1. Принцип структуры
У интерфейса должна быть понятная и предсказуемая структура: связанные элементы должны располагаться вместе, и, наоборот, несвязанные – разделены. Например, кнопки для входа в аккаунт, регистрации, смены языка часто располагаются в верхнем правом углу сайта. Так и на дашбордах стоит группировать элементы по смыслу. Например, фильтры могут располагаться рядом друг с другом, карточки KPI также группируются в одной области дашборда (чаще всего в верхней части):
2. Принцип простоты
Интерфейс должен легко читаться. Так, сайт с кучей рекламных предложений в стиле «Нужен простой советский…» может свести с ума даже самого стойкого пользователя. Мы, как разработчики, должны стремиться снизить когнитивную нагрузку на пользователя и оставлять в интерфейсе только нужные и полезные элементы. В том числе и на дашборде не должно быть слишком много визуализаций, лучше ограничиться 5-7.
3. Принцип наглядности
Все необходимые опции должны быть на виду. Вспомните, сколько раздражения может вызвать поиск контактов на сайте, когда они спрятаны в самом неожиданном месте. На дашбордах также важно выносить самые нужные метрики в доступную для восприятия область, а кроме того, использовать гармоничные цвета (подсмотреть можно тут), избегать отвлекающих визуальных элементов, помогать пользователю концентрироваться на данных, а не на самом дашборде.
4. Принцип обратной связи
Приложение должно давать обратную связь пользователям: сообщать о действиях, об изменениях состояний и ошибках. В PIX BI, например, есть специальная панель фильтров, где отображаются все фильтры, примененные в аналитическом приложении.
5. Принцип повторного использования
Мы должны стремиться к тому, чтобы переиспользовать компоненты и блоки интерфейса. Также интерфейс дашбордов одного аналитического приложения должен быть согласованным: для одинаковых мер должны использоваться одни и те же цвета, легенда во всех визуализациях должна отображаться в одном месте и т.д.
Законы UX-дизайна в разработке дашбордов
От UI мы плавно переходим к UX, где предлагаю посмотреть на несколько популярных законов UX-дизайна, которые, в том числе, можно применить и к аналитическим приложениям с дашбордами.
Законы UX-дизайна для дашбордов:
1. Закон Якоба
«Пользователи проводят большую часть своего времени на других веб-сайтах, и они предпочитают, чтобы ваш веб-сайт работал так же, как и все другие веб-сайты, которые они уже знают»
Что это значит в контексте аналитического приложения:
Не нужно «городить огород» и каждый новый дашборд создавать по новым лекалам. Используйте стандартные элементы управления и такое их расположение, чтобы пользователям было проще ориентироваться. Например, кнопки для навигации привычнее видеть в верхней части экрана или в боковой панели. Это же касается и панели фильтров.
Также есть типы визуализаций, которые максимально привычны для пользователей: линейные графики, столбчатые и круговые диаграммы, карточки KPI. Чаще всего любую аналитическую задачу можно решить с их помощью, не прибегая к более сложным и непривычным визуализациям.
2. Закон Фиттса
«Время, необходимое для достижения цели, зависит от расстояния до цели и ее размера»
Как это применить к аналитическому приложению:
Важные кнопки и элементы управления должны быть крупными и легко доступными. Они должны находиться в тех местах, где их можно быстро найти. Между кнопками необходимо оставлять достаточное расстояние.
Пример: не стоит размещать кнопки или картинки для навигации слишком близко друг к другу, иначе пользователям будет сложно с ними взаимодействовать.
3. Закон Хика
«Время, необходимое для принятия решения, увеличивается с ростом количества и сложности имеющихся вариантов»
Другими словами, чем меньше опций, тем быстрее пользователь примет решение.
В случае с аналитическими приложениями также выделяйте ключевые характеристики, чтобы управлять вниманием пользователей. Например, вместо множества фильтров предложите несколько ключевых категорий для выбора. Самое простое - «топ значений» в визуализациях: «Топ 10 лидеров по выручке» вместо перечня всех компаний.
4. Закон Миллера
«Среднестатистический человек может хранить в своей кратковременной памяти только 7 (± 2) элементов»
Чтобы у пользователя не «разбегались глаза», разделяйте информацию на дашборде на небольшие, легко усваиваемые блоки. Представьте, если ли бы в супермаркетах товары располагались не по категориям, а вразнобой, как их ночью привезли со склада. Пожалуй, никакой список «Что купить» не помог бы и за час найти нужное и управиться с покупками. Так же и здесь: группируйте однотипные метрики, избегайте лишних данных, чтобы фокусировать пользователя на самом важном. Этот закон, кстати, перекликается и с Принципом простоты в UI-дизайне.
5. Эффект фон Ресторфф
«Когда используется несколько похожих объектов, с наибольшей вероятностью запомнится тот, который отличается от остальных»
Как за пару секунд понять, что важно на аналитическом дашборде, если видишь его впервые? Человеческий глаз «выхватывает» то, что отличается визуально. Поэтому используйте цвет, размер, жирный шрифт, чтобы выделить важные данные на дашборде. При этом таких контрастных элементов не должно быть слишком много: иначе они будут конкурировать за внимание пользователя и отвлекать его.
6. Эффект эстетики
«Пользователи часто воспринимают эстетически приятный дизайн как дизайн, который удобнее в использовании»
Как это применить к аналитическому приложению:
Работайте над эстетикой своего дашборда: визуально привлекательные интерфейсы воспринимаются пользователями как более удобные и функциональные.
Манипуляции данными
Важный момент, который помогает сделать дашборды аналитического приложения понятными и действительно полезными в принятии решений – это достоверность отображаемой информации. Другими словами, дашборд НЕ должен вводить пользователя в заблуждение, но иногда, из-за непонимания полного контекста исследуемой информации, неправильно выбранных визуализаций или желания «сделать красивее», дашборд становится ловушкой для невнимательного зрителя.
Так что здесь я собрала 6 неосознанных и специальных манипуляций данными, которые вы можете встретить. Это, конечно, далеко не все существующие манипуляции, так что добавляйте в комментариях те, которые встречаются вам.
Манипуляции данными и визуальные искажения
1. Усечение оси Y
Суть этой манипуляции в том, что в вертикальной столбчатой диаграмме значения по оси Y откладываются НЕ с нуля. Это искажает восприятие данных и изменяет соотношение столбиков. Например, в визуализации ниже количество запросов в техподдержку для разных регионов за 3 периода откладывается по оси Y, начиная со значения 6 тысяч штук.
Из-этого складывается впечатление, что количество для региона Урал в разы меньше количества для региона Восток. Например, если рассматривать количество за февраль 2024 года, то разница между Востоком и Уралом отличается примерно в 3 раза. При этом если мы укажем начальное значение для оси Y равное нулю, разница в количестве между регионами уже не будет такой большой. Для того же февраля 2024 количество по Уралу отличается от количества по Востоку приблизительно в 1,5 раза, но никак не в 3.
2. Ошибки в хронологии данных
Как вы могли заметить, что в столбчатой диаграмме из прошлого примера также отсутствует сортировка для оси X по дате – это также может влиять на восприятие данных и общее впечатление от графика.
Например, в этом случае, если пользователь дашборда невнимателен, то у него сложится впечатление, что после того, как количество штук снизилось для обоих филиалов, к концу рассматриваемого периода оно снова увеличилось. Но на самом деле это не так и, если выполнить сортировку по дате, мы увидим, что количество, наоборот, возросло в феврале и снизилось в марте.
3. Полезное усечение оси Y
В линейном графике при почти одинаковых значениях показателей может быть, наоборот, полезно откладывать значения по оси Y со значения близкого к показателям.
Что это значит? Проще разобраться на примере. На данном графике отображается динамика процента инцидентов и запросов в техподдержку, закрытых в срок. Процент и инцидентов, и запросов колеблется в районе 100 % и если, как в данном графике, откладывать значения по Y от 0, то динамику отследить очень сложно. Кажется, что значения практически не изменяются.
Поэтому если мы хотим отслеживать динамику процентов, необходимо рассматривать показатели не относительно 0 по Y, а относительно более близкого к ним значения. Например, можно взять за начало по оси Y значение равное 90%. И в таком случае отслеживать динамику и делать выводы станет значительно проще. А также мы можем добавить для удобства две опорных линии 93% и 96%, которые обозначают приемлемые и неприемлемые значения для процентов инцидентов и запросов.
4. Ошибка выбора типа графиков
Для отображения сравнения показателей в динамике лучше выбирать линейную диаграмму.
Рассмотрим такой пример. Здесь в первом случае для отображения сравнения регионов в динамике выбрана столбчатая диаграмма с группировкой. Для регионов Центр и Москва отследить рост или спад показателя при таком типе визуализации может быть очень сложно, значения для этих регионов считываются плохо.
Поэтому в таком случае гораздо удобнее использовать линейный график. Каждому региону будет соответствовать линия своего цвета. Для изменения значений в динамике больше подходит именно линейный график, а столбчатую диаграмму лучше использовать для сравнения абсолютных значений.
5. Манипуляция с соотношением осей
Соотношение осей X и Y влияет на восприятие перепадов в линейном графике. Корректное соотношение, которое позволяет верно считывать информацию – это 1/3, то есть ось X должна быть в три раза длиннее оси Y, как на графике ниже:
Если это соотношение нарушено и ось X значительно короче, то перепады значений показателя будут слишком резкими, пользователь дашборда может сделать выводы, что величина за короткий срок претерпевала сильные изменения:
6. Манипуляции с круговой диаграммой
Известный и неоспоримый факт, что сектора круговой диаграммы в сумме должны образовывать единое целое, то есть 100%. Но нередко можно столкнуться с такими круговыми диаграммами, где сумма секторов превышает 100% и, конечно, такой диаграмме доверять нельзя:
Также важно помнить про количество секторов в круговой диаграмме. Их не должно быть больше 5-7. Большое количество секторов также затрудняет восприятие:
Лучше оставлять топ 5-7 значений для отображения, а остальные выводить в сектор «Другое»:
Кроме того, на восприятие круговой диаграммы влияет наличие сортировки: она помогает пользователю дашборда сориентироваться, как соотносятся сектора круговой диаграммы. При сортировке от большого значения сектора к меньшему мы легко можем сопоставить вклад каждого в общее целое.
Если такой сортировки нет, то считать информацию из круговой диаграммы и сделать выводы становится значительно сложнее.
Заключение и рекомендации
Итак, мы прошли путь от принципов UI/UX до тонкостей манипуляций с графиками. Дашборд — это не просто набор красивых картинок, а мощный инструмент, который может как просветить, так и запутать пользователя. Помните:
Структура, простота и наглядность – лучшие друзья любого аналитика
Интерфейс дашборда должен быть предсказуемым и согласованным
Типу графиков, а также их осям стоит уделять особое внимание
Количество секторов круговой диаграммы не должно стремиться к бесконечности
А также дашборд должен быть не только понятным, но и эстетичным. Ведь, как известно, даже самые серьезные данные воспринимаются лучше, если поданы с изяществом. Так что давайте создавать дашборды, которые не только говорят правду, но и делают это красиво.
Конечно, существует еще множество лайфхаков, которые помогут визуализировать данные эффективнее. Пишите про свои в комментариях!
B_Air
ЭЭЭ... У вас график вверх ногами...