Как грамотный UX помогает правильно заполнить сложные формы

Подсказки

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

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

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

Подсказки могут относиться ко всему экрану или к конкретному полю.

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

«Иванов» намекает на правильную раскладку

Маски в полях ввода

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

Ввод неподходящих символов ограничен числовой клавиатурой. Маска на поле не даёт ввести больше 10 символов

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

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

Кнопка становится активной после того, как пользователь ввёл номер

Валидация

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

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

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

Валидация серии и номера паспорта

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

Валидация по кнопке отправки формы

Резюмируем

• Чаще всего мы применяем валидацию по потере фокуса – такой способ максимально привлекает внимание пользователя и быстро проясняет, как исправить ошибку.
• На небольших страницах, где кнопка «Дальше» всегда видна, мы блокируем её, пока все данные не заполнены корректно.
• На экранах с длинными формами используем целый арсенал: подсказки к экрану, плейсхолдеры и маски на полях.