Почему CTA решает всё
Кнопка целевого действия это последний барьер между посетителем и заявкой. Сколько бы хорошо ни были написаны тексты, если в момент готовности человек не нашёл кнопку или не понял, что на неё нажимать, все предыдущие усилия пропали.
По наблюдениям на лендингах РФ правильно спроектированная CTA-кнопка добавляет 20–40% к конверсии по сравнению с “нормальной но невыразительной”. Это вторая по влиянию точка оптимизации после заголовка первого экрана.
Ниже разобраны 5 параметров, которые определяют, работает кнопка или нет.
1. Текст на кнопке
Текст кнопки это микро-копирайтинг, который недооценивают. Надписи “отправить”, “заказать”, “узнать больше” работают плохо. Надписи, которые повторяют пользу или конкретизируют действие, работают сильнее на 15–30%.
Формула рабочего текста
Активный глагол в форме “я сделаю” плюс что именно получит клиент. Примеры:
- Вместо “Отправить” — “Отправить заявку на расчёт”.
- Вместо “Узнать цену” — “Получить смету за 15 минут”.
- Вместо “Подписаться” — “Получать разбор раз в неделю”.
- Вместо “Записаться” — “Записаться на бесплатный разбор”.
Ключ — снять неопределённость. Клиент должен понимать, что именно произойдёт после клика: получит звонок, попадёт в чат, увидит форму, подпишется.
Чего на кнопке быть не должно
- Слово “купить” для B2C-услуг с высоким чеком (ремонт, юрист, коуч). Слишком рано для слова “купить”, клиент ещё не готов.
- Длинные фразы из 5+ слов. Кнопка теряет читаемость, переносится на вторую строку.
- Вопросительная форма “Хотите записаться?”. Добавляет лишний шаг размышления.
- Многозначные глаголы “Смотреть подробнее” без уточнения, что именно там.
2. Цвет кнопки
Самый частый миф — что “красные кнопки конвертируют лучше”. Это неправда. Работает не сам цвет, а контраст кнопки с фоном и остальными элементами страницы.
Правила подбора цвета:
- Цвет кнопки контрастирует с основным фоном страницы.
- Цвет кнопки отличается от акцентных цветов остальных элементов (иконок, ссылок, заголовков).
- Цвет кнопки работает и в dark mode, и в light mode.
Рабочие сочетания
| Фон страницы | Цвет кнопки | Пример ниши |
|---|---|---|
| белый/светло-серый | насыщенный синий #1a4dff | B2B, услуги, стоматология |
| светло-синий | ярко-оранжевый #ff7a00 | барбершоп, авто, спорт |
| белый | ярко-зелёный #0ab678 | эко, здоровье, природа |
| тёмно-синий | жёлтый/золотистый #ffc233 | премиум, B2B, юр. услуги |
| чёрный/антрацит | яркий акцент (оранж, красный) | технологии, сервисы |
Контрастность проверяется инструментом WebAIM Contrast Checker. Минимальное соотношение 4,5:1, оптимальное 7:1. Это не просто про конверсию, это ещё и требование доступности.
3. Размер и пропорции
Минимальный размер кнопки — 48×48 пикселей. Это требование мобильного UX: пальцем в меньшую кнопку попасть сложно, будет промах.
Оптимум:
- Высота кнопки на мобильном — 54–64 пикселя.
- Высота кнопки на десктопе — 48–60 пикселей.
- Ширина кнопки — от 200 пикселей (для коротких текстов) до 340 (для длинных).
- Отступы внутри кнопки — 16 пикселей по горизонтали, 12–16 по вертикали.
- Скругление углов — 6–12 пикселей (слишком большое скругление превращает кнопку в “пилюлю”, слишком маленькое — в жёсткий прямоугольник).
Типовые ошибки с размером
- Слишком маленькая кнопка на мобильном. Человек промахивается, раздражается, уходит.
- Огромная кнопка в пол экрана. Выглядит нелепо, не передаёт профессионализм.
- Одинаковая кнопка и в десктопе, и в мобильном без адаптации. На десктопе смотрится нормально, на мобильном либо слишком большая, либо не попасть.
4. Расположение на странице
Кнопка повторяется на странице минимум 3 раза. Один раз — на первом экране без скролла. Один раз — в середине страницы (обычно после блока “как работаем” или “результат”). Один раз — в финальном CTA-блоке перед футером.
Для длинных лендингов (больше 10 блоков) кнопка повторяется 4–5 раз: первый экран, после 3-го блока, после блока гарантий, перед ценами, в финальном CTA.
Правило близости
Кнопка всегда находится рядом с релевантным контентом. Не после длинной простыни текста, а сразу после эмоционального пика: оффера, отзыва, блока с ценой.
Типовая последовательность:
- Оффер → кнопка.
- Процесс работы → кнопка (для тех, кто уже “понял, поехали”).
- Отзывы и кейсы → кнопка (для тех, кому хватило социальных доказательств).
- Цена → кнопка (для тех, кто дошёл до финала).
5. Количество кнопок рядом
Спорный вопрос для лендингов без формы. Пользователь хочет написать в Telegram, MAX, позвонить по телефону — какие кнопки показывать.
Лучшее решение — набор из 2–3 равноценных кнопок, все одинакового размера и веса. Цвет может отличаться (Telegram голубой, MAX фиолетовый, звонок зелёный), но кнопки одной высоты и расположены рядом.
Что точно не работает
- Одна главная большая и одна “вторичная” маленькая рядом. Пользователь выбирает между ними, теряет внимание.
- 5 кнопок подряд. Паралич выбора, ничто не нажимается.
- Кнопка целевого действия рядом с кнопкой “узнать подробнее”. Ослабляет основной CTA.
Таблица: как улучшить типовые кнопки
| Было | Стало | Прирост конверсии |
|---|---|---|
| Отправить | Получить расчёт за 15 минут | +25% |
| Узнать цену | Рассчитать стоимость ремонта | +20% |
| Записаться | Записаться на бесплатный разбор | +35% |
| Хотите узнать больше? | Показать программу курса | +18% |
| Купить | Оформить заказ с доставкой за 2 часа | +22% |
Замеры из реальных A/B-тестов на трафике 1 000+ визитов на вариант.
Чек-лист: проверка CTA на вашем лендинге
- Текст кнопки отвечает на вопрос “что произойдёт после клика”, а не просто “отправить”.
- Цвет кнопки контрастирует с фоном в соотношении минимум 4,5:1.
- Размер кнопки 48×48 пикселей и больше.
- Кнопка повторяется 3+ раза на странице.
- Первая кнопка видна на первом экране без скролла на мобильном.
- Нет “вторичных” кнопок рядом с главной.
- Клик по кнопке работает сразу, без задержки на загрузку JS.
- Есть визуальная реакция на нажатие (изменение цвета, лёгкая анимация).
- Кнопка не перекрывается другими элементами (чат, баннер cookies).
- Текст кнопки одинаков во всех повторениях на странице.
Частые ошибки с CTA
- Меняют текст кнопки на каждом повторении: на первом экране “Отправить заявку”, в середине “Узнать цену”, внизу “Записаться”. Размывает восприятие.
- Ставят кнопку только на первом экране. Кто не кликнул сразу, дальше уже не встретит кнопку до конца страницы.
- Делают кнопку цветом логотипа. Логотип и CTA должны быть разных цветов, иначе кнопка сливается с шапкой.
- Добавляют иконку стрелки внутрь кнопки. Отвлекает внимание, на сам текст смотрят хуже.
- Используют слишком полупрозрачные кнопки (opacity 70%). Выглядит “недокнопкой”, не нажимается с уверенностью.
Если сомневаетесь в текущей кнопке, проведите простой A/B-тест: на 50% трафика текст “Отправить”, на 50% “Получить расчёт за 15 минут”. Через 500 визитов на вариант разница будет заметна.
Короткий итог
CTA-кнопка это 20–40% конверсии. Текст важнее цвета, размер важнее формы, расположение важнее анимации. Первые три параметра — обязательные к отработке, остальное — тонкая настройка.
Самое простое улучшение, которое можно сделать за 5 минут: заменить “Отправить” на “Получить расчёт за 15 минут” во всех точках на лендинге. В 80% случаев это даёт прирост конверсии 15–25%, просто за счёт более понятного действия.
Проверьте свою главную кнопку сейчас: что на ней написано и ясно ли из текста, что именно произойдёт после клика. Если нет — есть что улучшить.
