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

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

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

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

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



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

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

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

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

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



5. Избегайте пугающего дизайна
Этот пункт несколько похож на пункт 2.

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

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


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

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

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

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

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

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

А так видя подсказку, он может избежать этого (но если ему очень захочется, то он всё же может её увидеть ?).
Заключение
Чем более удобным будет интерфейс, тем меньше трудностей испытают пользователи и тем более довольными они останутся после использования приложения. Необходимо постоянно проводить исследования и работать с фокус-группами, делать A/B-тесты по выявлению потребностей пользователей, предотвращению излишних ошибок и написанию корректных сообщений. Например, исправление описанных выше ошибок привело к снижению обращений пользователей в поддержку. А регулярный сбор ОС позволяет выявить проблемы, которые на первый взгляд не видны.
Грамотное составление и отображение ошибки — это опорные моменты, которые помогут создать положительный пользовательский опыт.
Комментарии (14)
grigr
02.07.2025 11:11В мобильном приложении в разделе Озон банк, когда заходишь в раздел Рассрочка, сразу же открывается реклама на весь экран. Вот это реально бесит!
Также местами в разделах при нажатии крестика закрывается приложение, а не раздел. Надо запускать приложение повторно. Раздражает когда не понимаешь следующего действия - будет закрыт раздел или все приложение.
SC_Ghost Автор
02.07.2025 11:11Соглашусь, что когда при закрытии раздела, закрывается целиком приложение, очень странное решение. Если это не была изначальная задумка, то возможно ошибка в логике навигации. А если это ожидаемое поведение, тот тут сложно сказать зачем это делалось.
А реклама раздражает, думаю всех и везде, но без неё никак не обойтись, как бы не хотелось.grigr
02.07.2025 11:11Раздел Банк это как бы отдельное приложение, но открывается из основного. Так вот, там есть круглая кнопка крестник, а не стрелка вернуться. Этот крест часто закрывает все приложение, но иногда возвращает в родительское приложение магазина. Хотелось бы чтобы была кнопка возврат в магазин, а не закрытие.
На счёт рекламы. Странно заморачиваться на счёт маленьких красных надписей. Но закрывать глаза на окна на весь экран. Как вариант, можно запомнить что пользователь закрывает это окно каждый раз (с одной и той же рекламой) и не показывать его при каждом открытии.
Есть ещё пожелание. В списке старых заказов хорошо было бы иметь поиск по товарам из них. А так приходится крутить вниз весьма долго...
SC_Ghost Автор
02.07.2025 11:11Реклама действительно может вызывать негативные эмоции, однако это не означает, что другие элементы, которые также могут не нравиться пользователям, можно оставить без внимания. Хотя они могут казаться менее важными по сравнению с другими аспектами, они всё равно способны вызывать сильное раздражение у некоторых пользователей. Чем меньше негативных моментов в приложении, тем лучше его восприятие.
Все описанные проблемы и пожелания постараюсь передать команде для дальнейшей работы.grigr
02.07.2025 11:11Я не против рекламы. Просто одинаковое окно закрывающее весь экран при каждом входе в раздел сильно раздражает...
HardWrMan
02.07.2025 11:11Лучшее сообщение об ошибке — это его отсутствие.
К вашему сведению, отсутствие сообщения об ошибке вовсе не означает отсутствие самой ошибки. Был у меня опыт с программами и сайтами, которые ни на что не жаловались, но и ничего не происходило. Тыкнул, анимация кнопки проигралась и... всё, тишина. И ты не понимаешь, сработало, несработало, почему не сработало? Нафиг такие сайты и программы через Shift+Del с пляжу.
SC_Ghost Автор
02.07.2025 11:11Никто не спорит, что когда ошибка есть и её показ необходим для пользователя, то её надо показывать. Речь же в статье о том, что очень часто из-за особенностей интерфейса показываются сообщения, которых можно было бы избежать и не отвлекать пользователя.
LeshaRB
Лучше всего себя показал вариант неактивной кнопки, пока все поля не окажутся заполнены.
Подбешивают такие формы, когда куча полей. И не понимаешь, какие обязательные. В вашем примере поле Фамилия, тоже не помечена как обязательная
SC_Ghost Автор
Да, когда много таких полей, согласен.
Поэтому в название раздела вынес именно обязательные, но да, наверное надо было и на картинке показать это. Спасибо.
PerroSalchicha
По моему опыту, вообще неактивная кнопка - это в любом случае непрактично. Масса пользователей воспринимает это как баг в программе, дескать "а чего оно не работает". Как раз активная кнопка, инлайновое сообщение "заполните, пожалуйста, все обязательные поля", и подсветка всех этих полей дают наилучший результат. Да, чисто психологически, пользователь в этот момент испытывает некий дискомфорт. Но у нас ведь задача, чтобы больше пользователей успешно прошло эту форму, а не чтобы им было комфортнее, но часть "завалила квест".
d-stream
Чуть-чуть это лечится например тултипом на кнопке со списком "чего ещё не хватает".
Да и это меньшее зло по сравнению с отказом через несколько шагов)
SC_Ghost Автор
Интересный вариант, надо будет подумать, применить в будущем, например на кнопку Далее из примера. Правда есть ограничение по платформе, без мышки сложно будет, да и есть пользователи, кто не дожидается всплывающих подсказок совсем, но надо попробовать.
d-stream
Ну можно и возле кнопки размещать информацю, но в тултипе больше места.
Ещё как вариант - "трехцветность" кнопки:
Задисэйблена (серенькая) - если не заполнены поля
Синяя, активная - если заполнено не всё
Зеленая - можно шагать далее
И вот в синем варианте - псевдотултип/модалка с описанием чего ещё недозаполнено
SC_Ghost Автор
Можно как вариант, не три цвета, а процент окраса кнопки, заполнено 2 из 3 полей, значит на 2/3 покрасить её в синий цвет.
Но вот вопрос как ко всему этому отнесутся пользователи, не ведёт ли всё это их в заблуждение и они запутаются ещё сильнее. А потом надо будет убедить ещё дизайнеров, продактов и тд.