Дизайн дашбордов

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

В видео Стэнфордского университета генеральный директор Box Аарон Леви рассказывает, как за счёт фокуса на дизайне компании удалось занять долю рынка рядом с крупными игроками. Кейс интересный, но пока он скорее исключение из правил.

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

Статистик Эдвард Тафти критиковал Microsoft PowerPoint за искажение смысла через форму. Я же считаю, что проблема глубже — в отсутствии навыков работы с данными и визуализацией.

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

Визуализация со сложной структурой и логикой

Если отчёты разрабатывают аналитики, они часто оказываются избыточно сложными: с большим количеством фильтров, множеством временных рядов и метрик.

Дашборд с большим количеством графиков и детализацией

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

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

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

Связь графиков и бизнес-задачСвязь графиков и бизнес-задач

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

Кодировать данные можно совершенно любым способом. Например, есть проект 1 dataset, 100 visualizations, который показывает, как простейший датасет можно визуализировать сотней способов.

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

Многообразие визуальных атрибутов

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

Визуализация средней стоимости товара с помощью линейчатой диаграммы

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

Визуализация средней стоимости товара с помощью интенсивности цвета

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

Выявить динамикуВыявить динамику

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

• Есть ли сезонность в наших продажах по месяцам за прошедший год?
• Укладываемся ли мы в плановые показатели с учётом текущей динамики?
• Как менялся объём продаж в первом квартале?
• Как изменились продажи в текущем периоде?
• Как изменились продажи после запуска рекламной кампании?

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

Линейный график

Диаграмма с областями

Столбчатая диаграмма

Сравнить значения по категориям между собойСравнить значения по категориям между собой

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

• Какая товарная группа лидирует по объёму продаж и насколько она опережает остальные категории?
• Как распределяется средний чек по регионам?
• Есть ли разница в средней конверсии между пользователями разных платформ?
• Кто из менеджеров выполнил или перевыполнил план?
• Какую выручку продукт принёс в текущем месяце?

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

Линейчатая диаграмма

Найти выбросы и взаимосвязиНайти выбросы и взаимосвязи

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

• Связано ли число заказов с количеством уникальных товаров в категории?
• Есть ли товары с необычно высоким или низким уровнем продаж при определённой скидке?
• Можно ли разделить товары на группы по частоте покупок и стоимости?
• Есть ли зависимость между количеством заказов и рекламными затратами?

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

Точечная диаграмма

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

Таблица со встроенными диаграммами

Разложить целое на частиРазложить целое на части

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

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

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

Круговой график

Столбчатая диаграмма с накоплением

Получить конкретные значения или сделать выгрузкуПолучить конкретные значения или сделать выгрузку

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

• Сколько продаж товара А было в городе Б в январе 2025 года?
• Какова суммарная выручка по товарам категорий А и Б?
• Какие расходы на рекламу были у категории А?

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

Таблица с детальной информацией

Заказчики обожают таблицы! В большинстве случаев вас попросят сделать именно её. Это любимая визуализация бизнеса, но нужна она далеко не всегда. Чтобы разобраться, стоит ли делать таблицу, прочитайте статью «Таблица или график? Как убедить заказчика».

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

Фактоид и спарклайн

Правила оформления графиковПравила оформления графиков

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

Справочник с примерами удачных и неудачных визуализаций

Если захотите узнать больше о выборе и оформлении графиков, рекомендую книгу Александра Богачёва «Графики, которые убеждают всех». А если хотите проверить свои знания, пройдите интерактивные тесты от «Бар о пай» или Matplotlib Journey — в них нужно выбрать, какая из двух визуализаций лучше, а заодно узнать о простых правилах дизайна.

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

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

Правила дизайна дашбордовПравила дизайна дашбордов

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

Что даёт хороший дизайн:

• повышаются доверие, лояльность и вовлечённость пользователя;
• первое впечатление остаётся позитивным;
• пользователь прощает больше ошибок.

Одни и те же данные могут вызывать разные эмоции из-за дизайна.

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

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

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

Data-ink ratioData-ink ratio

Эдвард Тафти — один из мэтров в области визуализации данных. Его работы стоит прочесть всем, кто интересуется графиками и данными. Одна из ключевых идей Тафти: максимум данных, минимум визуального шума. И этот принцип очень полезно применять к дашбордам, например, с помощью data-ink ratio.

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

Это что-то вроде KPI для дашборда. Даже дизайн можно измерить — очень аналитический подход!

Расчёт data-ink ratio

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

График до применения правила data-ink ratio

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

График после применения правила data-ink ratio

Как применить правило data-ink ratio:

• Удалить non data-ink: убрать фон, обводку и сетку.
• Удалить избыточные data-ink: встроить легенду в график, использовать подписи у данных вместо осей, округлить значения.

Если хотите подробнее разобраться в принципе, посмотрите видео о data-ink ratio. Также вы можете изучить, как меняются графики после применения принципа. Примеры графиков:

• столбчатая диаграмма
• линейный график
• круговая диаграмма
• таблица

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

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

Правила графического дизайнаПравила графического дизайна

Правило близостиПравило близости

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

А если бы люди стояли вот так?

Или так?

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

Правило замкнутой областиПравило замкнутой области

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

Группировка объектов с помощью фона

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

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

Аналитики часто добавляют рамки, потому что это очевидный способ сгруппировать элементы. Но так дашборд становится перегруженным, показатель data-ink ratio снижается. Комбинируйте приёмы осознанно: сначала выстраивайте структуру за счёт близости, а затем при необходимости усиливайте её фоном или плашкой, чтобы подчеркнуть общие признаки объектов.

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

Дашборд с нарушением правил графического дизайна

Структуру дашборда можно улучшить, если изменить расположение элементов:

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

Так выглядит исправленный дашборд:

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

Как применить правила графического дизайна:

• Группировать связанные по смыслу графики. Размещайте рядом данные и элементы интерфейса, которые относятся к одной задаче и дополняют друг друга. Так вы сформируете единый смысловой блок.
• Сначала работать с расстоянием, затем с визуальным выделением. Выстраивайте структуру с помощью правила близости, только после этого используйте дополнительные средства — рамки, подложки или текстовое выделение.

Направление чтения и контрастНаправление чтения и контраст

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

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

F-паттерн и Z-паттерн

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

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

Направление чтения до и после применения правила

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

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

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

• размер;
• форма;
• цвет;
• движение и анимация.

Способы создания контраста

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

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

Давайте проверим: получится ли предугадать, в каком порядке вы прочитаете текст?

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

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

Результаты исследования Dashboard Vision: Using Eye-Tracking to Understand and Predict Dashboard Viewing Behaviors

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

Дашборд с необычным графиком в виде фигуры человека

Внимание пользователей при взгляде на дашборд

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

Анализ внимания пользователя с помощью эмуляции трекера движения глаз

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

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

Дашборд с нарушением правила контраста

Контраст на дашборде можно усилить так:

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

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

Дашборд после применения правила контраста

Как применять правило контраста:

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

КонтекстКонтекст

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

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

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

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

Влияние контекста на восприятие информации

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

Меня иногда спрашивают: «А как сделать так, чтобы дашбордами пользовались?». Шуточный, но самый действенный способ — добавить на дашборд плановое значение метрики, от которого зависит премия сотрудников.

Например, на графике ниже линией указан текущий год (CY), заливкой — предыдущий год (PY), а столбчатой диаграммой — прирост год к году (YoY%).

Сравнение метрик с предыдущим периодом

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

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

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

Дашборд с нарушением правила контекста

Дашборд можно улучшить так:

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

Дашборд после применения правила контекста для оформления подписей и подсказок

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

Как применять правило контекста:

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

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

Исправление дашборда с помощью правилИсправление дашборда с помощью правил

В галерее Yandex DataLens есть множество дашбордов. На примере одного из них покажем, как применить правила дизайна.

Исходный шаблон — это демонстрационный дашборд на базе популярного датасета Sample Superstore. Он показывает технические возможности инструмента, и по нему сложно определить исходную бизнес-задачу. Как отправную точку поставим задачу — сделать overview-отчёт по продажам, вывести основные метрики продаж и сравнить их в разрезе категорий и регионов.

Исходный шаблон дашборда

Шаг 1. Проверить типы графиков и их оформлениеШаг 1. Проверить типы графиков и их оформление

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

График можно разделить: общие продажи показать с помощью фактоида, а распределение — в таблице с линейными индикаторами. Такой формат позволит анализировать не только общий объём продаж, но и продажи в расчёте на заказ и на клиента. График скорее ответит на вопрос «Как показатели регионов отличаются друг от друга?», но не на вопрос «Как распределены общие продажи между регионами?». При этом процент продаж для каждого региона можно добавить в таблицу, поэтому информация о долях не потеряется.

Фактоиды с продажами на заказ и на клиента можно оставить как есть.

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

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

График лучше разделить на два элемента:

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

Посмотрите, как изменился дашборд после исправления типов графиков:

Дашборд с исправленными типами графиков

Шаг 2. Проверить data-ink ratioШаг 2. Проверить data-ink ratio

Достаточно трёх шагов, чтобы улучшить читаемость дашборда:

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

Дашборд после применения правила data-ink ratio

Шаг 3. Применить правила направления чтения и контрастаШаг 3. Применить правила направления чтения и контраста

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

Получится порядок: Фактоиды → Распределение и динамика по регионам → Категории → Категории по регионам.

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

Дашборд после применения правил направления чтения и контраста

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

Дашборд с приглушённой палитрой в диаграмме с областями

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

Дашборд с акцентами в заголовках

Шаг 4. Добавить контекстШаг 4. Добавить контекст

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

• дата обновления дашборда;
• размеренность метрик;
• подсказки расчёта метрик;
• пояснения по интерактивной фильтрации для графиков.

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

Дашборд с добавлением контекста

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

Дашборд с линией плана на графике

Лайфхаки при вёрстке дашборда:

• Используйте пустые текстовые блоки, чтобы оставить пространство между графиками.
• Применяйте функции разметки, чтобы указать прирост и другие подписи в фактоидах. Вы можете посмотреть примеры применения в демодашборде на вкладке «Форматирование». Для сложных случаев пользуйтесь кастомными графиками.
• Ставьте неразрывный пробел или символ пустого пробела (U+3164), чтобы выровнять текст и добавить пустые строки.

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

Главное о дизайне дашбордовГлавное о дизайне дашбордов

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

• Визуализация всегда должна опираться на задачу. Один и тот же показатель можно представить разными способами, но выбор атрибутов меняет то, что пользователь сможет увидеть: точные значения или общую картину.
• Большинство вопросов к дашборду укладывается в пять групп: динамика, сравнение значений, проверка гипотез, структура целого и получение конкретных данных. Под каждую группу подходят свои типы визуализаций.
• Читаемость дашборда зависит от нескольких базовых правил: повышать data-ink ratio, группировать элементы, управлять вниманием через контраст и направление чтения, задавать контекст через сравнение с планом и периодами.
• Эти правила не работают сами по себе. Их нужно закреплять практикой: разбирать реальные отчёты, находить слабые места и переделывать дашборды до понятной структуры.

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