Максимум пользы: как аналитический функционал BI-системы дополнить кастомным интерфейсом

Всем привет! На связи представители BI-команды «БАРС Груп»: ведущий разработчик, тимлид Ксения Ершова и аналитик Алиса Никитина. BI нередко ассоциируется с унылыми отчетами, экселеподобными таблицами, примитивным и скучным дизайном. На деле же BI-системы могут выдавать максимально информативные, понятные и приятные для восприятия отчеты.

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

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

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

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

1. Анализ целей и предметной области

Итак, наша задача состояла в том, чтобы создать единую централизованную систему визуализации данных для транспортной компании. Начали мы с анализа бизнес-целей, стараясь максимально глубоко погрузиться в сферу, понять цели заказчика и то, что он хочет проследить на дашбордах, чтобы предельно близко подойти к необходимому результату.Например, по ТЗ от Заказчика, нам нужно сделать «очевидную и прозрачную» кнопку для выгрузки детализаций с дашбордов. Чтобы понять замысел клиента, надо говорить с ним на одном языке. Так, в нашем примере «очевидность и прозрачность» означали неперегруженность дашборда функциональностью и постоянный доступ к полному срезу данных. Но и эта задача потребовала детального разбора, потому что ряд пожеланий противоречили друг другу, и мы совместно с заказчиком искали разумный компромисс.

Мы начали углубляться в суть функциональности: какие данные будут выгружаться, должны ли они быть привязаны к конкретному виджету или ко всему дашборду, каковы условия для выгрузки данного отчета, фильтры и т.д. На данном этапе стало понятно, что ни один конструктор дашбордов не справится с этой задачей и потребуется полный цикл разработки.

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

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

2. Макеты

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

Выделим основные требования, которые стоит учитывать при составлении макетов:

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

Помогают размещать элементы в порядке акцентирования внимания. Если мы посмотрим на тепловую карту панели, то поймем, что в основном первым делом внимание пользователей привлекает правый крайний угол, далее - по порядку чтения, слева-направо и сверху-вниз.

Одни и те же данные, представленные в различных форматах визуализации, могут восприниматься по-разному. Так, динамика развития ситуации во времени отчетливее прослеживается в линейных диаграммах и наоборот - никак не считывается в виде «пирога». А вот структуру выручки в компании или процентное соотношение затрат визуализировать лучше как раз через круговую («пироговую») диаграмму.

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

Выбор наиболее предпочтительных элементов дашборда позволит пользователям получать четкие ответы на бизнес-гипотезы, видеть перспективу развития компании и принимать взвешенные решения в режиме реального времени.

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

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

Так, в кейсе транспортной компании, для отрисовки макетов мы использовали Figma, хотя также можно было использовать инструмент Adobe XD. Решение было принято с учетом различных рисков и возможностей. На данном этапе большую помощь окажет UX-дизайнер, еще экспертная оценка облегчит жизнь всей команде, работающей над проектом.

3. Согласование макетов

Макеты готовы, но приступать к реализации рано. Чтобы пользователи в дальнейшем могли в полной мере применять функционал ИТ-продукта, на этапе приема-согласования макетов важно выявить все узкие места. Изменение верстки на более поздних шагах, если и будет возможно, то займет длительное время и обойдется дорого.

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

4. Реализация визуала дашборда

На данном шаге макеты отрисованы, заказчик все утвердил и дал старт работам.

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

Наша команда работала в следующем составе:

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

5. Постановка задач: функционал и дизайн

На этой стадии аналитик собирает информацию, формулирует конкретные требования, ставит команде разработки задачи по реализации функциональности и дизайна.

Задачи по функционалу обычно реализуются и согласуются гораздо быстрее. Иногда для этого достаточно отрисовать серые стандартные элементы, чтобы они были в том месте, где надо, и работали как надо - это черновой вариант.

С дизайном немного сложнее. На основе согласованных макетов ставятся задачи на реализацию дизайна, но к ним не всегда можно приступать без чернового варианта. Нет элемента - нечего дизайнить. Это актуально для нового функционала, которого еще нет в системе. Так, иногда задачи по дизайну могут быть заблокированы задачами по функционалу.

Также требования к задачам по дизайну менее стабильны, чем по функционалу. Заказчик может попросить поменять стили, цвета. Возможно даже несколько раз, хоть все уже было согласовано. Пока идет разработка функциональной задачи, изменить постановку для дизайнерской не так сложно.

6. Разработка

Задачи поставлены. В идеале надо реализовать весь функционал в черновом варианте и затем приступать к набору задач на дизайн. Но в реальности разработка идет поэлементно: сначала добавляется функционал каждого элемента системы, затем его дизайн. Так мы постепенно «отрисовываем» в системе то, что было на макетах.

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

Будьте готовы, что значительную долю времени займет работа с css, HTML, JS. Так, на этом этапе мы всей командой основательно прокачали знания по css и верстке.

7. Приемка

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

На этапе приемки команда аналитики проводит внутренний аудит проекта: сравнивает реализованное с запланированным и отраженным в ТЗ, Возможно, отправляет что-то на доработку и вносит изменения.

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

Боковое меню и смена темы

Юзабилити, удобный, красивый и легко адаптируемый под предпочтения пользователя интерфейс - обязательное условие любого современного ИТ-продукта. Мы постоянно совершенствуем свои платформы не только в части кодинга, но и UX-составляющей. В описываемом кейсе большое внимание было уделено навигации в системе, результатом чего стала реализация бокового меню, дающего пользователю быстрый доступ к необходимому функционалу (меню можно свернуть). Отметим, что даже всплывающие подсказки были приведены к единому стилю, это смотрится органично, красиво и современно.

Также проработали смену темы и цветовую палитру. Чтобы добиться желаемого эффекта, мы переделывали сотни макетов. Кнопка смены также находится в боковом меню.

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

Выпадающее меню в дашбордах

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

В выпадающем меню:

Кастомный календарь

Самые смелые и интересные идеи воплощаются в жизнь как ответ на запрос заказчиков. Так появился и наш новый календарь, вообще не похожий на стандартные календари в BI-системах.

В нем:

Пользовательская настройка графиков

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

В пользовательской настройке есть 3 вида графика - автоматическая, шаблон администратора, собственная настройка.

Автоматическая настройка:

Шаблон администратора:

Собственная настройка:

Пример одного из реализованных дашбордов:

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

В данной статье была описана лишь часть функциональности BI-платформы. BI обладает такими пользовательскими преимуществами, как бесшовные интеграции с другими ИТ-продуктами, антихрупкие хранилища данных, версионность, ролевые модели и многое другое, но в центре внимания всегда интерфейс системы.

Гибкая методология разработки Agile https://www.atlassian.com/ru/agile

Популярный онлайн-редактор кода Codepen https://codepen.io/

Онлайн-редактор векторной графики Figma https://www.figma.com/

Статья «Что такое Figma: инструкция по использованию редактора» https://kokoc.com/blog/figma-chto-eto-takoe

Самоучитель по css http://htmlbook.ru/samcss

Информация о брендбуках

https://repinabranding.ru/blog/brendbuk

Подбор цветов

https://colorscheme.ru/

https://huemint.com/brand-intersection/