Проектируем удобный дэшборд

Руководство продуктового менеджера по быстрому и эффективному дизайну.
Дэшборд Bootstrap
Вы читаете перевод статьи “Designing a Usable Dashboard”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.

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

Кто знает или вообще когда-либо задумывался, сколько системных вызовов возникает, чтобы отобразить на экране статус батареи? Мало кто. Но вот когда батарея становится красной, мы быстро понимаем: нужно что-то делать, иначе девайс скоро станет бесполезным. Со временем мы начинаем полагаться на дизайн системы.


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

В этой статье мне бы хотелось рассказать, как обычный продуктовый менеджер, у которого ограниченный доступ к дизайнерам, может самостоятельно спроектировать дэшборд, руководствуясь эвристическими принципами юзабилити Якоба Нильсена. Для тех, кто не в курсе: Якоба Нильсена часто называют “гуру веб юзабилити”, а его принципы дизайна сегодня столь же актуальны, как и 20 лет назад.

Так что такое эвристика? Говоря по-простому, эвристика — это практический метод: как определяет Даниел Канеман, это “простая процедура, которая помогает найти адекватный — пусть часто не идеальный — ответ на сложный вопрос”.

Давайте рассмотрим эти 10 эвристик и подумаем, как они применимы к дэшбордам.

1. Осведомленность о состоянии системы

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

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

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


Shopify

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

Basecamp

2. Соответствие системы реальному миру

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

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

Hubspot

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

Localytics

3. Свобода действий и контроль

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

Пользователи Mailchimp могут выйти из режима создания шаблона при помощи четко выделенной кнопки “Сохранить и выйти”. К тому же, можно “сохранить и закрыть” отдельные компоненты шаблона, такие как блок текста или карточка с изображением; вернуться к последнему сохраненному состоянию, а также отменить и повторить изменения.

Mailchimp

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

Freshbooks

4. Согласованность и стандарты

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

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

У этой эвристики есть две стороны —

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

BlueJeans, платформа для корпоративных видео коммуникаций, предлагает пользователям три стандартных кнопки-действия (call-to-action): “запланировать встречу”, “присоединиться к встрече”, “начать свою встречу”. Эти кнопки присутствуют в том же составе и с теми же названиями на разных платформах — будь то веб, десктоп или мобильное устройство.

Bluejeans

(2.) По возможности, дизайн дэшборда должен опираться на руководство по дизайну самой платформы.

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

Buffer

5. Предотвращение ошибок

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

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

В JIRA, чтобы успешно создать задачу, вы обязательно должны назначить исполнителя (“assignee”). Часто бывает, что, создавая много задач сразу, пользователь не знает, кто именно будет их выполнять. JIRA предлагает два хороших решения по умолчанию: а. автоматически назначить исполнителя (обычно это бывает администратор или текущий пользователь) и b. воспользоваться ссылкой “назначить меня” (“Assign to me”) — в этом случае создатель задачи становится исполнителем.

JIRA

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

Slack

6. Узнавание, а не припоминание

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

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

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

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

JIRA

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

Trello

7. Гибкость и эффективность использования

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

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

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

UXPin

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

Meetup

8. Эстетика и минималистичный дизайн

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

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

Mailchimp

Страница статистики SoundCloud предлагает исполнителю кучу информации, которую легко “читать”, поскольку она хорошо структурирована. Мы видим здесь интерактивную таблицу, списки, цветовое кодирование и много белого пространства.

SoundCloud

9. Помогайте пользователям понимать и решать проблемы

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

Когда вы пытаетесь интегрировать Trello и Slack, если кто-то из пользователей не входит в команду, появится сообщение об ошибке. Оно простым языком описывает проблему и возможное решение.

Trello

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

Asana

10. Помощь и документация

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

Виджет “Помощь” в Wordpress доступен на всех страницах — его легко найти и он относится к тому разделу, в котором находится пользователь. Внутри содержится краткая информация, которую при необходимости можно свернуть и развернуть.

WordPress

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

Mixpanel

А какие у вас любимые дэшборты? И насколько хорошо, по-вашему, в них применяются вышеупомянутые эвристические принципы?

Если вам понравилась эта статья, порекомендуйте ее другим.


Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.

Ментальные заметки

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

Выпустили приложение под iOS.

Скачать в Appstore