Лучшие советы по созданию онлайн-форм для повышения коэффициента конверсии

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

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

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

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

1. Макет

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

Но горизонтальные макеты тоже могут работать, как в этом примере из Travel Republic:

Главное - сохранять простоту и использовать как можно меньше полей для сбора необходимой информации.

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

У Starbucks есть хороший пример чистой, простой вертикальной формы для создания учетной записи на своем мобильном сайте:

Удаление любых обычных параметров навигации из онлайн-формы также поможет сохранить ее простой и понятной. Например, Fortnum и Mason удалили свое меню в верхней части страницы и заменили его баннером «Безопасная оплата» на своей странице вариантов оформления заказа:

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

2. Метки полей и методы ввода

Важно, чтобы обязательные поля были четко обозначены. Используйте очевидные, узнаваемые метки, чтобы избежать ошибок ввода, которые могут привести к тому, что пользователь покинет форму. При необходимости включите объяснение поля, чтобы избежать путаницы. У журнала OK Magazine есть пример этого в поле «Отображаемое имя» в их онлайн-регистрационной форме:

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

• Поля для ввода
• Флажки
• Кнопки
• Календари
• Выпадающие меню

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

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

Expedia, с другой стороны, гарантирует, что его метод ввода календаря достаточно велик для мобильных устройств:

3. Составьте план процесса

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

У Confused.com есть отличный пример этого, различные этапы которого четко пронумерованы в верхней части страницы:

На веб-сайте Times различные этапы формы представлены в несколько ином формате. Это первая страница формы для регистрации онлайн-аккаунта:

Если мы прокрутим вниз, мы увидим следующие шаги:

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

4. Будьте полезны

Подобно примеру OK Magazine ранее, у Barclaycard есть более подробный пример, объясняющий, какая именно информация им требуется в форме входа в онлайн-банкинг:

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

Они также предоставляют варианты «Забытые» для обоих полей. В настоящее время это ожидается как стандарт для онлайн-форм входа, но стоит отметить, так как это может быть очень неприятно, если эти параметры недоступны.

Еще один способ помочь своим пользователям - честно сказать, что вы делаете с информацией. Virgin Active делает это в своей онлайн-форме запроса:

«Обещание Virgin использовать ваш номер только для того, чтобы перезвонить вам», хотя в нем не говорится о том, что они намереваются делать с вашим адресом электронной почты, есть некоторая уверенность для пользователя.

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

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

5. Всегда проверяйте!

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

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

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