ДЕНЬ 36
Про лучшие практики форматирования дашбордов
Вчера мы бежали по интерактивной местности Tableau. Поняли, что интерактив не только впечатляет пользователя, но и приносит много пользы.
СЕГОДНЯ
Добавляем лоска и красоты нашим дашбордам, собирая полезные советы по оформлению. Переходим к конечному виду дашборда и приступаем к полировке — забегаем в плоскость методологий. Чувство прекрасного поддержим новым шедевром на нашей книжной полке. На практике начнем разбирать дашборд Райана Слиппера. Кого не укачает от количества деталей, приглашаем скачать воркбук и еще раз разобрать все и подвигать на полках. Вторая часть практики — самостоятельное форматирование. Встречаем новый день. Виз-виз уррра!
СЕГОДНЯ
Добавляем лоска и красоты нашим дашбордам, собирая полезные советы по оформлению. Переходим к конечному виду дашборда и приступаем к полировке — забегаем в плоскость методологий. Чувство прекрасного поддержим новым шедевром на нашей книжной полке. На практике начнем разбирать дашборд Райана Слиппера. Кого не укачает от количества деталей, приглашаем скачать воркбук и еще раз разобрать все и подвигать на полках. Вторая часть практики — самостоятельное форматирование. Встречаем новый день. Виз-виз уррра!
РАЗБИРАЕМСЯ
В теории
Форматирование
Финальные штрихи
От того, как вы настраиваете внешний вид и стиль визуализаций, шрифты, фильтры и других элементов, сильно зависит общее впечатление от дашборда. Правильное форматирование помогает стать дашборду привлекательным, понятным и эффективным. Это все то, что удерживает внимание пользователя.
Настройки Tableau разработаны по основным принципам визуализации. Поэтому даже если использовать форматирование по умолчанию, результат будет достойным. Но всегда лучше проработать внешний вид визуализации детально. Поговорим про основные возможности форматирования в сочетании с лучшими визуальными практиками.
Настройки Tableau разработаны по основным принципам визуализации. Поэтому даже если использовать форматирование по умолчанию, результат будет достойным. Но всегда лучше проработать внешний вид визуализации детально. Поговорим про основные возможности форматирования в сочетании с лучшими визуальными практиками.
Принципы верстки
О чем нужно помнить
Один из самых популярных способов восприятия веб-страниц и дашбордов — F-pattern чтения. Он предполагает, что главные элементы и информация (важные графики, ключевые метрики или основные выводы) должны быть расположены в верхней левой части дашборда и заметны сразу при открытии дашборда. Затем пользователь переносит взгляд вертикально вниз, чтобы получить более детальную информацию или ознакомиться с другими графиками и метриками. А после внимание переносится в правую часть экрана, где пользователи ищут дополнительную информацию или детали (как с чтением книги).
Важно
Важно помнить, что F-pattern не работает одинаково для всех пользователей и ситуаций и он не единственный. Например, если дашборд содержит много текста или сложных графиков, то пользователи могут склоняться к Z-pattern чтению, то есть двигаться по диагонали от левого верхнего угла к правому нижнему.
Если есть сильный визуальный акцент или ДБ вызывает эмоциональную реакцию, пользователи могут читать по спирали, то есть двигаться по кругу от центра к краям.
Если есть сильный визуальный акцент или ДБ вызывает эмоциональную реакцию, пользователи могут читать по спирали, то есть двигаться по кругу от центра к краям.
Минимализм и простота
Слишком много информации на дашборде может привести к тому, что пользователь потеряет фокус, интерес и вообще суть. Нужно отбирать и отображать только ту информацию, которая действительно необходима и релевантна для вашей цели и аудитории. Определите ключевые метрики и графики и используйте от 3 до 9 легкочитаемых и понятных визуализаций на дашборде.
Сетка дашборда
Чтобы создать красивый и эффективный дашборд, нужно организовать и выровнять элементы дашборда по сетке. Это разметка, которая разделяет дашборд на ряды и столбцы, создавая виртуальные линии. Располагая элементы дашборда в соответствии с этими линиями, можно добиться аккуратности и симметрии.
Примеры сеток дашбордов
Кроме того, сетка помогает поддерживать пропорциональность и соотношения между элементами. Большие блоки сетки можно использовать для крупных компонентов и меньшие блоки для менее значимых. Это поможет создать визуальный порядок и иерархию на дашборде.
Сетка также может использоваться для группировки элементов на дашборде. Вы можете разделить сетку на разные секции для категорий данных или компонентов. Это поможет пользователям быстро ориентироваться и находить нужную информацию.
Сетка также может использоваться для группировки элементов на дашборде. Вы можете разделить сетку на разные секции для категорий данных или компонентов. Это поможет пользователям быстро ориентироваться и находить нужную информацию.
Фон и воздух
Для эстетики и функциональности
Фоновое форматирование. Это про стиль и цвет фона дашборда. Попробуйте использовать нейтральные цвета или цвета, соответствующие брендбуку компании или теме дашборда. Подходящее фоновое форматирование поможет воспринимать дашборд целостно.
Совет
Убедитесь, что фоновый цвет на дашборде отличается от цвета элементов. Если фон светлый, используйте темные или яркие цвета для графиков и таблиц, и наоборот. Это поможет элементам выделяться и легче восприниматься.
«Воздух». Пустое пространство между элементами дашборда создает баланс и визуальную чистоту. Пользователь лучше воспринимает информацию и может сфокусироваться. Расставляйте элементы с учетом адекватного расстояния между ними, чтобы избежать перегруженности дашборда и обеспечить достаточное визуальное «дыхание». Помните о балансе и визуальном равновесии элементов на дашборде.
Размер и цвет
Имеют значение
Чтобы добиться дополнительного внимания пользователя, можно использовать правило контраста: «Чем больше разница между объектами, тем сильнее контраст». Проще говоря, вы делаете некоторые элементы более видимыми и выделяющимися. Рассмотрим простые способы достичь контраста:
1. Используйте яркие цвета для важных элементов, чтобы они выделялись на фоне.
2. Измените размеры, сделав более важные элементы крупнее или выделив жирным шрифтом.
3. Выделите элементы дашборда фоном.
Шрифты
От шрифтов сильно зависит читаемость дашборда, его привлекательность и вообще возможность передать информацию. Мы уже говорили об истории шрифтов в дне 33. А теперь о том, как их использовать на визах.
Выбирайте читаемый шрифт
Шрифты семейства Tableau разработаны специально для использования в визуализации данных и оптимизированы для мелкого шрифта. Tableau использует эти шрифты по умолчанию.
Если вам нужно использовать другой шрифт, выбирайте среди «безопасных». Это значит, что они установлены на большинстве устройств, а значит будут хорошо отображаться, где бы ваш дашборд ни смотрели. Используйте шрифты без засечек (sans-serif), обычно они более читабельны:
Если вам нужно использовать другой шрифт, выбирайте среди «безопасных». Это значит, что они установлены на большинстве устройств, а значит будут хорошо отображаться, где бы ваш дашборд ни смотрели. Используйте шрифты без засечек (sans-serif), обычно они более читабельны:
- Arial
- Trebuchet MS
- Verdana
- Times New Roman
- Lucida sans
Ограничьте количество шрифтов. Много разных шрифтов — это беспорядок и путаница. Ограничьте количество используемых шрифтов. Часто используют комбинацию двух шрифтов: один для заголовков и выделения важных элементов, другой для основного текста и подписей.
Учитывайте размер шрифта. Размер шрифта должен быть достаточным, чтобы текст был читаемым, особенно при просмотре на мобильных устройствах. Учтите, что разные элементы дашборда могут требовать разного размера шрифта. Заголовки могут быть крупнее, чтобы привлечь внимание, а меньший размер шрифта может быть использован для подробных описаний или небольших подписей.
Выравнивайте текст. Выравнивание текста по левому, правому краю или по центру делает дашборд аккуратнее. Для визуальной гармонии поддерживайте постоянное выравнивание текста во всем дашборде. Обычно мы советуем левое выравнивание, потому что подписи и заголовки при этом выглядят естественно и целостно.
Учитывайте размер шрифта. Размер шрифта должен быть достаточным, чтобы текст был читаемым, особенно при просмотре на мобильных устройствах. Учтите, что разные элементы дашборда могут требовать разного размера шрифта. Заголовки могут быть крупнее, чтобы привлечь внимание, а меньший размер шрифта может быть использован для подробных описаний или небольших подписей.
Выравнивайте текст. Выравнивание текста по левому, правому краю или по центру делает дашборд аккуратнее. Для визуальной гармонии поддерживайте постоянное выравнивание текста во всем дашборде. Обычно мы советуем левое выравнивание, потому что подписи и заголовки при этом выглядят естественно и целостно.
Цвета
Грамотное использование цвета сделает из вас гуру визуализации. Задумывайтесь, как воспримет цвет аудитория.
Выделяйте важные элементы яркими цветами. Например, если вы хотите подчеркнуть цветом что-то особенно важное, используйте нейтральные приглушенные цвета для большинства значений вместе с одним ярким цветом для ключевой категории.
Выделяйте важные элементы яркими цветами. Например, если вы хотите подчеркнуть цветом что-то особенно важное, используйте нейтральные приглушенные цвета для большинства значений вместе с одним ярким цветом для ключевой категории.
Стремитесь к единообразию цветов
Используйте ограниченную палитру цветов и придерживайтесь ее на всем дашборде. Это поможет создать гармоничный и сбалансированный внешний вид.
Используйте ограниченную палитру цветов и придерживайтесь ее на всем дашборде. Это поможет создать гармоничный и сбалансированный внешний вид.
Помните о значении цветов. Каждый цвет может нести определенную информацию и вызывать определенные ассоциации. Например, темно-зеленый цвет часто связывается с положительными значениями, а темно-красный — с отрицательными. Светло-зеленый или светло-красный цвет могут указывать на средние значения или переходные состояния. Используйте цвета, чтобы помочь людям легко понять информацию на дашборде.
В Tableau цвет элементов легко настраивается в области Color. Выбор цвета зависит от типа данных. Бывают дискретные и непрерывные палитры.
Дискретные палитры — для категорий («Солнце», «Земля», «Луна», «Марс»).
Непрерывные палитры — для чисел-показателей (10..100..1400..5340... км).
Не используйте палитры не для своих целей.
Дискретные палитры — для категорий («Солнце», «Земля», «Луна», «Марс»).
Непрерывные палитры — для чисел-показателей (10..100..1400..5340... км).
Не используйте палитры не для своих целей.
Можно создать собственные цветовые палитры — на основе брендбука компании.
Подробнее о кастомных палитрах
Онлайн справочник Tableau
Онлайн справочник Tableau
Визуальный шум
Трудно смотреть? Не делайте так на дашборде
Убрав ненужные элементы, добиваемся чистого и упорядоченного вида дашборда. Пользователь легче и быстрее интерпретирует информацию без отвлекающего визуального шума.
Удалите излишний текст. Избегайте излишнего использования текста на дашборде. Сократите длинные фразы или предложения, оставляйте только ключевые слова или фразы, которые передают необходимую информацию. Используйте более краткие заголовки и подписи.
Используйте минимум элементов. Старайтесь оставить только необходимые элементы в графике. Избегайте излишних сеток, рамок или линий, которые могут отвлекать внимание. Чем проще график, тем легче будет воспринимать информацию.
Откажитесь от украшательств. Избегайте декорации, которая не несет важной информации. Ограничьте использование фоновых изображений, узоров, сложной графики. Сосредоточьтесь на сути, чтобы она была читаемой и понятной.
Следуйте принципу «меньше — лучше». Не пытайтесь загрузить график большим количеством информации. Оставьте самое важное, без избыточных деталей. Простота и ясность — ключевые моменты создания графиков.
Удалите излишний текст. Избегайте излишнего использования текста на дашборде. Сократите длинные фразы или предложения, оставляйте только ключевые слова или фразы, которые передают необходимую информацию. Используйте более краткие заголовки и подписи.
Используйте минимум элементов. Старайтесь оставить только необходимые элементы в графике. Избегайте излишних сеток, рамок или линий, которые могут отвлекать внимание. Чем проще график, тем легче будет воспринимать информацию.
Откажитесь от украшательств. Избегайте декорации, которая не несет важной информации. Ограничьте использование фоновых изображений, узоров, сложной графики. Сосредоточьтесь на сути, чтобы она была читаемой и понятной.
Следуйте принципу «меньше — лучше». Не пытайтесь загрузить график большим количеством информации. Оставьте самое важное, без избыточных деталей. Простота и ясность — ключевые моменты создания графиков.
Разбираем «любимые» ошибки на дашбордах в дне 34.
Чек-лист визуальной «уборки»:
- убирайте весь сложный фон;
- убирайте бессмысленные легенды, если они дублируют информацию на визуализации;
- убирайте контрастные границы элементов визуализации;
- убирайте эффекты;
- убирайте жирный шрифт;
- высветляйте подписи;
- убирайте или высветляйте линии на фоне (сетка);
- упрощайте подписи;
- выносите подписи данных на визуализацию. Если данных немного, то скрывайте ось.
Тултипы
Любой, кто откроет интерактивный дашборд, интуитивно начинает водить мышкой и изучать графики. Всплывут окошки тултипов, которые появляются по умолчанию (их можно отключить).
Чтобы получить от тултипов максимальную пользу, нужно настроить их под задачу. Можно добавить простой виз (Viz in Tooltip) для дополнительного контекста. Можно форматированием акцентировать самую важную цифру. Получится целая история для каждой точки на графике.
Чтобы получить от тултипов максимальную пользу, нужно настроить их под задачу. Можно добавить простой виз (Viz in Tooltip) для дополнительного контекста. Можно форматированием акцентировать самую важную цифру. Получится целая история для каждой точки на графике.
Гештальт-принципы
Напомним, гештальт-принципы визуализации — это правила организации информации на дашборде с учетом восприятия ее человеческим глазом. Какие это правила?
Близость. Элементы, расположенные близко друг к другу, воспринимаются как связанные.
Продолжение. Элементы, расположенные на одной линии или в определенном направлении, воспринимаются как связанные и продолжающиеся.
Симметрия. Симметричные элементы воспринимаются как связанные и более упорядоченные.
Пропорции. Элементы, которые соотносятся между собой по размеру и пропорциям, воспринимаются как связанные.
Сходство. Элементы, которые имеют схожие свойства (цвет, форма, текстура и т.д.), воспринимаются как связанные и группируются вместе.
Применять эти принципы нужно сбалансированно и руководствуясь целями и контекстом дашборда.
Подробнее о гештальт-принципах с картинками и с видео лекции было в дне 03.
Близость. Элементы, расположенные близко друг к другу, воспринимаются как связанные.
Продолжение. Элементы, расположенные на одной линии или в определенном направлении, воспринимаются как связанные и продолжающиеся.
Симметрия. Симметричные элементы воспринимаются как связанные и более упорядоченные.
Пропорции. Элементы, которые соотносятся между собой по размеру и пропорциям, воспринимаются как связанные.
Сходство. Элементы, которые имеют схожие свойства (цвет, форма, текстура и т.д.), воспринимаются как связанные и группируются вместе.
Применять эти принципы нужно сбалансированно и руководствуясь целями и контекстом дашборда.
Подробнее о гештальт-принципах с картинками и с видео лекции было в дне 03.
РАЗБИРАЕМСЯ
На практике
Предположим, что у нас уже готовы все визуализации для дашборда. С чего следует начать? С сетки. Отрисовав ее на бумаге, приступаем к верстке. Чтобы создать сетку в Tableau, используем вертикальные и горизонтальные контейнеры. С ними мы уже познакомились.
СОВЕТ
При верстке сетки дашборда один контейнер может «съесть» другой. Чтобы избежать этого, используйте бланки (Blank). Как только помещаете контейнер на дашборд, добавьте бланк внутри него и продолжайте верстку. Позже бланки можно удалить.
Займемся фоном и пустым пространством между графиками. Для того, чтобы задать фон на весь дашборд, воспользуйтесь форматированием дашборда.
Для того, чтобы отделить блоки нашей сетки, воспользуемся настройками элементов дашборда
во вкладке Layout.
во вкладке Layout.
На этой вкладке есть 3 опции форматирования элемента дашборда: Border, Background и Padding.
Border
Позволяет добавить и отформатировать рамку элемента.Background
Добавляет цвет фона элемента.Padding
С помощью Padding можно добавить пустое пространство. Inner padding — это пространство внутри элемента, Outer padding — снаружи.
Заранее продумав структуру, размещаем графики и элементы дашбордов в сетку. Для аккуратного и целостного дашборда нужно поработать над форматированием шрифтов и каждого графика отдельно.
Про методологию
Когда вы редактируете общий внешний вид дашборда и визуализаций, в частности, используйте подход «от большего к меньшему»: начинайте с изменения шрифтов и заголовков на уровне всей рабочей книги (workbook level), затем переходите к форматированию на уровне рабочих листов (worksheet level). Небольшие детали на каждой диаграмме (тултипы, подписи, аннотации) настраивайте в самом конце.
Используя такой подход, сэкономите много времени.
Когда вы редактируете общий внешний вид дашборда и визуализаций, в частности, используйте подход «от большего к меньшему»: начинайте с изменения шрифтов и заголовков на уровне всей рабочей книги (workbook level), затем переходите к форматированию на уровне рабочих листов (worksheet level). Небольшие детали на каждой диаграмме (тултипы, подписи, аннотации) настраивайте в самом конце.
Используя такой подход, сэкономите много времени.
Могут помочь глобальные настройки форматирования Tableau. Применив их изначально на уровне всей книги, не нужно будет возвращаться к этому во время детального форматирования.
Поработаем с форматированием листа, чтобы избавиться от визуального шума. Нажав правой кнопкой мыши и выбрав Format, попадаем в окно форматирования.
Здесь можно найти такие настройки:
Здесь можно найти такие настройки:
Шрифт (Font). Настройка шрифтов.
Выравнивание (Alignment). Выравнивание текста и итогов по умолчанию.
Заливка (Shading). Настройка цвета заливки листа, итогов, строк и столбцов рабочего листа.
Границы (Borders). Настройка обводки элементов, границ итогов, строк и столбцов рабочего листа.
Линии (Lines). Настройка вспомогательных линий: сетки, линии нуля, линии тренда и референсных линий и др.
Каждая настройка имеет 3 вкладки: Лист (Sheet), Строки (Rows) и Столбцы (Columns). Там можно настроить общее форматирование для всего листа и отдельное — для строк и для столбцов.
Выравнивание (Alignment). Выравнивание текста и итогов по умолчанию.
Заливка (Shading). Настройка цвета заливки листа, итогов, строк и столбцов рабочего листа.
Границы (Borders). Настройка обводки элементов, границ итогов, строк и столбцов рабочего листа.
Линии (Lines). Настройка вспомогательных линий: сетки, линии нуля, линии тренда и референсных линий и др.
Каждая настройка имеет 3 вкладки: Лист (Sheet), Строки (Rows) и Столбцы (Columns). Там можно настроить общее форматирование для всего листа и отдельное — для строк и для столбцов.
Разбор дашборда.
Описательный / Descriptive
Сначала разберем дашборд от Райана Слиппера (Ryan Sleeper), а потом займемся самостоятельной сборкой дашборда и его форматированием.
О данных
Стандартный источник данных Superstore, который идет вместе с Tableau и предназначен для демо и знакомства с инструментом.
Ниже показан дашборд для разбора и книга-условие для практики. Изображения увеличиваются по клику. Чтобы посмотреть дашборды в интерфейсе Tableau, скачайте воркбук.
Ниже показан дашборд для разбора и книга-условие для практики. Изображения увеличиваются по клику. Чтобы посмотреть дашборды в интерфейсе Tableau, скачайте воркбук.
Элементы
- Техника drill-down и просмотр различных KPI в зависимости от выбора.
- Простое и понятное название отчета и всех графиков. Используются короткие формы названий показателей.
- Цвета используются с правильными ассоциациями: выбранные элементы, параметры и фильтры — темные цвета, все остальное — серым. Красным обозначены элементы негативные или требующие внимания пользователя.
- Используется 3-4 размера шрифта.
- Используется правильное расположение графиков. Пропорциональное распределение элементов.
- Навигационные кнопки. Упрощают использование отчета для тех, кто не знаком с вкладками Tableau Server/Tableau Reader.
- Все фильтры находятся в одной общей области. Это говорит об использовании фильтров для всех визов.
8. Индикатор, подсказывающий выбраны ли какие-то фильтры в отчете.
9. Вычисляемый виз, показывающий начало и конец выбора периода и кол-во дней между.
10. Подсвечивание выбранного региона и затемнение всех остальных. Концентрация внимания пользователя на выбранном объекте анализа.
9. Вычисляемый виз, показывающий начало и конец выбора периода и кол-во дней между.
10. Подсвечивание выбранного региона и затемнение всех остальных. Концентрация внимания пользователя на выбранном объекте анализа.
11. KPI секция. Очень быстро отвечает на вопросы: что увеличилось/уменьшилось и какие принимало значения, 3 показателя, 3 сравнения: текущее, в прошлом периоде и прирост. Индикация падения или роста.
12. Не перегруженные тултипы. Правильное форматирование и простое название. Визуальное разделение показателей.
12. Не перегруженные тултипы. Правильное форматирование и простое название. Визуальное разделение показателей.
ПРАКТИКУЕМСЯ
Еще раз о датасете
Содержит данные розничной торговли Superstore за 4 года.
Задание
Воссоздайте форматирование дашборда по примеру выше, руководствуясь правилами хорошего тона. Не забудьте про элементы форматирования:
Скачать задание в виде книжки Tableau
- сетка и фон дашборда;
- шрифты;
- цветовая палитра и цветовое кодирование;
- визуальный шум;
- форматирование осей и их подписей;
- тултипы.
Скачать задание в виде книжки Tableau
Решение задания предыдущего дня
В дашборде должно быть все прекрасно: и лицо, и одежда, и душа, и мысли.
// Антон Павлович Чехов
// Антон Павлович Чехов
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Портфолио для вдохновения
Работы художников, дизайнеров со всего мира
Шрифты
Более 11 000 шрифтов на любой вкус
Дизайн советы
Сайт Дэвида Эрейа
МАТЕРИАЛЫ
Книги
Быстрые рецепты графического оформления.
Итоги этапа
Получили много практических советов по тому, как должен выглядеть качественный дашборд. Еще раз повторили важность цвета и шрифтов. Не забыли о динамических элементах и контексте. Разобрали дашборд от Райана Слипера, чтобы понимать из каких элементов складывается проектировка. Поставили на полку поваренную книг рецептов оформления своих графических работ. Продолжим углубляться в методологии проектирования. Виз-виз уррра!
Бежим Марафон в команде!
С менторством и в компании единомышленников.
Нажимая кнопку, вы соглашаетесь на обработку персональных данных. Мы используем их, чтобы оставаться на связи. Подробнее здесь.
