Основы дизайна дашборда: макет и форматирование дашборда

13.05.2022

 

1. Тип дашборда

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

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

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

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

 

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

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

Суммируя вышесказанное, первый дашборд является примером пояснительного дашборда, а второй — исследовательского. Первый дашборд — информационный, он поясняет влияние «Правила Руни» на найм главных тренеров НФЛ (Национальной Футбольной Лиги) из меньшинств. Второй дашборд позволяет пользователям просматривать все поля, которые питчеры MLB разыгрывали в течение всего сезона.

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

 

2. Размер дашборда

Следующим шагом в определении макета вашего дашборда является определение того, какое физическое пространство будет занимать ваш дашборд. Вам нужен стандартный дашборд размером 1000 x 800 пикселей, или вам нужен формат «длинной истории», чтобы пользователь мог «прокручивать» ее? Или вы хотите дашборд с горизонтальной прокруткой, которая больше напоминает временную шкалу? Может быть вам нужна «стартовая» страница, с которой есть возможность перейти к определенной теме? Разберем плюсы и минусы каждого из вариантов.

Стандартный дашборд

Стандартный прямоугольный дашборд — самый распространенный вариант. Размеры дашборда могут быть переменными (в зависимости от размера окна браузера), но независимо от того, имеет ли ваш дашборд размеры 1200 x 800 пикселей или 2000 x 1000, постоянным является то, что в браузере не нужно будет делать прокрутку – все объекты дашборда будут располагаться на одном экране.

Длинная форма (вертикальная)

«Длинный» дашборд популярен у авторов Tableau Public, но мы не наблюдаем, чтобы этот формат прижился в деловом мире. Этот формат дашбордов очень удобен при рассказе длинной сложной истории, поскольку он очень похож на газетную верстку, «вытянутую» по вертикали. Вертикальное форматирование делает необязательным горизонтальное выравнивание заголовков (тем), что упрощает верстку, а также позволяет пользователю сосредоточиться только на одной теме. Недостатком этого формата может стать как раз прокрутка по вертикали – если она отнимает время и отвлекает внимание пользователя от анализа. Длинный формат неудобен и для тех, кто хочет распечатать весь дашборд или использовать его часть в презентации.

Длинная форма (горизонтальная)

Это, безусловно, наименее распространенная форма дашборда.

Несколько уровней (стартовая страница + исследовательские слои)

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

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

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

 

3. Макет дашборда

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

Просмотр дашборда

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

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

Общие макеты дашбордов

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

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

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

Альтернативные макеты дашбордов

Приведенные ниже дашборды представляют собой несколько альтернативных макетов, которые очень сбалансированы, но не имеют четкого макета сетки. Эти дашборды часто используются при одновременном отображении множества KPI. Группировка ваших KPI в BAN (Big Ass Number) и последующая более глубокая разбивка очень распространены в дизайне дашбордов.

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