Qlik Sense Style Guide - все не безнадежно
Вместо предисловия
Еще в довоенное время мы стартовали один небольшой, но классный проект на 3 месяца с Георгием Виноградовым, BI хедом фармацевтической компании Novartis, - сделать корпоративный стайл гайд для QlikSense. Многие пытаются делать в Qlik нестыдный дизайн, но на что-то большее никто не претендует. Tableau задрало планку красоты и все кажется смирились. Поэтому задача была манящей, выйти из зоны моего tableau-комфорта и выжать максимум из клика (с которым меня связывает много в bi-молодости) для получения дизайна, который бы меня самого устроил и вдохновил.
Помимо чисто информационного дизайна, нам предстояло глубоко погружаться в настройку VizLib (набор продуктов для расширения стандартной функциональности Qlik Sense) и мы усилили команду спецами из BI Consult, идейными ребятами из Питера. Стартовали проект с душой и огоньком.
24 февраля и дальнейшие события повлияли на драйв команды, сложно сохранять настрой и заниматься стайлгайдами когда гибнут люди. Проект мы довели конечно до результата. Несмотря на фон, в нем много творчества и крутых находок, будет неправильно не рассказать о нем. Возможно он вдохновит вас на аналогичную работу: может помочь клиководам поверить, что не только в Tableau можно делать визуализацию премиум класса, а пионерам нового российского биай может указать направления для движения в части дизайна и пользовательского опыта.
Постановка
Итак к сути.
Задачи проекта можно обозначить следующим образом:
- сформулировать унифицированные требования к разработке и визуальному оформлению отчётов для bi аналитиков компании - по сути создать нормативный вид отчета и всех типовых элементов навигации и чартов
- создать инструменты масштабирования в BI-проекте компании - шаблон, тему, гайд и visual vocabulary.
Ход работ
Реализовывать проект договорились гибко - предел возможностей Qlik и VizLib по кастомизации отдельных элементов до конца никто не знал. Особенной зоной риска - было создание сложного унифицированного хедера с навигационными элементами, разные реализации панели фильтров и кнопок. Также до конца не было понятно, как много форматирования можно заложить в QS JS Theme. Кроме того, в проекте предполагалось много стилистической вкусовщины (палитры, оформление чартов). В итоге, ввиду невозможности детально формализовать требования, договорились на берегу идти недельными спринтами и принимать решения рабочей группой, а не работать формально в парадигме заказчик-исполнитель (рискоемкий подход, использовать в отдельных ситуациях, не подходит для большинства проектов).
Инструментом для проектной работы - формализации требований и сборки результата - я выбрал - ... miro (подписка продлена, работаем). Не самый очевидный инструмент, но я рискнул. В проекте много коллаборации рабочей команды в удаленном формате, для которой этот тул идеально подходит. Кроме того, была идея использовать miro и для оформления конечного документа (гайда как такового) вместо слайдов powerpoint. Делаем miro-борд, отделяем в нем разные пространства для разных типов контента:
- зона фиксации требований по блокам по мере их согласования
- зона планирования - план проекта и скрам борд (в miro есть относительно удобные шаблоны)
- зона сборки конечного результата (слайдообразный ряд финальной презентации гайда)
- зона референтных артефактов (примеров отчетов, брендбуков и полезных ссылок).
По итогу могу сказать, что было вполне удобно, можно применять и дальше для легковесных проектов.
Разработка
(скриншоты далее содержат фейковые данные и публикуются с разрешения ребят из Novartis, за что им респект)
Шаг 0. Оставим за скобками очевидное - мы отсмотрели брендбуки и все, регламентирующее дизайн в компании, отобрали то, что было, на наш взгляд, адекватно. Также отсмотрели все приличные известные BI гайды - пример такой подборки по ссылке.
Шаг 1. Центральным элементом BI гайда - является нормативный вид отчета - то, как вы видите базовую верстку дашборда, подход к разграничению элементов и навигации. Такой подход уже был сформирован за годы работы нашей команды с Tableau. Из разных вариантов за основу мы взяли наиболее модный сейчас лайаут с серой сеткой. Но было неочевидно как в клике реализовать боковую панель навигационных иконок и панель фильтров. Предварительный расчет был на возможности экстеншена Vizlib Sheet menu в виде хедера.
Шаг 2. Начать мы решили со сложного - с создания корпоративной QlikSense theme. Custom theme в клике это коллекция файлов (QEXT file, JSON file и опциональные файлы типа CSS, изображения и т.д.), которые помогают быстро переопределить базовое форматирование - фонты, цвета и отступы. По итогу могу сказать что QlikSense theme - отличная штука, которую tableau было бы вполне уместно перенять.
Важно отметить, что наша задача была именно остаться в возможностях theme, без добавления css корректировок, чтобы сделать по-настоящему легко мастабируемый шаблон.
На эту тему есть несколько простых генераторов, помогающих стартовать свою тему (см sensetheme). На этом этапе мы ограничились фиксицией шрифтов для разных типов текста, цвета фона (светло-серый), паддингов объектов (создающих в итоге серую сетку), удалением всяческого шума и обводок (помним о data-ink ratio, статью Ромы прикладываю). Также загрузили несколько тестовых палитр разных типов для понимания возможностей. Созданию цветовых палитр для гайда была посвящена отедельная пляска с бубном, работа, описывать которую я не буду. Отмечу только, что пользовался сервисом coolors (из всех мне зашел больше всего), а еще в Qlik есть полезная фича с автоназначением цветов при генерации графиков в задаваемом порядке приоритености, чего часто не хватает в tableau.
По ходу проекта нашу тему мы еще много раз дополняли по мере создания visual vocabulary - форматами для подписей осей, форматингом сетки на графиках, скрытием лишнего шума и т.д.
Шаг 3. Следующий риск для нас был в том, что мы не сможем доступными средставами реализовать навигацию - пенель кнопок с разными важными для нам функциями. Поэтому мы начали проектировать темплейт отчета. Это важный элемент конечного продукта - по сути стартовое пустое приложение для начала разработки нового отчета с layouts для разных типов дашбордов и с настроенным форматингом. То, насколько он темплейт будет толковым, влияет на то, будет ли экономия времени и удобство у разработчика при его переиспользовании.
Начнем с главного - размещение блока навигации сбоку мы отмели почти сразу, сконцентрировались на классичной концепции функционального хедера. У клика остаточно бестолково, на мой взгляд, используется простанство сверху. Традиционный вид - две контрастные панели инструментов и третья полоска с заголовком самого дашборда. Странное решение, учитывая что каждый пиксель высоты рабочего пространства крадет минимум два пикселя ширины.
После многоразовых присяданий с VizLib Sheet Menu мы получили лаконичную полоску инструментов, совмещающую название отчета, вкладки дашбордов, иконки-кнопки (обязательные и опциональные), а также кнопку для выпадающей панели фильтров.
Отдельно запроектировали размещение фильтров в теле дашборда, справа. а также конструктив кнопок для размещения на дашборде.
Шаг 4. Далее чуть менее сложное, но более трудоемкое - создание словаря визуализаций - приложения, содержащего все нормативные реализации основных и дополнительных чартов. Смысл дать четкие примеры оформления графиков, для воспроизведения в проектах, а также дать понятные рекомендации по тому, как нужно, как не нужно их использовать.
Здесь опять же важно, засунуть поглубже гордыню, и не изобретать с нуля. Тема отлично раскопана для tableau, есть подборка тут, есть уже не новый, но дорогой сердцу наш гайд в Luxoft наполовину состоящий из visual vocabulary. Viz истины вполне универсальны, главное реализовать. Здесь местами у клика есть и преимущества в части чартов из коробки.
Мы взяли за основу работу Richard Speigal из NBS по адаптации для QlikSense Visual Vocabulary от Financial Times. Этот словарь достаточно удобный по структуре и составу. Алгоритм переиспользования прост - применяем наши темы и палитры, пропускаем через себя содержание, добавляем своего (мы добавили около 30%), уточняем (а по факту "очищаем") форматирование отдельных чартов.
Стандартные чарты мы расширили кастомными объектами: своей коллекцией KPI плашек на базе Vizlib KPI Designer, а также таблицами со спарклайнами.
Вместо выводов
После завершения проекта, команда Novartis активно адоптит результат под отчеты, экспериментирует с KPI плашками, расширяют и уточняют vith-каталог, усиливают UI/UX. Гайд родился и зажил жизнью, что круто. См их каверы на папках сервера.
Qlik Sense ушел из России (хоть и сделал это адекватнее других BI вендоров), но тем не менее продукт продолжают использовать. Vizlib штука дорогая и опять же более недоступная. Но будет время, будут другие системы, но проблема херового дизайна останется.
Какой бы продукт бы вы не развивали, не размножайте уродство, его и так до жопы. В стесненных возможностях нового BI - выполнение правила внутреннего и внешнего в паддингах уже вам даст +100 единиц маны.
Всем мира и адекватности.
