Призыв к действию: кнопки, которые нажимают

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

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

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

Что такое призыв к действию

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

На одной странице может быть несколько призывов, и они различаются по важности:

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

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

Текст кнопки: конкретика против шаблонов

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

Сравните пары вариантов:

• «Отправить» — «Получить расчёт стоимости»;
• «Подробнее» — «Посмотреть планировки»;
• «Заказать» — «Заказать замер бесплатно»;
• «Регистрация» — «Начать пробный период»;
• «Скачать» — «Скачать каталог с ценами».

Во втором варианте человек понимает, что он получит, и это снижает неопределённость. Хорошее правило — чтобы текст кнопки продолжал фразу «Я хочу…».

При этом кнопка не должна превращаться в предложение из десяти слов. Оптимально — от двух до пяти слов. Если нужно добавить условие, лучше вынести его в короткую подпись рядом: «Бесплатно и без обязательств», «Ответим за 10 минут».

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

В проекте для клиники косметологии мы заменили на всех страницах кнопку «Записаться» на «Подобрать процедуру с врачом». Оказалось, что многие посетители не были уверены, какая процедура им нужна, и «Записаться» воспринималось как необходимость сразу выбрать. После замены число обращений через сайт выросло, а администраторам стало проще: люди сами указывали, что им нужна консультация.

Заметность: цвет, размер, контраст

Кнопка должна выделяться на фоне страницы, но не любой ценой. Популярный совет «сделайте кнопку красной» не работает сам по себе. Важен не цвет как таковой, а контраст с окружением.

Что влияет на заметность:

1. Контраст с фоном. Если сайт в оранжевых тонах, оранжевая кнопка потеряется. Нужен цвет, который не используется больше нигде на странице.
2. Размер. Основная кнопка должна быть крупнее второстепенных элементов. На мобильных — достаточной для уверенного нажатия пальцем.
3. Свободное пространство. Кнопка, окружённая воздухом, заметнее кнопки, зажатой между текстом и картинками.
4. Форма. Пользователи привыкли, что кнопка — это прямоугольник со скруглёнными углами или без. Слишком оригинальные формы могут не восприниматься как кликабельные.
5. Единообразие. Если основная кнопка на всех страницах выглядит одинаково, человек быстро учится её находить.

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

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

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

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

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

Ещё один момент — расстояние от кнопки до связанного с ней текста. Если кнопка «Выбрать тариф» стоит в отрыве от описания тарифа, человек не уверен, к чему она относится. Кнопка должна визуально принадлежать своему блоку.

Сколько кнопок должно быть на странице

Чем больше вариантов действий, тем сложнее выбрать. Если на первом экране пять разных кнопок — «Заказать», «Рассчитать», «Скачать», «Позвонить», «Подписаться» — внимание рассеивается, и часто человек не выбирает ничего.

Мы придерживаемся простого подхода:

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

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

Окружение кнопки: что снимает сомнения

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

Небольшие подписи рядом с кнопкой помогают снять эти опасения:

• «Бесплатно, без предоплаты»;
• «Перезвоним в течение 15 минут»;
• «Отменить можно в любой момент»;
• «Без регистрации»;
• «Ваши данные не передаются третьим лицам».

Кроме того, хорошо работает размещение рядом с кнопкой короткого элемента доверия: рейтинга, числа клиентов или отзыва. Он подкрепляет решение прямо в момент, когда человек колеблется.

Частые ошибки с призывами к действию

За годы работы над сайтами клиентов у нас накопился список ошибок, которые встречаются снова и снова:

1. Кнопка сливается с фоном или выглядит как обычный текст.
2. Некликабельные элементы оформлены как кнопки, а настоящие кнопки — как текст.
3. Текст кнопки не совпадает с тем, что происходит после нажатия: написано «Узнать цену», а открывается форма заявки без цены.
4. Кнопка на мобильных слишком мелкая или расположена вплотную к другой.
5. Основной призыв спрятан в конце страницы, и до него доходят немногие.
6. Кнопка ведёт на страницу, которая долго загружается или не работает.

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

Итоги

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

Проверьте свой сайт: пройдите по ключевым страницам и выпишите тексты всех кнопок. Если среди них много «Отправить» и «Подробнее», начните с переписывания. Затем проверьте, что основной призыв выделяется на каждом экране и работает на мобильных. Команда MediaFrukt проводит такие проверки в рамках юзабилити-аудита и помогает переработать призывы к действию на действующих сайтах без полного редизайна.