Как увеличить конверсию сайта с помощью правильной кнопки CTA: Исчерпывающее руководство

Знали ли вы, что одно лишь изменение цвета кнопки призыва к действию способно увеличить конверсию сайта на 35%? Стоит ли располагать кнопку до линии сгиба или в конце страницы? Как поменять текст на кнопке, чтобы увеличить ее эффективность на 68%?
Мы собрали больше 10 интересных кейсов и исследований, и подготовили полное руководство о том, какой должна быть кнопка СТА, чтобы обеспечить высокую конверсию. Вы узнаете, что такое кнопки призыва к действию, как правильно их расставить на сайте, какими должны быть тексты и какой дизайн кнопок для сайта наиболее эффективен.
Начнем с теории.

Что такое кнопка CTA и какие 4 ключевые особенности нужно о ней знать

Кнопка призыва к действию (Call To Action или сокращенно CTA) — это графический элемент сайта, который побуждает пользователя совершить какое-то целевое действие. Например, зарегистрироваться, подписаться на новостную рассылку, купить, скачать, загрузить файл и т.п.

СТА

Кнопки призыва к действию бывают нескольких видов:

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

Выбирая СТА для своего сайта, вам нужно учесть как минимум 4 ключевых момента:

Где размещать кнопки;
Какой выбрать дизайн кнопок для сайта;
Что писать на кнопке, до и под ней;
Как часто использовать СТА на странице.

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

Где эффективнее размещать кнопку СТА

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

Когда стоит располагать кнопку СТА выше линии сгиба

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

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

6 правил, которые оправдывают размещение кнопки СТА до линии сгиба

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

Именно такую формулу вывели в Unbounce для эффективной работы СТА на первом развороте экрана.

Схема организации первого экрана, для эффективной работы СТА

Как расположение кнопки СТА в конце страницы может увеличить конверсию

В тех нишах, где нужно вызвать доверие у посетителя, дать ему больше информации «для переваривания» до принятия решения, лучше работают кнопки в конце страницы. Такие страницы следует строить по модели AIDA:

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

Кейс от ContentVerve доказал, что расположение СТА в конце страницы, а не вначале, может увеличить конверсию на 304%. Задача исследования заключалась в следующем: выяснить, какой вариант будет эффективнее: CTA выше линии сгиба или ниже.

На сайте просто переместили форму с кнопкой в конец лендинга, и подняли конверсию на 304%.

Из вышесказанного вытекают логические выводы:

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

KISSmetrics даже вывели диаграмму на этот счет, чтобы показать зависимость места размещения СТА от сложности продукта или услуги:

Чем проще продукт – тем раньше можно расположить кнопку. Чем сложнее – тем ниже она должна быть.

Каким должен быть эффективный дизайн кнопок для сайта

Чтобы выбрать правильный дизайн СТА, запомните 4 главных принципа:

Сделайте кнопку контрастной.

Дело тут не в цвете, а в том, чтобы кнопка была заметной на фоне остальных элементов страницы. При этом она может быть и желтой, и синей, и любой другой.
Вот любопытный кейс от компании RIPT Apparel. Они провели А/В тестирование кнопок CTA и сравнили эффективность черной неприметной кнопки и контрастной зеленой.

В результате после изменения цвета кнопки на зеленый конверсия сайта выросла на 6.3% .

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

В результате конверсия упала на 18,01%.

2. Кнопка должна быть похожей на кнопку

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

Читай также: Как добиться успеха в App Store?

В результате конверсия выросла на 35,81%.

3. Размер кнопки имеет значение.

Маленькую кнопку не заметят, слишком большая не будет принята за кнопку. Например, в этом примере увеличили кнопку и потеряли 10% конверсии.

Так что больше — не всегда лучше.

Вот еще один кейс, где изменение дизайна кнопки увеличило CTR на коммерческом сайте.

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

4. Используйте специальные элементы для привлечения внимания

Контрастные, привлекающие внимание стрелки, как в предыдущем примере, могут сработать вам на руку. А в этом кейсе, когда с кнопки убрали стрелку, конверсия упала на 12.29%.

Стрелка оказалась элементом, который привлекал внимание и делал кнопку заметнее.

5. Используйте негативное пространство

Сделать кнопку заметнее можно с помощью так называемого негативного (пустого) пространства вокруг этого элемента.
Хороший пример – домашняя страница Dropbox.

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

Что писать до кнопки, на ней и после нее

Изменение текста на кнопке может серьезно повлиять на конверсию.
В следующем примере, сравнили 2 кнопки СТА с разным текстом. Пользователь сайта по аренде помещений, который хотел получить больше информации об объекте, должен был кликнуть на СТА, чтобы получить подробности на почту. Было протестировано 2 варианта текста СТА: “Заказать информацию” и “Получить информацию”. Второй вариант сработал на 38,26% лучше.

Во втором варианте текст на кнопке более ясно давал понять, что произойдет после ее нажатия.

Вот еще один любопытный кейс с заменой кнопки на сайте со статьями. Незарегистрированным пользователям можно прочесть только часть эссе на сайте. Чтобы прочитать его полностью, нужно нажать кнопку и зарегистрироваться. В ходе эксперимента протестировали 2 варианта кнопок: “Прочитать эссе полностью сейчас” и “Получить мгновенный доступ сейчас.”

Конверсия первой кнопки оказалась на 39,03% выше, чем второй.

Первая кнопка передавала не только ценность, но и актуальность предложения. Именно это хотел сделать пользователь в момент прочтения эссе — дочитать его до конца.

Отсюда вывод: Текст на кнопке должен передавать не только ценность предложения, но и его релевантность.

Вот еще один пример о том, как более актуальный текст кнопки увеличил конверсию на сайте спортзала. Было протестировано 2 варианта надписей: “Получить членство клуба” и “Найти свой зал и получить членство”.

Вторая кнопка сработала лучше на 68%.

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

Заголовок с выгодой, которую хочет получить пользователь , подзаголовок с объяснениями, что произойдет при нажатии на кнопку, и кнопка СТА с четким предложением, — вот идеальная формула.

Чтобы привлечь внимание к СТА, можно также прибегнуть к дополнительным визуальным эффектам, например, использовать стрелки от текста над кнопкой к самой кнопке.

Здесь кратко перечислены преимущества сервиса. Далее с помощью стрелок взгляд пользователя направляется прямо к кнопке.

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

В этом примере основной текст на кнопке написан большим шрифтом “Бесплатный триал”. Мелким уточняется, что при этом кредитная карта не нужна. Этот ход нивелирует страх клиента «засветить» данные карты.

Как видите, для более высокой конверсии нужно выбирать текст кнопки, который:

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

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

Как часто расставлять кнопки СТА на сайте

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

На таком сайте так много элементов дизайна и кнопок, что невольно теряешься, куда нажимать.

На этом сайте так много элементов дизайна и кнопок, что невольно теряешься, куда нажимать.

Задайте пользователю на странице один конкретный путь и в конце предложите выполнить одно целевое действие. Если есть необходимость предложить несколько вариантов развития событий – сделайте акцент на одном, основном CTA. Остальные сделайте менее заметными.
Например, Reddit делает кнопку для регистрации более яркой, чем кнопку входа.

Переход на старую версию вообще еле заметен.

В следующем примере, акцент сделан на кнопку “Create a Wiki”, однако 2 другие кнопки также забирают на себя внимание.

Чем больше вариантов выбора вы даете пользователю, тем меньше вероятность, что он его сделает.

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

Изначально они предлагали посетителям скачать и купить свой продукт.

Затем — просто скачать бесплатно.

И это дало рост конверсии.

Чтобы не переусердствовать с СТА, следуйте простой формуле: одна высота экрана – один призыв к действию.

Если есть необходимость разместить несколько СТА, делайте основной более контрастным, а остальные менее заметными, например в виде ссылок, а не кнопок.

Насколько эффективны ваши кнопки CTA? Краткий чек-лист для проверки

Проверьте эффективность кнопок СТА на вашем сайте по этому чек-листу:

Есть ли СТА на первом экране? Если да, то соблюдаете ли вы 6 правил схемы организации такого экрана?
Заметна ли кнопка СТА на развороте страницы? Нет ли других элементов на странице, которые конкурируют с ней и могут увести от нее взгляд пользователя?
Говорит ли дизайн вашей кнопки о том, что она кликабельна? (изменение цвета при наведении курсора мыши, добавление тени и т.п.)
Передает ли СТА ценность вашего предложения?
Понятно ли пользователю по СТА, что произойдет после нажатия на кнопку?
Релевантен ли текст СТА ситуации?
Согласовывается ли текст перед кнопкой с надписью на ней?
Не отвлекают ли пользователя по пути к основному призыву к действию другие элементы или кнопки?
Есть ли у вас на странице несколько СТА с разным посылом? Выделена ли основная кнопка среди них?
Используете ли вы дополнительные элементы для привлечения внимания к кнопке?

Теперь вы знаете, как и где правильно расположить кнопку на сайте, какой выбрать эффективный дизайн и текст СТА.

Высокой вам конверсии!