20 способов улучшить форму на сайте

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

Никто не любит формы.

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

В этой статье мы разберем самые распространённые ошибки в формах и расскажем, как их исправить.

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

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

Так, если правило не соблюдают, у пользователей может возникнуть путаница — не понятно, к какому полю относится та или иная подпись:

Вы знаете, где на странице находится форма, а пользователь — нет. Он может легко её проглядеть, и вы потеряете лид. Чтобы этого не случилось, визуально выделите форму:

В предложении — подлежащее и сказуемое. В форме — заголовок и кнопка. И если заголовок должен быть существительным в именительном падеже, то кнопка — глаголом. Но раз это команда, то глаголом в начальной форме.

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

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

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

Но есть исключение, когда поля всё-таки можно располагать в ряд. Например, если нужно указать день, месяц и год в отдельных полях, их можно расположить друг рядом с другом.

Это какой-то бич форм, не иначе. Листаешь лендинг вебинара, собираешься на него записаться, а там... 15 полей: от имени, до адреса компании, в которой работаешь. Можно было бы спросить самое важное: имя и один контакт, — а всё остальное, если уж так нужно, узнать по телефону или электронной почте. Но создателям сайта лень, поэтому они усложняют жизнь пользователя.

Кто-то поступает ещё хуже, и отмечает некоторые поля в форме, как обязательные. И сразу возникают вопросы. Зачем в форме что-то у пользователя спрашивать, если это не обязательно? Правильно, незачем.

Поэтому в форме нужно стараться оставлять только обязательные поля и помнить про самое главное правило:

Чем меньше полей, тем вероятнее, что форму заполнят.

Но если необязательные поля ну очень нужны, лучше отделить их от обязательных.

Поля нужно группировать, чтобы процесс заполнения выполнялся смысловыми частями: вот группа «Личные данные», вот группа «Детали оплаты», а вот «Особенности доставки».

Правда, иногда, много полей — это необходимость. Например, в интернет-магазине или логистической службе.

Чтобы пользователю было проще разобраться с такой формой, логично разбейте её на шаги/экраны/страницы. В каждом — не более 4 полей. Если поля можно объединить без потерь — объединяйте.

Будет совсем хорошо, если укажете примерное время и прогресс заполнения формы.

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

Сделать это можно с помощью масок и автозаполнения. Первые помогут сразу указывать данные в правильном формате, второе — не вводить все данные полностью.

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

В борьбе со спамом и ботами люди понапихали всюду капчи. Хочешь найти статистику по запросу в «Яндекс.Подбор слов» — заполни капчу. Хочешь оплатить в один клик — выбери, пожалуйста изображения со светофором (а столб, на котором висит светофор считается?) Хочешь открыть Gmail... ну, тут капчи нет. Пока.

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

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

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

Располагайте название поля по-разному, в зависимости от ситуации.

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

Ещё один способ добавить форме понятности — справа от поля писать, зачем нам нужна та или иная информация.

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

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

Добавьте в поле «Пароль» кнопку для отображения пароля.

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

Вот ещё несколько советов, которые помогут сделать форму удобнее. Но здесь без программиста не обойтись.

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

Подробные требования для управления формой с клавиатуры можно найти на сайте консорциума W3.

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

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

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

GlobalWebIndex выявило, что у среднестатистического пользователя есть 5 аккаунтов в соцсетях.

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

Авторизация через соцсети уменьшает число регистраций по фейковым емейлам и помогает персонализировать подход к клиентам.

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

А если уж взялись делать форму на сайте, делайте её без ошибок.

Лидмашина — агентство интернет-маркетинга. С нами вы продаете *ББДЧ — больше, быстрее, дороже, чаще. Этот подход мы позаимствовали у Игоря Манна — учредителя нашей компании.

За 12 лет мы решили 282 задачи бизнеса в онлайне.

Еще больше полезных статей в нашем блоге Учебка.

Присоединяйтесь к нашему уютному сообществу в VK и Telegram.