Зачем настраивать CTA-кнопки
CTA (Call to Action) — призыв к действию, который направляет пользователя к следующему шагу: оставить заявку, заказать звонок, добавить товар в корзину, записаться на консультацию. Каждая коммерческая страница без CTA — это тупик: пользователь прочитал информацию, но не понял, что делать дальше. Результат — он уходит.
CTA-кнопки напрямую влияют на конверсию и, как следствие, на поведенческие факторы ранжирования. Если пользователь совершает целевое действие (заполняет форму, звонит, добавляет в корзину) — это сигнал для Яндекса: сайт удовлетворил потребность. Если пользователь возвращается в выдачу — сигнал обратный.
По моему опыту, разница между хорошим и плохим CTA — это разница в 2-3 раза по конверсии. Кнопка «Отправить» в конце длинной формы без объяснения, что произойдёт после нажатия — это плохой CTA. Кнопка «Получить расчёт за 15 минут» рядом с описанием услуги — это хороший CTA. Формулировка, расположение и визуальное оформление решают.
Пошаговая инструкция
Шаг 1. Определите целевое действие для каждого типа страницы
Не все страницы требуют одинаковых CTA. Определите основное действие для каждого типа:
- Главная страница. CTA ведёт на ключевую услугу или каталог: «Смотреть услуги», «Получить консультацию», «Рассчитать стоимость». Главная — это маршрутизатор, CTA направляет трафик вглубь сайта.
- Страница услуги. Основной CTA: «Оставить заявку», «Заказать аудит», «Получить коммерческое предложение». Вторичный: «Задать вопрос», «Посмотреть кейсы». Пользователь пришёл на страницу конкретной услуги — он ближе к решению, CTA должен быть прямым.
- Карточка товара. «Добавить в корзину», «Купить в 1 клик». Кнопка должна быть в видимой области без прокрутки.
- Страница категории/каталога. CTA на уровне категории: «Подобрать товар», «Получить консультацию по выбору». На уровне карточек в каталоге: «Подробнее», «В корзину».
- Блог/статья. CTA после полезного контента: «Заказать эту услугу», «Получить бесплатную консультацию», «Подписаться на рассылку». Мягкий переход от информации к действию.
- Страница «О компании». «Связаться с нами», «Оставить заявку». Пользователь изучил компанию — предложите следующий шаг.
Шаг 2. Сформулируйте текст кнопки правильно
Текст CTA-кнопки — самый важный элемент. Плохая формулировка убивает конверсию:
- Не используйте «Отправить». Самая частая ошибка. «Отправить» не говорит, что произойдёт после нажатия. Пользователь не понимает: отправить что? Куда? Что я получу? Замените на конкретное действие: «Получить расчёт», «Заказать звонок», «Записаться».
- Используйте глагол действия. «Получить», «Заказать», «Скачать», «Записаться», «Рассчитать», «Узнать стоимость». Глагол показывает результат, который получит пользователь.
- Добавьте выгоду. «Получить расчёт бесплатно», «Заказать со скидкой 15%», «Записаться на бесплатную диагностику». Указание выгоды снижает барьер: пользователь понимает, что не рискует.
- Укажите временной ориентир. «Получить расчёт за 15 минут», «Ответим в течение часа». Это снимает неопределённость: пользователь знает, когда получит ответ.
- Избегайте агрессии. «КУПИТЬ СЕЙЧАС!!!» с тремя восклицательными знаками — это давление. «Оформить заказ» — нейтрально и понятно.
Примеры хороших формулировок:
- «Получить бесплатный расчёт» — вместо «Отправить»
- «Записаться на консультацию» — вместо «Заказать»
- «Скачать прайс-лист» — вместо «Скачать»
- «Узнать стоимость моего проекта» — вместо «Узнать цену»
- «Начать бесплатно» — вместо «Регистрация»
Шаг 3. Оформите кнопку визуально
CTA-кнопка должна быть визуально заметной и отличаться от остальных элементов на странице:
- Контраст. Цвет кнопки должен контрастировать с фоном страницы. Если фон белый — кнопка синяя, зелёная, оранжевая. Не серая на сером фоне, не голубая на голубом. Кнопка должна «цеплять взгляд» при беглом сканировании страницы.
- Размер. Достаточно крупная, чтобы быть заметной, но не настолько, чтобы выглядеть как баннер. На десктопе: минимум 200×50 пикселей для основного CTA. На мобильных: минимум 44×44 пикселя (рекомендация Apple и Google для touch-элементов), лучше — на всю ширину экрана.
- Отступы. Вокруг кнопки достаточно свободного пространства. Кнопка, зажатая между текстом и изображением, теряется. Воздух вокруг CTA привлекает внимание.
- Стиль. Скруглённые углы (border-radius: 4-8px) воспринимаются мягче, чем острые. Лёгкая тень (box-shadow) придаёт объём и ощущение кликабельности. Состояние hover (наведение) — затемнение или изменение цвета, чтобы пользователь понимал, что элемент интерактивен.
- Единообразие. Все CTA-кнопки на сайте — одного стиля: одинаковый цвет, одинаковая форма, одинаковый шрифт. Основной CTA — акцентный цвет. Вторичный CTA (менее приоритетный) — контур (outline) того же цвета.
Шаг 4. Расположите CTA в правильных местах
Расположение кнопки критически важно. Даже идеальная кнопка не работает, если пользователь её не видит:
- Above the fold. Основной CTA должен быть в первом экране — в видимой области без прокрутки. На десктопе это примерно 600-700 пикселей от верха страницы. На мобильных — первый экран при вертикальной ориентации.
- После описания услуги/товара. Пользователь прочитал описание — вот кнопка. Логичная последовательность: информация → CTA. Не заставляйте прокручивать 5 экранов до кнопки.
- Повторение CTA на длинных страницах. Если страница длинная (более 3 экранов), повторите CTA 2-3 раза: в начале, в середине, в конце. Пользователь может принять решение в любой момент — кнопка должна быть рядом.
- В шапке сайта (header). Кнопка «Заказать звонок» или «Оставить заявку» в шапке доступна с любой страницы. Это фиксированный CTA, который всегда под рукой.
- Sticky CTA на мобильных. На мобильных устройствах — фиксированная кнопка внизу экрана, которая остаётся видимой при прокрутке. Пользователь прокручивает страницу — кнопка «Позвонить» или «Оставить заявку» всегда доступна.
Шаг 5. Добавьте вспомогательные элементы вокруг CTA
Кнопка без контекста конвертирует хуже, чем кнопка с подкрепляющими элементами:
- Подзаголовок над кнопкой. «Получите бесплатный расчёт стоимости SEO-продвижения для вашего сайта» — объясняет, что произойдёт после клика. Пользователь понимает ценность действия.
- Снятие возражений под кнопкой. «Без обязательств», «Данные не передаются третьим лицам», «Ответим в течение 30 минут». Мелкий текст под кнопкой, который снимает тревогу.
- Социальное доказательство рядом с CTA. «Уже 300+ клиентов получили расчёт» или «Рейтинг 4.9 на основе 728 отзывов». Рядом с кнопкой — не на другом конце страницы.
- Иконка. Маленькая иконка телефонной трубки рядом с «Заказать звонок» или иконка калькулятора рядом с «Рассчитать стоимость». Визуальный якорь ускоряет восприятие.
Шаг 6. Проведите A/B-тестирование
Не угадывайте, какой CTA работает лучше — проверяйте:
- Что тестировать. Текст кнопки (два варианта формулировки), цвет кнопки, расположение на странице, наличие/отсутствие подзаголовка. Тестируйте один элемент за раз, иначе не поймёте, что повлияло на результат.
- Инструменты. Яндекс.Метрика позволяет проводить A/B-тесты без сторонних сервисов. Создайте две версии страницы (через JavaScript или серверную логику) и сравните конверсию через эксперименты в Метрике.
- Объём данных. Для статистически значимого результата нужно минимум 100 конверсий на каждый вариант. Если на страницу приходит 50 посетителей в день — тест займёт несколько недель. Не делайте выводы по 10 кликам.
- Фиксируйте результаты. Ведите таблицу A/B-тестов: что тестировали, когда, результаты, какой вариант победил. Это накопленная база знаний о том, что работает для вашей аудитории.
Типичные ошибки
- Кнопка «Отправить» на форме заявки. Универсально бесполезный текст. Пользователь не понимает, что отправляет и что получит. Замените на конкретное действие: «Получить расчёт», «Записаться на консультацию», «Отправить заявку — перезвоним за 15 минут».
- CTA не видно без прокрутки. Кнопка находится в конце длинной страницы. 60-70% пользователей не долистывают до конца. Разместите CTA в первом экране и повторите далее по странице.
- Кнопка сливается с фоном. Серая кнопка на сером фоне, синяя на синем. Если кнопку нужно «искать глазами» — она не работает. CTA должен быть визуально самым заметным элементом на странице после заголовка.
- Слишком много CTA. 5 разных кнопок на одном экране: «Купить», «В корзину», «Заказать звонок», «Получить скидку», «Подписаться». Пользователь теряется и не нажимает ни одну. Один экран — один основной CTA, максимум один вторичный.
- CTA без ценности. «Нажмите здесь» — а зачем? Что я получу? Текст кнопки должен объяснять выгоду действия, а не описывать механику (нажать, кликнуть, перейти).
- Одинаковые CTA на всех страницах. «Оставить заявку» и на странице услуги, и в блоге, и на странице «О нас». Адаптируйте CTA под контекст страницы. В блоге: «Заказать эту услугу». На странице «О нас»: «Обсудить проект».
- Маленькие кнопки на мобильных. На десктопе кнопка выглядит нормально, на мобильном — это крошечный элемент, в который сложно попасть пальцем. Минимальный размер touch-элемента — 44×44 пикселя.
- Отсутствие A/B-тестирования. CTA настроены по интуиции и не тестируются. Без данных вы не знаете, какая формулировка, какой цвет, какое расположение работают лучше для вашей аудитории.
Что проверить в итоге
- На каждой коммерческой странице есть CTA-кнопка с конкретным призывом к действию
- Нет кнопок с текстом «Отправить» — все формулировки конкретные и ценностные
- Основной CTA расположен в первом экране (above the fold)
- На длинных страницах CTA повторяется 2-3 раза
- Кнопка визуально контрастирует с фоном — заметна при беглом сканировании
- Размер кнопки достаточный: минимум 44×44 пикселя на мобильных
- Вокруг кнопки есть вспомогательные элементы: подзаголовок, снятие возражений
- В шапке сайта есть фиксированный CTA (кнопка «Заказать звонок» или аналог)
- На мобильных есть sticky-кнопка для быстрого действия
- CTA адаптирован под контекст каждого типа страницы
- Все CTA-кнопки на сайте стилистически единообразны
- Проведён хотя бы один A/B-тест формулировки или цвета CTA
