ДЕНЬ 34

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

СЕГОДНЯ

Забегаем в гору сложностей, чтобы разобраться с основными ошибками в дашбордах. Хорошие примеры помогают сформировать вкус, но не всегда спасают от типичных ошибок. К сожалению, мы наступаем на одни и те же грабли. Чтобы стать чуточку лучше, рассмотрим 17 распространенных ошибок и то, как их исправить. Также вас ждет пример проектирования дашбордов. Перед сном читаем работу Уильяма Мортенсена об ошибках в художественной фотографии. Поднятая автором проблема небрежности касается и построения дашбордов. Будьте внимательны к мелочам. Побежали!

РАЗБИРАЕМСЯ

17 ошибок в дашбордах

ошибки на дашбордах
Существуют тысячи вариантов построить красивый дашборд или эстетичную визуализацию, но многие практики продолжают делать одни и те же десяток ошибок при выполнении проектов. Как их избежать? Посмотрим на примеры Уильяма Мортенсена, который учил, как делать хорошую фотографию. Он показывал, какие ошибки нужно избегать, чтобы сделать фото эстетичным и привлекательным. Применим его советы к дашбордам и рассмотрим 17 самых распространенных ошибок.

Зачем нам знать эти ошибки? Чтобы не повторять их. Вот список ошибок, которые могут испортить дашборд:

01. Выход за границы одного экрана

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

02. Попытка понравиться всем

Многие компании пытаются спроектировать дашборд, который ответит на вопросы всех департаментов. Но нестыдный, а главное полезный «царь-дашборд» — сложная задача. Для того, чтобы он работал, нужно собрать данные из десятка источников (и проверить их на релевантность) и комплексно построить серию дашбордов.
ошибки на дашбордах
СОВЕТ

«Продавайте» себе или заказчику место на дашборде. Представьте, что каждая визуализация 1x1 см обойдется вам в сто баксов. Вы станете намного избирательнее.

03. Излишняя детализация

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

04. Отсутствие контекста для данных

Показывайте цифры в сравнении:
  • факт/план;
  • сегодня/вчера;
  • эта неделя/та же неделя прошлого года;
  • сегодня/среднее за последние 30 дней;
  • ...
... для того, чтобы понимать контекст.
Без контекста цифры становятся бесполезны и не приводят ни к каким действиям.
контекст для данных

05. Не приводит к действиям

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

06. Много шума ведет к потере сигнала

Избыток элементов оформления, цветов, шрифтов, подписей и картинок мешает понимать цифры. Руководствуйтесь чистотой и простотой.

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

07. Обсуждение подразумеваемой метрики

Пользователь хочет видеть разницу в процентах между фактической выручкой и цифрой из бюджета. Вместо простого показа величины в 10%, мы выводим 180К и 200К или разницу 20К. Остальное подсчитай или догадайся сам. Упрощайте понимание ваших цифр.
ошибки на дашбордах

08. Неподходящий тип визуализации

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

09. Бессмысленное повторение

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

10. Искажения в количественных данных

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

11. Плохие композиционные решения

Используйте сетки и шаблоны для создания грамотного макета дашборда с правильной расстановкой диаграмм. Поставьте себя на место человека, который открыл ваш дашборд в первый раз. Все ли ему будет понятно? Можно ли что-то поменять местами? Что-то удалить? Добавить пустого пространства?
ошибки на дашбордах

12. Отсутствие фокусировки на важной информации

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

13. Ужасающий дизайн визов

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

14. Расплывчатые заголовки

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

15. Неадекватное использование цвета

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

16. Неправильные шрифты

Про шрифты мы говорили в предыдущем дне. Помните, что это тоже одна из ошибок дашбордирования.

17. Плохой графический дизайн

Неприятный цвет фона, лишние логотипы, резкое фоновое изображение, обводки, тени, хитрые эффекты — не делают ваш дашборд приятней глазу.
фон дашбордов

Чек-лист

Проверьте свой дашборд на ошибки

  • Меры

    1. Отображаются ли ваши показатели в правильном формате (т.е. символы валют, единицы измерения)?
    2. Используется ли правильное агрегирование?
    3. Понятно ли агрегирование для пользователя?
    4. Четко ли обозначены показатели на графике?

  • Оси

    1. Показывают ли они правильную меру и агрегацию?
    2. Являются ли они видимыми?
    3. Правильно ли они обозначены? Не слишком ли много (или недостаточно) меток?
    4. Фиксированы ли они? Должны ли быть зафиксированы?

  • Синхронизированная двойная ось

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

  • Смысл чисел

    Убедитесь, что цифры имеют смысл: т.е. складываются в 100% там, где должны; достаточно велики или малы в зависимости от данных.

  • Фильтры

    Фильтры действий:
    1. Правильно ли настроены фильтры действий?
    2. Связаны ли они с нужными рабочими листами?
    Для быстрых фильтров на dashboard:
    1. Знает ли пользователь, какие фильтры применяются к тем или иным графикам?
    2. Видит ли он, что отображается на графике сейчас и какие фильтры к нему были применены?
    3. Показывает ли фильтр top х правильные размерности top x?
    Фильтры источника данных:
    Нужно ли их использовать? Если да, проверьте, правильно ли они настроены.

  • Всплывающие подсказки

    1. Помогают ли они пользователю разобраться в графике?
    2. Предоставляют ли они дополнительную полезную информацию?
    3. Правильно ли они отформатированы?
    4. Исключена ли возможность использования командных кнопок?
    5. Правильно ли используется визуализация в подсказках (не слишком большая или подробная)?

  • Шрифты

    Убедитесь, что шрифты достаточно крупные (но не слишком!), разборчивые и в нужной степени контрастные. Подумайте о том, для каких целей используется дашборд, и на каком экране он будет отображаться.

  • Фигуры/shapes

    1. Не слишком ли много различных фигур на графике?
    2. Понятно ли, что представляет собой каждая фигура? Имеется ли легенда фигур?
    3. Легко ли различать различные фигуры?

  • Размер меток

    1. Легко ли понять, что представляет собой размер? Имеется ли легенда размера?
    2. Легко ли различить на графике более крупные и мелкие метки? Достаточно ли крупны мелкие метки, чтобы их можно было увидеть?
    3. Отражает ли размер правильную меру или размерность?
    4. Есть ли более крупные метки, которые перекрывают более мелкие?
    5. Отражает ли размер правильное направление (большее/меньшее значение)?

  • Цвета

    1. Не слишком ли много их на дашборде?
    2. Не слишком ли яркие цвета?
    3. Понятно ли, что обозначает каждый цвет? Есть ли легенды цветов?
    4. Один и тот же цвет на одном и том же графике/дашборде не обозначает разные вещи?
    5. Отражает ли цвет правильное направление (большее/меньшее значение)?
    6. Грамотно ли собрана цветовая палитра?
    7. Достаточно ли контрастны цвета и легко ли их различить?

  • Двойное кодирование

    1. Убедитесь, что вы не визуализируете одну и ту же метрику дважды на одном и том же графике, например, отображая размер продаж на диаграмме рассеяния с помощью размера круга, а также интенсивность цвета круга.
    2. Проверьте, чтобы заголовки и подзаголовки понятны и помогают понять диаграммы. По возможности сделайте заголовки и подзаголовки динамическими, чтобы они отражали выбор фильтра.

  • Заголовки

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

  • Инструкции по использованию дашборда

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

  • Ссылка на источник данных

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

  • Авторские права

    1. Если в дашборде используются чьи-то изображения или значки, перепроверьте, можно ли это делать и сошлитесь на первоисточник. Не добавляйте на дашборд фото людей, логотипы или товарные знаки, если у вас нет на это прямого разрешения.
    2. Не забудьте вписать свое имя в нижней части дашборда, если публикуете его на Tableau Public или где-либо еще. Это и копирайт, и самореклама :)

  • Орфографические ошибки

    Последний в этом списке, но, безусловно, не последний по важности пункт. Отдохните от дашборда и посмотрите на него свежим взглядом, чтобы убедиться, что вы не публикуете «Stales overview, 2019-2020».
Пошаговое создание дашбордов
Справка Tableau

ПРАКТИКУЕМСЯ

О датасете

Датасет содержит данные о заявлениях, поданных в полицейские участки Нью-Йорка.

Задача дашборда

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

Техническое решение

Реализован дашборд, решающий вышеперечисленные задачи.
дашборд

Элементы

+ Верхняя левая часть отчета содержит общие показатели по каждому району Нью-Йорка как отправную точку для анализа:
  • количество поданных заявлений в текущем году;
  • количество поданных заявлений в предыдущем году;
  • процент раскрываемости.
+ Верхняя правая часть содержит бар-чарт, отражающий топ преступлений либо топ локаций (в зависимости от выбранного параметра) по количеству поданных заявлений.
+ Ниже справа находится календарь подачи заявлений в отделения с почасовой и помесячной детализацией.
+ Внизу отчета расположена карта загруженности полицейских отделений (сколько заявлений подается и сколько из них приходится на тяжелые преступления).

Первая таблица позволяет фильтровать районы (Боро) на карте.

Задание
Исправьте ошибки в дашборде.

Скачать задание в виде книжки Tableau
Решение задания предыдущего дня
Скачать решение
Существуют только ошибки.

// Аксиома Робертса

МАТЕРИАЛЫ

Whitepaper по разработке дашбордов.

Находим тут

Книги

Работа Уильяма Мортенсена посвящена ошибкам при фотографировании живой натуры. В отличие от большинства других книг, посвященных этой теме, «Модель. Проблемы позирования» учит фотографа тому, как НЕ надо снимать, оставляя при этом полную свободу творчества.
Проблема позирования
Уильям Мортенсен
Скачать
Вышедшая в США в 1938 году, эта книга полностью сохраняет свою актуальность и сейчас. Учебное пособие иллюстрировано черно-белыми фотографиями автора и репродукциями картин. Навык видеть детали будет незаменим при проектировании визуализаций. Всем рекомендуем пролистать и сложить собственное мнение о работе.
Евангелист датавиза и инфографики рассказывает, как эффективно представлять данные, избегая распространенных ошибок и манипуляций. Отличный язык, много примеров и советов. Одним словом (двумя), must read.
Графики, которые убеждают всех
Александр Богачев
Читать

Итоги этапа

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

Бежим Марафон в команде!

С менторством и в компании единомышленников.
Нажимая кнопку, вы соглашаетесь на обработку персональных данных. Мы используем их, чтобы оставаться на связи. Подробнее здесь.
Tableau марафон

2024
tableau.pro