Как улучшить UX веб-формы

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

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

Форма в одну колонку или в две?

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

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

Сделайте форму логичной и последовательной

Знакомьтесь с пользователем последовательно. Сначала узнайте имя, а затем уже спрашивайте адрес.

Уменьшите количество полей ввода до минимума

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

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

Объедините несколько полей ввода в одно. Например, поле для ввода даты может быть единственным для числа, месяца и года, со встроенным календарем.

Уменьшите количество полей ввода до минимума

Сложные формы могут быть разбиты на несколько страниц

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

Группировка полей формы

Группируйте поля, чтобы процесс завершения выполнялся смысловыми частями. Создайте разные группы с личной информацией, деталями оплаты и особенностями доставки.

Название полей

Поместите названия слева от полей — в случае с большими формами, и сверху — для небольших форм.

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

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

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

Плейсхолдеры. Подсказки в пустом поле

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

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

Одно из решений — «плавающие» или смещающиеся заголовки полей. Когда поле не заполнено, они выглядят как плейсхолдеры, но при фокусе они становятся заголовками, плавно смещаясь анимацией поверх поля.

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

Кнопки

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

Кнопка подтверждения должна находиться прямо под последним полем ввода. Она как продолжение и завершение формы.

Будьте конкретны с текстом кнопки. Не используйте общих фраз, таких как «Отправить» или «Готово». Расскажите юзерам, что они делают, нажимая эту кнопку. Сообщайте им, что их ждет после заполнения формы. Это укрепляет доверие и делает форму более профессиональной.

Подстановка значений

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

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