CTA кнопка: она провоцирует меня!

Под понятием «СТА-кнопка» подразумевают кнопку действия на странице сайта или рекламного поста, которую пользователь должен нажать по мнению создателей. Обычно это такие кнопки как «купить», «заказать», «узнать подробнее» и так далее.

СТА элементы – это элементы, сопутствующие последовательности действий, которые ведут к целевой конверсии. Поля для ввода, выбора значения, сама форма сбора контактных данных – примеры таких элементов.

Представим: вы закупаете трафик и направляете его на лендинг.

В данном случае лендинг выполняет три самых важных функции:

• Привлекает внимание ваших пользователей
• Объясняет, чем продукт или услуга полезны для них
• Превращает посетителей в покупателей

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

Заголовки лендинга привлекают внимание аудитории. Текст разъясняет особенности вашего продукта. Форма обратной связи помогает получить информацию о посетителях. Но именно СТА кнопка дает конверсии.

Дело в том, что ваши посетители не будут кликать на любую первую попавшуюся кнопку. Они нажмут лишь на эффективную СТА кнопку. Эта кнопка должна не просто привлекать внимание — она должна сообщать точно, что именно получит клиент, если нажмет на нее.

Кнопки СТА могут быть не только на лендингах, но и в рекламных постах таких социальных сетей как Facebook, Instagram, с недавних пор ВКонтакте и рекламной платформе MyTarget.

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

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

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

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

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

Рассмотрим основные рекомендации по правильной работе с СТА кнопками на ваших сайтах/лендингах.

Представим среднестатистического посетителя сайта. Его интересует решение своей проблемы и он находится в поисках идеального предложения. Когда клиент оказывается на сайте, нужно успеть направить его в «правильное русло» как можно скорее. Не надо заставлять его разгадывать ментальные ребусы, чтобы понять где и как осуществить заказ.

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

Расположение кнопки

Согласно статистике, до 50% пользователей сайта не скроллят страницу вниз. Они могут изучить «первый экран» и сразу закрыть окно. Располагая кнопку действия на втором экране, мы увеличиваем шансы на ее неэффективность. Дайте возможность своим клиентам увидеть кнопку и совершить целевое действие при первом контакте с сайтом.

Традиционно, место CTA кнопки справа, потому как люди обычно читают информацию слева направо.

На сайте Nike с расположением кнопки СТA все в порядке

Размер и цвет кнопки

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

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

Контрастный цвет СТА кнопки сразу дает понять кто здесь главный!

Текст кнопки

Правильный текст в СТА кнопке должен отражать и конкретизировать действие. А также содержать призыв, не быть нейтральным. И по возможности, включать эмпатию (положить в мою корзину, купи меня и тд.)

Сомнительный призыв к действию.

Форма

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

Интерактивность кнопки

Различные красивые эффекты с кнопкой, дополнительная анимация и всплывающие подсказки – все это действительно работает. Если кнопка выпуклая, при нажатии  на нее можно показать, как она красиво «вдавливается», и этот маленький нюанс также повышает ее эффективность. Поэтому, объемные кнопки с тенью, обычно предпочтительнее плоских.

Нет текста с призывом, сомнительные форма и расположение

Повторение кнопки

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

Повторная форма заявки и кнопка СТА в последнем блоке лендинга

Качество исполнения

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

Качество дизайна и исполнение кнопок вызывают подозрение, что на дизайнере сэкономили

Взаимосвязь с другими кнопками и сайтом

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

Добавить в корзину или купить в 1 клик? Сомнения по поводу спеццены и расхождения с суммой возле кнопки. Пойду поищу куртку там, где все однозначно

Вывод:

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

Используйте кнопку призыва к действию – не оставьте потенциальным клиентам шансов сбежать.

Всем успехов в работе! Не забудьте сохранить эту ссылку у себя на странице или в закладках.