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

Формы – самый эффективный способ взаимодействия с пользователями. И пользователи должны иметь возможность заполнить форму быстро и без путаницы.

Где используются формы?

- Вход / Регистрация
- Оформление заказа
- Покупка билетов
- Подписка на новости
- Опрос
- и т. д.

Анализ форм

Для начала я изучила критерии оценки пользователей форм:

• Оценка временных затрат

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

• Оценка усилий

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

Методы улучшения

1. Сокращение количества полей.

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

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

2. Расположение в один столбец

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

3. Выравнивание по левому краю

По причине, описанной выше – не рекомендуется выравнивать элементы формы по центру.

4. Отсутствие дубликатов полей

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

Вместо дублирования поля пароля, позвольте просматривать пароль при нажатии специального флажка.

5. “Сборка данных”

По возможности не разделяйте поля с вводом имени и фамилии, дату рождения (на отдельные поля с днем, месяцем, годом).

6. Индикатор заполнения и разделение контента на части

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

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

7. Необязательные поля вместо обязательных

В большинстве случаев обязательные поля отмечаются звездочкой (*) красного цвета. Но большинство пользователей привыкли к тому, что красный цвет предназначен для ошибок. Дополнительно, некоторые не понимают, что означает звездочка.
Однажды, меня спросили: «Это же ремарка, но я у вас ее тут не вижу.»

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

8. Использование автозаполнения

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

9. Маски

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

Для решения этой проблемы можно использовать placeholder (текст, отображаемый в форме до введения) или маску ввода.

10. Правильный тип поля

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

К примеру:
- input type = “text” отобразит обычную клавиатуру
- input type = “tel” отображает цифровую клавиатуру для набора номера
- input type = “number” отображает клавиатуру с цифрами и символами

11. Правильные Label

Избегайте текста, написанного заглавными буквами (Caps Lock). Подобное написание заголовков поля снижает скорость чтения и удобство восприятия текста.

12. Соблюдение порядка

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

13. Призыв к действию

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

Если в форме есть два призыва к действию, например: “Отправить” и “Отменить”, необходимо добавить больше визуального веса кнопке, которая должна быть нажата в первую очередь.

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

14. Ошибка сразу.

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

Современные методы

1. Геолокация

Добавьте возможность определять местоположение пользователя после его разрешения и добавление данных в форму.

2. Биометрическая авторизация

Забывали ли вы пароли от своих учетных записей? Исследования показывают, что более 80% пользователей забывают свои пароли. На данный момент не обязательно вводить пароль, войти на сайт можно с помощью отпечатка или сканирования лица.

3. Камера = Сканер

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

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