12 способов повысить заполняемость веб-форм в интернет-магазине

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

web forms

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

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

1.Используйте необязательные поля вместо обязательных

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

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

dizajn-veb-form

2. Автоматическая проверка форм

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

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

dizajn-veb-form-2

3. «Умные» значения полей по умолчанию

Печатать утомительно, согласны? Сделайте часть работы за посетителей и используйте «умные» значения по умолчанию. Если у вас уже есть какая-то информацию о клиенте, впишите её автоматически (например, email, который получили ранее).

Также можно определить местонахождение пользователя по IP и вписать в нужные поля страну или город проживания, чтобы он не листал длинные списки. Вот как это реализовано на сайте издательства «Манн, Иванов и Фебер»:

dizajn-veb-form-dlya-internet-magazina

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

4. Располагайте метки полей справа или сверху

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

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

dizajn-veb-form-dlya-internet-magazina-2

5. Всплывающие подсказки помогут избежать хаоса в форме

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

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

webforms-2

webforms-3

6. Четко укажите, зачем вам нужна запрашиваемая информация

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

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

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

[caption id="attachment_15631" align="aligncenter" width="620"]Lamoda Lamoda[/caption]

[caption id="attachment_15632" align="aligncenter" width="347"]Wildberries Wildberries[/caption]

7. Не заставляйте пользователей запоминать очередной логин

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

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

8. Отображение этапов заполнения формы

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

Многие продавцы реализуют это посредством визуальной диаграммы, описывающей прогресс в заполнении формы заказа или оплаты. Не забудьте дать название каждому этапу:

dizajn-veb-form-3

9. Тестируйте капчи

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

Традиционные капчи требуют от посетителей ввести сложно читаемые символы с картинки. В то же время всё большую популярность приобретают логические задачи или визуальный тест (пример ниже):

webforma

10. Призыв к действию должен быть четким

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

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

11. Поля ввода данных о кредитке должны располагаться так, как на самой карте

Есть удобные jQuery-плагины (вроде jQuery.payment), которые позволят грамотно оформить форму ввода информации о кредитной карте. Например, 16-значный номер карты следует разделить на 4 группы – так он представлен на самой карте. Выпадающий список для выбора месяца также должен быть представлен в числовом формате.

dizajn-veb-form-4

12. Адрес доставки по умолчанию повторяет адрес плательщика

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

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.