Любая система — это правила и ограничения. Это поле обязательно. Тут не должно быть больше 256 символов. А в этом можно вводить только латиницу. Разработчики так решили — им виднее. Но пользователь не в курсе про эти требования и приходит не играть в угадайку, ему нужно быстро решить свою задачу. Однако, из-за этих ограничений он часто сталкивается с ошибками, а это раздражает, усложняет целевое действие и даже может привести к отказу от взаимодействия.
Меня зовут Аня, я — дизайнер в продуктовой студии Axel Pro. За время существования наш продукт оброс десятками форм разного масштаба. Во время очередного ревью я обнаружила, что однотипные поля ведут себя по-разному при валидации, поэтому решила навести порядок.
Я провела небольшой ресерч и в этой статье поделюсь выводами и решениями, которые приняла. Расскажу
почему возникают ошибки
почему они раздражают
как снизить раздражение и когнитивную нагрузку
про конкретные примеры из моей практики
Почему возникают ошибки
Ошибки при заполнении формы чаще всего связаны не с невнимательностью пользователя, а с особенностями интерфейса. Ниже — три основные причины, по которым пользователи чаще всего ошибаются, и что с этим можно сделать.
Сложный интерфейс
Если форма перегружена, запутанна или требует слишком много внимания, пользователь быстрее устанет, может запутаться или допустить ошибку. Особенно это критично для новичков, которые не знают всех требований системы.
Что делать
Разбейте форму на логичные блоки или шаги — это упростит восприятие.
Старайтесь не перегружать экран: уберите лишнее, сгруппируйте поля.
Уровень сложности интерфейса должен соответствовать опыту пользователя.
Чем меньше усилий нужно для понимания и заполнения — тем меньше вероятность ошибки.
Недостаток подсказок
Форма может требовать определённый формат данных, но не объяснять, что именно нужно ввести. В таких случаях пользователь вводит то, что кажется логичным, и сталкивается с ошибкой, не понимая, в чём дело.
Что делать
Обозначайте обязательные и необязательные поля, если нет возможности оставить на форме только обязательные — это избавляет от догадок.
Добавляйте примеры и формат. Например, ИНН: 10 или 12 цифр, Дата: ДД.ММ.ГГГГ. Используйте плейсхолдеры, хелперы или тултипы.
Мягко ограничивайте ввод. Устанавливайте допустимое число символов, запрещайте ввод недопустимых знаков.
Используйте автозаполнение. Подсказывайте подходящие значения по мере ввода — это и ускоряет заполнение, и снижает риск ошибок.
Спешка и отвлечённость
Многие пользователи заполняют форму на ходу: с телефона, в транспорте, между задачами. В таких условиях легко промахнуться, забыть что-то заполнить или случайно стереть данные.
Что делать
Учитывайте контекст использования. Сделайте поля и кнопки достаточно крупными, текст — читаемым, особенно на мобильных устройствах.
Предзаполняйте данные, если они уже известны. Например, страну, email или имя. Это экономит время и снижает вероятность ошибки.
Автоматически сохраняйте введённые данные. Если пользователь отвлёкся или перезагрузил страницу, дайте возможность продолжить с того места, где он остановился.
Почему ошибки раздражают
Пользователей раздражает не сам факт ошибки, а то, как и когда они о ней узнают. Интерфейс может быть излишне строгим, неожиданным или просто непонятным. Вот типичные ситуации, которые вызывают раздражение, и как это можно исправить.
Неудачное время для ошибки
Наверняка вы сталкивались с полями, которые начинают ругаться сразу, как только вы в них кликнули — хотя вы ещё даже не начали вводить данные. Или наоборот: форма позволяет ввести всё, что угодно, создаёт ощущение успеха — а потом выдаёт десяток ошибок сразу.
Что делать
Показывайте ошибку после того, как пользователь закончил ввод — например, при потере фокуса с поля. Это золотая середина.
Оставшиеся ошибки покажите при отправке формы. Скорее всего, их будет меньше.
Не ругайтесь на пустое поле, если пользователь его просто «потрогал».
Сообщение непонятно
Ошибки вроде «Неверный формат» могут вызывать раздражение, особенно если непонятно, что именно не так и что теперь делать. Пользователь теряет ощущение контроля — а значит, доверие к интерфейсу.
Что делать
Пишите понятные и конкретные сообщения. Вместо «Ошибка в формате» — «Введите номер телефона в формате +7 (ХХХ) ХХХ-ХХ-ХХ».
Избегайте технических терминов, внутренних кодов ошибок и сухих формулировок.
Не вините и не ругайте пользователя. Выберите дружелюбный тон и нейтральные слова. Вместо «Нельзя вводить больше 128 символов» — «Максимум 128 символов».
Ошибка незаметна
Даже если текст ошибки отличный — он может быть просто не замечен. Например, если сообщение появилось вне экрана, где-то вверху формы, или оторвано от конкретного поля.
Что делать
Лучшее место для ошибки — рядом с полем, к которому она относится.
Подсвечивайте цветом не только поле, но и текст. Используйте иконку (восклицательный знак или крестик) или анимацию (легкий шейк) для усиления внимания на поле.
Прокручивайте форму к первому ошибочному полю после отправки (особенно на мобильных). Современные библиотеки умеют это делать без дополнительных доработок.
Не собирайте список из ошибок вначале или в конце формы — пользователь может туда не дойти. К тому же исправить будет сложнее.
Не скрывайте сообщение как только пользователь поставил курсор в поле, чтобы исправить — дайте ему время на прочтение и осознание.
Кнопка отправки формы неактивна
Частый конфликт в дизайне: стоит ли блокировать кнопку отправки, пока форма невалидна? Есть два подхода:
Блокировать кнопку. Такой вариант предотвращает отправку заведомо некорректных данных. Пользователь не сделает ошибку, но может не понять, почему он не может продолжить.
Оставить кнопку активной. Пользователь может нажать, получить ошибки — и понять, что именно не так.
Что делать
Если блокируете кнопку — объясните, почему. Например, покажите текст «Заполните обязательные поля выше». Важно учитывать, что на мобильных устройствах нет состояния ховера, поэтому всплывающая подсказка не подойдет.
Если оставляете кнопку активной — обеспечьте чёткую, дружелюбную обратную связь об ошибках после нажатия. Лучше всего сочетать этот вариант с проверкой полей в реальном времени, чтобы пользователь не получил все ошибки разом.
Главное — дайте понять, что нужно сделать, чтобы двинуться дальше.
Как я улучшила UX в нашем продукте
Далее расскажу про то, какие разногласия в интерфейсе я заметила и как решила исправить, комбинируя подходы, описанные выше. Чтобы больше не путаться и не ломать консистентность интерфейса, новые правила я зафиксировала во внутренних гайдлайнах продукта, предварительно обсудив возможность реализации с разработчиками.
Блокировка кнопки отправки формы
При создании сущности состояние кнопки отправки было разное: где-то активна, где-то — нет. При этом по наведению на кнопку, она не давала никакой обратной связи о том, почему она неактивна. А вот в сценарии изменения сущности она всегда была активна, несмотря на то, правильно ли заполнена форма. Чтобы привести к единообразию, я решила сделать кнопку отправки формы всегда активной.
Проверка на пустоту в обязательных полях
В этой базовой проверке было больше всего вариаций. Поведение полей отличалось в сценариях создания и изменения сущности: часть форм показывала ошибку об обязательном поле только при отправке формы, часть — если пользователь уже пытался что-то печатать в поле и стирал (но не убирал фокус).
Обозначение ошибки тоже было разным: некоторые поля подсвечивались только рамкой, некоторые показывали еще и текст ошибки. Разный текст: «Поле обязательно к заполнению» или «Название должно быть заполнено».
Как изменила
Я унифицировала поведение и оформление, чтобы ошибки были заметными и предсказуемыми. Во всех случаях обязательное поле сопровождается текстом ошибки — это повышает доступность и упрощает восприятие. Логика теперь одинаковая при создании и редактировании:
Поле пустое и не тронуто (без попытки ввода) — ошибки нет.
Поле было пустое, пользователь пытался ввести и стёр — ошибка при расфокусе.
Поле было заполнено, но очищено — ошибка при расфокусе.
Сообщение одно для всех: «Это обязательное поле». Дублировать название поля нет необходимости, так как оно уже есть в лейбле. Единообразный текст дополнительно помогает пользователям быстро его узнавать и не тратить время на «чтение с нуля». Если поле вне зоны видимости — скролим до него.
Проверка на количество символов
Раньше в некоторых полях ввод блокировался при достижении лимита — без сообщения об ошибке. Это особенно неудобно, если пользователь вставляет скопированный текст: всё, что сверх лимита, просто обрезалось, и он мог не заметить потерю данных. В других полях можно было ввести больше символов, но появлялась ошибка. Текст сообщений отличался от формы к форме.
Как изменила
Поле принимает ввод любой длины — как с клавиатуры, так и при вставке. При превышении максимума — появляется счетчик и ошибка. Счетчик помогает сориентироваться, насколько превышено значение. Текст ошибки единый для всех полей, чтобы интерфейс выглядел предсказуемо и не требовал от пользователя лишних усилий на «перечитывание» формулировок.
Проверка на формат
Формат некоторых полей не проверялся, пока не были заполнены другие обязательные поля. Кроме того, что тексты иногда были длинными и непонятными, они были еще и разными для однотипных полей: «Одно из значений содержит некорректный email» или «Указан неверный формат email, необходимо использовать следующий формат записи login@domaine.ru». Требования к созданию пароля вообще не были перечислены — о них можно было узнать только из ошибки.
Как изменила
Улучшила сообщения: сделала их короче и понятнее. Для емейлов везде используется текст «Введите email в формате example@email.com».
Для пароля есть подсказка до начала ввода. По мере ввода — оценка надежности и подсветка зелёным, если пароль хороший.
Заключение
Якоб Нильсен опубликовал свои 10 эвристик юзабилити 30 лет назад, и они до сих пор актуальны. Не только те, что напрямую касаются ошибок — любая из них может быть применена, чтобы сделать взаимодействие с формами и ошибками на них проще и понятнее.
Но даже идеальная форма не избавит пользователей от ошибок. Ошибка — это естественная часть пользовательского опыта. Важно, чтобы она не становилась тупиком: интерфейс должен помогать понять, что пошло не так, и мягко вести пользователя к успешному завершению задачи.
