UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 3 рекомендации по проектированию пустых состояний в сложных приложениях
Редакція
Редакція

Опубліковано

3 рекомендации по проектированию пустых состояний в сложных приложениях

#ux

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

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

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

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

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

Пустые состояния, которые были созданы намеренно, а не оставлены на потом, могут быть использованы для:

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

Используйте пустые состояния для сообщения о состоянии системы

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

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

В этом диалоге отсутствует соответствующий фидбек: неясно, нет информации для отображения в таблице или система все еще работает над ее сбором

Краткое системное сообщение в области контента по завершении процесса (например, «Нет записей для выбранного периода») было бы простым, но эффективным способом повышения наглядности состояния системы и, следовательно, доверия пользователей к результатам.

Простое сообщение (There are no records to display for the selected date range) сообщает о состоянии системы и повышает уверенность пользователя

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

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

При входе в новый экран пользователи сначала сталкиваются с неточным сообщением о состоянии системы «Нет записей» (слева). Через несколько секунд, когда система завершит загрузку контента, сообщение заменяется списком соответствующих элементов (справа)

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

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

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

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

Например, рассмотрим приведенную ниже панель оповещений из приложения планирования ресурсов предприятия (ERP). Когда панель «Alerts» заполнена оповещениями, довольно очевидно, как взаимодействовать с контентом. (Это состояние панели, вероятно, соответствует тому, как этот элемент был смоделирован и протестирован). Однако, когда панель оповещений пуста, возникают проблемы, обсуждавшиеся ранее: пользователи могут задаться вопросом, произошла ли ошибка или правильные ли параметры они задали для запуска оповещений. (Как и в предыдущем примере, здесь может быть полезно краткое сообщение о состоянии системы, в котором говорится об отсутствии оповещений).

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

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

Напротив, приложение для мониторинга данных DataDog, использует контекстную справку в пустом состоянии. Когда пользователь не пометил никакие элементы, как избранные, в области потенциального контента отображается сообщение «Star your favorites to list them here» (Пометьте избранные элементы звездочкой, чтобы добавить их в этот список).

DataDog: когда пользователи не выбрали ни одного избранного, сообщение «Пометьте избранные звездочкой», показанное в контейнере с пустым состоянием, знакомит пользователей с функцией добавления контента в избранное и объясняет, как можно использовать пустую область

В аналогичном примере, когда в Microsoft Power BI в последнее время не просматривались никакие элементы, экран с пустым состоянием содержит краткое системное сообщение, описывающее, как туда добавляется контент.

Microsoft Power BI: контейнер с пустым состоянием для несуществующих недавних элементов объясняет, как контент добавляется в эту область

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

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

Рассмотрим для примера программу для разработки приложений. Если во время выполнения задачи нет соответствующих записей, то пользователь увидит следующее сообщение о состоянии системы: «No Records; Send a request to view details in the works». Хотя это сообщение предоставляет контекстную информацию о том, что пользователь может сделать для просмотра этих записей (т. е. «Отправить запрос для просмотра деталей»), оно не сообщает пользователю, как выполнить эту задачу, или, где найти необходимый функционал.

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

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

Например, приложение ниже предоставляет прямую ссылку в пустом состоянии – кнопку с надписью «Create», которая позволяет пользователям создавать предупреждения. Для пользователей, которым может потребоваться дополнительная информация, чтобы понять, чем полезны предупреждения и как их использовать, ссылка «Learn more» ведет к соответствующей документации.

Пустое состояние панели предупреждений содержит ссылки на дополнительную актуальную документацию и предоставляет кнопку для создания предупреждений непосредственно в пустом состоянии

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

Loggly: экран с пустым состоянием предоставляет 2 прямых пути для начала работы: добавление журналов из внешних источников или просмотр демо со случайно сгенерированными данными

Вывод

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

Выделим несколько основных моментов:

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

Перевод статьи nngroup.com

Топ коментарі (0)