Как проектировать лучшие дашборды?

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

Пользовательский опыт (UX) — это то, что человек чувствует при взаимодействии с конкретным продуктом, системой или услугой. Это относится ко всем аспектам взаимодействия конечного пользователя с компанией, ее услугами и продуктами.

Дизайн пользовательского опыта (UX дизайн) — это «процесс повышения удовлетворенности пользователей за счет повышения удобства использования, доступности и удовольствия от взаимодействия пользователя с продуктом». Цель UX дизайна — внести улучшения в бизнес, чтобы клиенты были более довольны своим опытом взаимодействия.

Я надеюсь, что концепция UX дизайна теперь ясна,

Теперь давайте разберемся, что такое дашборд?

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

Слово «дашборд» (dashboard) происходит от фразы «набросать» (“to dash off”), что означает быстро что-то написать или нарисовать. Дашборды в бизнесе — это визуальное отображение наиболее важной информации, необходимой для принятия решений. Дашборд обычно состоит из одной или нескольких панелей с диаграммами, графиками и потоками данных, которые обеспечивают хорошее представление о том, как компания работает в различных аспектах, таких как продажи, производство и т. д.

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

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

Эти советы, перечисленные ниже, помогли мне создать хороший дизайн дашбордов и преодолеть страх и разочарование при их разработке:

1. Поймите Мотив дашборда

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

Дашборды можно разделить на 4 типа:

1. Оперативный: показывает более короткие интервалы времени и операционные процессы.
2. Аналитический: создан для отображения большого количества данных.
3. Стратегический: ориентирован на долгосрочные стратегии и показатели высокого уровня.
4. Тактический: используется менеджерами среднего звена для отслеживания эффективности.

С каждым типом связан свой тип пользовательского опыта.

В соответствии с потребностями вашего бизнеса выберите один тип дашборда из 4-х вышеперечисленных.

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

2. Знайте, как правильно представить данные

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

Выберите правильный тип графика для отображения определенного типа данных.

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

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

3. Установите хорошую структуру макета и расставьте приоритеты

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

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

Система сеток

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

При проектировании информационной архитектуры помните следующее:

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

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

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

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

5. Используйте четко установленные поля и отступы

Чистый макет — это макет с хорошим пустым пространством, равномерными полями и отступами.

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

Ниже приведены 2 примера интерфейсов с хорошими и плохими полями и отступами соответственно.

6. Не делайте страницу дашборда слишком длинной

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

Высота дашборда должна быть около 100–120% от экрана рабочего стола, она должна содержать приоритетные данные, а не все важные данные.

7. Персонализация и индивидуальная настройка

Персонализация:

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

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

Индивидуальная настройка:

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

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

Спасибо за внимание!

Источник: toharshk.medium.com