Формы обратной связи на сайте: как улучшить конверсию и собирать качественные лиды?
Форма обратной связи — один из важнейших каналов связи вашей компании с внешним миром. Однако важно, чтобы пользователи могли легко ими пользоваться, чтобы формы работали корректно и упрощали, а не усложняли коммуникацию с вами.
Чтобы форма обратной связи работала максимально эффективно, нужно:
- расположить ее в правильном месте,
- сделать ее понятной и удобной для заполнения,
- ответить на заявку клиента максимально быстро и профессионально.
Но самое главное — форма обратной связи должна закрывать какую-то потребность посетителя. Если потребности нет, то вы просто не сможете убедить посетителя заполнить форму — по крайней мере, без дополнительных пояснений.
Возможны два варианта:
1. Посетитель изначально не заинтересован в заполнении формы. Это вы предлагаете ему что-то. Например, обратный звонок, подписку на свои новости или регистрацию в личном кабинете. Убеждаете, аргументируете, раскрываете ценность своего предложения или предлагаете нечто ценное взамен (полезный чек-лист). В примере ниже за прохождение теста пользователь получает презентацию с лайфхаками по интернет-продвижению.
2. Посетитель заинтересован в заполнении формы. Например, он хочет запросить у вас каталог, сделать заказ, оставить отзыв, устроится на работу или сотрудничать с вами.
Принципы создания форм будут одинаковы и в том, и в другом случае, но если заинтересованный посетитель сможет простить вам какие-то огрехи и сложности в заполнении, то незаинтересованный — просто закроет незаконченную форму и забудет о ней навсегда. Так что создание форм обратной связи для незаинтересованных пользователей требует особого внимания и проверки.
Где расположить форму обратной связи, чтобы ее заметили?
Форму обратной связи нужно располагать там, где пользователь ее ожидает увидеть и там, где легко ей воспользоваться.
Например, форму заказа обратного звонка логично искать в шапке сайта или справа внизу, где звонок можно заказать через онлайн-консультанта. Форма для отправки заявки или уточнения характеристик товаров должна быть на виду на каждой странице продукции. Если мы ждем от посетителя какого-то действия, например, записи на акцию, то лучше, чтобы у него была возможность не только позвонить, но и оставить заявку в форме. Соответственно, формы обратной связи нужно предусмотреть и на страницах акций и специальных предложений.
Какие ключевые принципы использовать при создании форм?
Простота
- Используйте понятные названия полей, чтобы форма была понята однозначно и ее было легко заполнить без ошибок.
- Сразу покажите пользователю, какие поля обязательны для заполнения. Если он не готов делиться какой-либо информацией, то он не будет тратить время на заполнение предыдущих полей.
- Покажите пример заполнения поля в плейсхолдере (прямо в поле ввода), так пользователь быстро сориентируется, что от него требуется.
Хорошим инструментом является маска для ввода номера телефона. Важно, чтобы пользователь еще до начала набора цифр видел, в каком формате нужно ввести номер.
- Для минимизации ошибок можно предусмотреть дополнительную обработку данных. Например, если первая цифра номера уже введена автоматически, а пользователь этого не заметил и начал ввод с «семерки» или «восьмерки», то эти ситуации можно отслеживать и исправлять автоматически. Другой вариант — не исправлять ошибку, а обратить на нее внимание пользователя. Например, если при вводе электронного адреса он забыл напечатать символ @, система может подсказать ему это.
- Используйте скрытую captcha для защиты от спама. Вы по-прежнему будете защищены от спама, а пользователям не придется выполнять дополнительных действий.
- Если форма довольно обширная и предполагает заполнение по шагам, продумайте все возможные сценарии. Возможно пользователь не знает какой-то информации, не сможет ее предоставить и заполнение формы «забуксует»?
Например, при записи на прием в медклинику, человек может хотеть попасть к конкретному врачу, а может — просто к любому доктору подходящего профиля. Так что при заполнении формы не стоит требовать от всех клиентов выбора фамилии врача, в качестве альтернативы можно указать пункт «записать к любому специалисту».
- Избавьтесь от отвлекающих элементов. Если в процессе заполнения формы пользователь отвлечется, то вернуть его к продолжению работы будет проблематично. Так что никаких всплывающих окон и анимации.
- Используйте все возможности для ускорения ввода данных. Это может быть использование dadata* для подсказок в полях ввода или автозаполнение, если пользователь уже зарегистрирован и авторизован.
Dadata — это сервис, который содержит большую базу адресов, реквизитов ИП и ЮЛ, ФИО, телефонов. Когда пользователь начинает вводить какие-либо данные, он подсказывает возможные варианты. Это ускоряет заполнение и снижает вероятность ошибок ввода.
Многие браузеры сохраняют данные пользователей (например, имена и электронные адреса) на их устройствах. Если форма с точки зрения верстки сделана правильно, то браузер сможет эти сохраненные данные подставить в соответствующие поля. Когда пользователь должен выбрать нужный пункт из большого списка (например, городов), то можно перенести на первые позиции самые очевидные варианты, предусмотреть подсказки или поле поиска — это тоже облегчит пользователю жизнь.
Прозрачность
Для начала объясните пользователю, какую ценность ему в принципе принесет заполнение формы.
На любом этапе заполнения пользователь должен точно знать, что его ждет. Если заполнение формы состоит из нескольких шагов — поясните сразу, какие данные он должен будет ввести на каждом шаге.
Объясняйте, для чего вам нужна та или иная информация. Напишите, например, о том, что email будет использоваться только для отправки уведомлений о заказе. А зная дату рождения, вы готовы раз в год дарить клиенту бонусы. Пользователь должен быть уверен в своей безопасности, и в том, что его данные используются только по делу. Если вы не нарушаете своих обещаний, пользователи со временем будут больше доверять вам, а если начнут получать рассылки, на которые не подписывались, то доверие можно и утратить.
После отправки формы пользователь должен видеть, что все прошло успешно, и форма не зависла, а благополучно дошла до адресата. Если к форме прикреплены большие файлы и она отправляется медленно, то желательно предусмотреть прелоадер.
В предыдущем примере, после того как пользователь отправил свой электронный адрес, он должен увидеть подтверждение своих действий.
Комментируйте все действия пользователя. Сообщайте ему, что происходит.
Правильно подпишите акцентные кнопки. На них должно быть указано выполняемое действие. Не просто «отправить», а «заказать звонок», «зарегистрироваться», «подписаться», «оформить», «купить в 1 клик». Так пользователю будет понятно, что произойдет после нажатия.
Доступность
Под доступностью мы понимаем возможность использования привычных и удобных пользователю приемов взаимодействия с сайтом.
Важную роль здесь играет корректность верстки, другими словами качественный код сайта.
- корректный обход полей формы по клавише tab. Многие пользователи привыкли быстро заполнять форму, переходя от поля к полю по нажатию Tab на клавиатуре, в целом возможность использования клавиатуры это и есть признак доступности сайта.
- фокус на полях и подсвечивание активных полей. Визуально понятно, в каком поле находишься, где именно происходит печать в данный момент
- хорошо заметные ошибки, рядом с полем, понятно какое поле нужно исправить и главное как. Тексты ошибок должны быть информативными, чтобы было понятно что именно нужно исправить.
А также в более глубоком смысле это доступность для лиц с ограниченными возможностями здоровья, которые могут использовать специальные приборы или технологии.
Гибкость
Запрашивайте дополнительные данные, только если это действительно необходимо. Предлагайте альтернативу — заполнить десяток полей с платежными реквизитами или же просто приложить файл с ними.
Если форма большая, можно разбить ее на короткие шаги и показывать прогресс заполнения.
Оптимальное количество полей
Подумайте о том, какая информация вам действительно нужна, а без какой можно и обойтись. Отталкивайтесь от цели формы. Например, в заявке на обратный звонок достаточно запросить номер телефона и имя, не запрашивать email, а если вы отправляете файл pdf на почту по запросу, вам не нужен номер телефона.
Пользователь хочет получить желаемое как можно быстрее и проще, поэтому большое количество полей для заполнения может его отпугнуть. К тому же результату приведет и запрашивание излишних данных. Прежде чем получить данные о дате рождения или номере телефона нужно сформировать доверие — пользователь должен быть уверен в том, что после заполнения формы он не «утонет в спаме» и что его данные не попадут к мошенникам. Всегда помните о цели — вам нужен лид, а не полное досье на него!
Однако не всегда короткая форма работает лучше, чем длинная. Все зависит от цели формы и доверия к компании.
Например, одна американская компания по поиску работы и подбору водителей для грузоперевозок в результате A/B тестирования обнаружила, что длинная форма создания резюме на ее сайте работает намного лучше! В ней запрашивались данные о специализации, местоположении и уровне квалификации, она выглядела внушительнее и вызывала доверие. А короткая форма, запрашивающая только имя и email, вызывала ощущение несерьезности предложения. Пользователи боялись, что им будут отправляться случайные, не имеющие отношения к работе предложения. Безусловно, это только гипотеза, хоть и основанная на цифрах. Чтобы отслеживать такие моменты нужно хорошо понимать специфику своего бизнеса и стиль мышления клиентов.
Увеличение количества полей в форме также может повысить качество потенциальных клиентов.
Короткие веб-формы обеспечивают большое количество лидов — их отправляют чаще, так как это быстро и легко. Однако те посетители, которые заполнят дополнительные поля форм и предоставят вам больше информации о себе и своих поисковых запросах, станут вашими клиентами с гораздо большей вероятностью.
Например, одна компания получала вал заявок от неквалифицированных лидов. Операторы колл-центра и менеджеры по продажам проводили много часов, общаясь с потенциальными клиентами по телефону, готовили презентации, только чтобы в конце концов узнать, что у тех нет денег. Время проходило впустую и для заказчиков, и для исполнителей. Тогда компания добавила в форму обратной связи одно дополнительное поле, и поток некачественных лидов сразу же был остановлен. Это поле предназначалось для выбора бюджета, который клиент готов выделить на оплату услуг компании. Они не только отсекли неплатежеспособных клиентов, но и начали активнее привлекать крупные компании.
Что учесть при ответе на заявку?
Позаботьтесь о том, чтобы заявки сразу попадали в целевой отдел. Отклики на вакансию — к HRу, заявки на продукты — в отдел продаж. В большинстве случаев это должно работать незаметно для пользователя, однако, иногда стоит дать ему выбор — куда и к кому он хочет обратиться. Например, когда он задает вопрос, на который должна ответить именно техподдержка, а не менеджер по продажам.
Также важно сориентировать пользователя по сроку, в течение которого он получит ответ на свой запрос. Так он не будет переживать о том что его заявку потеряли и ждать звонка раньше времени. «Золотой стандарт»: сообщение — «мы получили ваш заказ. В течение 10 минут менеджер свяжется с вами». Оно может содержать благодарность и какую-то дополнительную информацию. При заказе пиццы, например, пользователю последовательно сообщают, что заказ принят, далее что он готовится, что курьер уже в пути, и так далее.
Будьте рядом с клиентом и не заставляйте его сомневаться в правильности дальнейших действий.
Вывод
На результативность формы влияет множество факторов. Огромное значение имеет юзабилити сайта и его дизайн, а также контент и подача информации. Важно чтобы сайт в целом был понятен, а все сценарии взаимодействия с пользователем тщательно проработаны. Форма вряд ли принесет пользу, если пользователь не сможет ее найти или заполнить с первого раза.