Увеличение конверсии форм - изображение convertion_banner на https://digitaldali.ru

Увеличение конверсии форм

Почему юзабилити форм очень важно?

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

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

 

5 правил высокой конверсии форм

 

1. Понятная структура

предсказуемость форм

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

Лучше располагать поля по вертикали, в одну колонку. Для небольших форм (2-3 поля) допустимо также расположение элементов по горизонтали.

Формы opencart

Выше расположен пример плохого usability форм — форма заказа из движка интернет-магазинов OpenCart. Из-за расположения форм в две колонки и невнятных текстов очень сложно разобраться, куда нажимать, чтобы оформить покупку.

2. Расположение подписей

подписи_к_полям

 

Подписи у полей ввода очень важны для конверсии в целевое действие. Лучше располагать их над полями ввода, а не слева или справа от полей. Форма 2 намного проще, чем Форма 1, не правда ли? Во всяком случае, она не заставляет пользователя перемещать взгляд с активностью, как в компьютерной игре!

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

placeholder

 

Особенно часто такие проблемы возникают на мобильных устройствах.

 

Резюмируя рекомендации по подписям к формах:

1. Располагайте подписи над полями

2. Используйте комбинацию из внешних и внутренних подписей к полям. Во внешней подписи давайте короткое описание поля, а во внутреннем — подсказку или пример того, что нужно ввести.

Пример неплохо спроектированной формы:

 

aviasales-form

3. Количество полей

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

На графике ниже показана зависимость средней конверсии от количества полей в форме на landing page:

количество полей

*график разработан на основе данных hubspot.com

Итак, идеальное количество полей в форме — три. С каждым новым полем конверсия падает примерно на 20%. Поэтому при проектировании формы вам нужно найти идеальный баланс между конверсией и качеством заявок.

4. Форматирование полей

В среднем, из 100 заявок на лэндингах, 10 имеют ошибки в заполнении телефона или email’а. Лучше помочь пользователям заполнить все правильно и использовать дополнительное форматирование полей ввода. Например, для этого можно использовать отличную javascript библиотеку jquery.inputmask.

callmaker-form

Еще одно приятное дополнение — то, что вы будете получать данные в едином формате и отпадет необходимость приводить их к единому виду, чтобы, скажем, добавить их в crm систему.

 

5. Дизайн

Дизайн формы — один из наиболее важный факторов. Форма должна выглядеть так, чтобы ее хотелось заполнить! Увидев форму ниже посетитель обязательно задумается: «какие мелкие кнопки, по ним еще нужно постараться попасть» и вероятно, передумает заполнять ее.

мелкаяформа

Сделайте вашу форму привлекальной!

 

Исключение из правил: формы, которые спроектированы неудобными

В некоторых случаях целевое действие является нежелательным для разработчиков сайта, поэтому удобство этих форм осмысленно ухудшается. Самым удачным примером можно считать форму для отписки от email рассылки.

Пример 1 — настройки email уведомлений спрятаны под неприметной кнопкой:

рассылка-форма1

Пример 2 — после того, как пользователь отписался от рассылки, ему выдается такая же форма, только с действием «снова подписаться на рассылку». Большой процент пользователей не понимает, получилось ли отписаться от рассылки и нажимают на кнопку снова.

рассылка-форма2

 

Выводы

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

 

Следуйте этим правилам, и вы повысите конверсию форм на вашем сайте.

Или можете обратиться к нам, мы поможем увеличить эффективность вашего лендинга или сайта!