Оптимизация конверсии: где лучше всего разместить призыв к действию? [кейс]

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



Однажды я сидел в кофейне (ну ладно, хорошо, в баре), и заиграла песня Pearl Jam «Последний поцелуй». Будучи помешанным на метафорах, я начал менять слова первой строфы на маркетинговые термины, используя вместо слова «дитя» — CTA (призыв к действию). Называйте это безумием или вдохновением – как хотите, но в итоге я создал этот пост, в котором пойдет речь о том, где лучше всего разместить призыв к действию на вашем лендинге и почему.

Во-первых, давайте вместе прочитаем начало песни, чтобы я смог на некоторое время застрять в вашей голове, как это делают песни типа «I think we’re alone now» Tiffany, которые напеваешь еще несколько дней после того, как услышишь.

Оригинальная версия (в переводе):

О где же ты, мое дитя?
Господь забрал тебя…
Она ушла на небеса, покинула меня,
Надеюсь, встретимся с тобой,
Когда покину этот мир и я.

Моя версия:

О где же ты, мой CTA?
На сайте спрятан от меня,
Я поищу на лендинге, ведь он неплох,
О помоги же отыскать мне CTA, мой Бог!

Мне стоит серьезно подумать о том, чтобы построить карьеру в области музыкального маркетинга, правда? Нет? Ну и ладно.

В этом посте я разберу следующие идеи по размещению призыва к действию на лендинге:

• В начале страницы (до фолда – линии «перелома» страницы).
• В самом низу страницы.
• Под фолдом, но с использованием направляющих подсказок.
• Кейсы по размещению CTA.
• Расположение кнопки среди многих других CTA.

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

Я уже слышу крики «В верхней части, в верхней части, над фолдом!» — Скукотища

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

Урок истории: со времен создания MySpace, Facebook и других длинных сайтов, а также изобретения колесика прокрутки на мыши, все привыкли прокручивать страницу, это вошло в привычку.

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

Нельзя сказать, что размещать CTA в верхней части страницы, над «линией перелома» — это ошибка, в большинстве случаев это хорошая идея. Однако не нужно бояться экспериментов с вашей продающей историей и использовать разные способы донести ценность продукта до пользователя.

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



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

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

1. Размещение CTA в верхней части лендинга

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

То, что я хотел бы предложить, я называю 5-этапным ударом, и он работает следующим образом:



1. Броский и информативный заголовок: такой, что заставит вас остановиться, когда вы мельком замечаете его в газетном автомате на улице.

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

3. Краткое указание основных преимуществ: здесь описываются ключевые достоинства вашего продукта или сервиса.

4. Ограниченность специального предложения: это мотивирует пользователей кликнуть. Примеры включают в себя ограничение по времени или по доступному количеству продуктов предложение (Expedia, к примеру, говорит, что на требуемый рейс осталось всего два места). Специальное предложение, к примеру, скидка, также побуждает кликнуть на кнопку призыва к действию.



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

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

2. CTA ниже фолда на продающей странице – AIDA

Давайте на секунду вспомним о старую школу. Вы помните маркетинговую концепцию под названием AIDA?

Аббревиатура расшифровывается как Внимание (Attention), Интерес (Interest), Желание (Desire), Действие (Action) и основывается на идее того, что посетитель проходит через определенную последовательность простых шагов на пути принятия решения совершить действие. Шаблон, приведенный ниже, иллюстрирует этот процесс, и это хороший пример размещения CTA внизу страницы, когда пользователь уже проследил за развитием вашей продающей истории от начала до конца.



Давайте разберем этот шаблон, чтобы проиллюстрировать, как работают принципы AIDA:

• ATTENTION (внимание): вы привлекаете внимание посетителей релевантным и броским заголовком.
• INTEREST (интерес): с помощью видео вы заинтересовываете посетителей.
• DESIRE (желание): желание формируется посредством задействования функций и преимуществ, взывающих к потребностям посетителей.
• ACTION (действие): и, наконец, мощный призыв к действию завершает историю в той точке, где посетитель уже убежден в том, что ваше решение полностью
• удовлетворит его потребности. В этом случае работает контраст и цвет, а также четкое определение того, что он получит, когда кликнет по кнопке.

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

3. CTA под фолдом с использованием направляющих подсказок

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

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

Вот хороший пример:



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



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

4. Размещение слишком большого количества CTA на лендинге

Удачи тем, кто пытается понять, какого именно действия здесь ждут от клиента.



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

5. Кейс по размещению CTA на лендинге

В этом A/B-тестировании мы экспериментировали с лендингом Unbounce с трафиком, привлекаемым через контекстную рекламу по модели оплаты за клик (AdWords). Обратите внимание, что призывы к действию расположены под фолдом, в нижней части страницы. Чтобы смягчить это, мы использовали второстепенный навигационный CTA в верхней части страницы, говорящий – «выберите ваш тариф ниже», а также использовали эффект плавной прокрутки для перемещения вниз по странице к тарифным планам. Эффект плавной прокрутки позволяет посетителю увидеть, сколько контента на странице, пока он прокручивает ее. Также сразу отметив, что тарифный план будет расположен «ниже», посетитель понимает, что в нижней части страницы находится важная информация, с которой нужно ознакомиться, прежде чем покинуть сайт.



Гипотеза, предложенная нашим директором по маркетингу Gia, состояла в том, что, переместив CTAвыше ценовой сетки, мы увидим резкое увеличение количества переходов по активной ссылке. Чтобы проверить гипотезу, CTAбыл размещен в верхней части нижней половины страницы (после плавной прокрутки с помощью кнопки, расположенной вверху страницы). Ранее после прокрутки вниз был шанс, что призыв к действию был по-прежнему незаметен.

Результаты: В варианте B (странице после оптимизации) конверсия увеличилась на 41% по сравнению с исходной версией.

Подводим итоги

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

Что стоит делать:

• Провести A/B-тестирование, чтобы определить лучшее место для размещения CTA.
• Использовать несколько призывов к действию на длинной странице, чтобы разбить ее на несколько мини-секций.
• Использовать направляющие подсказки (визуальные или текстовые), если CTA расположен под фолдом, в нижней половине страницы.
• Создать грамотную маркетинговую историю, чтобы вести пользователя к вашему призыву к действию, где бы он ни был.
• С помощью грамотно проработанного дизайна сделать CTA броским (контраст, пустое пространство вокруг).

Чего не стоит делать:

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