26 ноября 2020

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

Дизайн

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

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

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

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

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

Подберите оптимальную длину формы

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

График взаимосвязи количества полей в форме и уровня ее конверсии:

График взаимосвязи количества полей и конверсии

Нужно продумать и подобрать именно тот оптимальный набор полей, который сделает форму простой, но в то же время оставит ее информативной для того, кто будет ее обрабатывать. Как говорил Стив Джобс - «простота создает любовь», но в данном случае он имел в виду не поверхностную простоту, а осознанную. Ее нужно понять и четко определить, а это обычно можно сделать или проведя достаточно серьезное предварительное исследование с анализом опыта других компаний, или же, что гораздо быстрее и эффективнее, практическим методом, то есть, проводя А/Б тестирование на вашей целевой аудитории. Только тогда вы сможете понять какой формат будет самым простым именно для ваших клиентов.

Делайте форму предельно понятной

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

  • Четко формулируйте названия полей

Четко формулируйте название полей

  • Не забывайте о подписях к полям

Подписи к полям на проекте Miloan

  • Добавляйте подсказки в хинтах. Так можно добавить даже фото или скрины с пояснениями как именно должно быть заполнено поле

Подсказки к полям формы

  • Используйте плейсхолдеры

Плейсхолдеры в формах

  • Для селектов, которые содержат много значений, делайте автокомплит

Автокомплит в формах

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

Форма авторизации

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

Работайте над мелочами

Заполнение своих личных данных в форму это всегда волнение и определенный стресс для пользователя. Даже незаметные глазу мелочи могут вызывать дискомфорт при работе с формой, а значит и усугублять его волнение. Важно все - подсветка активных полей, правильный порядок перехода от поля к полю по нажатию кнопки Tab, отправка формы при клике на кнопку Enter, асинхронные проверки при валидации полей, скролл страницы до места с ошибочно заполненным полем, удобные селекты с автокомплитом, календари для выбора дат и многое другое. Некоторые из вышеперечисленных пунктов будут особенно важны при работе с формой с мобильных устройств. А это по нынешним реалиям, в среднем, 60-70% от трафика любого проекта, в зависимости от специфики проекта.

Динамика по формамСравнение трафика

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

Мобильная адаптация

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

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

Мобильная адаптация форм

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

Реакция на отправку формы

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

Окно благодарности после отправки формы

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

Однозначные призывы к действию

Название вашей кнопки с призывом для отправки заполненной формы должно четко передавать суть этого действия. Чем точнее вы назовете кнопку, тем понятнее с какой целью необходимо заполнить форму. Вот например, название кнопки “Отправить” слишком абстрактное, оно имеет место в формах обратной связи, при написании отзыва и т.п. Но если ваша форма является оформлением заказа продукта/услуги, отправкой заявки или покупкой товара, то лучше чтобы призыв для отправки звучал более четко - “Оформить заказ”, “Перейти к оплате”, “Записаться на просмотр”, “Подать заявку”. Если заполнение формы разбито на несколько шагов, то кнопка перехода к следующему шагу должна называться “Далее”, а не “Отправить”, кроме этого, полезно будет еще и отображать прогресс-бар заполнения поэтапной формы, чтоб пользователь мог ориентироваться скоро шагов еще осталось пройти для достижения конечной цели.
Таким образом мы поможем пользователю не задумываться над тем, что же произойдет после отправки формы. Чем меньше он будет отвлекаться на разные мелочи, тем более внимательно и спокойно сможет заполнить саму форму.

Экспериментируйте с визуализацией формы

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

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

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

Сюжет в формах

Таким образом, включение повествования в форму произвело повышение конверсии на 23%.

Конструктор форм

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

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

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

Аналитика заполнения форм

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

  • Количество кликов на конкретное поле
  • Время, которое пользователь провел на конкретном инпуте
  • Порядок заполнения полей
  • С какого поля чаще всего покидают недозаполненную форму
  • Заполняются ли и если да, то какие и как часто, необязательные поля
  • И др.

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

Заключение

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

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

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

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

Чтобы предоставить нашим посетителям наилучший пользовательский опыт, наш сайт использует Cookie. Продолжая работу с нашим сайтом вы подтверждаете, что соглашаетесь с нашей политикой Cookie