Пять китов создания эффективной информационной панели

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

— насколько информативна подача;

как быстро он сможет достичь нужных целей;

под силу ли ему разобраться со всеми данными.

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

Имея опыт UX/UI дизайна более 13 лет, KLONA готова поделиться своими секретами и правилами создания идеального dаshboаrd.

Определение типа дашборда

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

В зависимости от поставленных задач различают три типа:

Аналитические панели

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

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

Решение для руководителей и аналитических отделов.

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

Пример аналитической панели
Пример аналитической панели

Оперативные дашборды

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

Вариант для менеджеров, управления техникой, игр и программ онлайн.

Цель: оценка ежедневных показателей.

Стратегические приборные доски

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

Выбор для руководителей.

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

Пример стратегической панели
Пример стратегической панели 

Изучение аудитории

Определить пользователей поможет и предыдущий шаг. Но это в глобальном смысле.

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

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

кто будет работать с панелью?

какую информацию будут использовать для разных целей и задач;

какой имеется опыт взаимодействия с метриками и данными;

какие есть приоритеты в визуале и цвете.

Изучение целевой аудитории

Главное – понять цель поиска пользователя и изучить его путь к ней. Это и есть основной ориентир во всей схеме проектирования UX/UI дизайна dаshboаrd.

Анализ целей и ожиданий

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

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

Выбор вида отображения данных

Элементы дизайна приборной панели

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

— для акцентирования внимания на самом важном показателе лучше применять диаграмму с одним значением;

— для отображения динамики его изменения подойдет диаграмма с индикатором на одно значение;

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

— продемонстрировать несколько наборов данных стоит в табличном формате, при этом количество строк не должно превышать 10;

непрерывные данные лучше мониторить с помощью линейной диаграммы;

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

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

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

Важные советы по разработке полезной информационной панели можно посмотреть в видео:

Организация приборной панели

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

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

Существуют специальные правила оформления дашборда:

важные параметры должны располагаться в верхнем левом углу (по правилу чтения);

связанные индикаторы обязательно группируются вместе, предотвращая длительные поиски пользователем нужного следующего показателя;

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

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

Дьявол в деталях — главные правила разработки дизайна дашборда

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

Удобно, как только возможно

Дашборд будет более понятен и удобен для работы с данными, когда будут соблюдены следующие правила:

сравниваемые элементы должны визуально группироваться;

связанная информация располагается в непосредственной близости;

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

разделить разные аспекты мониторинга позволит дополнительное пустое пространство между секциями, группами;

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

Усложнять просто, упрощать сложно

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

ограничьте объем информации, не перегружая восприятие;

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

— оставьте только нужные показатели, согласовав их количество с пользователями;

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

Приоритеты прежде всего

Простая подача сложных данных на информационной панели

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

Определите главные показатели и создайте своеобразную иерархию подачи информации на панели:

на первом месте размещаются самые важные данные;

на втором идут тенденции, раскрывающие предыдущие показатели;

далее – информация, которая помогает разобраться в проблеме.

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

Размер и форма имеет значение

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

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

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

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

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

Палитра восприятия

Цвет — это та область, где наш разум соприкасается со Вселенной. Пауль Клее

Использование цвета в оформлении приборной панели

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

Для создания контраста или выделения главных элементов применяются цветовые акценты, оставляя для второстепенных данных нейтральные тона.

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

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

Напутствие на пути к идеальной панели

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

И в завершение, если вы сомневаетесь в успешном собственном пути к идеальному дашборду, то вы всегда можете рассчитывать на команду KLONA, в активе которой сотни реализованных проектов по разработке UX/UI design dashboard.

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

Мы – не лучшие, мы просто делаем ЛУЧШЕЕ!