Пожалуй, формы являются одной из главных частей сайта, поскольку самые важные действия совершаются пользователями именно с помощью форм: регистрация, оформление заказа, отправка сообщения. От юзабилити форм зависит, сделает ли посетитель желанное вами действие или нет.
Из списка ниже вы узнаете разные аспекты юзабилити форм, применив которые вы сможете создать формы со максимальнойконверсией заполнения.
1. Располагайте название полей над полями ввода.
Это связано с движением глаз человека, поскольку для мышц глаз легче двигаться сверху вниз и снизу вверх, чем слева направо и справа налево.
2. Делайте форму в виде одной колонки.
Это тоже связано с движением глаз людей и поэтому форма должна быть в виде одной колонки.
3. Автоматически устанавливайте курсор в первое поле для заполнения. Это поможет пользователям начать заполнение формы.
4.Выделяйте обязательные для заполнения поля.
Общепринятым является выделение таких полей звездочкой *, но хорошим вариантом может стать обозначение каждого поля в виде фразы «Обязательно для заполнения».
5. Используйте подсказки и рассказывайте о том, как будут использованы данные пользователя.
Некоторые пользователи бояться оставлять свои контактные данные, особенно номер телефона и другие данные. Поэтому объясните, каким образом будут использованы данные.
6.Не используйте капчу!!! Она снижает конверсию на 10-30%
Не нужно обременять пользователем лишней информацией, особенно такой, как капча, поскольку в ней легко допустить ошибку. Проще удалить несколько писем спама, чем заставлять пользователей вводить непонятные цифры и буквы.
7.Не спрашивайте пароль 2 раза
Вместо повторного заполнения пароля сделайте возможность посмотреть пароль, который ввел пользователь. Это можно реализовать в виде чекбокса «Показать пароль»
8.Используйте призыв к действию заполнения формы.
Опишите выгоды, которые получит пользователь от заполнения формы: это может быть доступ к личному кабинету, возможность совершения покупок, скачивание пробной версии программы. Стоит также указать, что заполнение формы не займет от пользователя много времени. Это особенно актуально для объемных форм – заявка на оформление кредита, заявка на кредитную карту и т.п.
9.Данные об ошибках должны быть ясными и подробными.
Если пользователь допустил ошибку в заполнении формы, то нужно сразу показать, как это исправить. Например, «Логин слишком короткий», «Неправильно введен пароль». Не стоить использовать восклицательный знак и верхний регистр в сообщениях об ошибках, поскольку это обидит пользователя, и он просто покинет страницу с формой.
10.Проверяйте данные пользователя при помощи JavaScript.
Пользователи очень часто допускают ошибки в написании адреса почты: пропускают точки, знак @, ошибаются в написании почтовых доменов. Поэтому проверяйте правильность ввода e-mail при помощи JavaScript. Это позволит значительно сократить количество ошибок в написании адреса почты.
11.Выделяйте поля, которые заполняет пользователь.
При заполнении формы пользователь должен видеть, в каком поле он находится, поэтому визуально выделяйте поле, которое заполняет пользователь.
12.Объемные формы разделяйте на несколько шагов и показывайте процесс заполнения формы.
Если форма очень объемная и требует от пользователя ввода многих данных, то разбейте такую форму на несколько шагов. Например, оформление заказа можно разбить на следующие шаги:
Ввод личных данных;
Ввод адреса доставки;
Ввод данных об оплате;
Подтверждение заказа.
13.Не используйте кнопку «Отправить».
Никогда не нужно использовать текст «Отправить» на кнопках формы. Создавайте такие понятные призывы к действию, как «Зарегистрироваться», «Создать аккаунт», «Оформить заказ», «Купить».
14.Не используйте кнопки «Отменить» и «Очистить» в формах.
Я не могу назвать ни одной резонной причины наличия таких кнопок как «Отменить» и «Отправить». Кроме того, они могут понизить конверсию форм: dо-первых, эти кнопки, как правило, расположены рядом с кнопками отправки сообщения или заказа, во-вторых, наличие таких кнопок заставляет пользователя задуматься, нужно ли заполнять форму вообще.
15.Сохраняйте (кешируйте) данные, которые вводит пользователь.
Не все пользователи заканчивают заполнение форм, особенно объемных, где нужно вводить паспортные данные. Поэтому сохраняйте данные заполнения форм, чтобы пользователь мог продолжить заполнение формы там, где закончил.
Эти 15 правил юзабилити форм помогут вам повысить конверсию, но не забывайте, что всё нужно тестировать и анализировать. Проанализировать заполнение пользователями форм можно с помощью инструмента «Аналитика форм» от Яндекс.Метрики.
