Dashboard culture

Культура работы с дашбордами

Подготовка

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

Инструменты: 1) Для любителей книги “Рисуй, чтобы победить”: бумага, карандаш. 2) Для самых тщательных: Figma, Miro, Balsamiq Mockups

Гид по стилю

Цвета

1. За базовый цвет текста берется оттенок темно-серого, на несколько тонов светлее чистого черного: #1b1b1b
   
   • Такой оттенок цвета одинаково хорошо читается на любых устройствах.
   • Это придаст дашборду стиль. Такой текст лучше воспринимается аудиторией, т.к. он не настолько сильно контрастирует с белым фоном как чисто черный.
2. Придерживайтесь светло-серого цвета для осей, шкал и заголовков таблиц.
   
3. Используйте одинаковый формат числа для показателей во всех создаваемых отчетах, если нет конкретного требования:
   • Не показывайте знаки после запятой там, где это не имеет смысла – оставьте только целые числа
   • Ограничьтесь одним-двумя знаками после запятой, если вам нужна дополнительная точность
4. Избегайте контрастных границ для диаграммы, цвета не должны спорить с данными.
5. Для выделения акцентных областей на диаграммах рекомендуется использовать теплые цвета , которые не будут отвлекать внимание от самих данных.
6. Если вы хотите сделать на чем-то цветовой акцент – для этого требуется обоснование. Цвет не должен использоваться для «украшения» данных, тогда он просто не вызовет у аудиториии отклика.
7. Одни и те же данные должны быть постоянны в своем цвете на протяжении всей визуализации.

Ваши данные могут сами подсказать вам какой цвет выбрать (яблоки – зеленые, ягоды – красные).

Шрифты

1. Для показа текстовых данных, выбирайте моноширинные шрифты с одинаковой шириной каждого символа. Это наиболее заметно влияет, прежде всего, на отображение текстовых данных в таблицах.
   1. При моноширинном шрифте, числа с одинаковым количеством символов будут иметь равную ширину, образуя ровные «столбцы» и облегчая считывание.
   2. Если моноширинные шрифты недоступны, используйте хотя бы шрифты без засечек.
2. На дашбордах вы можете использовать элементы форматирования текста для того, чтобы выделить название показателя в заголовке (жирное начертание) или сделать небольшую сноску по одной из диаграмм (наклонное начертание).
3. Избегайте визуального давления:
   1. Не используйте зеленый текст на красном фоне. Это раздражает органы зрения и путает восприятие.
   2. Не используйте одновременно жирное начертание и яркий шрифт в одном слове. Не подчеркивайте весь текст сразу.
   3. Не пишите ЗАГЛАВНЫМИ буквами все целиком. Что-то должно выделяться.

Выравнивание

• Выравнивание слева:

Заголовок дашборда

Подзаголовки

Легенды и фильтры

Названия категорий в таблицах (первый столбец)

• Выравнивание справа:

                            Заголовки столбцов в таблицах
  
                                       Данные в ячейках таблиц
  

Требования к дашборду

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

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

Стандарты расположения элементов дашборда

1. В верхней части располагается плашка с Заголовком, описанием дашборда, глобальными фильтрами, логотипом.
2. Логотип располагается в верхнем правом углу.
3. Рядом с заголовком располагается иконка с информацией.
4. Легенды располагаются либо в верхней части дашборда (если они глобальные), либо рядом с заголовком визуализации (если они локальные).
5. В нижней части дашборда – серая плашка, в которой рекомендуется располагать метаданные по времени обновления дашборда, а также любую дополнительную информацию, включая контакты.

Общие правила работы с дашбордами

1. дашборд должен помещаться на одном экране (при условии небольшого количества данных на нем).
2. дашборд должен иметь фиксированный размер. Для стандарта можно выбрать наиболее распространенное разрешение современных ноутбуков: 1366×768
3. Никогда не допускайте появления горизонтальной полосы прокрутки.
4. Одна диаграмма – один подзаголовок.

Как показывать KPI

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

Типы дашбордов

Традиционно, все дашборды делятся на три основных типа: стратегические, операционные и аналитические.

Точки внимания

При создании дашборда, старайтесь уделять внимание:

1. его макету,
2. внешнему виду
3. и тому, как дашборд будут воспринимать люди.
4. Куда они посмотрят в самом начале?
5. Что затем притянет их внимание?
6. Поймут ли они что показано на дашборде или нужны дополнительные подписи? Какой вывод они должны сделать? Какое впечатление у них останется от дашборда? Был ли он полезен?

А теперь пример тепловой карты дашборда. Это результаты исследования куда смотрят глаза человека на дашборде больше всего. Тем теплее цвет – тем больше показатель «просмотра».

Помните, что:

В 2016 году команда Tableau Research and Design Team провела свое собственное полевое исследование по восприятию дашбродов.

Какие выводы были сделаны?

1. БОЛЬШИЕ ЦИФРЫ важны. И правда, при просмотре дашборда внимание участников мгновенно привлекали отдельно стоящие цифры большого размера. Обычно именно так визуализируют KPI.
2. Более того, цифры замечали раньше всего остального в первые секунды просмотра.
3. И уже после, взгляд уходил в другие контрастные и выделяющиеся области диаграмм и графиков.

Золотые советы проектирования

1. Используйте правило восьми секунд. Ваш дашборд должен предоставить самую главную информацию примерно за 8 секунд. Это означает, что если вы просматриваете информацию в течение нескольких минут, это может указывать на проблему с визуальной композицией.
2. Применяйте правило минимализма – меньше да лучше. Каждый дашборд должен содержать не более 5-9 визуализаций.
3. Когнитивная психология говорит, что человеческий мозг может воспринимать только около 7 +- 2 объекта в единицу времени – это количество элементов, которые вы можете разместить на своей панели инструментов.
4. Применяйте правило третей. Попробуйте разделить страницу на девять равных частей, проведя две горизонтальные и две вертикальные линии, после чего следуйте фактам – люди фокусируются именно на точках пересечения линий, поэтому самые важные показатели предпочтительно располагать на этих точках.
5. Можно использовать подход золотого сечения. Макет, в основе построения которого лежат сочетание симметрии и золотого сечения, способствует наилучшему зрительному восприятию и появлению ощущения красоты и гармонии. Целое всегда состоит из частей, части разной величины находятся в определенном отношении друг к другу и к целому.
6. Оставляйте свободное пространство. Главное правило любого дизайна – наличие воздуха – свободное пустое пространство. Пустое пространство помогает разделять группы элементов между собой, формируя логические блоки (один из принципов Гештальт-психологии). Это помогает нашему взгляду более комфортно считывать и без того насыщенный экран с информацией.

Визуальная иерархия

1. Учёные провели множество исследований, которые посвящены тому, как люди просматривают страницы. Оказалось, что путь глаз человека в этот момент напоминает букву Z или F. Об этом важно помнить при расположении элементов на странице. Но это не означает категорический отказ от других путей изучения страницы.
2. Вы можете с помощью определенных манипуляций «заставить» человека пойти по вашему пути. Выстроить визуальную иерархию можно даже с помощью заголовков. Это активные точки притяжения внимания. Поддерживая иерархию шрифтов, можно направлять внимание пользователя от самой крупной и контрастной надписи к наименее заметной и блеклой подписи.

Быстрый чек-лист крутого дашборда

СМЫСЛ

1. Достаточно 5-ти секунд, чтобы понять смысл дашборда

ТЕКСТ

1. Заголовок из 4-12 слов начинается в левом верхнем углу
2. Подзаголовок детализирует смысл заголовка и несет новую информацию
3. Размеры текстов расположены иерархически
4. Используются шрифты из одного семейства
5. Тексты расположены горизонтально
6. Подписи данных не мешают друг другу. Расположены горизонтально

ДИАГРАММЫ

1. Данные отсортированы и упорядочены
2. Шкалы имеют только самые необходимые отметки и подписи
3. Нет 3D
4. Нет украшательств
5. Тип диаграммы правильно подобран под тип данных
6. Диаграмма имеет требуемый уровень точности и детализации

ЦВЕТА

1. Цветовая схема выбрана осознанно
2. Цвет используется для выделения ключевых идей
3. Текст контрастирует с фоном

ЛИНИИ

1. Сетки для упорядочивания выключены
2. Границы визуализаций выключены

Использование иконок

Когда вы оказываетесь в аэропорту, то сразу замечаете иконки-указатели – они выступают в роли ориентиров.

1. Для дашбордов обычно используются минималистичные, лаконичные и одноцветные иконки.
2. В приоритете — стиль иконок без заливки, ведь заливка создает достаточно заметные «пятна цвета» на листе дашборда.
3. Обычно, люди работают с интерфейсом в спешке, поэтому интерактивные иконки должны быть простыми (часто чёрно-белыми). Это ускоряет взаимодействие и облегчает работу глаз.

Каких ошибок нужно избегать при построении дашбордов

Список распространенных ошибок

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

• Построение “царь-дашборда”.

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

• Избыточность деталей или точности.

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

• Отсутствие контекста

  Совет: Без контекста цифры становятся бесполезны и не приводят ни к каким действиям.

  Поэтому, показывайте цифры в сравнении...

  1. факт/план сегодня/вчера
  2. эта неделя/та же неделя прошлого года

  3. сегодня/среднее за последние 30 дней

     ... для того, чтобы понимать контекст.

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

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

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

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

• Обсуждение приоритетной метрики.

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

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

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

• Не имеющая смысла вариативность.

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

• Плохая композиция.

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

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

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

• Нечеткие заголовки

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

Примеры

Пример плохого дашборда

1. Нет заголовка
2. Не все диаграммы легко считываются, не везде понятно, что изображено.
3. Не хватает контекста и иерархии шрифтов
4. Отсутствует визуальная сетка. Композиция выстроена хаотично, без логики повествования. «Дыра» под спидометром.
5. В таблице есть горизонтальная прокрутка.
6. Цвета не продуманы. Повторение красного цвета в нескольких палитрах — потенциальный сигнал «все плохо». Перенасыщенность.

Пример хорошего дашборда

Использование серого цвета на дашбордах — отличный ход, когда категорий слишком много.

Вы не будете отвлекать внимание от сути данных многообразием цвета.