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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уведомления

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

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

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

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

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

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