Дизайн Веб-Форм: Число Полей, Ошибки и Конверсия
Чем меньше трения создаёт форма, тем чаще её заполняют. Как число полей, момент проверки и текст ошибки влияют на конверсию.
Команда rabbitclipПубликация: 4 мин чтения
Коротко
Три фактора влияют на то, как часто заполняется форма, больше всего остального: число полей, когда и как появляются сообщения об ошибках, и насколько понятна кнопка отправки. Если эти три момента настроены неверно, даже красивый дизайн не спасёт форму; посетитель бросит её на середине.
Среди рекомендаций Google для полей формы есть правильное использование атрибутов autocomplete; они позволяют браузеру автоматически подставлять сохранённые данные в нужное поле, снижая объём ручного ввода посетителя (web.dev, Sign-in form best practices).
Ниже разобраны четыре составляющие формы: число полей, момент проверки, формулировка сообщения об ошибке и мобильная настройка.
Сколько полей действительно нужно
Каждое лишнее поле — точка трения, повышающая вероятность того, что посетитель бросит форму. В форме заявки на услугу обычно достаточно имени, телефона и короткого описания; адрес, должность или бюджет можно уточнить позже, в последующем звонке, а не при первом контакте.
Некоторые отрасли — исключение; там нехватка данных замедляет работу. Форма бронирования компании по прокату автомобилей не может обработать заявку без даты и типа автомобиля; здесь цель не минимум полей, а правильные поля.
Когда показывать проверку
Если поле заполнено неверно, посетитель должен увидеть это в момент, когда покидает поле, а не после отправки всей формы. Поле email, сразу сообщающее о неверном формате, утомляет гораздо меньше, чем десять ошибок, появившихся разом после отправки.
Но предупреждение при каждом нажатии клавиши раздражает не меньше; если посетитель видит «неверно», ещё не закончив печатать слово, форма кажется излишне строгой. Правильный момент — когда поле теряет фокус.
Как формулировать сообщение об ошибке
Общая фраза вроде «неверный ввод» не говорит посетителю, что делать. Конкретное сообщение, например «в адресе email нужен знак @», не даёт повторить ту же ошибку.
Если формат номера телефона в форме вступления в ассоциацию меняется в зависимости от страны, сообщение об ошибке должно показывать ожидаемый формат на примере; указание вроде «введите в формате +7 912 345 67 89» избавляет посетителя от догадок.
Как настроить форму для мобильных устройств
Большинство форм сегодня заполняются с телефона; поэтому размер полей, тип клавиатуры и область касания заслуживают отдельного внимания. Поле телефона должно открывать цифровую клавиатуру, поле email — клавиатуру с удобным доступом к знаку @; такие детали в сумме заметно облегчают заполнение формы.
- Число полей ограничено тем, что действительно нужно при первом контакте
- Проверка срабатывает при потере фокуса полем, а не при каждом нажатии клавиши
- Сообщения об ошибках конкретно указывают, что исправить
- На мобильных устройствах используется подходящий тип клавиатуры и достаточная область касания
- Чётко сообщается, что происходит после отправки (благодарность, email, звонок)
Куда на самом деле уходят данные формы
То, куда попадают данные после отправки, заслуживает внимания не меньше, чем внешний вид формы. Заявка, которая сразу попадает в CRM, обрабатывается быстрее, чем та, что теряется во входящих; без этой связи даже хорошо оформленная форма может превратиться в заявку, которая тихо теряется внутри команды.
Не менее важно, чем место назначения данных, кто и за какое время отвечает; компания, которая не отвечает на заявку через форму три дня, оставляет то же впечатление, что и компания без формы вовсе.
Когда оправдана многошаговая форма
Длинная форма на одном экране может отпугивать; разбивка на два-три шага с индикатором прогресса способна повысить процент завершения. Но разбивка на шаги короткой формы с небольшим числом полей даёт обратный эффект, лишь добавляя ненужные клики.
В заказе цифрового товара разделение выбора продукта, затем данных для счёта, затем оплаты на отдельные шаги делает каждый из них легче; но это оправдано только начиная примерно с пяти-шести полей.
Как снизить спам и заполнения ботами
Вскоре после запуска форма может начать получать заполнения от ботов; скрытое поле, которое заполнит только бот (honeypot), отсеивает большую часть спама, не создавая лишнего шага для настоящего посетителя.
Если форма обратной связи юридической фирмы получает каждую неделю десятки бессмысленных заявок, причина обычно не в отсутствии капчи, а в том, что нет вообще базовой защиты от ботов; поля honeypot и ограничения частоты отправки хватает в большинстве случаев.
Видимую капчу стоит добавлять только как крайнюю меру, когда этих мер недостаточно; ведь любая капча — это ещё одна точка трения и для настоящего посетителя.
Успех формы определяется не эстетикой, а тем, сколько трения она убирает. rabbitclip рассматривает настройку формы вместе с числом полей, проверкой и потоком данных, а не только внешним видом; текущую форму можно разобрать вместе.
Частые вопросы
Сколько полей должно быть в форме?
Столько, сколько действительно нужно при первом контакте; обычно достаточно имени, контакта и короткого описания.
Когда должны появляться сообщения об ошибках?
В момент, когда посетитель покидает поле, а не при каждом нажатии клавиши; это показывает ошибку рано, не делая форму строгой.
Почему важен autocomplete?
Он позволяет браузеру подставлять сохранённые данные в нужное поле, снижая объём ручного ввода.
Что должно происходить после отправки формы?
Понятное сообщение с благодарностью или следующий шаг; неопределённость часто ведёт к повторной, дублирующей отправке.
Всегда ли многошаговая форма лучше?
Нет, это помогает только на длинных формах; разбивка короткой формы на шаги добавляет лишнее трение.
