Что такое дизайн дашборда: правила и требования к оформлению

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

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

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

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

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

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

● ключевые показатели — выводы, итоговые цифры, сводные данные;
● основные визуализации — главные взаимосвязи, аналитика, тенденции;
● вспомогательные данные — детальная и справочная информация.

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

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

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

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

Например, KPI могут отображать не только итоговую цифру, но и ее сравнение с показателем предыдущего периода (прирост или падение).

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

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

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

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

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

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

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

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

Например, если из таблицы ниже вывести на график продажи по городам, дашборд в Power BI автоматически их сложит (рис. 2). А если мы изменим скрытое агрегирование с суммы на максимальное значение, получим совсем другую визуализацию (рис. 3):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P.S. Ниже — просто пример оформления: следите, чтобы подписи помещались в одну строку, а не в две, как на этой картинке.

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

Самый распространенный тип для отображения структуры — классический Pie Chart. Также часто используется вариант того же «пирога» с дыркой в середине, то есть кольцевая диаграмма. Главное требование к этой визуализации — она предназначена для показа долей целого.

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

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

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

Очень важный и иногда незаменимый вариант визуализации. Их рекомендуется использовать в случаях, когда мы показываем единичные или текстовые значения (например, фамилии или e-mail адреса), не взаимосвязанные показатели.

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

Пример использования таблицы на дашборде. Источник: галерея Power BI.

Это вспомогательные типы и элементы визуализаций. К шкалам можно отнести Bullet Chart (Диаграмма пули), которая показывает одну метрику в сравнении с другой или несколькими. Она подходит для визуализации реального результата по отношению к целевому (например, факт продаж относительно плана). К шкалам относятся различные виды термометров и спидометров.

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

Пример Bullet Chart. Источник фото: Википедия.

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

Географические карты помогут визуализировать как рейтинг, так и структуру данных в зависимости от их местоположения. Еще есть тепловая карта (Heatmap) — на бизнес-дашбордах она используется крайне редко, но как минимум стоит знать, что такая визуализация существует. Это графическое представление данных, в котором отдельные значения показаны с помощью цвета. Удобно, если у вас очень много индивидуальных показателей, которые надо анализировать в отдельности. Например, так можно отобразить наиболее востребованный/невостребованный товар в ассортименте из сотен позиций или увидеть дни максимальной/минимальной загрузки оборудования на протяжении года.

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

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

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

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

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

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

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

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

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

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

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

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

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