Бесплатная школа UX/UI-дизайна с наставником

Ошибки, уведомления и подтверждения в UX/UI

Автор статьи:
,

Введение

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

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

В данной статье мы разберем данные элементы, а также лучшие практики и ошибки с точки зрения UI/UX-дизайна.

Модальные окна в пользовательском интерфейсе. За и против

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

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

Главные принципы при разработке сообщений об ошибках, уведомлений и подтверждений

Дизайнеры порой склонны задумываться о небольших элементах дизайна (но критически важных!) в последнюю очередь. Кажется, что у вас полно работы с главным экраном, меню, страницей оплаты и т.д., такую мелочь как уведомления, сообщения об ошибках и подтверждения можно сделать в самом конце. Однако это в корне неверный подход. Из-за того, что в таком подходе данные элементы дорабатываются уже в самом конце, это часто приводит к неудачным дизайн решениям, что негативно сказывается на UX. Более того проблема может внезапно всплыть, когда разработчик спросит: «Как мы будем работать с ошибками?».

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

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

Может быть несколько вариантов реализации, это зависит от ряда факторов:
  • тип передаваемой информации;
  • срочность — нужно ли немедленно просмотреть информацию;
  • требуется ли действие пользователя в результате получения информации.

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

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

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

UX решения для разных информационных сообщений

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

  • Что может вызвать уведомление?
  • Сообщения инициируются пользователем или системой?
  • Какой тип обратной связи передается?
  • Где и как будет отображаться уведомление?
  • Какое уведомление потребует немедленного взаимодействия?
  • Является ли уведомление постоянным или непостоянным?

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

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

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

Как правило сообщения об ошибках, уведомления и подтверждения состоят из нескольких структурных элементов:

01
Заголовок
Это самый заметным элемент уведомления, он создает контекст, информируя пользователя о событии. Он должен быть коротким и понятным.
02
Описание
Содержит более подробную информацию о событии. Оно может включать дополнительную информацию, которая будет полезной для пользователя. При его составлении старайтесь, чтобы его длина не превышала 40 символов, и не повторяйте то, что написано в заголовке.
03
Область действия
(кнопка призыва к действию). Кнопки позволяют пользователю предпринять немедленное действие. Если уведомление требует действия, надпись на кнопке должна быть призывной. На ней должно быть написано «Создать», «Завершить» или «Отправить». Убедитесь, что область, на которую можно нажать, достаточно контрастна, чтобы пользователь мог легко ее заметить. Область действия может находиться в правой или нижней части контейнера уведомлений.
04
Иконка
(опционально). Значимые изображения могут усилить содержание уведомления.

Проведите A/B-тестирование нескольких вариантов дизайна уведомлений, чтобы найти тот, на который пользователи реагируют лучше всего.

Уведомления об ошибке

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

Полноэкранный режим

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

Модальное / диалоговое окно

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

Уведомления

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

Подтверждения

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

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

Лучшие практики и ошибки UX

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

01
Сообщение не содержит информации, которая объясняет причину ошибки, не описывает действия, которые необходимо совершить пользователю
02
Несогласованность вопроса и кнопок действия
03
Более двух вариантов действий

Заключение

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды