Привет! Меня зовут Игорь, я старший инженер по тестированию в Ozon Tech. Тестированием занимаюсь около 20 лет. До Ozon занимался проверкой качества ПО таких компаний, как Smartbear, Evernote. За это время опытным путём и анализом обратной связи от пользователей, удалось найти решения, которые смогли уменьшить негатив от сообщений об ошибках. В этой статье я хочу привести несколько примеров уведомлений, вызывающих наибольший негатив и как их можно избежать. Это может быть полезно вам, если вы встретите подобные случаи в своих продуктах, и позволит избежать их в новых разработках.

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

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

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

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

Очень часто мы видим такую ситуацию: 

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

Лучше всего себя показал вариант неактивной кнопки, пока все поля не окажутся заполнены. 

Мы постарались исправить эту проблему в диалогах. Например, окно создания нового списка в «Избранном», вывода средств или активации сертификата.

В результате у нас не отображается ненужное сообщение о незаполненном поле. 

2. Не делайте ошибку яркой

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

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

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

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

3. Ограничьте вводимую информацию 

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

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

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

4. Должна быть возможность вернуться назад 

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

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

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

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

5. Избегайте пугающего дизайна 

Этот пункт несколько похож на пункт 2. 

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

6. Не показывайте ошибки поиска при небольшом количестве вводных данных 

Бывает, что при вводе информации интерфейс старается нам помочь и предлагает варианты на выбор.

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

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

Если поиск вариантов начинается с определенного количества введённых символов (от 3 и выше в зависимости от конкретной реализации), лучше вообще не показывать ничего, чем ошибку. Подобную ситуацию можно увидеть в приложении в разделе «Купленные товары»: при вводе одного символа получаем сообщение, хотя поиск ещё не начинался.

Но задача на исправление данного поведения уже создана и ждёт своей очереди, думаю, в ближайшее время это будет внедрено.

7. Избегайте короткого показа сообщения об ошибке 

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

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

8. Старайтесь писать понятный текст ошибки 

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

• Сообщите, что происходит и что пошло не так.  

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

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

Так делать не нужно: 

Без описания, что случилось, ещё можно встретить тексты в приложении, но их количество стремительно падает. Так как гораздо лучше получить сообщение об ошибке с объяснением, почему она произошла.
Например: 

9. Добавляйте всевозможные подсказки 

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

Без подсказки пользователь не знает максимум и получит ошибку, если введет большую сумму. 

А так видя подсказку, он может избежать этого (но если ему очень захочется, то он всё же может её увидеть ?).  

Заключение 

Чем более удобным будет интерфейс, тем меньше трудностей испытают пользователи и тем более довольными они останутся после использования приложения. Необходимо постоянно проводить исследования и работать с фокус-группами, делать A/B-тесты по выявлению потребностей пользователей, предотвращению излишних ошибок и написанию корректных сообщений. Например, исправление описанных выше ошибок привело к снижению обращений пользователей в поддержку. А регулярный сбор ОС позволяет выявить проблемы, которые на первый взгляд не видны.

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