10 правил для совершенного дизайна дашборда

Данная статья – перевод оригинала

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

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

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

1. Определите назначение дашборда

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

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

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

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

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

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

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

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

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

Типы графиков, которые помогут вам увидеть взаимосвязь в данных

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

Типы графиков, которые помогают сравнивать значения

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

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

Типы графиков, которые помогут вам увидеть варианты построения

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

Типы графиков, помогающих проследить распределение

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

Типы графиков, которых следует избегать

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

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

Чтобы правильно выбрать тип представления данных для диаграммы, задайте себе следующие вопросы:
1. Сколько переменных вы хотите отобразить на одной диаграмме?
2. Будете ли вы отображать значения за определенный период времени или среди элементов / групп?
3. Сколько точек данных необходимо отображать для каждой переменной?

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

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

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

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

Сетка и модули

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

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

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

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

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

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

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

6. Удвойте свою прибыль.

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

Визуальная разница между полями 12 пикселей и 24 пикселей

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

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

Empire State Dashboard

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

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

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

Пример дашборда с перегруженными данными

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

8. Персонализируйте, а не настраивайте.

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

Настраиваемый дашборд

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

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

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

10. Проектируйте дашборд в последнюю очередь.

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