ДЕНЬ 30
Про создание дашбордов
СЕГОДНЯ:

Возвращаемся к большой теме проектирования дашбордов. За несколько следующих дней рассмотрим разные аспекты сборки и проектирования: от погружения в ключевые термины, до интерактивных элементов, мобильности и производительности отрисовки в Tableau. Тема тёмная, поэтому бежать будем медленно и подсвечивать фонариками. В День 30 покопаемся в типах дашбордов, основной типизации, поговорим об аудитории и начнем собирать советы по проектированию и разработке. Небольшие кейсы с описанием задач и полученных результатов работ вместо практики. На книжную полку поставим Стивена Фью с изданием за три доллара: все еще актуального в своих принципах. Чеклист с идеями того, что нужно проверять по завершению работ в разделе артефактов. Ко всему введению - тележка со всякими идеями и ссылками. Стартуем неделю дашбордизма в нашей марафонской дистанции. Побежали.

РАЗБИРАЕМСЯ
Дашборды
Все таки, что такое дашборд?
«Дашборд – это визуальное представление наиболее важной информации, сгруппированной по смыслу на одном экране так, чтобы еë можно было легко понять.»

Если разобрать определение на кусочки и пояснить каждую часть:
  • Визуальное представление – результат представлен в графической форме.
  • Информации – по содержанию в основном числовой, по форме – в виде графиков и таблиц.
  • Наиболее важной – ключевые показатели, которые действительно необходимы для принятия решений.
  • Сгруппированной по смыслу – показатели должны быть связаны между собой, относиться к одной теме (отдел, продукт, процесс), предоставлять необходимый набор ответов для пользователя.
  • На одном экране – представление информации без полосы прокрутки. Если дашборд выходит за границы экрана, то единая смысловая картина рассыпается. С одной стороны, при быстром взгляде на одноэкранный дашборд все данные быстро считываются, а это плюс. С другой стороны, это спорное условие: а что если у меня очень много данных? Существует множество примеров дашбордов-лонгридов на несколько экранов. Но что точно важно для дашборда – это возможность легко и быстро проводить сравнения, а это сделать гораздо проще, если все необходимое находится рядом друг с другом.
  • Легко понять – для пользователя интуитивно понятно, что значит каждый блок отчета. Складывается единая картина, и аудитория тратит энергию не на расшифровку таблиц и мудреных визуализаций, а на аналитическую работу.
Зачем они нужны?
Дашборды создают целостную картинку, компактно отображая большое количество информации. Дашборды – естественный этап развития визуализации данных, которая изначально использовалась для статистических данных в научных целях. Создавая дашборд, вы упрощаете подачу информации, стираете границы, делая сложное простым.

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

Ключевой момент создания дашборда - это определение вопросов на которые должен ответить интерактивный продукт, с помощью манипулирования интерактивными элементами UX дизайна.
Дашборд по итогам первой конференции DataVizDay 2017 года в Минске
Какие есть типы дашбордов?
Традиционно, все дашборды делятся на три основных типа: стратегические / операционные / аналитические.

Стратегические
  • Быстрый обзор состояния и возможностей бизнеса
  • Фокусировка на высокоуровневых показателях эффективности

Операционные
  • Используются для мониторинга текущих операционных процессов
  • Отражают конкретный текущий момент и быстро обновляются

Аналитические
  • Требуют дополнительного контекста (сравнений, истории, оценок)
  • Высоко-интерактивные, позволяющие выбирать нужные срезы и использовать фильтр

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

Персональные
  • Индивидуальные данные по активности, спорту, финансам
  • Фокусировка на подстройке под опыт пользователя

Коммуникационные
  • Мотивационные и образовательные тематики
  • Открытые источники, дата журналистика
  • Социальные тематики: здравоохранение, спорт, различные исследования
Какой процесс?
Определение вашей аудитории. Определение ключевых показателей для выбранной аудитории. Поиск подходящих источников данных, из которого можно вытащить необходимые показатели. Правильно подобранные диаграммы: визуализация и сторителлинг.
Аудитория
Определение вашей аудитории. Определение ключевых показателей для выбранной аудитории. Поиск подходящих источников данных, из которого можно вытащить необходимые показатели. Правильно подобранные диаграммы: визуализация и сторителлинг.
Аудитория формирует подход к проектированию дашборда. Нужно ответить себе на вопросы: для кого этот дашборд? Хотят ли они решить какую-либо проблему при помощи этого дашборда? Какой идеальный вариант использования дашборда? Какие KPI им нужны, какие для этого необходимы фильтры? Есть ли установки на внешний вид? Какова частота обновления данных? В какой форме будет использоваться дашборд? (Веб, pptx, pdf и так далее). Все ли необходимое в данных уже есть?

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

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

Золотое сечение - это такое пропорциональное деление отрезка на неравные части, при котором весь отрезок так относится к большей части, как сама большая часть относится к меньшей; или другими словами, меньший отрезок так относится к большему.
Еще один помощник при проектировании дашборда - шаблонные сетки. Сетки накладываются на задний фон для выравнивания элементов и четкой визуальной структуры. Перед публикацией они убираются, а если надо, то вновь добавляются.
И одно из самых главных правил - фокусировка внимания. Самая важная информация на дашборде должна быть расположена в верхнем левом углу экрана. Эта область наибольшего акцента и первичного внимания. Это то, откуда мы привыкли читать книжки и сайты, листать социальные сети, воспринимать информацию в целом. Чем информация на дашборде ниже и правее, тем меньше внимания ей уделяется. Это обусловлено человеческим восприятием.
ПРАКТИКУЕМСЯ
В ближайших практических заданиях мы разберем несколько кейсов на реальных дашбордах. Ваша задача - прочитать все вводные и оценить предложенный вариант. Как бы вы могли улучшить получившийся дашборд?
Задача
Сайт республики Татарстан содержал основные показатели посещаемости сайтов районов региона. Основными задачами было:

  • Использование технологий Tableau для сокращения времени подготовки отчетности
  • Организация процесса сравнения показателей во времени
  • Создание интерфейса сравнения районов по успешности продвижения муниципальных сайтов
  • Представление данных в интересном аспекте и с использованием альтернативных техник отчетности
Данные
Данные представлены в виде *.docx файлов в разделе сайта республики, разбитые на месяца и области. Во избежании больших временных затрат, данный отчет содержит только 3 месяца. Были использованы дополнительные данные численности населения райнов для расчетов определенных показателей.
Техническое решение
В решение были использованы Data Blending. Так же были загружены и использованы сторонние границы областей, так как Tableau не содержит информации об областях республики Татарстан.
Элементы
  • Карта показывает абсолютные показатели кол-ва посещений сайтов временного среза по областям, позволяющие легко определить лидеров
  • Нижний график позволяет отследить изменение показателей по отношению к начальному отчетного периоду
    • Положение левых кругов - количество посещений
    • Положение правых кругов - разница в количестве просмотров по отношению к предыдущему периоду и начальному периоду
    • Цвет кругов - разница в количестве посещений по отношению к предыдущему периоду и начальному периоду
    • Размер кругов - количество посещений на численность района
  • В отчете используется принцип Pages, позволяющий менять отчетные периоды и показывать историю изменений показателя (полупрозрачные круги и пунктирная линия, показывающая движение показателя)
Главное орудие эстетики, глаз, абсолютно самостоятелен. В самостоятельности он уступает только слезе.

// Иосиф Бродский
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Добавляются по мере необходимости на каждую тему дня...
МАТЕРИАЛЫ
Наши Артефакты
Помогут Вам лучше усвоить и вовремя вспомнить основные элементы методик, подходов, последовательностей действий, проверенных практик
Книги
Сегодня на книжную полку ставим издание 2006 года: отличная работа Стивена Фью, нисколько не устарела за прошедшие годы. Все принципы перешли в практику. Для тех, кто интересуется темой, рекомендуем переиздание данной книги Стивена. Заказывайте на Amazon.
Дизайн Дашбордов
Стивен Фью
В этой книге вы найдете основы визуального дизайна, необходимые для создания информационных панелей. На страницах также:

+ Общие ошибки для дизайна дашбордов
+ Как минимизировать отвлекающие факторы, клише и ненужные украшения, которые создают путаницу
+ Как организовать информацию для поддержки смысла и удобства использования
+ Способы поддержания согласованности дизайна для обеспечения точной интерпретации
Итоги этапа
Пробежались по определению дашборда. Разобрали элементы подготовки и основные шаги процесса создания дашборда. Запаслись книжкой на ночь и линками на кофейные перерывы на следующий день, чтобы почитать материалы внимательно. Из чеклиста сделали свои заметки, ну и подумали над улучшением кейса. Неплохой результат за день. Бежим дальше. Нас ждет отличная тема размещения КПЭ на дашборде. Виз виз ура!
~
DATA YOGA CLUB