Разработка дашбордов на основе данных компании

Время на прочтение
8 мин

Количество просмотров 12K

Семь Open Source и два low-code-продукта для визуализации BI-аналитики от AFFINAGE

Для решение клиентских задач мы постоянно ищем способы сделать лучше. И очень часто сделать лучше значит сменить продукт. Поэтому мы постоянно анализируем рынок различных nocode-решений. Мы решили поделиться накопленными знаниями о такой важной задаче как построение аналитических дашбордов.

Open Source-инструменты

Расскажем об Apache Superset и Preset, Metabase, Redash, Tipboard, Grafana и Kibana.

Apache Superset

Плюсы

• Огромный выбор баз данных для сводки данных (от классических до самых редких для российского рынка).

• Большой выбор настроек, которые влияют на работу приложения.

• Шаблонизация SQL-запросов с помощью Jinja и Python позволяет строить запросы любой сложности используя макросы.

• Мультиязычность интерфейса.

• Удобный SQL-редактор запросов, похожий на playground.

• Устанавливается на собственные сервера компании

• Большой выбор графиков. Работают на базе разработки другой Apache-компании.

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

• Интеграция с основными механизмами аутентификации (база данных, OpenID, LDAP, OAuth).

• Возможность делать скриншот каждого графика или дашборда в целом.

• Возможность открывать embed-доступ к дашборду по публичной ссылке.

• Удобная настройка фильтров и работа с ними.

• Есть система уведомлений.

Минусы

• Для развертывания приложения нужен опытный DevOps специалист, даже в случае установки через docker.

• Необходимость установки программных пакетов для баз данных которые не поддерживаются из коробки (по умолчания доступны драйвера только для SQLite). Остальные пакеты находятся здесь. Есть вероятность, что установка необходимого драйвера отработает с первого раза

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

• Слабая кастомизация графиков, хотя Echarts достойный продукт и имеет возможность глубокой настройки графиков.

• Нефункциональный экспорт данных, только самый минимум.

Preset

Работает в облаке на Python

Preset.io— дочерний продукт Apache Superset. По сути, это тот же самый Apache Superset, только в облаке. Если вы хотите ближе познакомиться с Superset, и нет времени заниматься DevOps-разворачиванием Superset, то бесплатный тариф preset.io — то что нужно, чтобы понять возможности продукта.

Плюсы

• Огромный выбор баз данных для сводки данных, от классических до самых редких для российского рынка.

• Шаблонизация SQL-запросов.

• Мультиязычность интерфейса.

• Удобный SQL-редактор запросов, похожий на playground.

• Большой выбор графиков.

• Мощная настройка прав на базе ролей.

• Возможность делать скриншот каждого графика или дашборда в целом.

• Есть система уведомлений.

Минусы

• Невозможно вносить изменения в программный код и интерфейс приложения.

• Слабая кастомизация графиков.

• Нефункциональный экспорт данных, только самый минимум.

Metabase

Работает на Java

Metabase считается ближайшим конкурентом Superset по популярности. Позиционируется как удобный инструмент для аналитики любым сотрудником компании.

Плюсы

• Большой выбор баз данных для сводки данных (от классических до самых редких для российского рынка).

• Хорошая подборка цветовых схем, есть пастельные тона.

• Простая установка на основе документации.

• Удобный интерфейс для построения запросов (будет особенно актуально для людей, плохо знакомых с SQL), при этом для опытных пользователей есть возможность писать запросы руками.

• Возможность встраивания embed-графиков на другие сайты.

• Наличие автоматизированных отчетов.

• Гибкая настройка прав пользователей.

• Мультиязычность.

• Автоматический создание дашбордов с помощью X-Ray.

Минусы

• В облачной версии отсутствует бесплатный тариф.

• Слабая кастомизация графиков.

• Сложная работа с фильтрацией на дашборде.

• Ограниченный выбор вариантов визуализации, но в то же время достаточный для большинства задач.

Redash

Работает на Python

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

Плюсы

• Большой выбор баз данных и интеграций включая Яндекс.Метрику и ClickHouse.

• Комфортная установка на собственные сервера.

• Подходит для больших бордов с множеством показателей.

• Юзер-френдли интерфейс с многочисленными фичами для визуализации.

• Экономичность.

Минусы

• Случаются баги: не всегда понятно, обновляется дашборд или нет.

• Обновление запросов отнимает много времени.

• Для использования платформы нужны некоторые технические знания.

• Требуется много разрешений для базы данных.

• Малый набор графиков, и их кастомизация минимальна

Если Redash станет вашим первым инструментом, то пользы вы получите больше, чем разочарований.

Tipboard

Работает на Python

Следующий пункт нашего списка — инструмент №1 в рейтинге slant.co как лучший фреймворк для Open Source-дашбордов. Tipboard написан на JavaScript и Python; его применяют для создания настраиваемых и лаконичных приборных панелей бизнес-метрик. Виджеты Tipboard отделены от источников данных, это делает панели гибкими и легко кастомизируемыми.

Плюсы

• Настройка и создание дашбордов с помощью YAML (в минус точно не отнести, поэтому как плюс).

• Создание нескольких дашбордов в одном рабочем пространстве.

• Передача данных в формате JSON на панель с помощью API.

• Удобно устанавливать (middle DevOps справится без проблем).

Минусы

• Малый набор графиков.

• Документация слабая, но достаточная, чтобы запустить продукт на собственном сервере.

• Tipboard написан на Python 2.7 и не поддерживает Python 3.

Grafana

Работает на GoLang

Grafana может похвастаться одним из самых активных коммьюнити разработчиков с 900+ участниками и 30 тыс. звезд на Github. Кроме этого, Grafana — это мощный, богатый на фичи визуализатор данных и метрик на Go и Typescript.

Он позволяет не только следить за состоянием сервера и архитектуры, но и создавать дашборды, просматривать и делиться ими. Это полезно для владельцев бизнеса или частных лиц для визуализации и анализа различных показателей.

Плюсы

• Официальная библиотека с множеством шаблонов и плагинов.

• Большое количество источников и баз данных. Самый большой набор среди других инструментов в обзоре.

• Индивидуальная настройка рабочего стола для любой компании.

• Встроенный пользовательский контроль и механизм аутентификации.

• Разнообразие фич включает скриншоты, аннотации данных, кастомизированные оповещения и уведомления.

• Можно бесплатно скачать или развернуть у себя (спасибо @Shershза дополнение)

‍Минусы

• Grafana — это всего лишь инструмент визуализации. Он не поддерживает сбор и хранение данных.

• Дашборд требует значительного времени на настройку, а значит, не эффективен как быстрое решение.

Хоть минусы и кажутся весомыми, есть вероятность, что ваша компания с ними не столкнется. Например, если вы уже используете Prometheus или Graphite, они возьмут на себя хранение и сбор данных. Также настройка Grafana станет проще, если вы используете хостинговый сервис вроде MetricFire. Так вы получите те же open-code дашборды, но с лучшей поддержкой и масштабируемостью по меньшей цене.

Kibana

Работает на node.js

Продукт от создателей ElasticSearch, исключительно под функции ElasticStack. Мало пригодный инструмент, но мы обязаны о нем упомянуть.

В ведущей мировой платформе управления журналами (в стеке ELK) за букву К отвечает Kibana. Это мощное open-code приложение для навигации и визуализации данных. С его помощью пользователи мониторят и управляют данными в ElasticStack — идеальный вариант для тех, кто хочет пользоваться Elasticsearch или стек ELK для дата-менеджмента.

Плюсы

• Юзеры сами придумывают каким способом показывать данные и цифры; есть варианты шаблонов помимо дефолтных.

• Позволяет пользователям исследовать взаимосвязи в данных.

• В процессе не требуется дополнительное кодирование или инфраструктура, программа работает на веб-сервере Node.js.

• Мощные функции обнаружения аномалий, позволяющие вовремя выявлять проблемы в данных.

• Возможность обмена данными, включая экспорт в формате PDF и CSV.

• Простой и эффективный в использовании единый пользовательский интерфейс.

Минусы

• Функции экспортирования ограничены.

• Так как программа работает с ElasticStack, его ограничения действуют и на Kibana.

Low-code-инструменты

В данных обзор мы решили включить продукты не из мира аналитики, но тем интереснее наблюдать эволюцию BI-инструментов. Рассказываем об Appsmith и Budibase.

Appsmith

Работает на Java

Appsmith—- low-code инструмент для автоматизации бизнес-процессов компании. Подходит для построения дашбордов, поэтому мы его рассмотрим как достойную альтернативам полноценного BI-анализа. Appsmith — это Open Source-продукт для self-hosted размещения. Позиционируется как единственный продукт для автоматизации всего и вся в компании.

Мое личное мнение что «так и есть», потому что в современном мире любые бизнес-процессы и работа с информацией завязана на базы данных (или может быть завязана в будущем). Подходит для создания внутренних продуктов компании таких как дашборды, административные панели, приложения для работы с базой данных и смеси перечисленных вариантов. То есть ваше приложение может иметь админку и дашборд одновременно (добавили данные с формы, построенной в Appsmith, и тут же увидели обновленный сводный график), круто. Можно сказать что Appsmith — это Webflow в мире BI-инструментов.

Плюсы

• Конструктор страниц на базе готовых элементов.

• Большой выбор элементов от inputs и textarea до datepicker, select и карточек.

• Огромный выбор графиков для визуализации на базе библиотеки FusionCharts.

• Наличие готовых шаблонов страниц — бери и работай. Такие шаблоны позволяют ещё быстрее запускать MVP.

• Возможность подключить различные источники данных.

• Помимо классических баз данных, можно подключить API-интерфейсы небольшого количества no-code продуктов, Google-таблицы, c URL и кастомные REST API.

• Большие возможности для кастомизации элементов, в том числе графиков.

• Возможность расширять и кастомизировать функционал с помощью JavaScript.

• Хорошая документация и обучающие ролики на YouTube.

• Возможность написать свою собственную авторизацию.

• Гибкое управление ролями как в Google-документах и правами на конкретные операции с данными. Также возможно открыть приложение в открытом доступе с помощью публичной ссылки.

Минусы

• Для развертывания приложения нужен опытный DevOps-специалист, даже в случае установки через docker.

• Необходимо время для освоения продукта, приветствуется наличие навыков программирования.

• Как и любой low-code инструмент, Appsmith тоже не всесилен и вносит свои ограничения, но ведь нам нужен дашборд, а не заказная разработка?

• Нет табов, придется помучаться с виджетом Menu, либо делать разные дашборды.

Budibase

Работает на node.js

Конкурент Appsmith, но с меньшим набором графиков. Ещё один Webflow в мире BI-инструментов.

Budibase — это no-code/low-code платформа для разработчиков и управляющих, помогающая создавать надежные приложения. Также это конструктор дашбордов для серверов: в числе функций есть подключение к источникам данных, формам и таблицам, что упрощает работу в команде.

Идеальный вариант для быстро меняющейся, динамичной корпоративной среды, в которой требуются свежие решения. C его помощью вы можете подключиться к внешней базе данных (MongoDB, CouchDB PostgreSQL, MySQL, Airtable, Google Sheets, S3, DynamoDB, или API REST) или импортировать из нее данные.

Плюсы

• Открытый исходный код с множеством возможностей использования.

• Строгий контроль доступа.

• Конструктор страниц на базе готовых элементов, которых больше чем в Appsmith 

• Возможность подключить различные источники данных, в том числе через REST API. 

• Возможность расширять и кастомизировать функционал с помощью JavaScript.

• Возможность открыть приложение в открытом доступе с помощью публичной ссылки.

Минусы

• Для развертывания приложения нужен опытный DevOps-специалист, даже в случае установки через docker.

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

• Слабая документация. Мало обучающих уроков. Как в большинстве Open-Source платформах, основной источник помощи — это коммьюнити.

• Ограниченный выбор графиков.

Итого

Для разных задач подходят разные инструменты, и они не обязательно должны быть платными. Наша команда проанализировала 20+ решений для создания дашбордов и выбрала лучшие 9, которые помогут покрыть большинство интересов разработчиков. Если вам нужно разработать дашборд или внедрить любой другой low-code-инструмент в свою компанию, обращайтесь к нам.

«Атвинта» на примерах показывает, как и какие данные размещать на аналитических панелях.

Зачем и кому нужны дашборды

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

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

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

*Числа на изображениях в статье придуманы для разработки макетов и не являются реальными данными

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

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

Задачи дашбордов

Аккумулируют информацию в одном месте

На аналитических панелях собраны ключевые сводные показатели. Это освобождает пользователя от изучения многочисленных источников данных: таблиц, отчетов, списков, реестров.

Автоматизируют аналитику

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

Ускоряют процесс принятия решений

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

Отражают ситуацию и подсвечивают проблемные места

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

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

Как мыслят пользователи

Важный момент в разработке дашборда — масштаб видения пользователя. В зависимости от задач ему могут быть интересны более общие или частные показатели.

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

Для каждой роли мы создали дашборды с разными данными.

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

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

Мелкие детали не интересны министру, но нужны инспектору — даже 10 незакрытых жалоб будут для него поводом провести проверку. А у министра показатели исчисляются тысячами, и это не сыграет значительной роли при принятии решений на таком уровне.

Или пример из бизнеса. Один из наших кейсов — разработка ERP-системы для завода по производству кормов. Мы писали о нем на VC:

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

В то же время в ERP-системе реализован функционал для технолога, который создает формулы замеса кормов. Для его работы не нужны финансовые отчеты — он оперирует объемом ингредиентов, их соотношением, плановым и фактическим выпуском продукции. Это более узкие и специализированные данные.

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

Что должно быть на дашборде

Перед тем, как делать дашборд, нужно понять, какие данные на нем будут отражены.

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

Однако чаще бывает так:

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

Глубинные интервью

Глубинные интервью (Customer Development, CustDev) помогают напрямую у пользователя узнать, какая информация пригодится в его работе и какие показатели наиболее важны.

Мы перерабатывали интерфейс сервиса QMT — системы контроля качества в контакт-центре. Одной из задач проекта была модификация имеющихся дашбордов супервайзеров. Эти сотрудники отвечают за отдельные проекты и отслеживают эффективность командной работы по ним.

Аналитики провели CustDev с сотрудниками заказчика и узнали:

Настоящее глубинное интервью — это когда вы узнаёте, как живут пользователи в системе, для чего им нужны те или иные показатели. Если вы провели опрос, но не знаете распорядок дня сотрудника, то такое исследование вряд ли поможет в разработке.

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

Полевые исследования

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

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

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

Тотальное погружение в процессы пользователя поможет понять, какими категориями он мыслит и какими данными оперирует чаще всего.

Изучение процесса принятия решений

В проекте по досудебному обжалованию мы плотно взаимодействовали с командой клиента. В распоряжении было более 50 показателей, и в процессе совместной работы мы корректировали наполнение дашбордов.

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

Сколько экранов делать

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

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

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

Мы разработали панель для губернатора Кемеровской области, где представлены оба варианта.

Идеальная структура многоуровневого дашборда выглядит так:

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

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

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

Обратный пример — образовательная платформа SMITUP, где для задач ученика достаточно одного экрана. На нем мы отразили дедлайны и даты по урокам и заданиям, чтобы обеспечить тайм-менеджмент учебного процесса. Подробно о проекте писали в статье на VC:

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

Правила размещения данных в интерфейсе

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

Собирать данные на плашках

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

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

Выделять значимое крупным

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

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

Оставлять воздух

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

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

Экономить пространство

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

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

Общаться с пользователем цветом

Дашборды должны помогать в анализе, и цвет — отличный инструмент для взаимодействия с пользователем.

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

В досудебном обжаловании рост срока принятия решения оценивают негативно, потому что система должна рассматривать жалобы быстрее. Такое изменение мы подсвечиваем красным. Снижение срока, наоборот — положительный сигнал, который отмечается зеленым.

Маленькие стрелки выполняют аналитику за пользователя и подсказывают, как изменился показатель.

Использовать яркие контрастные цвета

Дополнительно разделить типы информации помогают цвета. В дизайне лучше использовать яркие оттенки — это выделяет цифры и графики в интерфейсе. Так пользователь быстро находит данные в рабочем пространстве.

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

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

Как работает графический визуал

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

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

Просто попробуйте в уме оценить динамику ряда чисел: 23, 46, 15, 48, 32, 14, 18, 56, 118, 16, 20, 25. Не самая простая задача для среднестатистического человека.

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

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

Без карты пришлось бы изучать список по регионам и вручную искать проблемные субъекты, что заняло бы намного больше времени.

Где брать диаграммы и графики

В разработке визуализации данных есть два основных подхода.

Библиотеки и плагины

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

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

Список проверенных библиотек, которые мы использовали в своих проектах:

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

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

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

Создание с нуля

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

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

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

Плюсы собственных наработок: нет ограничений по типам данных и сложности визуализации.

Минусы: более трудозатратный подход, возможны технические сложности при внедрении.

Как выбрать визуал для показателя

Графики экономят время, когда они легко считываются. Если на распознавание логики визуала уходит много времени, то он идет в утиль. Наша задача — упростить работу, а не ломать голову пользователя.

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

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

Работа со сложными показателями

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

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

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

Финальный вариант:

Нам будет интересно почитать в комментариях, какое решение вам понравилось больше остальных.

В некоторых случаях усложняются и простые на первый взгляд формы.

Например, в нашем кейсе структура одного показателя состояла из большого количества долей. Если бы мы сделали стандартную диаграмму с мелкими отрезками, то пользователю было бы сложно оценить структуру. Тогда мы использовали ракушку — диаграмму с широкими полями.

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

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

Как улучшить дашборд

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

Анимация

Анимация делает интерфейс более живым и привлекательным. Самый оптимальный вариант — добавить ее только при загрузке страницы, чтобы во время использования движение не отвлекало пользователя.

Темная тема

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

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

Обучение

Полезно подружить пользователя с новым инструментом и провести обучение по основным элементам панели.

Советы

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

Всплывающие цифры

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

Основные ошибки

Подведем итоги списком частых ошибок при создании дашборда.

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

Дашборд (с англ. Dashboard — «приборная панель», также иногда называется «панель индикаторов») — графический пользовательский интерфейс для демонстрации KPI определенного процесса, бизнес-цели, текущих процессах в компании. Простыми словами, дашборд — это форма визуализации данных.

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

Чем дашборд отличается от отчетов и инфографики

Эти инструменты часто путают. Вот что нужно запомнить:

1. Отчет всегда имеет статичное представление. Он дает неизменяемую визуализацию данных.
2. Инфографика — это составная часть дашборда, но не его синоним. Инфографика тоже всегда статична: это просто данные, которые не меняются и представлены в разнообразных визуальных форматах.
3. Дашборд позволяет не только представлять данные визуально, но и анализировать их разными способами, упорядочивать. Именно возможность анализа и изменения данных является его ключевым маркером.

Отличия	Дашборд	Отчет	Инфографика
Данные могут быть изменены по запросу	Да	Нет	Нет
Возможность упорядочивания или сортировки данных	Да	Нет	Нет
Богатство визуальных форматов	Да	Не всегда	Да
Отслеживание данных в режиме реального времени	Да	Нет	Нет

Зачем нужны дашборды

Панели индикаторов используются в бизнесе по ряду сценариев:

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

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

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

Кто использует дашборды в работе

Чаще всего ими пользуются:

1. Управляющие компанией лица и ее руководители (любые отрасли бизнеса). Применяют дашборды для отображения всех отслеживаемых показателей в одном месте, чтобы помогать менеджерам принимать эффективные решения. При правильном использовании получают ценную информацию о состоянии организации, что влияет на принятие решений.
2. Аналитики и руководители отделов (розничная торговля и другие отрасли, основанные на продажах). Чаще всего используют информационные дашборды — они позволяют предсказать прибыль компании в долгосрочном периоде, произвести необходимые корректировки в случае негативного курса.
3. Инженеры (производство). Используют так называемые инженерные дашборды, которые незаменимы в производственных отраслях для анализа и планирования выпускаемой продукции.

Примеры дашбордов и их применение

Откройте «Google Аналитику». Перед вами каноничная индикаторная панель со множеством колонок, виджетов, графиков, таблиц, отчетов:

Обратите внимание на логичность и иерархичность данных.

Еще один пример — российская «Яндекс.Метрика»:

А это пример дашборда для вебмастера в сервисе контекстной рекламы:

Теперь разберем виды дашбордов.

1. Операционная панель

Создается, чтобы выводить и анализировать быстро изменяющиеся данные: показатели трафика сайта, CR объявления, количество лидов по конкретному продукту, внутренние и внешние KPI отдела продаж.

2. Стратегическая панель

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

3. Аналитическая панель

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

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

Как работать с дашбордом

Начнем с видов визуализации индикаторной панели. Можно выделить четыре модели:

1. Динамическая. Используется для сравнения данных за определенный период и всегда в динамическом представлении.



2. Сравнительная. Позволяет сопоставить два и более типов данных. Например, количество лидов в прошлом и текущем квартале или доход издателя в определенном месяце за этот и прошлый годы:



3. Распределительная. Предназначена для нахождения взаимосвязи в определенных данных.



В примере выше мы видим, что крупные единицы (North America) разбиваются на мелкие (New York, Texas, Montana).

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

Мы видим, что источник трафика ПС Google наблюдается у 175 пользователей: это 67,3 % от всего трафика.

Шапка и подвал

Снова возвращаемся к визуальному представлению индикаторной панели. На самом ее верху располагается хедер (или «шапка»):

Шапка — это блок с названием, если проводить аналогию с сайтом — хедер. Шапка всегда содержит заголовок отчета. Название должно быть односложным, желательно — кратким, чтобы не подразумевать двойной трактовки.

Примеры названий: «KPI продажников» или «Продажи отдела А7 за 1-й квартал».

Подвал, или футер — это блок, который находится в самом низу отчета:

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

Виджеты

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

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

Показатели. Характерный маркер этого виджета — число + процентный показатель. В условиях реального отчета они выглядят так:

Как видим, представлено текущее числовое значение показателя, а также указан дополнительный индикатор для оценки роста или снижения основного значения.

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

Обратите внимание: диаграмма может быть простой или сложной, включать в себя другие виджеты (смешанный тип диаграммы).

Можно выделить пять видов диаграмм:

1. Древовидная. Используется для вывода любых данных с упорядочиванием или иерархией по какой-либо общей метрике:



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



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



4. Линейная. Идеальный вид диаграммы для представления данных в разных подвидах или подкатегориях.



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



6. Гистограмма. То же самое, что и линейная диаграмма, только в вертикальном представлении, в виде столбчатой диаграммы.

Карточное представление данных. Этот тип виджетов легко опознать по наличию карты:

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

Табличные виджеты. Этот тип индикаторов содержит таблицу с текстом и числовые обозначения. Формат удобен для визуализации самых разнообразных данных, например, двумерных показателей.

Приложения для создания дашбордов

К сожалению, самые крутые приложения для конструирования дашбордов, например, Tableau и Power BI, больше недоступны в связи с геополитическими событиями.

Но мы не расстраиваемся, потому что для российских пользователей сейчас доступны и другие серьезные программы такого рода.

Geckoboard

Сайт:geckoboard.com

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

Достоинства:

• Хорошее юзабилити, интерфейс не перегружен.
• Доступно более 70 источников данных.
• Есть поддержка CSS.
• Можно создавать цели.
• Разнообразные формы для визуализации любых данных.

Недостатки:

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

Klipfolio

Сайт: klipfolio.com

Мощный редактор для создания дашбордов любой сложности, в котором предусмотрены тонкая настройка данных, красивые виджеты, удобный визуальный редактор, работающий по принципу What-You-See-Is-What-You-Get. Интерфейс здесь далеко не такой простой, как кажется на первый взгляд, и разбираться с ним придется не один час. Если у вас большое количество данных из сложных и не связанных друг с другом источников, Klipfolio точно будет кстати.

Достоинства:

• Работает в облаке. Все сохраняется автоматически, никакие бэкапы не нужны.
• Большое количество поддерживаемых источников данных, включая запрещенные в РФ соцсети.
• Можно менять внешний вид отчета при помощи «стилей».
• Есть поддержка оффлайн-источников.
• Если у вас необычный источник данных, вы также сможете подключить его без всяких проблем, просто воспользовавшись API.
• Постоянно обновляется. Разработчики прислушиваются к пожеланиям и часто добавляют отсутствующие функции или новые интеграции.

А еще в Klipfolio можно настроить роли пользователя для каждого отчета, например, редактирование или только просмотр.

Недостатки:

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

Qlik

Сайт: qlik.com

Решение для анализа и комплексной интеграции облачных данных. Так же, как Grafana, Tableau или Power BI и другие, Qlik собирает данные из различных источников и объединяет их в простые, но богатые панели индикаторов.

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

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

Достоинства:

• Очень крутой функционал с акцентом на решение задач, которые возникают именно у бизнеса.
• Можно объединять внутренние и внешние данные без всяких ограничений.
• Есть API.

Недостатки:

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

Как создать дашборд в Google Data Studio

Об этой программе поговорим отдельно — и не просто поговорим, а попробуем вместе создать дашборд прямо сейчас.

Интерфейс и настройки Google Data Studio

Преимущество сервиса в в том, что в качестве источника данных вы можете использовать не только данные в стандартных представлениях (например, в табличных), но и любые базы данных. Для полноты картины пройдемся по важным параметрам Google Data Studio.

На вкладке «Данные» вы можете задать вспомогательные настройки, а именно:

• Включить дополнительные показатели.
• Активировать ползунки.
• Выбрать необходимое количество строк на странице.
• Включить сортировку: по просмотрам, возрастанию или убыванию.
• Настроить диапазон дат по умолчанию: автоматические или специальные.
• Добавить фильтр.
• Активировать перекрестную фильтрацию.

На вкладке «Стиль» доступны следующие возможности:

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

В строке «Показатели» вы можете изменить представление показателя по умолчанию (число) на тепловую карту или гистограмму.

В строке «Фон и границы» настраиваются фон, его интенсивность, радиус границы фона, цвет границы, толщина границы и стиль рамки. Также можно добавить тень границы и настроить заголовок диаграммы.

Переходим к разбору верхнего меню:

1. Файл. Отсюда можно открыть доступ к отчету, изменить тему и шаблон, проверить версии. Также вы можете создать отчет или его копию, встроить отчет.
2. Изменить. Стандартное для Windows-программ меню Edit (отменить-повторить, вырезать, копировать, вставить и так далее).
3. Просмотреть. Управление сеткой (размером, полями, смещением) и привязкой объектов.
4. Вставить. Меню вставки виджетов. Здесь огромный выбор: от простых диаграмм до сложных карт и сводных таблиц.
5. Страница. Управление страница отчета.
6. Упорядочить. Настройки положения, выравнивание и переносы на разные уровни (страница-отчет). Также есть настройки группировки / разгруппировки объектов.
7. Ресурс. Управление источниками данных, фильтрами, сегментами. Кроме того, из этого меню осуществляется доступ к параметрам URL, комбинациям и сторонними визуализациями.
8. Справка. Хорошая база знаний. Есть ссылки на форум, обучающие видео и многое другое.

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

Алгоритм действий

Переходим к последовательности действий в сервисе.

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

Самый эффективный подход — заранее создать макет дашборда на бумаге или в электронном виде и лишь потом пытаться визуализировать его с настоящими данными.

Открываем Google Data Studio и нажимаем кнопку «Создать» в левой части экрана. В раскрывающемся списке — выбираем пункт «Источник данных»:

Здесь необходимо выбрать коннектор сервиса Google или партнерского сервиса. Коннектор — это некий «соединятор» Google Data Studio и вашего источника данных. Для примера мы рассмотрим создание дашборда на основе источника данных из «Google Аналитики»:

Разрешаем сервису провести авторизацию с вашим аккаунтом Google Analytics:

Успех! Теперь необходимо найти требуемый аккаунт «Google Аналитики», выбрать его ресурс / представление и подтвердить привязку, нажав кнопку «Связать» в правой части экрана:

На новом экране нажмите «Создать отчет». Обратите внимание на поля и типы данных, которые загрузятся из вашего источника автоматически. При необходимости вы можете подсчитать их, переименовать или создать копии. Для это кликните по необходимому полю:

Чтобы подтвердить выбранный нами источник (напомним: в нашем случае — это аккаунт «Google Аналитики»), нажмите кнопку «Добавить к отчету»:

Наконец мы попадаем в рабочую область редактора отчетов Google Data Studio. Вот как она выглядит в обновленной версии сервиса:

Первым делом даем нашей панели имя:

Вся работа происходит с макетом и темой, настройки которых находятся правой панели экрана. Как минимум — настраиваем границы отчета.

Основные действия происходят в центральном меню. Здесь можно:

• добавить новую страницу или данные;
• добавить диаграмму;
• сформировать элемент управления.

Также вы можете добавить URL встраиваемого элемента, добавить изображение, текст, строку, фигуру:

На вкладке «Данные» нам необходимо выбрать показатели и их параметры, которые будут представлены в панели индикаторов.

Допустим, нас интересует параметр «Браузер» и показатель App Version. Выбираем «Браузер» в правом меню:

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

Чтобы добавить новый показатель для параметра, кликните по знаку «+»:

Теперь нужно выбрать параметр:

Чтобы изменить вид диаграммы, кликните по кнопке «Диаграмма» и выберите требуемое визуальное представление:

Часто в процессе создания панели индикаторов требуется работать с данными, которые по каким-то причинам не попадают в источник. Google Data Studio позволяет решить и эту проблему. Просто нажмите кнопку «Добавить поле» в самом низу:

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

Полезный список функций для Google Data Studio доступен в справке сервиса. Сохраняем настройки. Все — теперь вы можете работать с показателем, который сперва не присутствовал в нашем источнике данных.

Аналогичным образом вы можете добавить новый параметр. Для этого используйте кнопку «Добавить параметр» (см. на один скрин выше).

Как не надо делать дашборд

Рассмотрим четыре характерных ошибки новичков:

1. Некорректный выбор виджетов для данных. Например, для динамически изменяемых данных выбран формат таблицы или сегменты данных на круговой диаграмме построены в разнобой, а не с учетом количества показателей в каждой категории. Чтобы этого избежать, следите за логикой данных, учитывайте иерархичность метрик, выбирайте корректные виджеты.
2. Визуальная перегруженность. Если в отчете находятся десятки и даже сотни показателей — это неудобно. Лучше делать дашборды для каждого сценария отдельно. Например, не пытаться охватить сразу все группы целевой аудитории, а сделать разные отчеты по каждому сегменту.
3. Рассеивание внимания. Стройте панель таким образом, чтобы главные виджеты находились на первом плане, а не утопали в бесконечных индикаторах, которые имеют второстепенное значение.
4. Отсутствие пояснений. Обязательно учитывайте аудиторию, которая будет работать с данными. Одно дело, если это специалисты, например, маркетологи. Но если отчет задуман для рядовых сотрудников компании — лучше расшифровывать термины и давать пояснения.

Как создавать и читать дашборды

Визуализация данных для бизнеса.

Дашборды отображают реальные данные и взаимосвязи между ними. Это помогает принимать решения на разных уровнях бизнеса. Игорь Сизон, основатель datascience-студии Arcane Future, рассказывает, как создавать дашборды, понятные не только аналитикам.

Зачем собирать данные на экране
 

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

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

Этапы создания дашбордов
 

#1. Идея и сбор требований. В компании понимают, что им нужен инструмент для мониторинга KPI или метрик бизнеса. Идея создать дашборд может появиться на общем собрании, у отдельного сотрудника или у самого аналитика.  

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

#2. Сбор данных. Возможны два пути:

• Данных нет. Например, на вашем сайте есть формы, которые заполняют потенциальные клиенты,  и вы хотите измерить конверсию из открытий в отправку. Но не записываете событие открытия формы. Чтобы собрать данные, нужно добавить это событие в вашу систему аналитики или базу данных (например, через Google Tag Manager или JavaScript). Если проект использует собственную аналитическую БД, мы разрабатываем дизайн таблиц для хранения данных.
   
• Информация уже собрана в таблицах БД или «Google Таблицах». Тогда к ним можно подключиться сразу или написав SQL-код.

Дашборд для обзора email-кампаний / Arcane Future

#3. Визуализация. Для нее есть две категории онлайн-инструментов:

• Более простые: Octoboard и Dashboard24. Это хорошие наборы готовых дашбордов для известных источников данных (Google Analytics, Facebook Ads, Instagram, Double Click). Они больше подходят для маркетинговой аналитики. Эти программы просты в настройке и не требуют поддержки специалистов.
   
• Более сложные: Power BI, Chartio, Tableau. Они требуют специальных навыков, но при этом очень гибкие. Это Excel в мире визуализации данных.

  Мы работаем со своей базой данных, поэтому нам больше подходят Tableau или Power BI. Для этого нам нужно строить свои шаблоны. И вот в Tableau или Power BI это программы в которых легко строить свои шаблоны хоть для маркетинга, хоть для продукта.

  Кроме того, вы можете написать дашборд на JavaScript, используя, например, библиотеку D3.js.
  
  Пример визуализации данных в Tabelau — гистограмма / Arcane Future

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

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

Case study: dating и колл-центр
 

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

• Дашборды для dating-сервиса

Обычно у отдела аналитики в dating-проекте есть два заказчика: менеджмент и маркетинг. Менеджмент хочет видеть картину в общем и правильно расставлять приоритеты для остальных команд. Достичь этого помогают дашборды с общими метриками (ROI, LTV, CPC, Registrations Count, Activations Count). Эти дашборды мы выводили на экраны, чтобы все видели, как работает проект и каких KPIs достиг.

Дашборды помогали следить за выполнением дневной нормы по регистрациям, активациям, письмам, сообщениям. Мы всегда знали, сколько пользователей активно на сайте и какой у них retention rate (показатель удержания клиентов). Я сделал дашборд, отслеживающий push-уведомления: если возникали проблемы с отправкой, мы замечали это за 10-20 минут.

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

Пример визуализации данных в Tabelau — вафельная диаграмма / Arcane Future

• Дашборды для колл-центра

Приоритетной задачей было увеличение числа лидов, обработанных одним координатором или продавцом. Кроме того, нужно было повысить удовлетворенность клиента сервисом. Ее оценивали по Net Promoter Score (уровню клиентской лояльности) и отзывам на сайте. 

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

Настройка разных уровней доступа для координаторов, продавцов и менеджеров была непростой задачей — в отделе работало более 40 человек. Для каждого из них пришлось создать разные аккаунты и источники данных, к которым есть доступ.

На этом проекте данные хранились в системе управления БД MySQL. Она хранит данные построчно, но из-за этого медленно выполняет большие запросы с множеством JOIN’ов. Поэтому для дашбордов с тяжелыми запросами мы использовали extract вместо постоянного соединения. Extract —  это данные, скачанные платформой для визуализации, которые уже прошли нужные вычисления. Они готовы для отображения и подгружаются за секунды. Такой вариант удобно использовать для дашбордов, в которых не нужны realtime-данные.

Из-за того, что приоритеты бизнеса меняются, дашборды нужно обновлять. Чтобы упростить этот процесс, советую использовать Common Table Expressions при написании SQL-запросов. Модульные запросы легче читать и понимать. 

Также помогают договоренности о том, как называть метрики и какой стиль их записи использовать (например,
CamelCase или  snake case). Договоритесь с командой, что будете писать в одном стиле.  Вот так: UsersCount, RetentionRate, PlatformId или так:  users_count, retention_rate, platform_id. Благодаря этому вам будет легче разбираться в коде друг друга.

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

Дашборд [англ. data dashboard] — это инструмент управления информацией, для отслеживания ключевых показателей эффективности, а также показателей которые имеют отношение к вашему бизнесу, отделу или конкретному процессу.

В рамках данной статьи теоретические основы построения дашборда будут рассмотрены лишь вскользь, только основы. Нас больше интересует практическая сторона вопроса. Теории и так вполне достаточно на просторах рунета, а вот чтобы выловить практически полезный материал, придется потратить немало усилий.

5 причин важности дашборда для бизнеса

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

1. Дашборды объединяют и визуализируют данные из нескольких источников, таких как базы данных, локально размещенные файлы и веб-службы и позволяют отслеживать информацию в реальном времени. Нет необходимости перемещаться по разным базам, отчетам, метрикам — всё в одном, легкодоступном месте. При этом есть возможность одновременно измерять и  отслеживать несколько KPI и метрик, порой разнонаправленных (например, уровень сервиса, складские остатки, продажи, статистика посещений сайта) в режиме одного окна.
2. Легкость понимания. Хороший дашборд четко показывает ряд ключевых показателей, поэтому вам не нужно быть экспертом в области аналитики, чтобы понять их. Если вы хотите глубже изучить конкретный набор данных, у вас всегда есть возможность использовать более конкретные инструменты.
3. Отчетность становится более эффективной. Наличие дашборда сэкономит вам много времени. Вместо того, чтобы собирать данные из разных источников и строить диаграммы самостоятельно, информационные панели делают всю эту работу за вас. Вам просто нужно потратить некоторое время в начале, чтобы настроить показатели и решить, как их представить. С этого момента отчеты создаются автоматически.
4. Обеспечение легкого доступа. Если вы автоматически синхронизируете панель мониторинга в облаке, вы можете подключать разных пользователей независимо от их удаленности, чтобы вся ваша команда могла получать доступ к одной и той же информации из любого места и любого устройства.

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

Основная разница между дашбордом и отчетом

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

Сходства дашборда и отчетности

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

Возможность мониторить исторические данные прошлых периодов. Заложенные исторические данные, позволяют видеть насколько хорошо или плохо идет компания в сравнении с прошлым периодом.

Возможность объединения нескольких групп показателей вместе.

Визуализация данных приемлема в обоих случаях.

Ключевые отличия дашборда от отчета

Отчет содержит более подробную информацию. Дашборд нацелен на оперативность, краткость и лаконичность предоставления информации.

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

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

Дашборд динамичен — данные обновляются в реальном времени (по мере обновлении источника). Отчетность обновляется несколько сложнее и времени на обновление требуется гораздо больше.

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

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

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

Принципы создания дашборда

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

Общение с заказчиком

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

Сначала темплейт

Настраивание, автоматизация и визуализация — это процесс не быстрый. Иногда на это уходят дни и даже недели. Для того чтобы потом не переделывать, сначала рисуем темплейт (пробный эскиз). Какие тут есть варианты?

• на бумаге
• схематически в Word (замечательно подойдут блок-схемы)
• примерный набросок в Excel

И с этими набросками идем к заказчикам (ко всем из первого пункта 🙂 ). Разговариваем, обсуждаем, выясняем зачем <= очень важный вопрос для понимания, что хотят получить от того или иного показателя.

Источники

Это только в стихотворении Некрасова всё понятно и известно:

«Откуда дровишки?»- «Из лесу, вестимо;

Отец, слышишь, рубит, а я отвожу»

А вот у аналитика при построении дашборда всё не так однозначно. Основными источниками могут быть:

• CRM
• файлы (причём, с самыми разными расширениями 🙂 )
• базы данных
• сайт или облако

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

Стандартизация

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

1. определенная группа товаров на разных графиках должна быть одного и того же цвета
2. одни и те же шрифты в описании, заголовках, легендах и подписях
3. одна и та же стилистика оформления графика (сетка, легенда и название всегда в одном месте)
4. какого цвета и какие шрифты в шапке таблиц (и они должны быть одинаковы на разных листах)
5. отрицательное красным, положительное синим (или зеленым? а может черным?)
6. соблюдение корпоративной стилистики (если нет брендбука, хотя бы соответствие дизайну логотипа)

Однако, всегда стоит помнить, что этот стандарт это рекомендация, а не закон. И главное знать: не всегда то, что красиво — читаемо.

Совет: Прежде чем начать, поиграйтесь с вариантами, цветами, шрифтами и т.д. Как читается лучше? Как визуально понятнее? Что с чем сочетается лучше? И прочитайте хотя бы один мануал по шрифтам/цветам и корпоративной стилистике.

Четкость блоков

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

Разнообразие

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

Обратная связь

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

• Как открывают?
• Что смотрят?
• Как меняют параметры?
• Где смотрят то, что они смотрят 🙂 ?

Лучше лично. Вместе. Сначала, краткий инструктаж, потом вопросы-ответы.

Апгрейд

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

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

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

Какие показатели эффективности должны отражаться на дашборде?

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

Прежде чем определить наши ключевые показатели для дашборда необходимо ответить на единственный вопрос: «Какую проблему бизнесам я пытаюсь решить?». Ответ сам расставит всё на свои места.

Метрики для дашборда отдела маркетинга

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

• показатель отказов
• средняя продолжительность посещения сайта
• глубина посещения
• показатель отказов
• % достижения целей
• доход на пользователя / ТТ / клиента
• рост товарооборота
• изменение Offtake
• текущая доля компании / продукта

Дашборд отдела продаж

Показатели на таком дашборде позволяют следить за эффективность продаж и отслеживать их в одном месте. Ниже некоторые из KPI, которые вполне можно разместить на дашборд управления продажами:

• товарооборот (тут возможны варианты и детализация)
• количество сделок
• число новых клиентов
• лидеры среди отдела / категории / клиентов
• выполнение плана
• оборачиваемость

Финансовый дашборд

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

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

Дашборд отдела коммуникаций / поддержки клиентов

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

• уровень сервиса
• количество новых сделок / клиентов
• продление / перезаключение старых контрактов
• средняя длительность общения
• рейтинг лидеров

Показатели универсального дашборда

Эти показатели целесообразно разместить на общем дашборде:

• доходы
• количество клиентов
• выполнение плана
• детализация по категории / отделам /клиентам / менеджерам
• количество новых пользователей / сотрудников
• представленность товара по каналам сбыта / сетям / источникам
• рейтинг лучший / худший …

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

FAQ по дашбордам