Дизайн сайта и его контент сводятся к тому, чтобы клиент совершил целевое действие (оформил заказ, подписался на рассылку, отправил заявку на обратную связь и так далее), то есть принёс компании денег. Коэффициент конверсии зависит от многочисленных факторов. Одним из решающих является привлекательность форм. Они должны быть понятными и простыми в заполнении. В противном случае средства на привлечение клиента будут затрачены впустую, и посетитель может покинуть сайт, ничего не заказав. Чтобы этого не произошло, мы расскажем, как должны выглядеть формы на сайте. Следуя простым рекомендациям, вы повысите конверсию и прибыльность онлайн-ресурса.
Если форма содержит большое количество полей для заполнения, это может напугать посетителя. Чтобы такого не произошло, тщательно продумывайте структуру, старайтесь собирать только самую необходимую информацию.
Дополнительно рекомендуем разделять поля на этапы. Пример хорошей формы сбора данных можно найти на сайтах по предложению банковских услуг. При оформлении заявки на кредит пользователь должен ввести большой объём информации, но она разбита по нескольким вкладкам:
Если в форме используются короткие поля, их лучше разместить в несколько столбцов. Это поможет сократить длину. Для упрощения ввода рекомендуем использовать выпадающие списки с готовыми ответами или check-box.
Когда приходится разбивать поля на разделы, позаботьтесь о том, чтобы заполненные части подсвечивались каким-либо образом, например, с помощью появления галочки зелёного цвета. Визуализация поможет оценить, сколько шагов уже пройдено и сколько ещё осталось.
Все формы должны быть подписаны. Клиенту важно понимать, что он заполняет и на что соглашается. Кроме того, заголовки помогут быстро сориентироваться на сайте, даже если пришлось отвлечься от его просмотра. Поля также стоит подписывать, чтобы посетитель знал, что нужно ввести. Обязательные для заполнения пункты помечайте звёздочкой.
Одну и ту же информацию можно указать по-разному. Например, в графе ФИО посетитель может ввести «Иванов Василий Петрович» или «Иванов В.П.». Чтобы избежать возможных ошибок, создавайте так называемые маски внутри пустых полей. Пример заполнения, набранный светло-серым шрифтом, поможет быстро сориентироваться в правильности набора.
Важно и расположение подсказки. Примеры, указанные под полем, могут остаться незамеченными или создадут лишний визуальный шум, утяжеляющий восприятие информации.
Корректность вводимой информации должна проверяться. Если посетитель допустил ошибку, её стоит подсветить и расшифровать. Например, «Укажите номер телефона через +7». Желательно, чтобы валидация осуществлялась после заполнения. Подсвечиваемые буквы и сообщения об ошибке, появляющиеся в момент ввода, заставляют людей перепроверять указанные ими символы и заново читать описание поля.
Если в ходе заполнения формы была допущена ошибка, после нажатия финальной кнопки «Подтвердить/Отправить» система должна сообщить пользователю о некорректном вводе той или иной информации с помощью подсветки или выделения. При этом важно, чтобы введённые ранее данные не исчезали из формы. Клиент может принять за издевательство необходимость повторного заполнения всех полей из-за одной опечатки и просто покинет ваш сайт.
Хорошо, когда для отправки заявки клиенту не нужно проходить регистрацию или авторизацию в личном кабинете. Лишние шаги и сложности приведут к увеличению числа «брошенных корзин». Если без регистрации не обойтись, упростите её, предложив пройти за один клик (с помощью синхронизации с аккаунтами в социальных сетях).
Раньше для отсечения ботов сайты просили разгадывать капчи. Это осложняло отправку формы, делало процесс более длительным. Чтобы избавить посетителей сайта от таких неудобств, используйте современные технологии, позволяющие отсекать спам-ботов без разгадывания CAPTCHA.
Для соблюдения требований закона 152-ФЗ внизу формы разместите ссылку на политику защиты персональных данных. Рядом должен быть check-box, устанавливая галочку в котором, посетитель подтверждает тот факт, что ознакомился и согласен с документом.
Самостоятельно всплывающие формы и pop-up окна чатов с онлайн-консультантами мешают просмотру контента и вызывают негативные эмоции. От таких решений стоит отказаться. Сами формы не должны содержать анимации, мигать или прыгать.
Чтобы формы на сайте заполнялись и увеличивали конверсию, не пренебрегайте правилами их оформления.
