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

Что такое призыв к действию и почему он так важен

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

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

Хороший призыв к действию отвечает на три вопроса посетителя:

1. Что мне сделать? — кнопка заметна и однозначно выглядит как кнопка.
2. Что я получу? — текст объясняет результат действия.
3. Почему сейчас и почему это безопасно? — рядом есть аргумент или снятие опасений.

Текст кнопки: глагол и результат

Текст на кнопке — самое недооценённое место на сайте. Его пишут в последний момент, а он влияет на решение напрямую.

Используйте глагол действия. Кнопка — это команда. «Рассчитать стоимость», «Записаться на приём», «Получить каталог», «Добавить в корзину». Существительные вроде «Заявка» или «Отправка» читаются хуже.

Описывайте результат, а не процесс. «Отправить» говорит о том, что сделает сайт. «Получить расчёт» — о том, что получит человек. Второе мотивирует сильнее.

Будьте конкретны. Сравните:

Пишите коротко. Обычно два-четыре слова. Если нужно больше пояснений, вынесите их в подпись под кнопкой: «Перезвоним в течение 15 минут», «Без предоплаты», «Ответим в мессенджере».

Снижайте ощущение обязательства. «Купить» пугает сильнее, чем «Добавить в корзину». «Заказать услугу» — сильнее, чем «Узнать стоимость». На первом контакте человек охотнее делает небольшой шаг.

Говорите от лица пользователя или к нему — но последовательно. Варианты «Получить консультацию» и «Получите консультацию» оба допустимы, главное — не смешивать стили на одной странице.

Визуальное оформление: кнопка должна выглядеть как кнопка

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

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

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

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

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

Отступы. Вокруг кнопки нужен воздух. Кнопка, зажатая между текстом и картинкой, теряется.

Совет: сделайте «тест прищура» — отойдите от экрана или прищурьтесь так, чтобы детали размылись. Если главную кнопку по-прежнему видно, она оформлена правильно.

Иерархия кнопок: главное и второстепенное

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

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

Второстепенная кнопка — альтернативное действие: «Посмотреть примеры», «Узнать подробнее», «Задать вопрос». Оформляется сдержаннее: контурная кнопка или кнопка с бледной заливкой.

Третичные действия — ссылки текстом: «Отменить», «Вернуться назад», «Условия доставки».

Распространённая ошибка — две одинаково яркие кнопки рядом: «Купить» и «В избранное», «Заказать звонок» и «Задать вопрос». Посетитель не понимает, что важнее, и в итоге может не нажать ни одну. Выберите главное и визуально подчеркните именно его.

Пример для карточки товара:

• основная: «Добавить в корзину»;
• второстепенная: «Купить в один клик»;
• третичные: «В избранное», «Сравнить» — иконками или ссылками.

Где размещать кнопки на странице

Расположение призывов зависит от длины страницы и того, насколько готов посетитель к решению.

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

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

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

Закреплённые элементы. На длинных страницах и в мобильной версии хорошо работает кнопка, которая остаётся видимой при прокрутке: в шапке или внизу экрана. Главное, чтобы она не перекрывала контент.

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

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

Состояния кнопки и обратная связь

Кнопка — интерактивный элемент, и она должна реагировать на действия пользователя. Дизайнер должен продумать все её состояния, а не только «как она выглядит в покое».

• Обычное — базовый вид.
• Наведение — на компьютере кнопка слегка меняет цвет или тень, подтверждая, что она кликабельна.
• Нажатие — короткая визуальная реакция в момент касания, особенно важная на телефоне.
• Фокус — видимая обводка при навигации с клавиатуры. Без неё сайтом невозможно пользоваться без мыши.
• Неактивное — кнопка недоступна, например, пока не заполнены обязательные поля. Должно быть понятно, почему: подсказка рядом объясняет, что нужно сделать.
• Загрузка — после нажатия кнопка показывает индикатор и блокируется от повторных нажатий. Без этого люди нажимают несколько раз и отправляют дубликаты заявок.
• Успех — после выполнения действия появляется понятное подтверждение: «Заявка отправлена, перезвоним в течение 15 минут».

Отсутствие обратной связи — одна из частых причин, по которым люди считают, что сайт «не работает», и уходят.

Что ставить рядом с кнопкой

Сам по себе призыв часто недостаточен. Небольшие элементы рядом снимают сомнения в самый важный момент.

• Уточнение результата: «Пришлём расчёт на почту и в мессенджер».
• Снятие рисков: «Бесплатно и ни к чему не обязывает», «Без предоплаты», «Можно отменить в любой момент».
• Сроки: «Перезвоним в течение 15 минут в рабочее время».
• Социальное доказательство: короткая строка о том, что услуга востребована, — без выдуманных цифр.
• Конфиденциальность: короткая пометка, что данные не передаются третьим лицам, и согласие на обработку персональных данных — это ещё и требование закона.

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

Как проверять эффективность кнопок

Оформление кнопок — не вопрос вкуса, а вопрос измерений.

1. Настройте цели в Яндекс Метрике. Отслеживайте нажатия на ключевые кнопки и успешные отправки форм отдельно. Разница между ними покажет, где люди отказываются: до кнопки или уже в форме.
2. Смотрите карту кликов и Вебвизор. Видно, нажимают ли на кнопку, не кликают ли по некликабельным элементам, похожим на кнопки, и наоборот.
3. Анализируйте карту скроллинга. Если до блока с главной кнопкой доходит небольшая часть посетителей, её нужно продублировать выше.
4. Сравнивайте устройства. Если конверсия на мобильных заметно ниже, проверьте размер и доступность кнопок на телефоне.
5. Проводите A/B-тесты. Меняйте одну вещь за раз: текст, цвет, расположение, подпись. Тест имеет смысл при достаточном трафике, иначе результат будет случайным.

Мы в КомРА обычно начинаем с самых простых улучшений — понятного текста, заметности и правильного размера на мобильных. Они почти всегда дают эффект без сложных экспериментов.

Типичные ошибки

• Безликие тексты. «Отправить», «Подробнее», «Нажмите здесь» вместо конкретного результата.
• Слишком много равнозначных кнопок. Пять ярких кнопок на одном экране — значит, ни одной главной.
• Кнопка не похожа на кнопку. Текст без фона, бледная рамка, цвет, совпадающий с декоративными элементами.
• Декор, похожий на кнопку. Яркие плашки и бейджи, на которые хочется нажать, но ничего не происходит.
• Мелкие кнопки на телефоне. Особенно опасны маленькие крестики и кнопки, стоящие вплотную друг к другу.
• Нет реакции после нажатия. Человек не понимает, отправилась ли заявка.
• Призыв без контекста. Кнопка «Заказать» стоит до того, как человек вообще понял, что и за сколько ему предлагают.
• Агрессивное давление. Таймеры обратного отсчёта, которые перезапускаются при обновлении страницы, и формулировки вроде «Нет, я не хочу экономить» раздражают и подрывают доверие.

Итог

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

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

• текст кнопки — глагол плюс понятный результат, коротко и конкретно;
• кнопка должна выглядеть кнопкой: контраст, размер, отступы;
• на каждом экране — одно главное действие, остальные визуально скромнее;
• повторяйте призыв там, где у посетителя созревает решение;
• продумайте все состояния: наведение, фокус, загрузку, успех;
• снимайте сомнения подписью рядом с кнопкой;
• измеряйте нажатия и отправки в Метрике и улучшайте по данным.

Хорошо оформленный призыв к действию не давит и не уговаривает — он просто делает следующий шаг очевидным и лёгким.