Как увеличить конверсию с веб форм
Веб форма является основным источником получения информации от пользователя. Это могут быть данные регистрации, обратная связь, заказ товаров и услуг, и т. д. Но зачастую именно из-за плохой оптимизации веб формы мы теряем пользователей.
Поставим себя на место пользователей: хотим воспользоваться услугами сайта, нажимаем регистрация, открывается разноцветная страница с кучей полей, а внизу еще нужно разобрать на картинке непонятные кракозябры. Очень хочется это все заполнять? Да еще если с картинки неверно символы разберешь – заново все вводить придется. Отсюда вытекает первое правило: число полей должно быть минимальным.
Оставляйте только действительно нужные поля. Если вы торгуете пылесосами, вам не обязательно знать какое у человека семейное положение и какие книги он предпочитает. А если вы все равно хотите знать – пусть пользователь заполнит анкету уже после регистрации. Паспортные данные и другую личную информацию такого рода в форме регистрации запрашивать не рекомендуется, разумеется, если Ваш сайт не предоставляет банковские услуги. Приведу пример: как-то, раз мы разрабатывали сайт агентства недвижимости, и заказчик пожелал, чтоб в форме регистрации пользователь указывал паспортные данные, ИНН, и прочую информацию. Несмотря на хорошую рекламу и приличный уровень посещений, уровень конверсии с веб формы был ничтожно низок. После того как убрали эти поля конверсия увеличилась процентов на 60! Вывод: если для работы с клиентами Вам может понадобиться личная информация – уточните её у пользователя уже после регистрации.
Веб форма не должна пестрить всеми цветами радуги. Цвета должны быть контрастны друг другу. Белый это, пожалуй, наилучший цвет для фона полей ввода. А серый фон - для значений по умолчанию. Рамочку вокруг заполняемого поля лучше подсвечивать каким-нибудь цветом, чтобы пользователь видел, на каком поле он остановился. Если в поле формы ошибка заполнения - нужно привлечь внимание пользователя. Следственно поле с ошибкой должно или поменять цвет или рядом с полем должно появиться сообщение об ошибке пользователя.
Каждое поле формы должно быть подписано так, чтоб у пользователя не возникало вопросов, куда что вводить. Традиционно описания полей находятся или слева или сверху заполняемого поля. Если в форме часть полей обязательна к заполнению, а часть по желанию, то поля обязательные к заполнению должны выделяться от остальных. Или же быть помеченными знаком «*», с обязательным объяснением данного знака. Если количество полей не помещается на одном экране, лучше разбейте форму на несколько страниц.
Отдельно хочется сказать про шрифты форм. Здесь лучше использовать стандартные шрифты, корректно отображающиеся на большинстве устройств. Это, например Arial, Times New Roman, Verdana, и т. д.
Чтобы не возникало ситуации описанной в начале статьи, когда пользователь нажал кнопку регистрация и из-за ошибки в одном из полей нужно заполнять все поля снова, система валидации должна проверять правильность заполнения полей сразу «на лету». Примерно так: пользователь совершил ошибку и ему сразу подсказка, что он сделал не так.
Так же можно сделать систему подсказок, чтобы пользователь понимал, зачем Вам его данные. То есть клиент вашего сайта наводит мышкой на поле адрес и тут всплывает подсказка «Адрес нужен для доставки пылесоса». Все ясно и понятно.
Для защиты от автоматических регистраций обычно применяют капчу. Иногда именно капча причина низкой конверсии. Символы на капче должны легко читаться человеком и их последовательность должна быть насколько можно короче. Если у Вас есть возможность реализовать защиту другим способом – сделайте это.
Кнопок под формой не должно быть много. Например, в идеале под формой регистрации лучше разместить две кнопки - «Регистрация» и «Вход». Причем кнопку «Регистрация» лучше выделить. Под кнопкой можно поместить текст с описанием выгоды, которую получит пользователь от регистрации – «После регистрации Вы сможете скачать фильм».
При разработке форм учитывайте, что на Ваш сайт могут зайти пользователи не только с ПК, но и с планшетов и других мобильных устройств. А там форму может по-разному плющить. Необходимо адаптировать форму под все устройства. Рекомендуется сделать два варианта формы – для ПК и для мобильных устройств.
Вот в принципе и все основные аспекты, касающиеся увеличения конверсии веб формы. Хочется добавить, что на практике веб форма сильно зависит от тематики и дизайна сайта.
И еще. Если вы доверите изготовление сайта сторонним разработчикам, во время согласования дизайна форм - не забудьте проверить, соответствуют ли формы изложенным выше рекомендациям. Возможно, в будущем, из-за недостаточно конверсии, формы придется переделать (упростить, перенести, реструктуризировать) - код сайта должен допускать подобный "рефакторинг", чтобы не пришлось переписывать сайт наново.