Какие формы захвата эффективны на сайте? Веб-студия «Salamat» провела исследование на основе проектов и вывела некоторые закономерности. Среда Интернет-маркетинга очень быстро меняется и то, что было актуально еще в прошлом году сейчас вызывает отторжение. И эта статья через какое-то время устареет, поэтому каждый инструмент нужно использовать своевременно! Следите за нашим блогом, подписывайтесь на рассылку и вы всегда будете в курсе эффективных технологий повышения конверсии.
Одним из примеров ушедшей эпохи является форма с таймером. В таком виде она безнадежно устарела и при виде часов посетитель говорит: «Да-да-да, 6 дней до конца акции, а потом будет новая акция. Только для меня и только сейчас»
Она не вызывает никакого доверия. И нужно понимать, что человек при поиске услуг не бросается на первый попавшийся сайт для заказа. Он открывает 5-7 страниц и оставляет заявку на тех проектах, которые вызывают доверие, чувство профессионализма. А не на тех, которые считают его идиотом.
При этом стоит отметить, что дедлайны являются очень эффективным способом закрытия клиента на сделку, но как мы уже говорили, при условии, что будет к ней доверие. Повальное использование таймеров на лендингах убило это чувство в людях, хотя в начале своего появления действительно повышало конверсию. Но при том дедлайны эффективно используются в e-mail-маркетинге, на тренингах и т.п. На сайте же вместо таймера лучше использовать счетчик не по времени, а по количеству мест или товара.
Разберем какие основные формы захвата существуют и как их лучше использовать:
Вариант А. Форма с выводом в модальном окне.
Вариант Б. Открытая форма.
Если сравнить два исполнения, то тестированием доказано, что нижняя форма более конверсионная, нежели верхняя. Она отлично справляется со своей задачей за счет простоты. Даже дедушка разберется как и куда вбить номер телефона.
Конверсия пляшет не только от того, открытая или модальная форма захвата, но и от заголовков и кнопок. Очень важно проводить А/Б тестирование. Это когда на сайт ставится скрипт и 50% пользователей видит заголовок с вариантом А, 50% видит заголовок с вариантом Б. А потом аналитика нам показывает с какого из них было больше заявок. Это уже будет не мнение человека, а свершившийся факт, доказанный тестом.
По поводу заголовков, технология 4U до сих пор работает и повышает заполняемость формы. Если незнакомы с ней, то почитайте статьи, она не нова, а мы приведем примеры:
Вариант А. Без заголовка 4U
Вариант Б. C заголовком 4U.
Разумеется, что в варианте Б конверсия будет выше, потому что в заголовке описано больше преимуществ, который получит клиент. И еще потому что здесь есть форма захвата, а в варианте А его нету. Конверсию, как мы писали можно увеличить, если в этом примере использовать открытую форму, а не в модальном окне. Но иногда это оправдано, как в примере с расчётом КАСКО, т.к. для этого недостаточно взять только номер телефона, нужно больше вводных данных и их лучше упаковать в модальное окно. Как и в большинстве правил, здесь имеются исключения.
Одним из самых удачных мест размещения формы - является первый экран. Если человек сразу не увидит интригующее предложение и форму захвата, он может закрыть сайт, а это и потерянный лид и ухудшение статистики в плане отказов (когда человек в течении 14 секунд после захода на сайт его закрывает - это считается отказом и поисковики занижают в выдаче такие сайты).
Как писали выше, иногда есть необходимость запрашивать заполнения нескольких полей. И это оправданно.
Но также приходится видеть, когда сайт требует заполнить неоправданно большое количество полей, чем в действительности нужно. Например, при нажатии на кнопку «Заказать» всплывает вот такое окно!
И непонятно для чего я должен заполнить столько полей. Да еще и капча. В одном из исследований, с заполнения заявки было убрано всего одно поле (отследили, что именно на нем стопорится заполнение формы дальше, хотя оно и было важным) и даже такое простое действие позволило увеличить конверсию. Эту форму можно сократить минимум в два раза, которые не помешают взаимодействовать с клиентом дальше. Не обязательно сокращать все поля и запрашивать только телефон. Тестирование покажет, какие из них влияют на конверсию и следует оставить.
И все же есть такие сферы, где жизненно важно, чтобы человек заполнил много полей. Например, при рассчете КАСКО. Отличное решение вопроса с большим количеством полей реализовал Тиньков.
На сайте при рассчете КАСКО появляется, всего три поля для ввода информации и предложение скидки. Ничего не пугает и человек начинает заполнять, выбрав «марку автомобиля». Сразу после этого рядом появляется еще одно поле «модель автомобиля», которую ранее не было видно и за выбор которой дарят еще 1% скидки. И так далее, пока не вытянут всю необходимую информацию. Аплодирую стоя)
Пример хорош еще и тем, что здесь в редком поле нужно печатать самому, грамотно задействованы выборы из списка, радиокнопки, выбор даты и т.п.
Также на многих сайтах распространено наличии кнопки «Очистить поле», оставлять ее также нет нужды, особенно, когда с телефона легко перепутать кнопки и нужна очень сильная мотивация, чтобы обратно все заполнить.
Если вы присылаете стандартное сообщение о том, что мы вам в скором времени перезвоним, вы действуете как общая серая масса, которая никак вас не выделяет. А почему бы вам после заполнения формы не дать какой то полезный материал человеку или запустить небольшой видеоролик, в котором ваши конкурентные преимущества и примеры работ. Это позволит повысить лояльность клиента к вашей компании еще до того, как вы свяжетесь с ним.
На почту? И менеджер через сутки после того как пришла заявка звонит клиенту, который уже и не помнит когда на каком сайте он что то заполнял.
Здесь важно понимать, что не только конверсией на сайте все мерится. Очень важно как потом дожимается клиент. И если после заполнения формы вы перезвоните в течении минуты, то он будет удивлен тем, как быстро работает сервис. Вы сделаете это быстрее, чем конкуренты. Закрывать клиента на сделку нужно пока он горячий и лоялен к сотрудничеству.
Как достичь молниеносной реакции? Заявка должна падать не только на почту, а в первую очередь смс-кой на телефон. Это легко реализуемо, а эффект ошеломляющий. На нашей практике после звонка от клиента слышали: «Да я весь день оставляю заявки, вы вообще первый, кто мне перезвонил. Я с вами буду работать»
На одном из проектов в первой версии на кнопке были протестированы надписи «Заказать звонок», «Получить консультацию», «Оставить заявку». Но безоговорочным лидером с большим отрывом стал «Получить прайс».
Тест проводился при прочих равных условиях, вот так изменение надписи кнопки существенно меняет конверсию на сайте.
Следующей распространенной формой захвата клиента являются онлайн чаты.
Они также как и таймеры акций - были новинкой и инструментом повышения конверсии. И до сих пор являются эффективным инструментом, при одном НО!
Эффективность напрямую зависит от того, насколько быстро приходит ответ. Иногда мне действительно удобнее написать в чат, чем позвонить. Но в очень редких случаях менеджер мне отвечает. Т.е. основной проблемой является не сам чат, а человеческий фактор, потому что время ожидания ответа у менеджера - около 30 секунд. А потом пользователь сломя голову убегает по другим вкладкам и не вспомнит про вас.
А менеджер не может быть все время онлайн, потому что есть совещания, обеды, туалеты, текучка. А еще он не может одновременно общаться с 5 пользователями, пострадает качество.
Чаты постоянно видоизменяются, вбирают в себя новые функции.
Если вспомнить историю месенджеров, то в начале были icq и это казалось очень удобным. Сейчас о нем никто не вспоминает и в тренде ватсап и телеграм. Так и онлайн чаты будут трансформироваться, становиться удобней и пока смерть им не грозит.
Чаты уже трансформировались, которые сами автоматически отвечают любому пользователю стандартной фразой, а потом пишут, что лучше проконсультируют по телефону и всплывает форма для ввода только номера. Также есть чаты, которые показывают, что человек делает на сайте в видеорежиме, с какой социальной сети перешел. И это уже объединение с другими формами захватов.
Социальный охотник - это скрипт, вылавливающий профиль в социальных сетях. Вы смотрите на сайте продукт, по разным причинам закрываете сайт, а потом в течение часа вам вконтакте пишут, а вот вы были у нас на сайте и не купили, может подсказать что то. Его можно использовать, как аналитический инструмент, но как продажный он больше относится к формам агрессивного маркетинга. Очень осторожно его можно использовать, но не писать всем. И это точно должна определять не типовая секретарша-менеджер, а аналитик. К тому же поисковые системы не очень положительно относятся к таким скриптам и используя их Вы рискуете словить санкции, вплоть до бана.
Стоит он дороже онлайн-чатов, вау-эффект прошел и никого не удивишь сервисом. Но при этом он стал привычнее людям, на проектах выполненных нашей компанией мы тестируем форму и она показывает свою эффективность и оправдывает расходы.
Многие наши проекты стали показывать преобладание мобильного трафика над декстопными еще в 2016 году. И с телефона не всегда хочется что то печатать, а хочется больше мобильности - нажать на номер и чтобы сразу пошел вызов.
Сейчас уже почти все научились ставить телефоны в шапку на видное место. Но желание дизайнера сделать красивым номер телефона, придав ему разные стили - напрочь отбивает возможность у телефона набрать правильный номер. Не буду вдаваться в технические подробности, почему так получается, но это факт.
При том, что с телефонов на сайты заходят все активнее, нужно позаботиться, чтобы мобильная версия или адаптивная верстка делала сайт удобной для пользования и возможностью с помощью нажатия на номер совершения звонка.
Нужно комбинировать всевозможные вариации форм захвата для достижения максимального результата. Не рекомендуем это делать на выводах своего воображения, необходимо протестировать разные варианты.
Можно привести еще не меньше 100 способов повышения конверсии на сайте, но к ним следует переходить, когда в основных формах порядок. Пытаясь улучшить сразу все часто люди не дожимают ничего. Нужно идти от самого главного к главному, проявляя терпение и настырность - идти к результату.
Но рыбка срывается. Причина - форма захвата на сайте. Возникают вопросы: что с ней не так, как оценить, где смоделировать успешный опыт?! Об этом, и даже больше, узнаете в статье.
Форма захвата контактов, как воздух. О ней не задумываешься, когда делаешь сайт и считаешь, что важно всё, но только не она.
Правда, я скажу иначе - жить без нее нельзя. Возможно резкое сравнение, но для акцента важности темы, в самый раз. Потому что вопрос о Вашем кошельке.
Форма обратной связи - это окно с полями для ввода данных, текстом и кнопкой для обратной связи с посетителем Вашего сайта.
Такая форма является одной из ступеней , собирает контакты посетителей сайта или Landing Page.
Другими словами, дружит покупателя с продавцом. Еще ее называют лид - форма или форма обратной связи. Но глобально не важно как Вы её будете называть, если мы понимаем о чём идёт речь.
И так как сама по себе тема не является сложной, не будем долго признаваться друг другу в любви, а сразу перейдём к подробностям. И начнём мы с того, какие 3 вида форм для захвата бывают.
Форма называется закрытой, когда выполнена в виде кнопки или ссылки на сайте, при нажатии на которую появляется развернутая форма с полями. Классика жанра:
Закрытая форма
Новое окно
Необходима в случае соблюдения дизайна и использования пространства страницы для информации.
А также, когда она содержит больше 4-х полей и перекрывает часть контента на сайте. В основном в интернет - магазинах. Единственный минус - требует дополнительного клика мыши пользователем.
Открытая форма захвата выполнена в развернутом виде и располагается, в большинстве случаев, на первом экране главной страницы сайта или лендинга.
Открытая форма
Служит для заботы о самых горячих клиентах, которые уже хотят отправить свои контакты, оплатить товар и получить выгоду.
Такие пользователи не хотят осуществлять лишние клики мышкой. Если позволяет место на странице, дизайн, количество полей, и у Вас много горячих клиентов, спокойно используйте открытую форму захвата лидов.
Основное отличие двойной формы от обычной - наличие мотивирующего, продающего, информационного текста, который правильнее располагать слева от полей для ввода данных.
Двойная форма
В такой форме может находиться специальное предложение или акция, которая не озвучена на сайте.
Ваш лид - магнит или особое условие для клиента, отправившего заявку с этой формы. Главное, чтобы это было ценным для пользователя.
Окей. Теперь, когда Вы глобально увидели какие бывают примеры форм захвата, можем переходить к их типу.
И тут список будет довольно продолжительный, но Вам не нужно всё. Главный принцип Вашего выбора: форма должна соответствовать желанию клиента в момент его нахождения в конкретном месте сайта. А я начинаю.
E- mail маркетинг успешно работает, что бы о нем не говорили. Поэтому одним из видов формы является “Подписка на рассылку”.
Цель её - взять e-mail адрес пользователя для дальнейшей продажи Ваших продуктов с помощью рассылки.
Подписка на рассылку
Хотя с учётом того, что сейчас активно развиваются и в соц. сетях, это может легко заменить в этой форме.
Подписка на рассылку через соц.сети
Расположите форму сбоку от основного контента или внизу главной страницы, после того, как пользователь ознакомится с важной информацией.
Достаточно всего одного поля с указанием адреса почты. Ну максимум ещё имени.
Конечно, лучший эффект Вы получите, только когда человек чётко поймёт на сайте что он получит взамен за свой контакт.
Подарок в обмен на контакты
Пожалуй, самый распространенный вид формы обратной связи. Особенно если Вы работаете по своему городу.
Телефонная связь является быстрым и что главное удобным способом общения. И да, использовать данную форму нужно на всех сайтах, так как это уже не просто фишка, а необходимость.
Обратный звонок“Заказать звонок” лучше размещать рядом с номером телефона в “шапке” сайта. И не обязательно это должна быть кнопка.
Форма может появится после нажатия на текст, который можно выполнить в виде ссылки (подчёркнута пунктиром и выделена цветом)
Форма захвата - обратный звонок
Можете сделать форму с одним полем для номера телефона чтобы повысить конверсию, ведь чем меньше полей тем выше эффективность из-за того что мы уменьшаем энергозатраты человека.
Но есть небольшой минус, хоть и не значительный - имя клиента должен будет узнать менеджер.
Заказ звонкаОбязательно сделайте форму заказа звонка в подвале страницы рядом с контактами, чтобы пользователю не пришлось подниматься вверх, если у него возникнет желание оставить контакт.
Если Вы продаете самокат, то тут все ясно, вопросов минимум и консультация почти не нужна.
А если у Вас банкротство юридических лиц, то здесь необходимо учитывать много нюансов и консультация не помещает.
Консультация
Так же заявку на консультацию можно использовать в интернет - магазине. Если есть вероятность, что на Вашем сайте человек не найдет нужного товара, но Вы сможете предложить ему альтернативу.
Выполнить его в виде всплывающего окна формы захвата клиента, который частично по смыслу пересекается с "обратным звонком".
Обратный звонок
Поместите такую форму можно сразу после того, как расскажете о своих выгодах и преимуществах.
Либо можно сделать это сразу на первом экране, как мы это делали это на лендинге у агента недвижимости.
Бесплатная консультация
Либо есть ещё более хитрый и что самое интересное по нашим наблюдениям очень эффективный вариант - расположить форму захвата внизу страницы, где из полей не только имя и телефон, но и место для описания задачи.
https://youtu.be/eykrf_RWJOo
Опять же, если Вы продаёте наращивание ногтей, то стоимость можно указывать сразу на сайте.
А если у Вас, как и у нас, услуга сложная, например, то какую-бы стоимость Вы не указали, она в любом раскладе будет ориентировочная, а значит нужна отдельная форма захвата по её персональному расчёту.
Расчет стоимости
Кстати, выше на примере Вы видите реализацию расчёта стоимости через (в нашем случае квиз-блок).
Это когда клиент, перед тем как увидеть заветные поля для ввода контактов, должен в виде небольшой геймификации ответить на вопросы, и его система примерно сориентирует в вилке цен.
Но не обязательно так заморачиваться, в некоторых случаях достаточно просто сделать кнопку с обычным предложением “Рассчитать стоимость” или “Получить предложение с ценами”.
Например, именно так у нас реализовано на первом экране нашего сайта по .
Узнать цены
Онлайн-чат тоже относится к форме обратной связи, хоть и косвенно. Но мы не оставим его без внимания.
Поэтому если Вы уверены, что у посетителя возникнут какие-либо вопросы по продукту и менеджер в чате может закрыть его на последующую ступень воронки продаж, то внедряйте онлайн консультанта на свой ресурс.
Онлайн-консультант
Только фраза в примере выше - это приветствие у тысячи сайтов. И у Ваших конкурентов. Поэтому убирайте шаблоны.
Подстраивайтесь под специфику Вашей ниши. Если Вы продаете детские игрушки, то можете написать такое приветствие: “Здласти! Если Вы не мозете опледелица с выболом, написыте нам в цят и полуците всю инфолмацию)))”
Нелепо, но прикольно. А позитив и смех, поверьте, больше располагает, нежели сухое: “Здравствуйте, чем могу помочь?”. Кстати, об этом у нас даже есть целое видео:
https://youtu.be/p3G42Yg3VKA
И есть ещё одна хорошая новость, в своей практике мы поработали с большим количеством онлайн-консультантов и естественно за это время выбрали лучшие. О них мы написали статье.
Эта форма обеспечивает доступ к дополнительной информации или возможностям ресурса на пробный период.
Опять же, никаких лишних действий для пользователя. Достаточно трех полей: “Имя”, “E-mail” и “Пароль”.
Форма регистрации
Казалось бы, проще простого, но… Можно сделать еще проще: сгенерировать пароль за пользователя и избавить его, в очередной раз от перебирания в голове дат рождения своих родных.
Генерация пароля
Только если вдруг Вы сервис, то не смешивайте между собой форму “Вход” и “Регистрация”. У этих форм хоть и нет большого отличия, но они предназначены для разных задач.
Одна для входа зарегистрированных людей, другая для первичной регистрации или вообще попытки пробно изучить портал.
Формы вход и регистрация
Поп ап - окно, которое “выскакивает”, когда курсор посетителя движется к вкладкам браузера или через определенное время пребывания пользователя на сайте.
В этой форме должно быть вкусное спец предложение, чтобы клиент отправил заявку.
Спец.предложение
Считается, что поп - ап раздражает и вызывает недовольство. Но если у Вас действительно есть предложение, которого больше ни у кого нет, то почему бы не попробовать сделать поп - ап? Покажет только тестирование.
Только умоляю Вас, настройте нормальную логику его появления. Этот поп-ап не должен вылетать на каждой странице через 2 секунды движения мышки.
Всё должно быть логично, и тогда даже можно будет тестированием не заниматься.
Вы, должно быть, уже почувствовали, что этот “квадратик с кнопкой” на сайте не такой уж и плохой.
У него много мелких составляющих, которые важны для заветной конверсии Вашего ресурса. Поэтому далее мы разберём как раз эти фишечки. Да, и Вы их так любите, я знаю.
1. Окно благодарности после отправки формы
Это та самая “галочка”, которая появляется на экране монитора, после отправки формы пользователем.
Очередная мелочь, но такая важная! Это может быть модальное окно или отдельная и дальнейшими действиями, которые будут происходить после успешной отправки формы пользователем.
Окно благодарности
2. Каптча
Каптча – это тест компьютерных систем, который определяет: человек Вы или робот. Ее плюс в том, что каптча защищает Ваш ресурс от роботов, которые заходят на сайт, регистрируются, рассылают спам и увеличивают его нагрузку.
КаптчаМинус – добавляет сложности в заполнении формы пользователем. И иногда именно каптча становится причиной ухода посетителя с сайта. Непонятные надписи, неразборчивые буквы. В общем, сложно все.
Если подумать, то проблема спама и ботов на ресурсе не является проблемой Ваших клиентов. Она Ваша.
Так что старайтесь избегать или делать каптчи простыми (invisible reCAPTCHA от Goog) или в полу-игровой форме, с использованием изображения.
Каптча в игровой форме
3. Политика конфиденциальности
Помните о Законе N 152-ФЗ “О персональных данных”. Нет?! В общем закон Российской федерации гласит, что Вы не имеете собирать контакты людей без их согласия.
А их согласие это установка галочки в специальном чек-боксе под кнопкой (расположение может быть любое).
Политика конфиденциальности
Несоблюдение данного пункта может повлечь за собой штрафы, хотя мы ещё не слышали про такие случаи. И да, галочка по-умолчанию НЕ должна стоять.
4. Бонус
Надеюсь, Вы еще не уснули. Собственно, бонусы в Вашем бизнесе тоже влияют на конверсию лид-формы.
Например, Вы предлагаете человеку заказать выезд на замер, а дополнительно к этому обещаете, что бутылка шампанского в подарок, даже если человек ничего не купит.
Какой сюрприз!
5. Призыв
Миксуйте банальные призывы к действию с небанальными. Например, у студии дизайна в блоке “Портфолио” глупо делать основной призыв к действию - “Заказать звонок”. Лучше будет написать “Хочу также”.
Призыв к действию
Либо, если Вы представляете продукт, у которого много преимуществ, но он требует подробной консультации, можно использовать призыв - “Еще больше плюсов”.
Или применить такое решение, как на примере ниже, когда мы предлагаем связаться и ответить на любые вопросы.
Необычный призыв к действию
Это необходимо, чтобы наши формы захвата, особенно одинарные, не попадали в фильтр человеческого глаза, который автоматически пропускает их, так как знает, что это реклама. Заинтересовал? Подробнее об этом читайте в статье.
Лид-форма — это последнее препятствие на пути конвертации вашего потенциального клиента. Какую функцию на самом деле выполняют формы, размещенные на вашей посадочной странице? Они помогают увеличивать коэффициент конверсии или способствуют потере возможных прибылей?
При разработке формы очень просто ошибиться, но справедливости ради стоит заметить, что и исправить все недочеты не составляет большого труда. Сегодня мы разберем, как правильно (и неправильно) работать с высоконверсионными формами захвата на лендинге.
Попросите пользователей заполнить слишком много полей, и они уйдут на другие ресурсы, попросите заполнить слишком мало, и вам не хватит информации для продажи, а им — поводов доверять вашей компании. Как же найти золотую середину? Чтобы поля стали не убийцами конверсии, а ее помощниками, воспользуйтесь следующими советами:
Большинство маркетологов действительно руководствуется правилом: чем меньше полей, тем лучше. Казалось бы, с точки зрения коэффициента конверсии — это правильный подход, однако вы будете удивлены, когда добавите/измените нескольких полей. И хотя может это действие и не повлияет на показатели кардинально, если вам нужны качественные лиды, стоит поэкспериментировать с увеличением количества полей.
Тщательно выбирайте поля, которые придется заполнять посетителям, иначе в качестве результата вы можете получить . Само по себе «раздувание» лид-формы не приведет вас к успеху: если ваши поля не соответствуют целям страницы, посетитель просто откажется их заполнять. Поставьте себя на место пользователей: представьте, что вы устраиваетесь на работу и во время собеседования вам задают множество вопросов, которые никаким образом не относятся к желаемой должности. У вас вызовет доверие такой HR-менеджер? Вряд ли. Чтобы быстрее пройти «допрос», пользователи будут кликать в случайном порядке, превращая данные в абсолютно ненужную информацию, или вообще покинут лендинг.
Если вы считаете, что единственное, что вам нужно от посетителя — это адрес электронной почты, то подумайте еще раз. Исследование ConversionXL показало, что форму с просьбой оставить только электронный адрес заполняют на 13,56% меньше пользователей, чем форму с несколькими дополнительными полями.
ConversionXL предполагает, что просьба оставить только адрес выглядит как спам.
Если вы не хотите оставлять только одно поле для электронной почты, но в то же время решили не заставлять посетителей лендинга заполнять одиннадцать строк, как же выбрать, какие поля включить?
Проанализируйте продажи и определите, какая именно информация чаще всего используется на каждом из этапов продаж. Другими словами, в этом деле лучше не полагаться на готовые формулы, а провести собственное исследование. Сокращайте до последнего и используйте только те поля, которые отвечают потребностям вашего бизнеса и ваших потенциальных клиентов.
Чем больше усилий приходится прикладывать пользователям, тем меньше вероятность, что они заполнят все поля формы. Больше всего посетителей будет раздражать набор текста, особенно тех, кто попал на вашу страницу с мобильного устройства.
Смарт-формы позволяют автоматически заполнять такие поля как имя, адрес электронной почты и номер телефона. Кроме того, стоит упростить жизнь своим потенциальным клиентам и добавить радиокнопки для выпадающих списков.
Возможность выбора полей позволит пользователям определить, какие варианты относятся к ним, а какие — нет, и убережет от лишнего набора текста. Помимо максимально удобства для пользователей значительные плюсы получите и вы: не придется обрабатывать ненужные данные и тратить время на людей, которые не соответствуют .
Например, если вы представляете компанию по борьбе с насекомыми, можно включить выпадающий список с вариантами ответа на вопрос: «Какие насекомые вас беспокоят?». Если насекомые, которые донимают посетителя, находятся в списке, он может быть уверен, что вы поможете решить его проблему.
На лендинге компании Club W’s представлена 6-шаговая форма с простыми вопросами и возможностью выбрать ответ или пропустить некоторые поля для экономии времени.
Вы же не хотите, чтобы ваши посетители могли легко «сдаться» при заполнении полей? Или чтобы они случайно нажали кнопку «очистить поля» (вспомните о мобильных пользователях), а вы — потеряли лиды? Лучше предоставьте возможность редактировать введенные данные.
В исследовании ConversionXL приводится пример, показывающий, что происходит, если менять поля местами.
Вариант №3 3 без названия поля и с электронной почтой в качестве последней строки показал результаты на 44,7% выше, чем все другие, и смог вызвать больше доверия.
Вот как комментирует этот совет Оли Гарднер: «Недавно я экспериментировал с посадочными страницами и обнаружил весьма удивительные закономерности. Лишь изменив надпись «адрес» на «адрес рабочей электронной почты», вы можете значительно увеличить количество получаемых лидов. Это весьма дальновидная политика: ваша email-рассылка, вероятнее всего, будет приходить в то время, когда потенциальные клиенты находятся на работе, то есть готовы принимать бизнес-решения».
Хотите увеличить конверсию? Джонатан Дэйн (Johnathan Dane) из KlientBoost предлагает разбить лид-форму на несколько простых этапов. Первые шаги помогут вам классифицировать посетителей и выстроить более доверительные отношения. На последнем этапе вы получаете готовый лид.
Джонатан Дэйн отмечает: «Не бойтесь . Если вы просите пользователя заполнить форму в несколько шагов, он будет готов к этому процессу и, более вероятно, дойдет до последнего шага».
Все еще сомневаетесь в преимуществах таких лид-форм? Обратите внимание на лендинг компании Advanced Grass. Одно лишь изменение формы с простой на двухступенчатую позволило увеличить конверсию на 214% и получить более качественные лиды.
Взгляните на приведенный выше лендинг компании Advanced Grass: на первом этапе посетителю предлагается описать свою ситуацию. Взамен он получает купон на $100 и бесплатную консультацию. Заполняя такую мультистеп форму, пользователь вряд ли откажется оставлять персональные данные, ведь он получает неоспоримые преимущества. В результате в выигрыше оказываются обе стороны.
Такой подход позволяет посетителю постепенно знакомиться с компанией. Если же вы сразу просите его оставить почту, он будет сомневаться, ведь он еще не уверен, сможете ли вы решить его проблему и стоит ли иметь с вами дело. Мультистеп форма помогает посетителю понять, как именно вы справитесь с его болью. А вы, в свою очередь, имеете возможность классифицировать каждый лид.
Когда пользователь доходит до последнего шага и его просят оставить электронный адрес, доверительные отношения уже выстроены, следовательно, у него не вызовет сомнений это целевое действие.
Любой разработчик даже с полным отсутствием опыта сможет разбить лид-форму лендинга на несколько частей. Однако само по себе разделение не решит всех проблем. Фокус в том, чтобы показать посетителям причины для заполнения каждого поля. В противном случае, зачем «заморачиваться»?
Грамотно проработанная многоступенчатая форма стимулирует пользователя завершить каждый этап. Например, на лендинге Squarespace уже на первом этапе вам обещают бесплатную 14-дневную пробную версию, если вы нажмете кнопку «НАЧАТЬ».
На втором шаге Squarespace просит выбрать, какой тип сайта вы хотите. Обратите внимание, вы все еще не дали никакой личной информации.
На третьем шаге вам предлагают представить, как должен выглядеть ваш сайт. Вы все еще думаете о 14-дневной бесплатной версии в этот момент? Уже нет — вы, скорее всего, полностью воодушевились своим новым сайтом!
И вот вы находитесь на четвертом шаге, но чувствуете не напряжение, а удовольствие. Помните: Squarespace не просил у вас никакой личной информации, и каждое действие на лендинге помогает начать работу с продуктом.
После того как вы решили, какой сайт хотите и уже выбрали дизайн, Squarespace, наконец, запрашивает личные данные и адрес электронной почты.
То, что посетители хотят знать сразу и что вы не желаете им давать до получения всей информации, до того самого момента, когда ваш менеджер позвонит им — это цена. Однако вы можете удовлетворять их любопытство постепенно, по мере того как пользователи продвигаются от одной ступени к другой при заполнении формы.
Такой метод можно обнаружить почти на каждой посадочной странице в сфере страхования:
Лендинг этой страховой компании построен на многоступенчатой форме, но остается весьма понятным.
И снова обратите внимание: ваши персональные данные компания Geico запрашивает не сразу, а на втором шаге.
Но даже если ваш бизнес далек от страховой отрасли, стоит обратить внимание на данный способ увеличения конверсии. Кроме того, есть немало других вариантов создания многоступенчатых лид-форм. К примеру, вместо того чтобы сразу высылать потенциальному клиенту коммерческое предложение, вы можете запросить его почтовый индекс, чтобы определить, предоставляете ли вы услуги в данном районе.
Лендинг компании Eat24 запрашивает адрес посетителя, чтобы определить, сможет ли он заказать доставку еды в свой район. Как только вы ввели адрес, вам показывают лучшие предложения ресторанов, расположенных неподалеку. Все еще не хотите отведать чего-нибудь вкусненького?
На втором шаге у посетителя запрашивается более персонифицированная информация: предпочитаемая кухня, ценовой диапазон и т.д.
Посетители вашего ресурса не знают, состоит ваша лид-форма из 2 или 22 шагов. Добавьте индикатор прогресса, чтобы они понимали, когда получат долгожданную выгоду.
Ресурс FirstRound недавно писал о преимуществах этого инструмента, особенно в адаптивном дизайне: «Пользователи чувствуют необходимость что-то доделать, когда знают, что почти закончили. Добавление одного лишь индикатора заполнения может увеличить конверсию до 40%».
Помните: стратегия пост-продакшена не менее важна, чем коэффициент конверсии. Если вы используете последнюю ступень при заполнении формы, чтобы получить контактные данные пользователя (который, кстати, перед этим потратил время и заполнил другие поля), не заставляйте его долго ждать.
Не теряйте лиды и не отпускайте их к конкурентам! Конверсия приносит пользу компании в тот момент, когда вы используете полученную информацию, определяете «боль» потенциального клиента и начинаете процесс продажи.
Наверное, каждому хоть раз приходилось заполнять формы, которые требуют повторно вводить имя, телефон или номер счета. Это раздражает даже больше, чем необходимость раз за разом объяснять свою проблему. Если вы просите у посетителя лендинга какую-либо конкретную информацию (будь это почтовый индекс, площадь его квартиры или количество сотрудников фирмы), не заставляйте его повторять те данные, которые он вам уже передал.
Грамотно разработанная многоступенчатая форма не только повышает коэффициент конверсии, но и позволяет классифицировать лиды. Если вы задаете правильные вопросы уже на первых этапах заполнения формы, то получите ценные данные о том, какие проблемы беспокоят пользователя, кто может стать постоянным покупателем и с каким средним чеком.
Во время первого этапа заполнения формы на лендинге компании CrazyEgg’s посетителя просят ввести URL-адрес веб-сайта в обмен на предоставление «тепловой карты» (heatmap). Перед вами пример довольно простого способа построения доверия, который работает без запроса личных данных.
На втором шаге пользователь предоставляет персональную информацию и доступ к данным Google Analytics, которые помогут CrazyEgg’s решить, является ли посетитель кандидатом для сервиса компании.
Ваша целевая страница всенепременно нуждается в призыве к действию (CTA). Однако эта кнопка нужна и для лид-формы. И это не всегда одно и то же. Чтобы посетитель лендинга обратил внимание на ваш призыв к действию, помните о следующем.
Все маркетологи делятся на две группы: одни считают, что пользователю сразу нужно показать лид-форму, другие уверены, что посетитель сначала должен нажать кнопку CTA. Кто прав? Компания Wishpond провела исследование, по результатам которого выяснилось, что после добавления CTA-кнопки, которая раскрывает лид-форму, количество регистраций увеличилось на 60%.
Если вы не верите статистике и все же хотите оставить традиционную открытую форму захвата на лендинге, убедитесь, что ваш призыв к действию хорошо виден и привлекает внимание. Ведь в этом случае сама лид-форма будет важной частью призыва к действию.
Вполне вероятно, что посетители вашего лендинга уже нажали кнопку призыва к действию, чтобы открыть лид-форму, но вы все равно должны дать им стимул эту форму заполнить. Им нужен новый призыв, чтобы они понимали, какое действие вы от них ждете.
Если пользователь нажимает кнопку CTA, то возникающая лид-форма должна визуально соответствовать тому, что он уже видел на лендинге. Не делайте ошибку, размещая различные варианты дизайна на одной посадочной странице. Помните о , которые продолжают работать и в XXI веке.
Не думайте, что если посетитель нажимает кнопку призыва к действию на лендинге, то он уже конвертирован. Пользователь может «соскочить» с крючка в любой момент, в том числе в середине процесса. Поэтому убедитесь, что CTA лид-формы столь же убедительна, как и CTA целевой страницы.
С глаз долой — из сердца вон, верно? Вот что советуют специалисты ConversionXL: «Если посадочная страница достаточно длинная для того, чтобы прокрутить ее, просто продублируйте CTA-кнопку или лид-форму в самом низу лендинга».
На лендинге Squarespace CTA-кнопка располагается на видном месте.
Как работают такие подсказки на лендинге? Очень просто: вы заставляете пользователей направить взгляд на нужным вам элемент. В качестве таких подсказок могут выступать стрелки или люди на главном изображении, смотрящие на форму. Сделайте так, чтобы каждый посетитель вашего лендинга понял, на что ему обратить внимание в первую очередь.
На лендинге компании TaskRabbit девушка справа смотрит на поле «Мне нужна помощь с задачами» (I need help with tasks), а девушка слева — на «Я хочу попробовать» (I want to be a Tester).
Не давайте пользователям возможность придумать множество причин, почему они могут отказаться от ваших услуг или товаров.
Задавая закрытые вопросы, вы сразу привлечете внимание тех, кто захочет сказать «да» в ответ.
Теперь, когда вы разобрались с кнопкой призыва к действию, самое время сосредоточиться на такой важной составляющей лендинга как вознаграждение для посетителя, которое он получит, если нажмет кнопку. В качестве вознаграждения может выступать информационное пособие, электронная книга, вебинар и т.д. Конечно, стоит использовать и этот ход для направления потенциальных клиентов в воронку продаж и продвижения своих товаров или услуг. Но помните о том, что пользователи также должны выигрывать от такого сотрудничества. Так сообщите же им, какое вознаграждение их ждет (и убедитесь, что ваша CTA-кнопка справляется с этой задачей).
Если на кнопке призыва к действию находится надпись «отправить», то вам есть над чем работать. И даже если фраза звучит «Получить вашу книгу» — ее тоже придется исправлять.
Сформулируйте предельно точно, как пользователь сможет воспользоваться вознаграждением, заполнив форму. Как показало исследование, при изменении надписи с «Зарегистрироваться» на «Зарегистрироваться и получить бесплатные советы букмекеров» конверсия увеличилась на 31,54 %.
Какие цели вы помогаете достичь пользователям? Сфокусированность на целях посетителя плюс простая лид-форма помогли одной компании увеличить коэффициент конверсии с 2% до 27%.
Данный лендинг дает посетителям подробную инструкцию, как работать с книгой: провести мозговой штурм и приступить к дизайну.
Не просто предлагайте вознаграждение пользователю, а объясните, каких целей он сможет с его помощью достичь. Какие перспективы откроются перед посетителями вашего лендинга после прочтения книги, посещения вебинара? Почему бы не сказать им об этом?
ConversionXL сразу говорит посетителям: после прочтения книги вы начнете движение от любительского уровня к экспертному и научитесь увеличивать конверсию любого ресурса.
Каждый элемент лендинга, включая кнопку «Отправить», должен быть оптимизирован, чтобы показать посетителю ценность, которую он получит, заполнив форму. Вместо «Отправить» и аналогичных общих фраз лучше описать, что произойдет, когда пользователь нажмет кнопку. Замените распространенные и слишком универсальные выражения «Попробовать бесплатно» на максимально информативные описания. Например, «Спросите эксперта, что не так с вашим компьютером». Помните: каждая кнопка «Отправить» лишь говорит посетителю лендинга, что вы ничем не отличаетесь от остальных компаний на рынке.
Почему «бесплатно» даже хуже, чем «отправить» или «попробовать сейчас»?
Исследования показали, что использование таких слов как «бесплатно» в призыве к действию может даже навредить конверсии. Возможно, пользователи XXI века не верят, что нечто стоящее может достаться им бесплатно. В то же время, по факту, вы предоставляете им вознаграждение в обмен на личную информацию, что, следовательно, уже не является абсолютно бесплатным.
Лендинг является отличным способом стимулировать пользователей делиться контентом вашей компании в социальных сетях. Однако есть несколько пунктов, о которых стоит помнить.
Вроде бы все просто: вы хотите, чтобы пользователь, заинтересованный в вашем продукте или услуге, поделился информацией с подписчиками в социальных сетях. Однако многие разработчики совершают одну и ту же ошибку: размещают кнопки шеринга непосредственно на лендинге, а не на странице подтверждения регистрации или подписки. Между этими двумя действиями есть ключевое различие.
Сделали сайт, настроили рекламу, пошли люди, которые уже протягивает деньги, осталось лишь заполнить поля и нажать кнопку. Но рыбка срывается. Причина — форма захвата на сайте. Возникают вопросы: что с ней не так, как оценить, где смоделировать успешный опыт?! Об этом, и даже больше, узнаете в статье.
Форма захвата контактов, как воздух. О ней не задумываешься, когда делаешь сайт и считаешь, что важно всё, но только не она. Правда, я скажу иначе — жить без нее нельзя. Возможно резкое сравнение, но для акцента важности темы, в самый раз. Потому что вопрос о Вашем кошельке.
Форма обратной связи — это окно с полями для ввода данных, текстом и кнопкой для обратной связи с посетителем Вашего сайта.
Такая форма является одной из ступеней воронки продаж, собирает контакты посетителей сайта или Landing Page. Другими словами, дружит покупателя с продавцом. Еще ее называют лид — форма или форма обратной связи. Но глобально не важно как Вы её будете называть, если мы понимаем о чём идёт речь.
И так как сама по себе тема не является сложной, не будем долго признаваться друг другу в любви, а сразу перейдём к подробностям. И начнём мы с того, какие 3 вида форм для захвата бывают.
1. Закрытая форма
Форма называется закрытой, когда выполнена в виде кнопки или ссылки на сайте, при нажатии на которую появляется развернутая форма с полями. Классика жанра:
Необходима в случае соблюдения дизайна и использования пространства страницы для информации. А также, когда она содержит больше 4-х полей и перекрывает часть контента на сайте. В основном в интернет — магазинах. Единственный минус — требует дополнительного клика мыши пользователем.
2. Открытая форма
Открытая форма захвата выполнена в развернутом виде и располагается, в большинстве случаев, на первом экране главной страницы сайта или лендинга.
Служит для заботы о самых горячих клиентах, которые уже хотят отправить свои контакты, оплатить товар и получить выгоду. Такие пользователи не хотят осуществлять лишние клики мышкой. Если позволяет место на странице, дизайн, количество полей, и у Вас много горячих клиентов, спокойно используйте открытую форму захвата лидов.
3. Двойная форма
Основное отличие двойной формы от обычной — наличие мотивирующего, продающего, информационного текста, который правильнее располагать слева от полей для ввода данных.
В такой форме может находиться специальное предложение или акция, которая не озвучена на сайте. Ваш лид — магнит или особое условие для клиента, отправившего заявку с этой формы. Главное, чтобы это было ценным для пользователя.
Окей. Теперь, когда Вы глобально увидели какие бывают примеры форм захвата, можем переходить к их типу. И тут список будет довольно продолжительный, но Вам не нужно всё. Главный принцип Вашего выбора: форма должна соответствовать желанию клиента в момент его нахождения в конкретном месте сайта. А я начинаю.
E- mail маркетинг успешно работает, что бы о нем не говорили. Поэтому одним из видов формы является “Подписка на рассылку”. Цель её — взять e-mail адрес пользователя для дальнейшей продажи Ваших продуктов с помощью рассылки.
Хотя с учётом того, что сейчас активно развиваются чат-боты и автоворонки в соц. сетях, это может легко заменить e-mail маркетинг в этой форме.
Расположите форму сбоку от основного контента или внизу главной страницы, после того, как пользователь ознакомится с важной информацией. Достаточно одного поля с указанием адреса почты. Ну максимум ещё имени.
Конечно, лучший эффект Вы получите, только когда человек чётко поймёт на сайте что он получит взамен за свой контакт. Поэтому тут название “Подписка на рассылку” больше общее. Вы можете также просто предложить взамен на контакты получить какой-нибудь подарок. Например, мы часто предлагаем 300 способов рекламы.
Пожалуй, самый распространенный вид формы обратной связи. Особенно если Вы работаете по своему городу. Телефонная связь является быстрым и что главное удобным способом общения. И да, использовать данную форму нужно на всех сайтах, так как это уже не просто фишка, а необходимость.
“Заказать звонок” лучше размещать рядом с номером телефона в “шапке” сайта. И не обязательно это должна быть кнопка. Форма может появится после нажатия на текст, который можно выполнить в виде ссылки (подчёркнута пунктиром и выделена цветом)
Можете сделать форму с одним полем для номера телефона чтобы повысить конверсию, ведь чем меньше полей тем выше эффективность из-за того что мы уменьшаем энергозатраты человека. Но есть небольшой минус, хоть и не значительный — имя клиента должен будет узнать менеджер.
Обязательно сделайте форму заказа звонка в подвале страницы рядом с контактами, чтобы пользователю не пришлось подниматься вверх, если у него возникнет желание оставить контакт.
Если Вы продаете самокат, то тут все ясно, вопросов минимум и консультация почти не нужна. А если у Вас банкротство юридических лиц, то здесь необходимо учитывать много нюансов и консультация не помещает.
Так же заявку на консультацию можно использовать в интернет — магазине. Если есть вероятность, что на Вашем сайте человек не найдет нужного товара, но Вы сможете предложить ему альтернативу. Выполнить его в виде всплывающего окна формы захвата клиента, который частично по смыслу пересекается с «обратным звонком».
Поместите такую форму можно сразу после того, как расскажете о своих выгодах и преимуществах. Либо можно сделать это сразу на первом экране, как мы это делали это на лендинге у агента недвижимости.
Либо есть ещё более хитрый и что самое интересное по нашим наблюдениям очень эффективный вариант — расположить форму захвата внизу страницы, где из полей не только имя и телефон, но и место для описания задачи.
Опять же, если Вы продаёте наращивание ногтей, то стоимость можно указывать сразу на сайте. А если у Вас, как и у нас, услуга сложная, например, маркетинговый консалтинг, то какую-бы стоимость Вы не указали, она в любом раскладе будет ориентировочная, а значит нужна отдельная форма захвата по её персональному расчёту.
Кстати, выше на примере Вы видите реализацию расчёта стоимости через квиз-сайт (в нашем случае квиз-блок). Это когда клиент, перед тем как увидеть заветные поля для ввода контактов, должен в виде небольшой геймификации ответить на вопросы, и его система примерно сориентирует в вилке цен.
Но не обязательно так заморачиваться, в некоторых случаях достаточно просто сделать кнопку с обычным предложением “Рассчитать стоимость” или “Получить предложение с ценами”. Например, именно так у нас реализовано на первом экране нашего сайта по разработке landing page.
Онлайн-чат тоже относится к форме обратной связи, хоть и косвенно. Но мы не оставим его без внимания. Поэтому если Вы уверены, что у посетителя возникнут какие-либо вопросы по продукту и менеджер в чате может закрыть его на последующую ступень воронки продаж, то внедряйте онлайн консультанта на свой ресурс.
Только фраза в примере выше — это приветствие у тысячи сайтов. И у Ваших конкурентов. Поэтому убирайте шаблоны. Подстраивайтесь под специфику Вашей ниши. Если Вы продаете детские игрушки, то можете написать такое приветствие: “Здласти! Если Вы не мозете опледелица с выболом, написыте нам в цят и полуците всю инфолмацию)))”
Нелепо, но прикольно. А позитив и смех, поверьте, больше располагает, нежели сухое: “Здравствуйте, чем могу помочь?”. Кстати, об этом у нас даже есть целое видео:
И есть ещё одна хорошая новость, в своей практике мы поработали с большим количеством онлайн-консультантов и естественно за это время выбрали лучшие. О них мы написали в этой статье “Обзор онлайн консультантов для сайта: якобы рейтинг”.
Эта форма обеспечивает доступ к дополнительной информации или возможностям ресурса на пробный период. Опять же, никаких лишних действий для пользователя. Достаточно трех полей: “Имя”, “E-mail” и “Пароль”.
Казалось бы, проще простого, но… Можно сделать еще проще: сгенерировать пароль за пользователя и избавить его, в очередной раз от перебирания в голове дат рождения своих родных.
Только если вдруг Вы сервис, то не смешивайте между собой форму “Вход” и “Регистрация”. У этих форм хоть и нет большого отличия, но они предназначены для разных задач. Одна для входа зарегистрированных людей, другая для первичной регистрации или вообще попытки пробно изучить портал.
Поп ап — окно, которое “выскакивает”, когда курсор посетителя движется к вкладкам браузера или через определенное время пребывания пользователя на сайте. В этой форме должно быть вкусное спец предложение, чтобы клиент отправил заявку.
Считается, что поп — ап раздражает и вызывает недовольство. Но если у Вас действительно есть предложение, которого больше ни у кого нет, то почему бы не попробовать сделать поп — ап? Покажет только тестирование.
Только умоляю Вас, настройте нормальную логику его появления. Этот поп-ап не должен вылетать на каждой странице через 2 секунды движения мышки. Всё должно быть логично, и тогда даже можно будет тестированием не заниматься.
Вы, должно быть, уже почувствовали, что этот “квадратик с кнопкой” на сайте не такой уж и плохой. У него много мелких составляющих, которые важны для заветной конверсии Вашего ресурса. Поэтому далее мы разберём как раз эти фишечки. Да, и Вы их так любите, я знаю.
1. Окно благодарности после отправки формы
Это та самая “галочка”, которая появляется на экране монитора, после отправки формы пользователем. Очередная мелочь, но такая важная! Это может быть модальное окно или отдельная страница с благодарностью и дальнейшими действиями, которые будут происходить после успешной отправки формы пользователем.
Каптча – это тест компьютерных систем, который определяет: человек Вы или робот. Ее плюс в том, что каптча защищает Ваш ресурс от роботов, которые заходят на сайт, регистрируются, рассылают спам и увеличивают его нагрузку.
Минус – добавляет сложности в заполнении формы пользователем. И иногда именно каптча становится причиной ухода посетителя с сайта. Непонятные надписи, неразборчивые буквы. В общем, сложно все.
Если подумать, то проблема спама и ботов на ресурсе не является проблемой Ваших клиентов. Она Ваша. Так что старайтесь избегать или делать каптчи простыми (invisible reCAPTCHA от Goog) или в полу-игровой форме, с использованием изображения.
3. Политика конфиденциальности
Помните о Законе N 152-ФЗ “О персональных данных”. Нет?! В общем закон Российской федерации гласит, что Вы не имеете собирать контакты людей без их согласия. А их согласие это установка галочки в специальном чек-боксе под кнопкой (расположение может быть любое).
Важно. Несоблюдение данного пункта может повлечь за собой штрафы, хотя мы ещё не слышали про такие случаи. И да, галочка по-умолчанию НЕ должна стоять.
Надеюсь, Вы еще не уснули. Собственно, бонусы в Вашем бизнесе тоже влияют на конверсию лид-формы. Например, Вы предлагаете человеку заказать выезд на замер, а дополнительно к этому обещаете, что бутылка шампанского в подарок, даже если человек ничего не купит.
Миксуйте банальные призывы к действию с небанальными. Например, у студии дизайна в блоке “Портфолио” глупо делать основной призыв к действию — “Заказать звонок”. Лучше будет написать “Хочу также”.
Либо, если Вы представляете продукт, у которого много преимуществ, но он требует подробной консультации, можно использовать призыв — “Еще больше плюсов”. Или применить такое решение, как на примере ниже, когда мы предлагаем связаться и ответить на любые вопросы.
Это необходимо, чтобы наши формы захвата, особенно одинарные, не попадали в фильтр человеческого глаза, который автоматически пропускает их, так как знает, что это реклама. Заинтересовал? Подробнее об этом читайте в статье “Call to action. В чем сила призыв к действию”.
Визуальный канал человеческого восприятия составляет 60%. Поэтому визуальная составляющая формы на подсознательном уровне должна вызывать у человека эстетическое удовольствие. Цвет, форма, размер, текст, кнопка, расположение. Каждая мелочь влияет на эстетическое восприятие пользователя.
1. Цвет формы
Конкретного установленного цвета нет. Чтобы порадовать глаз пользователя, цвет формы должен быть выполнен в соответствии со стилистикой сайта. Диссонанс или отсутствие гармонии в цвете будет вызывать дискомфортное чувство. Здесь необходимо работать с цветовым кругом Иттена, тоном, насыщенностью, шумом и т.д. Лучше всего с этим справится дизайнер.
2. Цвет кнопки
О… Ну на эту тему можно написать целую диссертацию. Со времен повального распространения интернета между маркетологами, дизайнерами и вэб-программистами всегда существовали споры о заветной кнопке, которая при малейшем изменении может в разы увеличить конверсию сайта. Ее цвет, форма, текст, расположение — пристальный предмет обсуждения специалистов.
Мы пришли к одному глобальному выводу, главное, чтобы кнопка была контрастной относительно фона. Это будет выделять её. А все остальные гипотезы, если и дадут результат в а/б тестирование, то настолько крошечный, что Вы больше потеряете времени, чем заработаете денег.
3. Цвет полей
Как говорится, черным по белому написано. Именно поэтому, цвет полей для ввода данных белый. Но есть один нюанс. Выделяйте поля цветной рамкой, когда пользователь кликнет на поле, чтобы написать текст.
Посетитель сразу понимает, что форма активна и исправно работает. Если в этот момент посетитель решит пойти взять себе еще печенюшек, то по приходу он сразу увидит на чем остановился.
4. Размер формы и её частей
Все зависит от Вашей целевой аудитории. Если у Вас люди взрослые и у них со зрением так себе дела, то нужно использовать большую форму во всех её проявлениях. Если это молодёжь, то тут главное, чтобы она была заметна и красиво вписалась в дизайн, а размер уже будет второстепенным.
5. Поля для ввода
Этот пункт применим для сайтов, в которых форма располагается на отдельной странице. Нет необходимости поле “Ваше имя” делать на всю ширину страницы. Или, даже, наполовину. Поскольку не бывает в России таких длинных имен. Но главное, что вы теряете полезное пространство, на котором можно показать дополнительные выгоды или добавить текст с пошаговыми действиями, после отправки данных.
Текст подписи полей информирует пользователя о том, какие данные необходимо вводить в конкретное поле. Располагать его слева от полей, сверху или внутри поля? Если текст внутри поля, то при вводе данных он исчезает, поэтому его необходимо дублировать. Удобнее делать это над полями, но если позволяет дизайн формы.
6. Заголовок и подводка к форме
Текстовый заголовок формы должен совпадать с призывом к действию и выделяться на общем фоне жирным шрифтом. Под заголовком меньшим кеглем опишите, что конкретно сделать пользователю и что произойдет, после выполненных действий. При чём желательно с указанием времени.
Если Вы хотите подробнее описать свое предложение и операции, после отправки формы пользователем, используйте двойную форму, о которой мы писали выше.
7. Анимация
Главное не переусердствовать. Допустимо, чтобы кнопка при наведении курсора немного подпрыгивала, светилась, изменяла цвет, увеличивалась — это хорошая идея. Но делать так, чтобы кнопка, как в припадке, постоянно дёргалась — это идея уже плохая.
И, кстати, используйте иконки. Эта мелочь делает кнопку интересней, информативней и приятной для глаза. А в полях ввода данных или подписи посетитель быстрее понимает что сюда нужно вводить.
Да что тут говорить. Делайте форму обратной связи удобной и простой для своих посетителей. Определите для нее цель и правильный призыв к действию. Она не должна мешать изучать контент, но при этом просто обязана побуждать ее заполнить, ну или как минимум, вызывать эстетическое удовольствие.
И я понимаю, что абзац выше это общие слова, но реально всю идею создания качественной формы захвата можно уложить буквально в два главных смысла:
Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.
У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:
Размещается заголовок в верхней части лендинга, на уровне глаз пользователя. Большой, яркий, интригующий.
От заголовка зависит показатель отказов.
Вот примеры заголовков лучших лендингов нашей компании.
Дескриптор также влияет на показатель отказов, хоть и меньше, чем заголовок. Обычно состоит из логотипа, названия компании, слогана или нескольких слов об услугах или товарах. Размещается вверху слева или в середине.
В том случае, если на посадочной странице есть заголовок с УТП, дескриптор делают скромным – лого плюс название.
Лучшие лендинги всегда содержат оригинальный дескриптор.
Как правило, размещается в верхнем правом углу. Исчерпывающий блок контактов содержит:
Обязательно используется призыв – просьба позвонить.
Под изображением подразумевается фон – большая картинка, поверх которой размещают заголовок, форму захвата, другие блоки.
В идеальном лендинге изображение соответствует тематике сайта, является оригинальным и интересным. Цветовая гамма фона отличается от цвета шрифта заголовка, чтобы они не сливались.
На скриншотах вы видите красивые лендинги с привлекательными изображениями.
Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.
Форма захвата содержит графы для ввода имени и телефона. Призыв к действию описывает дополнительные выгоды (подарок, скидку, дополнительную услугу), которые побуждают посетителя к немедленной отправке данных.
Если на лендинге проходит акция, форма захвата содержит таймер обратного отсчета.
Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.
Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.
Блок имеет следующую структуру: текст с описанием выгоды и тематическая картинка для каждого пункта. Расположение пунктов – горизонтальное или вертикальное. В идеальном блоке во всех пунктах одинаковое количество текста, а ключевые предложения выделены цветом или жирным шрифтом.
Блок с отзывами – ключевой в лендинге.
На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.
Каждый отзыв:
Вот примеры блоков с отзывами на лучших лендингах нашей студии.
Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.
Тарифы должны отличаться друг от друга и содержать подробную информацию о том, что в них включено. Один из тарифов помечается, как самый популярный среди клиентов.
Это один из самых важных блоков лендинга. Именно просмотрев портфолио или кейсы, посетитель принимает решение о совершении целевого действия.
Грамотное портфолио содержит только лучшие работы, красиво оформлено, не занимает много места. Для оформления лучше использовать слайдер, с помощью которого посетители будут прокручивать изображения.
Посмотрев примеры лендингов посетитель должен убедиться в качестве продукта или услуги.
Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.
В случае с компанией обязательно должна быть карта с указанным местоположением офиса. В случае с автором всевозможные контакты.
Также тут размещается заключительная форма захвата.
В идеальном лендинге присутствуют все вышеперечисленные элементы. Однако чтобы посадочная страница действительно была эффективной, все ее блоки нужно грамотно объединить в одну композицию. А так же добавить смыслы, благодаря которым посетители совершать конверсионные действия на нашем лендинг пейдж.
