Кнопки призыва к действию на лендинге: ТОП-7 ошибок + Инструкция по дизайну

Кнопка призыва к действию или cta-кнопка

Кнопка CTA (Call to action) — важный элемент лендинга, через который происходит первое взаимодействие посетителя с поставщиком. Ошибки с этим элементом могут привести к нулевой конверсии.

Формула cta-кнопки:
Активный глагол + Яркое оформление

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

Шкала стрессовости действий

Из шкалы видно, что получить каталог это легкий шаг, на который среагирует большинство людей.

Оформить заказ — сложный шаг, так как человек ещё не готов оставлять свои контакты и находится на стадии принятия решения (кроме интернет-магазинов).

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

Располагай кнопку без прокрутки в видимой области первого экрана. Помни, на сканирование лендинга у пользователя уходит порядка 3-х секунд — за это время он решает уйти, или остаться. Подробнее об этом я рассказал здесь.

Текст кнопки

Текст на cta кнопке показывает пользователю, что произойдет после нажатии на неё. Убедительный призыв побуждает к действию: короткий, ёмкий, актуальный и соблазнительный (например, «Получить бесплатный доступ»).

Призыв — Получить расчет

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

Дизайн кнопки на посадочной странице

Цвет кнопки

Кнопка должна быть контрастной, заметной на общем фоне, гармонично сочетаться со стилем твоего лендинга, объёмной, с эффектом анимации, чтобы привлекать внимание, и вызывать желание нажать.

Привлекательная, заметнная кнопка

Размер кнопки

Сделай кнопку большой, чтобы на неё можно было легко нажать, в том числе и на мобильных устройствах. Длину делай не больше половины экрана контентной области лендинга.

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

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

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

Форма кнопки

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

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

Количество кнопок

На одном экране используй максимум 2 кнопки. Выделяй приоритетное действие ярким фоном или обводкой, направляя внимание пользователя на нужное целевое действие.

Приоритетное действие — получить консультацию, оформлено правильно, но только более целевым здесь было бы — заявка на расчет

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

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

ТОП-7 ошибок при создании кнопки

1. Дублирование cta-кнопки по всей длине посадочной страницы. К примеру: получить консультацию повторяется на лендинге 5 раз, альтернативного призыва к действию нет. Все кнопки должны иметь разный призыв к действию.
2. «Слова-убийцы» в призыве к действию: отправить, купить, оформить, запросить; вызывают у человека чувства обязательств и неопределенности. Их лучше не использовать.
   

   Я первый раз зашёл на сайт и не готов покупать баню за 200 тыс.

3. Заголовок формы не соответствует call to action.
   

   Нет релевантности

4. Много слов в cta.
5. Сливающаяся, не выделяющаяся, маленькая или слишком большая, непривычной формы, которую плохо видно, такая кнопка принесёт 0 конверсий.
   

   Целый букет ошибок: cta сливается с фоном, с элементами дизайна

6. Элементы дизайна, похожие на кнопку: плашки, картинки, которые могут путать пользователя.
   

   Кнопка и заголовок в желтом цвете, на что кликать непонятно

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

   Нет контрастности, кнопку не видать

Как повысить конверсию с помощью кнопки?

• Бесстрессовый первый шаг. Не предлагаем нажать на кнопку «Заказать баню». Необходимо разработать нестрессовый следующий шаг, чтобы человек мог почувствовать полезность покупки, которую может упустить. Например: «тест-драйв» вашего продукта.
  • В услугах: выезд мастера, расчёт сметы;
  • В продаже физических товаров — тест-драйв продукта на 2 недели;
  • В сервисах — тестовый период.
• Даёт ценности на определенную сумму: скидка, лид-магнит, подарок, описание преимуществ, 3D визуализация проекта, расчет сметы, подбор материалов, прайс-лист. Важно: визуализация в виде книги, коробки, каталога —помогает физически представить получаемый бонус.
  

  Получить скидку 15 000 или подарок — кухонную вытяжку на выбор

• Ограничение по времени с помощью призыва: «Получить КП прямо сейчас», «Скидка 30% только сегодня». Если часто использовать бонусы и скидки — работать не будет.
• Тестируй креативные призывы к действию вместо «Оставить заявку», «Получить консультацию».
• Привлечение внимания с помощью анимации. Не переусердствуй, частое моргание кнопки отвлекает и раздражает.
• Побольше воздуха вокруг кнопки. Свободное пространство поможет акцентрировать внимание на призыве.
• Тестирование кнопок, изменяя дизайн, цвет и текст для получения конверсионного варианта.

Одна история

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

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

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

Коротко о главном

6 составляющих правильной кнопки:

1. Контрастная и яркая, привлекает внимание, но не отвлекает от изучения сайта;
2. Короткий призыв к действию в повелительном наклонении (заказать, получить) и не больше 3 слов;
3. Первый шаг, который несет ценность;
4. Текст на кнопке релевантен заголовку формы;
5. Вызывает желание кликнуть;
6. Не больше 2 кнопок в одном блоке (исключение: интернет-магазины).