Принципы построения web-формы на сайте


Повысить конверсию сайта можно разными способами. Не последнюю роль в этом деле играет грамотное оформление web-формы.

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

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

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

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

Немаловажную роль играет контраст основного фона, полей и шрифтов. Хорошо подобранное сочетание цветов облегчает зрительное восприятие, а плохая цветовая комбинация на фоне отсутствия или слишком высокого контраста существенно осложняет заполнение полей формы. Подобрать надлежащие цвета и проверить дизайн страницы сайта помогут сервисы Colour Contrast и ChekMyColours.

Шрифты, используемые для создания текста web-формы, должны четко и корректно отображаться на экране. Для этой цели лучше всего подходят стандартные Arial, Verdana или Sans-serif. Размер шрифта должен быть средним, легко читаемым. Экономить место, используя мелкий текст, не стоит, лучше разделить форму на несколько секций.

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

По данным исследований американского маркетингового агентства HubSport, наиболее эффективной считается структура web-формы, содержащая три-четыре поля. Более длинные формы отпугивают посетителей сайта. Чтобы сократить количество полей до минимума, нужно расставить приоритеты важности информации. Например, при регистрации невозможно обойтись без логина и пароля, для оформления подписки на рассылку необходим e-mail пользователя, а прочие данные можно отнести к необязательным. Исключением является поле для введения промо-кода. Оно не предоставляет информации о посетителе сайта, но позволяет последнему воспользоваться скидкой, а это дополнительный стимул для привлечения клиента.

Теперь о кнопке «призыв к действию» (call-to-action). На странице с web-формой она должна быть только одна – большая, контрастная, заметная! Вы можете назвать ее как угодно: «Вход», «Регистрация», «Переход далее», «Скачать приложение», «Получить бесплатно» и т.д. – это зависит от направленности сайта и преследуемой цели. Но в любом случае текст, указывающий на ожидаемое от пользователя действие, необходимо разместить на кнопке. А наличие двух кнопок в форме, например, «Регистрация» и «Вход», может ввести пользователя в заблуждение, и он откажется от заполнения.

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

Где удобнее всего разместить web-форму? На первом экране, в верхней части страницы. Лучше, если форма будет полностью видна без прокрутки. Если же она довольна объемная, следует разбить ее на несколько этапов и использовать «статическую ленту прогресса». Она представляет собой шкалу, как правило, расположенную в верхней части формы, на которой в процентном соотношении отображается количество выполненных шагов, а также предусматривается возможность возврата для внесения исправлений в ранее заполненное поле.

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

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

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


Задать вопрос

* Ваш вопрос:

* Имя:

* E-mail:

Телефон:


Контакты

Тел: +7 (495) 792-40-84
E-mail: ksm@kaesem.ru
ICQ: 177843751

Rambler's Top100