ДЕНЬ 12
Про дашборды + мобильный дизайн
Вчера мы научились выводить несколько показателей и пользоваться двойными осями.
СЕГОДНЯ
Вот он, тот самый выход в дашбордопространство! Собираем наши визуализации в единое целое. Изучаем процесс и основные элементы управления. Рассмотрим концепции мобильных форматов для проектирования и использования дашбордов. Советы, трюки и тактические решения. Даем ссылки на изучение работ практиков Tableau mobile. Для тех, кто хочет опираться на советы бывалых из мира мобильного UX дизайна, добавили свежее издание практических советов от Мэта Лейси. Приготовили гаджеты и вперед. Побежали!
СЕГОДНЯ
Вот он, тот самый выход в дашбордопространство! Собираем наши визуализации в единое целое. Изучаем процесс и основные элементы управления. Рассмотрим концепции мобильных форматов для проектирования и использования дашбордов. Советы, трюки и тактические решения. Даем ссылки на изучение работ практиков Tableau mobile. Для тех, кто хочет опираться на советы бывалых из мира мобильного UX дизайна, добавили свежее издание практических советов от Мэта Лейси. Приготовили гаджеты и вперед. Побежали!
Собираем элементы
в целостную картину
в целостную картину
Дашборд — это основной элемент коммуникации между разработчиком отчета и его аудиторией. Дашбордом можно назвать общий экран, на который добавлены все необходимые визы, фильтры, комментарии, заголовки, легенды и другие элементы взаимодействия.
Дашборд создает целостную картинку для пользователей, объясняя и показывая данные в доступной форме. Компактное размещение диаграмм дает возможность оценить данные одним взглядом. И вместо того, чтобы просматривать несколько листов письменного многостраничного отчета, можно увидеть все данные разом.
Дашборд создает целостную картинку для пользователей, объясняя и показывая данные в доступной форме. Компактное размещение диаграмм дает возможность оценить данные одним взглядом. И вместо того, чтобы просматривать несколько листов письменного многостраничного отчета, можно увидеть все данные разом.
Пример дашборда
РАЗБИРАЕМСЯ
В том, как органично показать все на одном экране
Термин «дашборд» произошел от английского dashboard — «приборная панель» (в самолетах, автомобилях). В технике дашборд показывает все необходимые элементы управления на одной панели. А в аналитике дашборд делает это же — на одном экране.
В русскоязычных материалах вы можете встретить такие варианты как «дэшборд», «приборная панель», «аналитическая панель» и прочие близкие по смыслу слова и выражения. На наш взгляд, не нужно пытаться русифицировать устоявшиеся в речевой культуре термины — мы смело говорим и пишем «дашборд».
В русскоязычных материалах вы можете встретить такие варианты как «дэшборд», «приборная панель», «аналитическая панель» и прочие близкие по смыслу слова и выражения. На наш взгляд, не нужно пытаться русифицировать устоявшиеся в речевой культуре термины — мы смело говорим и пишем «дашборд».
Еще один пример дашборда
Процесс построения дашборда
Итак, дашборд в Tableau — это коллекция визуализаций из нескольких Рабочих листов (Worksheets). Дашборд позволяет визуально собрать в одном месте несколько диаграмм и графиков, добавив к ним контекст и пояснения.
Рассмотрим технический (не методологический) процесс построения дашборда в Tableau:
Рассмотрим технический (не методологический) процесс построения дашборда в Tableau:
- Создание необходимых визуализаций согласно продуманной идее дашборда.
- Создание нового листа дашборда.
- Задание размера дашборда.
- Продумывание сетки расположения созданных визуализаций.
- Непосредственно размещение визуализаций на дашборд.
- Добавление других контекстных элементов дашборда (заголовки, подписи, легенды, окна фильтров).
- Настройка Экшенов (Actions) — опционально.
Прежде чем приступить к технической части, определите цель дашборда, его аудиторию и желаемый эффект. Нужно учитывать, как люди будут воспринимать дашборд, куда они посмотрят сначала и дальше, понятно ли им, что показано на дашборде или нужны пояснения. Какой вывод они должны сделать и какое впечатление у них останется от дашборда. Был ли дашборд полезен?
Ниже пример тепловой карты дашборда — исследование того, куда глаза человека смотрят больше всего. Чем теплее цвет, тем выше показатель просмотра.
Ниже пример тепловой карты дашборда — исследование того, куда глаза человека смотрят больше всего. Чем теплее цвет, тем выше показатель просмотра.
Тепловая карта зрения человека на дашборде
Вдумчивый подход к дизайну, осознанный выбор цели отчета, ответы на вышеперечисленные вопросы — это методология создания дашбордов, неотъемлемая часть процесса его создания.
Подробнее о концептуальных и методологических подходах к созданию дашбордов мы расскажем во второй части марафона.
Подробнее о концептуальных и методологических подходах к созданию дашбордов мы расскажем во второй части марафона.
Интерфейс окна создания дашборда
А теперь пройдемся по технологии создания дашборда более подробно. Рассмотрим основные инструменты, которые позволят сделать его целостным и информативным.
Предположим, что у нас уже готовы визы, которые мы собираемся «связать» одним дашбордом, и есть схематическая идея (макет) дашборда.
Макет — предварительный вид. Обычно макеты дашбордов составляют либо на листах бумаги, либо в удобном графическом редакторе. Подробнее о принципах составления макетов мы поговорим во второй части марафона.
Предположим, что у нас уже готовы визы, которые мы собираемся «связать» одним дашбордом, и есть схематическая идея (макет) дашборда.
Макет — предварительный вид. Обычно макеты дашбордов составляют либо на листах бумаги, либо в удобном графическом редакторе. Подробнее о принципах составления макетов мы поговорим во второй части марафона.
СОВЕТ
Для быстрой загрузки дашборда на сервере выбирайте тип размера FIXED SIZE. Для встраивания дашборда в сайт или приложение (embedded dashboard) подойдут типы размера AUTOMATIC и RANGE, которые помогут дашборду адаптироваться к выделенному месту.
Далее переходим к размещению листов-визуализаций согласно нашему макету. Для того, чтоб разместить лист-визуализацию, перетащите лист с левой панели Sheets на дашборд. В Tableau реализовано два варианта размещения листов: Tiled (плиточный) и Floating (плавающий).
Tiled — листы заполняют дашборд как плитки, автоматически подстраиваясь при добавлении нового листа.
Floating — листы размещаются на дашборде независимо и имеют свободный размер.
Листы со свойством Floating не рекомендуются, потому что при публикации дашборда (например, на Tableau Public) их расположение может сбиться.
Floating — листы размещаются на дашборде независимо и имеют свободный размер.
Листы со свойством Floating не рекомендуются, потому что при публикации дашборда (например, на Tableau Public) их расположение может сбиться.
Дополнительный функционал
Контейнеры
Контейнеры
Это ценный функционал для создания сеток любой сложности. Вы можете группировать разные элементы дашборда в контейнерах. Существуют вертикальные (Vertical) и горизонтальные (Horizontal) контейнеры.
Контейнеры можно найти на панели Objects. Контейнеры позволяют не только создавать сложные сетки, но и добавить красок, улучшить дизайн дашборда.
Примеры контейнеров
Вебинар от Зен Мастера Энди Крибела о том, как управляться с контейнерами.
Энди признается, что сам постигал тему не один год.
Выбор контейнера
Чтобы выбрать контейнер на дашборде, откройте выпадающее меню на любом листе внутри контейнера и нажмите Select Container: <Название контейнера>.
После выделения контейнера во вкладке Layout справа для него можно выбрать цвет (Background), границы (Border) и отступы (Outer Padding и Inner Padding). Эти же настройки доступны не только для контейнеров, но и для любых других элементов дашборда (листов, подписей, легенд и т. д.).
Начиная с обновления Tableau 2021.4 можно копировать и вставлять контейнеры как в границах одного и того же дашборда, так и на другой.
Начиная с обновления Tableau 2021.4 можно копировать и вставлять контейнеры как в границах одного и того же дашборда, так и на другой.
Совет
Если добавлять элементы на дашборд в режиме «плитки» (Tiled), их размеры и положение отредактировать нельзя. Используйте контейнеры. Чтобы выровнять элементы по горизонтали, поместите их в горизонтальный контейнер (Horizontal). Выберите один из элементов, откройте выпадающее меню и установите его ширину в пикселях (Edit Width). Чтобы выровнять элементы по вертикали, поместите их в вертикальный контейнер (Vertical). Чтобы создать более сложную сетку, вложите контейнеры друг в друга, создавая иерархию элементов.
Листы на дашборде нельзя редактировать. На дашборде можно менять только его элементы. Чтобы изменить визуализации, нужно перейти на исходный лист. Изменения автоматически отобразятся на дашборде.
Чтобы быстро перейти на лист, нажмите на значок перехода на панели Sheets во вкладке Dashboard или выберите лист на дашборде и нажмите на тот же значок .
Чтобы быстро перейти на лист, нажмите на значок перехода на панели Sheets во вкладке Dashboard или выберите лист на дашборде и нажмите на тот же значок .
Сделали несколько дашбордов и хотите узнать, в каких именно дашбордах находится определенный лист? Щелкните правой кнопкой мыши по нужному листу на панели листов и дашбордов снизу и наведите на Used In.
Дополнительный функционал
Text
Text
Text, или подпись, — это текстовый элемент, который дополнит отчет информацией. На дашборд можно добавить также изображение (Image), веб-страницу (Web Page), которую можно просмотреть на дашборде, или пустое пространство.
Зачем нам пустота?
При построении дашборда в режиме Tiled (плитка) лучше оставить пространство между графиками, чтобы не перегружать дашборд. Это поможет улучшить коммуникацию с аудиторией.
При построении дашборда в режиме Tiled (плитка) лучше оставить пространство между графиками, чтобы не перегружать дашборд. Это поможет улучшить коммуникацию с аудиторией.
Всем нужен ВОЗДУХ, дашборду — тоже.
Дополнительный функционал
Navigation и Download
Navigation и Download
Навигация и скачивание
Кнопка Navigation позволяет пользователю дашборда перейти на другой дашборд или лист по настройкам. Кнопка Download позволяет скачать дашборд в формате PDF, Crosstab, PowerPoint или изображения.
Дополнительный функционал
Extension
Extension
Расширение
Extension — это стороннее приложение, которое можно встроить в дашборд для работы с данными.
Чтобы добавить Extension на дашборд, перетащите его из панели Objects на нужное место на дашборде (учтите, что есть sandbox и не sandbox, платные и бесплатные, доступные на Public и недоступные).
Чтобы добавить Extension на дашборд, перетащите его из панели Objects на нужное место на дашборде (учтите, что есть sandbox и не sandbox, платные и бесплатные, доступные на Public и недоступные).
Рассказываем об Extension
Открытое техревью с Vizuators
Дополнительный функционал
Настройки масштабирования
Настройки масштабирования
Fit Option
Fit option — это настройка, которая позволяет адаптировать размер диаграмм на дашборде. Если вы добавляете блок диаграммы на дашборд и растягиваете его по высоте, вы можете выбрать, как будет масштабироваться исходная диаграмма. Она может растянуться по высоте, по ширине или по обоим направлениям.
С Fit Option вы можете тонко настроить внешний вид дашборда и диаграмм на нем. Чтобы лучше понять, попробуйте сами.
Настройка находится в верхнем меню в виде выпадающего списка. Найдите отличия на слайдах ниже.
С Fit Option вы можете тонко настроить внешний вид дашборда и диаграмм на нем. Чтобы лучше понять, попробуйте сами.
Настройка находится в верхнем меню в виде выпадающего списка. Найдите отличия на слайдах ниже.
Дополнительный функционал
Device Designer
Device Designer
Разработка дашбордов под разные экраны мобильных устройств и планшетов.
Чтобы созданные дашборды можно было удобно экспортировать на другие устройства для доступа к данным не только с компьютеров, в Tableau есть Device Designer. Этой надстройкой можно пользоваться при создании дашборда в Tableau Desktop и Tableau Public. Ее можно найти в левом верхнем углу.
Про мобильный дизайн
С чего начать?
Вернитесь на этап создания дашборда и уточните цели и задачи пользователей. Вы должны учитывать, в каких ситуациях они будут обращаться к данным на своем телефоне и как они хотят с ними работать. Подберите подходящие графики, которые будут четко отображаться на маленьких экранах.
Адаптируем содержание...
Например, если руководителю нужно регулярно контролировать показатели на мобильном устройстве и быстро реагировать на серьезные отклонения от нормы, учтите разницу между десктопной и мобильной версиями дашборда не только в форме, но и в содержании. Покажите первым делом показатели, которые действительно будут важны.
... и дизайн.
Создавая дашборд для мобильных телефонов учитывайте ограниченное пространство экрана и разную ориентацию устройства. Поэтому важно выбрать правильный макет и адаптивный размер дашборда, который подходит для разных разрешений экрана. Продумайте взаимодействие с дашбордом без курсора: сделайте элементы достаточно крупными для пальцев, используйте яркие и заметные фильтры, избегайте мелкого шрифта в аннотациях.
Вернитесь на этап создания дашборда и уточните цели и задачи пользователей. Вы должны учитывать, в каких ситуациях они будут обращаться к данным на своем телефоне и как они хотят с ними работать. Подберите подходящие графики, которые будут четко отображаться на маленьких экранах.
Адаптируем содержание...
Например, если руководителю нужно регулярно контролировать показатели на мобильном устройстве и быстро реагировать на серьезные отклонения от нормы, учтите разницу между десктопной и мобильной версиями дашборда не только в форме, но и в содержании. Покажите первым делом показатели, которые действительно будут важны.
... и дизайн.
Создавая дашборд для мобильных телефонов учитывайте ограниченное пространство экрана и разную ориентацию устройства. Поэтому важно выбрать правильный макет и адаптивный размер дашборда, который подходит для разных разрешений экрана. Продумайте взаимодействие с дашбордом без курсора: сделайте элементы достаточно крупными для пальцев, используйте яркие и заметные фильтры, избегайте мелкого шрифта в аннотациях.
План разработки дашборда в мобильной версии
Разрабатывайте сначала для мобильных устройств
Проще добавить пустое пространство и дополнительный контент для декстоп-дашбордов, чем убирать лишний для mobile.
Не перегружайте объектами
Чем меньше доступного пространства на экране, тем тщательнее нужно подбирать объекты дашборда.
Проще добавить пустое пространство и дополнительный контент для декстоп-дашбордов, чем убирать лишний для mobile.
Не перегружайте объектами
Чем меньше доступного пространства на экране, тем тщательнее нужно подбирать объекты дашборда.
Разрабатывайте дашборды для вертикальной прокрутки на мобильных
Большинство людей держит телефоны вертикально. Если разрабатываете для планшетов, то проверяйте, чтобы виз хорошо смотрелся и вертикально, и горизонтально.
Большинство людей держит телефоны вертикально. Если разрабатываете для планшетов, то проверяйте, чтобы виз хорошо смотрелся и вертикально, и горизонтально.
Самый активный палец на мобильном устройстве — большой. Ему легко добраться до элементов в зеленой зоне, но трудно до красных углов. Избегайте размещать важные элементы в красной зоне или увеличивайте размер кнопок. A List Apart
Организуйте свой дашборд
При вертикальном положении телефона ориентируйтесь на следующую иерархию элементов:
При вертикальном положении телефона ориентируйтесь на следующую иерархию элементов:
- заголовок и/или ключевая метрика;
- фильтры (располагайте вертикально друг за другом — так легче на них нажимать);
- визуализация;
- легенда к визуализации (если нужна);
- дополнительные визуализации (если нужны).
Всегда используйте диапазон размеров
Range Sizing — это наиболее гибкий способ создания дашбордов в Tableau. Вы указываете минимальную и максимальную ширину (и высоту) дашборда. Tableau автоматически подстраивает размеры дашборда под разрешение экрана, но не выходит за пределы заданных вами границ.
Range Sizing — это наиболее гибкий способ создания дашбордов в Tableau. Вы указываете минимальную и максимальную ширину (и высоту) дашборда. Tableau автоматически подстраивает размеры дашборда под разрешение экрана, но не выходит за пределы заданных вами границ.
Прокрутка виза VS прокрутка дашборда
Всегда блокируйте управление картой
По умолчанию на дашборде можно выделить и уточнить географические области на карте, но это сложно сделать с телефона. На мобильных устройствах пользователи менее точны в своих действиях. Чтобы избежать путаницы, лучше отключить все настройки масштабирования карты.
По умолчанию на дашборде можно выделить и уточнить географические области на карте, но это сложно сделать с телефона. На мобильных устройствах пользователи менее точны в своих действиях. Чтобы избежать путаницы, лучше отключить все настройки масштабирования карты.
Блокировка карты
Отказывайтесь от экшенов по наведению (Hover)
На сенсорных экранах мобильных телефонов Hover не работает, потому что одно касание экрана — это клик. Не сочетайте два действия с разной логикой на одном элементе, иначе они сработают одновременно.
Заменяйте обычные фильтры визуализациями
Стандартные фильтры трудно переключать на телефонах. А касания по визуализациям просты и заметны. Откажитесь от стандартных фильтров и используйте экшены на визуализациях (Use as Filter, Dashboard Actions).
Создавайте Истории (Story Points)
Истории — это наборы дашбордов, организованные как слайды. Они могут служить элементом интерфейса с большими кнопками и аннотациями, которые объединяют несколько логически связанных дашбордов.
На сенсорных экранах мобильных телефонов Hover не работает, потому что одно касание экрана — это клик. Не сочетайте два действия с разной логикой на одном элементе, иначе они сработают одновременно.
Заменяйте обычные фильтры визуализациями
Стандартные фильтры трудно переключать на телефонах. А касания по визуализациям просты и заметны. Откажитесь от стандартных фильтров и используйте экшены на визуализациях (Use as Filter, Dashboard Actions).
Создавайте Истории (Story Points)
Истории — это наборы дашбордов, организованные как слайды. Они могут служить элементом интерфейса с большими кнопками и аннотациями, которые объединяют несколько логически связанных дашбордов.
Как тестировать мобильный дизайн в Chrome
Для того, чтобы обнаружить все ошибки и слабые места, проверить удобство и заметность элементов, нужно протестировать дашборд. Помимо внутреннего тестирования в Tableau Desktop с использованием Device Preview, испытайте дашборд на разных мобильных телефонах.
Или пользуйтесь опцией в браузере Google Chrome:
• откройте опубликованный на сервере дашборд;
• нажмите F12, чтобы вызвать панель разработчика в Google Chrome;
• нажмите на иконку Show Device Toolbar в левом верхнем углу;
• выберите устройство, на котором хотите протестировать дашборд;
• обновите страницу, чтобы увидеть, как дашборд отображается на выбранном устройстве.
Или пользуйтесь опцией в браузере Google Chrome:
• откройте опубликованный на сервере дашборд;
• нажмите F12, чтобы вызвать панель разработчика в Google Chrome;
• нажмите на иконку Show Device Toolbar в левом верхнем углу;
• выберите устройство, на котором хотите протестировать дашборд;
• обновите страницу, чтобы увидеть, как дашборд отображается на выбранном устройстве.
ПРАКТИКУЕМСЯ
Приступаем к дизайну дашбордов
Обязательно попрактикуйтесь и поймете, что ваши данные умеют говорить! Работаем с уже хорошо известным нам Sample Superstore.
Задание
- На базе источника Sample Superstore постройте дашборд по образцу.
- Добавьте кнопки для выгрузки данных бар-чартов в Excel.
Скачать задание в виде книжки Tableau
Решение задания предыдущего дня
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Сегодня мы поможем ответить на насущные вопросы: как правильно считать в Tableau и как работать с контейнерами.
Tableau Order
of Operations
Повторяем последовательность операций, выполняемых Tableau при расчетах
8 dashboard container tricks
Управляемся с контейнерами как профи
Видео
Чтобы углубиться в процесс проектирования дашборда и поиски лучшего UX дизайна, познакомьтесь с кейсом знаменитого БигМак Индекса журнала The Economist. Предлагаем вам увлекательный диалог Энди из Tableau с ребятами из The Economist.
The Economist и Tableau
Журналистика данных и построение дашборда БигМак индекса
Советы по проектированию дашбордов для смартфонов
... от Кэлли Мартин
Советы по дизайну мобильных дашбордов
... от Роберта Роуза
Tableau 10 Device Designer
... от tableauFit
МАТЕРИАЛЫ
Наши артефакты
Помогут лучше усвоить и вовремя вспомнить основные методики, подходы, последовательности действий.
Книги
Повышаем дизайн IQ с помощью легко повторяемых техник мобильного дизайна. Без сухой теории и танцев с бубном. Практические темы и рекомендации по реализации.
Много живых примеров
Отличная подборка действующих кейсов. Позволяет на примерах из практики рассмотреть детали и логику проектирования дашборда для отраслевых задач. Всем читать.
Whitepaper
Гуру датавиза Interworks про эффективный дизайн.
Итоги этапа
Научились собирать дашборд, а тот, кто умел — освежил в памяти. Разобрались, где в продукте работать с дизайном информационных панелей и из каких деталей строится конечный результат. А еще учли неочевидные для новичков особенности дашбордов для мобильных устройств.
Повторили последовательность операций в Tableau и ушли листать примеры кейсов — набираться идей для дизайна своих дата-проектов. С завтра разбираем способы построения различных видов визуализаций. До следующего дня. Виз-виз ура!!
Повторили последовательность операций в Tableau и ушли листать примеры кейсов — набираться идей для дизайна своих дата-проектов. С завтра разбираем способы построения различных видов визуализаций. До следующего дня. Виз-виз ура!!
Бежим Марафон в команде!
С менторством и в компании единомышленников.
Нажимая кнопку, вы соглашаетесь на обработку персональных данных. Мы используем их, чтобы оставаться на связи. Подробнее здесь.
