Повышение конверсии с веб-форм на сайте

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

Дизайн. Здесь все сугубо индивидуально. В одном случае креативное оформление формы может способствовать увеличению конверсии (при условии ее грамотного построения), в другом - лишь отталкивать посетителей. Однозначного решения нет: необходимо в каждом отдельном случае взвешивать все «за» и «против», проводить тесты, анализировать результаты.

Структура

Количество полей. В 2010 году американское маркетинговое агентство HubSpot провело исследование форм регистраций на сайтах своих клиентов. Выяснилось, что при сокращении количества полей лишь с четырех до трех, конверсия выросла уже на 50%! Слишком длинные формы только отпугивают пользователей. Старайтесь сократить количество полей до необходимого минимума. Принцип простой: спрашивайте только самую важную информацию, без которой невозможно пройти регистрацию или сделать заказ. Если вы предлагаете оформить подписку на рассылку, просите указать только e-mail.

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

Кнопка Call-to-action (призыв к действию). На странице с формой должна находиться только одна кнопка Call-to-action, и она должна быть большая, заметная и обязательно контрастная. Размещение рядом двух кнопок (к примеру, «Переход далее» и «Сброс данных») может запутать пользователя и спровоцировать отказ от дальнейших действий.

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

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

Разбивка формы и лента прогресса. Идеальным вариантом будет размещение формы на первом экране – в той части страницы, которая видна без прокрутки. Если ваша форма довольная большая, стоит разбить ее на несколько упорядоченных шагов. Хорошим решением в данном случае будет использование так называемой «статической ленты прогресса» в верхней части формы. Она помогает пользователю сразу увидеть все этапы, ожидающие его впереди, а также при необходимости вернуться на нужный шаг для внесения исправлений.

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

Содержание и функционал

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

Заголовок формы. Размещение заголовка позволит сообщить пользователю о том, где он в данный момент находится (на странице формы) и для чего он там находится (регистрация, авторизация, оформление заявки на получение услуг и прочие цели).

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

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

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

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

• «призрачные» подсказки (текст внутри поля, исчезающий при заполнении);
• краткие инструкции и пояснения снизу или справа от поля;
• всплывающие окна.

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

Валидация. Зачастую при заполнении форм пользователи допускают неточности. Валидация (автоматическая проверка формата введенной информации) позволяет обнаружить допущенную ошибку еще в процессе заполнения полей и дать возможность исправить ее незамедлительно. При появлении ошибки не заставляйте пользователя гадать, что именно он написал не так, используйте пояснительные подсказки.

На иллюстрации выше показан пример неэффективной формы записи на тест-драйв без использования валидации. Посетитель сайта допускает ошибку при вводе номера телефона (не указан код города), и заявка с неправильными данными отправляется менеджеру. Результат – пустая трата времени сотрудника на обработку некорректной заявки и потерянный клиент, не дождавшийся обратного звонка.

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

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

Оптимизация формы заказа интернет-магазина

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

Наиболее частая ошибка магазинов – использование большого количества лишних полей в форме заказа. Например, при выборе способа получения товара «самовывоз» от покупателя, тем не менее, требуется указать «адрес доставки». В результате форма принимает пугающий размер, вызывая не самые положительные эмоции. Здесь важно использовать ключевой принцип: чем меньше, тем лучше. В зависимости от выбранной опции «доставка» на странице выводится соответствующая форма, содержащая только необходимые поля.

Вторая ошибка – использование так называемой страницы-прокладки, которая появляется после того, как покупатель кликает по кнопке «оформить заказа». Обычно тут же предлагается пройти регистрацию. На этом шаге происходит огромное количество «отвалов», так как не все готовы терять время на создание аккаунта (возможно, для разовой покупки). В таком случае нужно предоставить покупателю возможность выбора: продолжить покупку без регистрации или стать постоянным покупателем, получая дополнительные бонусы.

Аналитика форм

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

Замерять эффективность форм помогают системы аналитики Яндекс.Метрика и Google Analytics. Аналитика форм – это именно тот случай, когда необходимо настраивать цели по типу «Событие». На элементы формы устанавливаются специальные метки, которые фиксируют действия пользователей и передают полученные данные в статистику. Результат представлен в виде воронки конверсии.Идеального рецепта для создания эффективной формы не существует. То, что хорошо работает на одном сайте, может не работать на другом. Поэтому при создании формы важно не просто следовать советам экспертов, а проводить постоянные тесты, анализировать поведение пользователей, делать верные выводы и работать над оптимизацией. Только таким способом можно добиться повышения конверсии и, что немаловажно, улучшить поведенческие характеристики вашего сайта.