Стайлгайды Tableau
Как стайлгайд упрощает self-service аналитику и совершенствует data-культуру в компании?
Как научить сотрудников self-service аналитике при помощи стайлгайда?
Как стайлгайды помогают внедрить data-driven культуру в компании?
Стайлгайды традиционно используются в дизайне, фирменном стиле, UX. Но по мере развития цифровизации в жизнь и работу людей пришло много новых инструментов, которые потребовали удобных интерфейсов и эргономики. Оказалось, что для аналитических систем тоже нужно создавать внутрикорпоративные стайлгайды. Как мы это сделали и что из этого получилось - делимся собственным опытом, рассказываем о том, какие компетенции нужны для создания гайда и показываем собственный кейс для компании ПИК.
Когда люди получают возможность исследовать и использовать новые вводные для принятия решений, вместе с пониманием к ним приходят новые идеи и возможности. Это и есть ключ к развитию self-service аналитики.

Этим начали активно пользоваться те компании, для которых инсайты о бизнесе критически важны для принятия решений в режиме реального времени – например, ретейлеры, e-commerce, интернет-компании, банки, телеком, логистические компании и многие другие.
Эффект от применения аналитики в этих отраслях взрывной. Поэтому, внедряя новые инструменты для аналитики, на начальном этапе многие топ-менеджеры придерживаются подхода «Дикий Запад»: всех, кто пользуется новыми технологиями для формирования отчетности и поиска закономерностей, всячески поощряют, и каждый из команды может работать с ними так, как считает нужным. Любая унификация на этом этапе будет снижать мотивацию людей и убивать их любопытство к новой сфере.

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

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

Поэтому продвинутые команды практически сразу приступают к созданию внутреннего стайлгайда, формирующего унифицированный подход к визуализации данных.
Как стремительное развитие data-культуры рождает стандарты визуализации данных
Аффордансы, «проваливания» и контекстные подсветки
Стайлгайд - это всегда руководство по стилю, и в работе с аналитическими системами он сохраняет свою задачу: определить список элементов для дашбордов и правила оформления отчетов, подходящих под стилистику конкретной компании и учитывающих специфику ее работы с данными.

В расширенных версиях стайлгайд может содержать в себе также примеры использования как простых графиков, так и самых востребованных и продвинутых интерактивных аналитических приемов. Руководство по стилю опирается на общие принципы дизайна, основные принципы повседневной отчетности (Эдвард Тафти), подходы к цвету для визуализации данных и Visual Vocabulary (Алан Смит, The Financial Times).
Каких целей помогает достичь стайлгайд?
Стайлгайд помогает упростить работу сразу по нескольким направлениям. Одно из них — правильное взаимодействие с инструментами платформы. Например, когда мы работаем с аналитической системой Tableau, то часто видим: обычный человек не понимает интуитивно, что на конкретный график можно кликнуть и получить информацию на более глубоком уровне.

При этом сами разработчики Tableau создают много того, что ученый в области дизайна и когнитивистики Дон Норман назвал бы «аффордансами». Аффорданс — это свойство или функция объекта, которая подсказывает, что с ним можно сделать. Раскрывающиеся элементы, переходы, контекстные подсветки (highlight action) – все эти приемы улучшают качество аналитики и принятие решений. Мы называем это Tableau way и противопоставляем огромным таблицам с большим количеством фильтров. Любая такая таблица может быть приведена к удобной столбчатой диаграмме, с которой пользователь будет легко взаимодействовать.
1
Единообразный пользовательский интерфейс для всех, кто имеет доступ к информационным панелям и инструментам визуализации, сокращает время, необходимое на подготовку отчетов и на погружение в аналитику других отделов.
Экономия времени
2
Например, заложенный в Tableau визуальный подход помогает преобразовывать и делать более простыми в использовании любые дашборды, которые построены по принципу Excel Way.
Оптимизация дашбордов
3
За счет внедрения передовой практики визуализации данных общий уровень культуры работы с ними повышается сразу во всей компании.
Повышение уровня культуры
4
Внутренняя отчетность становится узнаваемой частью всей компании и, в частности, продукта/услуги, которую производит команда.
Сильный бренд
Простым неподготовленным пользователям этому интерактиву нужно учиться, и эту задачу решает стайлгайд.
Документ помогает пользователям сориентироваться и лучше понимать, какое действие позволит углубиться в данные, а какое не даст никакого эффекта. Руководство по стилю решает не только визуальную задачу, но и учит пользователя быть аналитиком. Разработанные шаблоны визуализации направляют его, делая любой дашборд интуитивно понятным.

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

Простой пример – отчет компании с красным логотипом и соответствующим брендбуком не может быть подготовлен в корпоративных цветах. Ведь красный - это цвет-«стоп», символ чего-то опасного, выходящего за требуемые рамки. В аналитике красным обычно подсвечиваются цифры, требующие незамедлительного вмешательства, исправления ситуации. Поэтому любые цифры и положительная динамика в аналитическом отчете, выполненном в фирменном стиле такой компании, будут восприниматься пользователем в негативной коннотации. Важно сохранить баланс между узнаваемостью элементов корпоративного стиля, визуальной составляющей и общей функциональностью аналитики. При правильном подходе стайлгайд становится дополнением брендбука.
Кейс: стайлгайд для ПИК
Рассмотрим кейс создания стайлгайда для компании ПИК на платформе Tableau. Рассмотрим кейс создания стайлгайда для компании ПИК на платформе Tableau. ПИК – одна из крупнейших российских строительных компаний. Весной 2020 года она смогла оперативно перевести все сервисы по выбору, бронированию, покупке и аренде жилья в онлайн, а в 2021 открыла продажи в первом зарубежном проекте. Вместе с быстрым ростом компании возросла и роль аналитики – пользователи стали нуждаться в более продвинутых инструментах. Для того, чтобы унифицировать отчетность, повысить культуру работу с данными и раскрыть возможности аналитической платформы, было решено создать внутренний стайлгайд.
На старте работы важно разобраться, какой гайд нужен заказчику – есть расширенные версии, а есть мини-версии, включающие только цвета, типографику и несколько примеров. Расширенные версии содержат полный список графиков и визуализаций, примеры реализации и готовые к использованию шаблоны, Tableau way, пользовательские истории. До нас в компании уже создали сокращенный стайлгайд, в котором содержались рекомендации по использованию шрифта и несколько примеров визуализаций. Соответственно, нашей задачей стала разработка расширенной версии гайда.
Первый этап: определение потребности
Второй этап: план
Мы разработали план работ и подробно прописали список элементов, которые войдут в гайд. Помимо примеров реализации и приемов в Tableau, которые можно скачать и использовать в работе, мы также договорились о подготовке описательной части и руководства по применению в формате презентации.
Третий этап: проработка внешней составляющей
Работая с аналитикой, сотрудники ПИК могут самостоятельно выбирать цвета из тех, что заложены в гайде, поэтому на наших примерах они будут черно-белыми.
Перед тем, как приступить непосредственно к аналитике, мы прорабатываем и утверждаем визуальную составляющую, а именно типографику и цвет. Эта работа строится на основных принципах дизайна с учетом корпоративного стиля компании. Важно помнить, что цвета будут использоваться для отображения данных, а значит, для каждой категории должно быть свое цветовое решение, которое будет легко считываться пользователем и станет привычным, и эти цвета уже нельзя использовать для другой категории.
Четвертый этап: проработка аналитической части
Часто разработчики гайдов останавливается на внешних атрибутах, но именно создание Tableau way, своего рода карты действий, усиливает эффект и отдачу от аналитики. Например, благодаря инструменту Proportional Brushing при клике мы можем не просто отфильтровать нужную нам информацию, а увидеть соотношение между этими данными и всеми остальными.
После этого мы перешли к блоку шаблонов, где разместили все элементы.
Также мы посмотрели все последние отчеты ПИК, проанализировали их, определили универсальные иконки («вперед», «назад», «для информации»). После дополнили их теми, которые являются стандартом именно для этой компании, а также проанализировали те тестовые строки, которые чаще всего используются и также могут быть заменены графическими элементами.
На этом этапе мы начинаем работу с графиками, разрабатываем легенды и визуализации.
Пятый этап: проектирование
В презентации мы рассказываем, как пользоваться созданными инструментами, как перейти к визуальной аналитике, как использовать actions и как внедрить их в процесс работы. Главная задача – объяснить, как работает связка Tableau и визуальных элементов.
На этапе проектирования мы создали все визуализации, дашборды на платформе Tableau. Для того чтобы начать с ними работать, пользователю достаточно скачать их. Также мы подготовили презентацию, которая стала руководством по применению всех приемов.
Что нужно учесть бизнесу при разработке собственного стайлгайда?
У компании, планирующей создать единый стиль дашбордов, есть два пути: сделать это самостоятельно или поручить экспертам. Если вы решились создать стайлгайд самостоятельно, помните о нескольких важных моментах:

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

> Опыт создания гайда для BBC
> Примеры работы с гайдами на сайте Tableau
Если вы хотите совместить дизайн и data-культуру своей компании, обращайтесь к экспертам Navicon!
© 2002 – 2022 Navicon. Все права защищены.
Платформы
Проекты
Решения
История
Москва, 115088, ул. Шарикоподшипниковская, д. 38, стр. 1.
Адрес

Закажите свой стайлгайд!