Хорошая кнопка не удивляет человека – она объясняет, что произойдёт после клика
«Заказать», «Получить расчёт», «Посмотреть каталог» и «Записаться» могут быть отличными CTA, если соответствуют реальному следующему шагу. Проблема начинается не с шаблонности, а с непонятного или преждевременного действия.
CTA LAB
CTA – это переход от убеждения к следующему действию
Кнопка не должна самостоятельно продавать весь продукт. Она завершает конкретный смысловой блок и предлагает человеку понятный способ продолжить путь.
USER FLOW
Понял предложение
Получил аргументы
Решил продолжить
Понимает, куда нажать
Кнопка не исправляет слабое предложение
Если посетителю непонятна услуга, не хватает цены, условий, доказательств или ответа на важный вопрос, замена «Заказать» на более эмоциональную формулировку не решит основную проблему страницы.
ПРИНЦИП 01
Сначала определите действие – потом пишите текст кнопки
Частая ошибка – сначала придумывать эффектную подпись, а потом решать, куда она будет вести. Правильнее начать с действия пользователя.
ВОПРОС
Что человек должен сделать?
ДЕЙСТВИЕ
Отправить заявку
РЕЗУЛЬТАТ
Получить расчёт
CTA
Получить расчёт
ACTION → RESULT
Иногда лучше назвать действие, а иногда – результат
ДЕЙСТВИЕ
«Отправить заявку»
Хорошо, когда человеку важно понимать сам процесс.
РЕЗУЛЬТАТ
«Получить расчёт»
Хорошо, когда результат клика действительно понятен и будет получен.
«Заказать» – не плохая кнопка только потому, что она стандартная
Привычная формулировка иногда лучше креативной, если она точно соответствует намерению пользователя. CTA не должен превращаться в загадку, которую нужно расшифровать перед кликом.
MICROCOPY WORKBENCH
Формулировка зависит от того, что находится за кнопкой
ФОРМА ЗАЯВКИ
Оставить заявку
КАТАЛОГ
Посмотреть каталог
РАСЧЁТ
Получить расчёт
КОНСУЛЬТАЦИЯ
Задать вопрос
ПОКУПКА
Оформить заказ
Один и тот же CTA может быть уместен в одном месте и преждевременен в другом
Призыв должен соответствовать тому, сколько информации человек уже получил. На первом экране сложной B2B-услуги пользователю иногда проще «Посмотреть условия» или «Получить консультацию», чем сразу «Оформить заказ».
РАННИЙ ЭТАП
Изучить → сравнить → уточнить
СЕРЕДИНА
Посмотреть условия → получить расчёт
ГОТОВ К ДЕЙСТВИЮ
Заказать → записаться → оформить
CTA завершает аргументацию, но не заменяет её
BUTTON ANATOMY
Кнопка состоит не только из текста
CTA COMPONENT
Получить расчёт
Понятно описывает действие или ожидаемый результат.
Кнопка визуально отделяется от фона и соседних элементов.
Элемент удобно заметить и нажать, в том числе на телефоне.
Рядом находится информация, объясняющая, зачем нажимать.
Пользователь понимает, что элемент интерактивный и что происходит после взаимодействия.
Нет универсального «самого конверсионного» цвета кнопки
Красная, зелёная, синяя или оранжевая кнопка может работать хорошо или плохо в зависимости от окружающего дизайна. Важнее визуальный контраст, иерархия и единообразие интерфейса.
СЛАБЫЙ ПОДХОД
«Сделаем кнопку красной, потому что красный продаёт»
ПРАКТИЧНЕЕ
«Как сделать основное действие заметным внутри этого дизайна?»
PRIMARY / SECONDARY
Если действий несколько, покажите их приоритет
Две одинаково яркие кнопки заставляют пользователя самостоятельно определять, какая из них главная. Иногда это оправданно, но чаще полезно визуально разделить основное и дополнительное действие.
ПРИМЕР ИЕРАРХИИ
Первичное действие визуально сильнее. Второе остаётся доступным, но не конкурирует с ним.
CTA PLACEMENT MAP
CTA ставят там, где у пользователя появляется причина продолжить
ПЕРВЫЙ ЭКРАН
Быстрое действие для уже мотивированного посетителя
ПОСЛЕ КЛЮЧЕВОГО БЛОКА
Действие после объяснения предложения
ПОСЛЕ ДОКАЗАТЕЛЬСТВ
Действие после кейсов, условий или ответов на сомнения
ФИНАЛ
Ясное завершение страницы
Повтор CTA на длинной странице сам по себе не является ошибкой
Если пользователь прошёл значимый смысловой блок и уже может принять решение, повтор основного действия способен упростить маршрут. Но кнопки не нужно ставить после каждого абзаца только ради частоты.
Иногда важнее текст рядом с кнопкой, чем сама надпись на ней
Короткий CTA физически не способен объяснить все условия. Эту работу может взять микротекст рядом: что произойдёт после отправки формы, какие данные нужны, есть ли обязательства или какой следующий этап.
Получите предварительный расчёт проекта
Опишите задачу. После получения данных можно будет уточнить объём работ.
Переход ведёт к форме с описанием проекта
Если CTA является частью полноценного лендинга, его нужно оценивать вместе с предыдущими экранами и аргументацией – как строится текст лендинга →
НЕ ОБМАНЫВАТЬ КЛИКОМ
Текст кнопки должен совпадать с тем, что происходит после нажатия
Если кнопка обещает «Получить расчёт», а после клика пользователь попадает на обычную страницу контактов без расчёта или пояснения процесса, CTA создаёт ложное ожидание.
КНОПКА
«Скачать прайс»
ПОСЛЕ КЛИКА
Форма «Оставьте телефон, мы перезвоним»
У формы есть два разных CTA: вход в форму и её отправка
Кнопка «Получить консультацию» может открывать форму. Но внутри самой формы человеку уже понятнее другое действие – например, «Отправить вопрос». Не обязательно использовать одинаковую подпись на каждом этапе.
Получить консультацию
Имя · контакты · вопрос
Отправить вопрос
MOBILE CHECK
Кнопку обязательно проверяют на мобильном экране
Хороший CTA на десктопе может оказаться неудобным на телефоне: длинная подпись переносится, соседние элементы мешают нажатию, кнопка уходит слишком далеко вниз или теряется среди других акцентов.
Рассчитаем стоимость проекта
Опишите задачу и необходимые страницы.
HTML SEMANTICS
Не каждый визуальный CTA технически должен быть одним и тем же элементом
Если элемент переводит пользователя на другую страницу, для него логична обычная ссылка. Если он выполняет действие внутри интерфейса – например, отправляет форму – обычно используется кнопка.
НАВИГАЦИЯ
<a href=»…»>Посмотреть каталог</a>
ДЕЙСТВИЕ
<button type=»submit»>Отправить заявку</button>
Не маскируйте CTA под обычный текст
Основное действие должно выглядеть интерактивным. Если человеку приходится угадывать, что маленькая надпись является кнопкой или ссылкой, дизайн усложняет маршрут вместо того, чтобы его объяснять.
Не каждую внутреннюю ссылку нужно превращать в большую CTA-кнопку
В статье обычная контекстная ссылка может быть естественнее огромного коммерческого блока. Визуально сильный CTA нужен там, где действие действительно является приоритетным.
Продолжить изучение темы
Второстепенный навигационный переход.
Выполнить главное действие
Коммерческий или функциональный следующий шаг.
Если проблема шире одной кнопки и пользователь вообще с трудом ориентируется на странице, нужен уже другой уровень проверки – самостоятельный аудит юзабилити сайта →
CTA не должен скрывать цену действия
Если после клика требуется регистрация, отправка контактных данных, оплата или другой существенный шаг, интерфейс не должен создавать ложное впечатление, будто человек просто откроет дополнительную информацию.
«Продолжить»
Что именно произойдёт дальше?
«Перейти к оформлению»
Следующий этап назван прямо.
A/B TEST
Тестируйте гипотезу, а не просто цвет или одно слово
Осмысленный тест начинается с причины изменения. Например: пользователю непонятно, что он получит после отправки формы. Тогда можно сравнить общий CTA с более конкретным.
Пользователю неясен результат клика
Отправить
Получить расчёт
Смотрим не только клики, но и дальнейшее целевое действие
Больше кликов по CTA ещё не обязательно означает лучший вариант
Если новая формулировка привлекает больше нажатий, но приводит к менее качественным обращениям или увеличивает число отказов на следующем этапе, оценивать нужно весь маршрут, а не только CTR кнопки.
CTA DIAGNOSTICS
Что проверять, если по кнопке почти не нажимают
Пользователь вообще видит кнопку?
Понимает, что произойдёт после клика?
Есть ли перед CTA достаточная причина действовать?
Не слишком ли велик следующий шаг?
Соответствует ли CTA текущей стадии выбора?
Что меняем по сравнению со старым подходом к CTA
«Заказать» и «Подписаться» слишком шаблонны – нужно придумать что-нибудь креативное
Сначала определяем реальный следующий шаг пользователя
Пишем самый понятный CTA для этого действия, даже если формулировка кажется привычной
Кнопка работает внутри общей архитектуры страницы
ОШИБКИ CTA
10 причин, почему призыв к действию мешает странице
CTA CHECK
Чек-лист кнопки призыва к действию
Понятно, какое действие предлагает кнопка.
CTA соответствует стадии выбора пользователя.
Перед кнопкой есть достаточный контекст.
Текст не обещает то, чего не будет после клика.
Основное действие визуально отличается от второстепенных.
Кнопка выглядит интерактивной.
Элемент удобно использовать на мобильном устройстве.
Повтор CTA имеет смысловую причину.
Для теста сформулирована конкретная гипотеза.
До клика пользователь понимает, что примерно произойдёт после него.
Частые вопросы
Что такое CTA-кнопка?
Это визуально выделенный элемент, предлагающий пользователю выполнить следующее действие: отправить заявку, оформить заказ, перейти в каталог, записаться, получить расчёт или продолжить маршрут другим способом.
Что написать на кнопке сайта?
Формулировка должна соответствовать реальному действию или понятному результату: «Оформить заказ», «Получить расчёт», «Посмотреть каталог», «Отправить вопрос». Не нужно делать CTA оригинальным только ради оригинальности.
Какого цвета должна быть CTA-кнопка?
Универсального лучшего цвета нет. Важнее, чтобы основное действие было хорошо различимо в конкретном дизайне и сохраняло понятную визуальную иерархию.
Где разместить кнопку призыва к действию?
Там, где у пользователя уже есть основание выполнить предложенное действие. На длинной странице CTA может повторяться после значимых смысловых блоков.
Нужно ли придумывать необычный текст кнопки?
Нет. Если привычная формулировка максимально точно описывает действие, её можно использовать. Непонятная креативность ухудшает навигацию.
Нужно ли повторять CTA несколько раз?
На длинной странице это допустимо, если повтор появляется после блока, способного изменить готовность пользователя к действию. Механическое размещение кнопок через одинаковые интервалы не требуется.
Как тестировать CTA?
Сначала сформулируйте проблему и гипотезу, затем измените конкретный элемент и оценивайте не только клики, но и дальнейшие целевые действия пользователя.
ИТОГ
Не заставляйте кнопку «продавать» – заставьте её ясно продолжать страницу
Определите следующий шаг пользователя, подберите понятный текст, обеспечьте визуальный приоритет, поставьте CTA после достаточной аргументации, проверьте мобильную версию и оценивайте не только клик, но и то, что происходит дальше.