Экстремальное прототипирование и красота данных
Шаолинь-дашборд
день 07
Сегодня изучаем визуальные аспекты процесса разработки дашбордов и проходим экспресс-курс лучших советов дизайна.
Посмотрите запись эфира седьмого дня
Мы встретились онлайн с экспертом разработки дашбордов и автором телеграм-канала «Красиво в FineBI» Алисой Ручкиной и обсудили вопросы проектирования дизайна.
Дизайн данных:
забота о пользователях
Александра Усачева
Эксперт по коммуникации с помощью данных, DataYoga
Дизайн — это не просто создание красивого внешнего образа продукта, но и сложный процесс принятия решений. Он требует от дизайнера опыта, ответственности и умения работать в сроки. Прежде чем приступить к работе, важно задуматься о пользе и необходимости будущего дизайна для других.
Дизайнеру важно понять, что именно нужно конечным пользователям продукта. И зафиксировать это через исследование их предпочтений, ожиданий и болевых точек.
Для оценки полезности дизайна для других можно использовать несколько ключевых критериев:
1
Соответствие целевой аудитории. Дизайн должен быть понятен и привлекателен для целевой аудитории. Изучение потребностей и предпочтений пользователей поможет создать более эффективный продукт.
2
Функциональность. Основная задача дизайна — решать конкретные проблемы пользователей. Не только форма, но и функция. Функция через форму.
3
Эффективность. Дизайн должен четко передавать сообщение о продукте, акцентируя внимание на ценности для потребителя. В дашбордах дизайн точно должен работать на результат и смысл, который вы закладываете в имеющихся данных.
4
Доступность. Важно, чтобы пользователи могли легко ориентироваться в дизайне, находя нужную информацию без лишних усилий. Читаемость текста, навигация и логичное размещение элементов – все это работает на создание и увеличение доступности.
5
Анализ. Наконец, оценить успешность дизайна поможет проведение исследований и анализ метрик. Уровень вовлеченности, популярность, обратная связь пользователей по дашбордам – оценивайте это, если хотите узнать, насколько вам дашборд качественно сделан с точки зрения дизайна.
Случается, что сами данные настолько ценны для пользователя, что дизайн данных вторичен. Даже если дашборд сделан неудобно и плохо, им будут продолжать пользоваться ради ценности самих данных. К тому же, в компаниях обычно нет альтернативных версий дашбордов в другом дизайне на том же источнике – важна единая точка правды.
Дизайн это не про «выполнить задачу и поскорее закрыть бэклог». Дизайн во-многом субъективен. Дизайн во-многом даже не всегда обязателен. Но именно внимание к дизайну делает ваш продукт запоминающимся, а опыт работы — приятным.

Забота и мастерство, которые мы вкладываем в каждый проект, возвращаются к нам в виде доверия и внимания со стороны пользователей.
Восточная мудрость:
не спешить
Андрей Демидов
Основатель сообщества по визуализации данных DataYoga
Восток старается отделять зерна от плевел, предполагая что по-настоящему важные вещи не делаются на скорую руку, а требуют отдельного обдумывания и осмысления последовательности действий. Не следует спешить с немедленным выполнением всех пришедших в голову идей — многие из них могут оказаться ненужными. Важно уметь выделять задачи, которые действительно важны.
Не нужно спешить при выполнении важных дел.
Принцип востока
Все, что важно, не бывает срочно. Все, что срочно, — только суета. Сян-цзы
Часто срочные дела выполняются в спешке. Это приводит к излишнему стрессу и давлению, а это, в свою очередь, вызывает неуверенность в правильности принятых решений. Спешка негативно сказывается на качестве работы, и все, что сделано наспех, обычно оказывается ненадежным и недолговечным.

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

На мой взгляд, это дашборд, которым действительно пользуются и который помогает быстро получить правильный ответ на вопрос, и как следствие — принять решение, по-настоящему основанное на данных.
Дашборд сам по себе не приносит ценность.
Ценность приносит человек, который делает умозаключение с помощью дашборда. 
Для принятия правильного решения важно иметь достоверные данные, выбрать подходящие метрики и быть дата-грамотным, видя в графиках смысл. А что может сделать на этом пути «простой» BI-разработчик? У меня есть несколько идей.
1
Правильно выбрать вид визуализации, чтобы визуализации помогали делать выводы, а не становились препятствием.
Рассмотрим графики из книги Александра Богачева «Графики, которые убеждают всех», которые я почти повторила в FineBI (версия 6.1.2).
1
В данном примере нам прежде всего важна динамика изменения цен на первичном и вторичном рынке недвижимости и соотношение цен друг относительно друга. Для решений этой задачи лучше подойдет линейный график. Тогда мы сфокусируемся не на значениях отдельных столбиков, а на общей динамике изменения цен и на разнице между категориями (стоимостью первичного и вторичного жилья).
В выборе типа графика помогут чарт-чузеры — каталоги видов визуализаций. Их существует большое множество, вот часть из них:

data-to-viz.com
datavizcatalogue.com
datavizproject.com
depictdatastudio.com/charts/
anychart.com/chartopedia/usage-type/
2
Убрать все лишнее, чтобы спрямить путь к цифрам и помочь пользователю быстро увидеть тренды и закономерности.
Для того, чтобы сократить путь к цифрам, нужно убрать препятствия в виде визуального шума. К визуальному шуму относятся толстые (контрастные к фону) линии сетки, яркий фон, отвлекающий от данных, и пестрота цветов, а еще избыточно точные и большие числа, градиенты и т. д. — все, что не помогает понять данные, а чаще мешает.

В FineBI, как в любой другой программе для создания визуализаций, есть опции, которые добавляют визуального шума. Для построения минималистичного графика их лучше не использовать. Среди декоративных настроек, присущих именно FineBI, я бы выделила богатый выбор маркеров на линейном графике, цветной фон и градиентную заливку. Все эти элементы перетягивают внимание на себя и усиливают когнитивную нагрузку на пользователя, что не добавляет истинной ценности дашборду.
Примеры вредных правил дизайна данных.
3
Расставить акценты и добавить структуру.
После удаления лишнего нужно добавить акценты, чтобы направить взгляд пользователя к ответу на его вопрос к данным. Главным помощником в этом будет продуманное использование цвета.
А стройность и структурированность дашборда достигается за счет логичной группировки компонентов и создания визуальной иерархии информации: от большого к малому, от заметного к второстепенному, от верхнеуровневых показателей к детализированным данным.
4
Сделать дашборд эстетичнее, чтобы пробудить у пользователя желание чаще работать с дашбордом и дольше изучать данные.
Говоря об эстетике, я прежде всего отмечу важность симметрии и соразмерности блоков, потому что тогда дашборд будет выглядеть гармоничнее и намного опрятнее.
Лайфхак: если не получается расположить компоненты симметрично, потому что остается пустое место, то можно либо оставить его пустым, либо добавить небольшой текстовый блок с описанием контекста для дашборда или перечислением предустановленных фильтров.
5
Сориентировать пользователя, как пользоваться дашбордом.
Дизайн — это не только про внешний вид, но и про опыт при работе с продуктом. Важно продумывать опыт пользователя и с точки зрения его взаимодействия с данными, не оставлять его одного с дашбордом. Это могут быть демо-ролики с показом функционала или документация пользователя, но они требуют трудозатрат на поддержание актуальности. Более эффективными, на мой взгляд, являются такие способы:

  • описание метрик во всплывающих подсказках,
  • направляющие фразы в компонентах,
  • значки для обозначения интерактивных элементов,
  • или динамические заголовки, в которых подстраиваются элементы значений полей и фильтров — для объяснения данных на диаграмме.
Чтобы сэкономить время на рутинной разработке дашбордов и чаще оттачивать BI-мастерство, медитируя о том, как принести пользу бизнесу, рекомендую попробовать ускорители:
1
Используйте кнопку Ctrl на клавиатуре для выделения нескольких элементов. С её помощью можно быстрее копировать шаги обработки данных во вкладке Data, сразу добавлять несколько пилюль в компоненты или несколько компонентов на дашборд.
2
Сбрасывайте (смахивайте) пилюли из компонентов, минуя открытие выпадающего списка и выбор опции Delete.
3
Наведите порядок в объектах сабджекта:
  • введите в практику корректный и удобный нейминг объектов. Например, при создании шагов обработки данных называйте их так, чтобы был понятен смысл осуществляемого действия, а при создании новых столбцов в компоненте добавляйте приписку _param, если он зависит от параметра, или _color, если вычисление используется только в качестве условия для раскраски.
  • сортируйте компоненты в порядке их отображения на дашборде и скрывайте их по умолчанию. Например, мне это помогает быстрее сориентироваться в большом количестве графиков.
  • разделяйте составные вычисления в компонентах на отдельные вычисления.
Порядок в сабджекте — порядок в голове.
4
Настраивайте стиль (шрифты, цвета, вид таблиц и фильтров) сначала для всего дашборда и только затем для каждого компонента.

Когда вы редактируете внешний вид дашборда используйте подход «от большего к меньшему»: начинайте с изменения шрифтов и заголовков на уровне всего дашборда (Dashboard Style), затем переходите к форматированию на уровне компонентов. Небольшие детали на каждой диаграмме (вроде всплывающих подсказок) настраивайте в самом конце. Используя такой подход, вы сэкономите много времени.
5
Вместо создания большого количества однотипных графиков используйте в дашборде возможности параметров для перестраивания визуализаций и обучайте пользователей применять кросс-фильтрацию (в FineBI фильтрация одного графика другим называется linkage).
Если вы хотя бы немного знаете английский (или знаете как перевести PDF-файлы), то Алиса сердечно рекомендует вам почитать две книги ниже: для насмотренности в дизайне и лучших практик разработки дашбордов.

Присоединяйтесь к чату FineBI в Telegram
Здесь можно задавать вопросы по марафону, делиться открытиями и получать поддержку от участников сообщества и экспертов GlowByte.
Практика с FineBI
Александр Ларин
Руководитель центра поддержки и обучения FineBI, GlowByte
Сегодня вы соберёте свой первый дашборд и настроите на нём интерактивные функции! Дашборд — это важный инструмент для визуализации ключевых данных, который позволяет собрать всю необходимую информацию на одном экране и сделать её легко доступной для анализа.

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

Кроме того, FineBI позволяет настраивать интерактивные функции, которые делают анализ более гибким и глубоким:
1
Фильтрация по клику — дашборд будет обновляться на основе кликов пользователя на конкретные элементы визуализации.
2
Jump — возможность перехода между дашбордами или к более детализированным данным.
3
Drill — погружение в более детализированные уровни данных в той же визуализации.
Дашборд в FineBI
ПРАКТИКА БЕЛЫХ ДРАКОНОВ
Сегодня у вас будет несколько этапов выполнения основного задания.
1
Соберите дашборд, используя шаблон сетки. Расположите на нём ключевые визуализации, которые вы уже создали. Постарайтесь организовать элементы так, чтобы информация была легко читаемой и логично сгруппированной.
2
Настройте все интерактивные функции на вашем дашборде:
  • Фильтрацию по клику.
  • Jump для перехода к детализированным данным или другому дашборду.
  • Drill для углублённого анализа данных.
3
Настройте «связку» (linkage) таким образом, чтобы фильтрация работала только для некоторых визуализаций. Это поможет вам сделать аналитику более точной и сфокусированной на важных показателях.
Выполните шаги по созданию своего дашборда из списка выше.

Инструкция: сборка дашборда

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

Это важный шаг на пути к созданию интерактивных аналитических панелей!
Вафельная диаграмма
ПРАКТИКА ЧЕРНЫХ ДРАКОНОВ
Вафельная диаграмма — это вид визуализации, который показывает соотношение части и целого. Обычно вафельная диаграмма состоит из 100 ячеек, каждая из которых равна 1%.
На основе источника данных, который вы можете скачать по ссылке,
сделайте визуализацию вафельной диаграммы.
Решение для этой практики вы найдете в материалах следующего дня.

А здесь — решение задачки шестого дня с комбо-пончиком.

Запись эфира седьмого дня

Обсудили вопросы проектирования дашбордов с экспертом и автором телеграм-канала «Красиво в FineBI» Алисой Ручкиной.

Полезные ссылки
Автор канала – наш эксперт сегодня, Алиса Ручкина
Еще один полезный телеграм-канал
Гайд по шагам разработки отчетов в корпоративных BI-проектах от Александра Баракова
Спасибо и до встречи на следующей
дата-практике!
Назад
День 6. Из технаря в руководителя
Кейс МКБ и стратегии роста для технического специалиста
Дальше
День 8. Ускорение в 8х раз
Кейс Альфа-Лизинг и работа с данными в FineBI