Практическое руководство

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

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

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

1. Определите цели информационной панели

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

Операционный дашборд

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

Ключевые качества операционного дашборда
Ключевые качества операционного дашборда

Аналитический дашборд

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

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

2. Выберите правильное представление для данных

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

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

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

— При использовании горизонтальной или вертикальной гистограммы попробуйте сортировать столбцы по самому большому значению, а не случайным образом;

— Линейные диаграммы не показывают более 5 значений, а с гистограммами, не рекомендуется показывать более 7.

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

— Сколько переменных вы хотите показать в одном графике?

— Будете ли вы отображать значения в течение определенного периода времени или среди элементов и групп?

— Сколько данных необходимо отображать для каждой переменной?

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

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

4. Определите макет. Сценарии. Расставьте приоритеты

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

Сетка и модули
Сетка и модули
Принимая решение о том, какую информацию размещать, помните об этом:

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

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

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

Определите макет. Сценарии. Расставьте приоритеты

5. Используйте строительные блоки с последовательной структурой

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

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

Используйте строительные блоки с последовательной структурой

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

Используйте строительные блоки с последовательной структурой - 2

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

6. Удвойте поля

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

Визуальное различие полей 12px и 24px
Визуальное различие полей 12px и 24px

7. Не скрывайте информацию или не полагайтесь слишком сильно на взаимодействия

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

Не скрывайте информацию или не полагайтесь слишком сильно на взаимодействия

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

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

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

8. Персонализация, а не кастомизация

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

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

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

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

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

Проектирование таблиц данных

10. Проектируйте дашборд в самом конце

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

Надеюсь эта статья была полезна для вас. Спасибо за прочтение.