Как сформулировать призыв к действию и где разместить его на сайте

Призыв к действию — короткая фраза или кнопка, которая подсказывает посетителю следующий шаг: оставить заявку, купить или скачать бриф. Текст зависит от этапа воронки, место — от типа страницы. Для большинства экранов услуг я бы выбрал один главный CTA, а остальные переходы сделал вторичными. Ниже — формулы и карта размещения, которые можно применить к своему сайту.

Один главный призыв на экран

Посетителю проще понять страницу, когда на экране виден один приоритетный шаг: например, оставить заявку, купить или скачать бриф. В макетах такой элемент называют call to action, или CTA. Им может быть кнопка, ссылка, баннер или строка в письме. Я обычно выделяю одну кнопку, а остальные действия оставляю заметными, но менее весомыми.

У CTA три практические задачи: обозначить ожидаемое действие, помочь перейти от интереса к клику и направить внимание к форме, звонку или корзине.

Для студии главным шагом часто становится заявка, расчёт или созвон. В магазине это обычно добавление товара в корзину и оформление заказа. Если поставить «Оставить заявку» и «Купить» рядом с одинаковым визуальным весом, посетителю придётся разбираться, какой сценарий ему предлагают.

Это решение подходит не каждой странице. Если экран сравнивает два равноценных способа связи, например телефон и чат, можно показать оба — но ясно обозначить, что произойдёт после выбора каждого.

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

Рекомендация. Для услуги студии с длинным циклом предложите промежуточный шаг — бриф или расчёт. «Купить сейчас» здесь не подходит: посетителю ещё нужно обсудить задачу.

Как сформулировать текст

Начните с глагола и назовите результат клика. «Отправить» и «Подробнее» не объясняют, что случится дальше; «Получить расчёт» сообщает и действие, и ожидаемый результат. Формулировка зависит от этапа воронки: сначала уместны расчёт или бриф, ближе к сделке — звонок, покупка или оформление заказа.

Повелительное наклонение звучит как инструкция: «Получите расчёт». Первое лицо — как решение посетителя: «Хочу расчёт». Инфинитив подходит для нейтральной подписи: «Получить расчёт». Само по себе изменение глагола не гарантирует больше кликов: проверьте варианты на своей аудитории.

Свяжите текст кнопки с предложением над ней. Если заголовок обещает расчёт стоимости, кнопка должна вести к расчёту, а не в каталог. Срочность добавляйте, только когда срок или ограничение реальны. Иначе посетитель получит обещание, которое вы не сможете выполнить.

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

Формулы фраз под воронку

Собирайте CTA из действия и понятного результата. Для кнопки подойдут «Получить расчёт стоимости сайта» или «Заполнить бриф на проект». Для магазина — «Добавить в корзину», «Оформить заказ» или «Узнать о поступлении». «Купить в один клик» используйте, только если оформление действительно не требует дополнительных шагов.

Для горячего сценария предложите заявку, звонок или покупку. Для промежуточного — бриф, расчёт стоимости или консультацию. В контенте уместнее тёплый шаг: открыть кейс, скачать чек-лист или подписаться. Не ставьте призыв к заявке в первом абзаце статьи вместо полезного содержания.

Для B2B-студии чаще подходит промежуточный CTA: решение о проекте обычно требует вводных и обсуждения. На странице товара, напротив, «Заполнить бриф» отвлекает от покупки и звучит чужим языком. Выбирайте формулу по задаче страницы, а не по списку «сильных слов».

Сначала назовите, что посетитель получит. Затем — какое действие нужно сделать.

Карта размещения по страницам

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

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

Правило «выше линии сгиба» не заменяет проверку конкретного сайта. Если первый экран не объясняет услугу, кнопка сама по себе проблему не решит. Сначала приведите в порядок предложение, затем проверяйте расположение CTA.

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

Кнопка как объект UX

Кнопка должна быть удобной для нажатия и заметной на фоне соседних элементов. Сверяйте размер зоны нажатия с рекомендациями Apple Human Interface Guidelines, а контраст текста — с критериями WCAG. Уменьшать кнопку до тех пор, пока она едва помещается в макет, не стоит: на телефоне по ней будет сложнее попасть.

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

Кнопка, ссылка, баннер и анимация — разные способы показать одно действие. Анимация может привлечь взгляд, но CTA должен оставаться понятным и без движения. Мигание не исправит слабый контраст.

При приёмке проверьте, что зона нажатия соответствует рекомендациям платформы, а контраст текста проходит проверку по WCAG. Убедитесь, что соседние элементы не мешают клику, мобильная панель не закрывает содержание, а подпись обещает результат. Отдельно проверьте состояния наведения, фокуса и недоступной кнопки: посетитель должен различать их.

Когда действие легко нажать и прочитать, уже можно обсуждать цвет.

Микрокопи вокруг кнопки

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

Укажите срок ответа, который команда действительно соблюдает. Например, обещание ответить в рабочий день подходит только в том случае, если вы можете его выполнить. «Заполнить бриф» подразумевает, что посетитель подготовит вводные; «Получить расчёт» — что ему сообщат стоимость; «Заказать консультацию» — что предстоит разговор. Текст кнопки и следующий шаг должны совпадать.

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

На сайте на 1С-Битрикс проверьте, что форма, письмо-подтверждение и статус заявки используют понятные посетителю формулировки. Тогда человеку яснее, что обращение отправлено и какой шаг будет следующим.

Кнопка называет действие, строка под ней объясняет, сколько времени оно займёт и что произойдёт дальше.

Как измерить, работает ли CTA

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

Чужие средние показатели нельзя переносить на сайт без учёта его аудитории и сценария. Попап с предложением подписки может отвлечь человека от покупки, особенно если появляется снова во время оформления. Проверяйте, что происходит у вас, вместо того чтобы назначать частоту показов «нормой рынка».

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

Если посещений достаточно, запишите гипотезу одним предложением. Оставьте без изменений все элементы, кроме тестируемого; считайте заявки или покупки и отказы на пути к ним. Заранее решите, какой результат приведёт к выбору варианта, а какой — к продолжению наблюдения.

Цвет имеет смысл сравнивать, когда текст, место и целевая страница уже согласованы. Иначе тест измеряет сразу несколько проблем.

Если первые три пункта не сходятся, начните с правки шага и подписи. Подберите цвет после этого.

Пришлите структуру страниц, если хотите проверить, где поставить главный и вторичный призыв и что написать на кнопках.

Источники

• Web Content Accessibility Guidelines (WCAG) 2.1 — русская редакция рекомендации W3C