Маркетолог меняет заголовок лендинга, добавляет отзывы, переписывает оффер третий раз подряд, а заявки не растут. Иногда причина прячется в одном маленьком элементе, до которого руки доходят последними: в кнопке лендинга, то есть в кнопке призыва к действию. Она занимает меньше процента площади экрана, но именно на неё смотрит взгляд в момент, когда человек решает, остаться или уйти.
Кнопки лендинга часто делают по шаблону: синий прямоугольник с надписью «Отправить» или «Узнать больше». Такой CTA не мешает, но и не помогает: он нейтрален там, где должен подталкивать к действию. Цвет, текст и место кнопки работают как три отдельных рычага, и каждый можно улучшить без переделки всего макета.
Ниже разбираем кнопку изолированно от остальной структуры страницы: что влияет на клик, какие формулировки работают лучше шаблонных и куда кнопку ставить, чтобы её не пропустили.
Почему кнопка решает больше, чем кажется
Представьте лендинг без кнопки вовсе: заголовок, выгоды, отзывы, калькулятор, а дальше тишина. Сколько бы усилий ни вложили в текст, конверсии не будет, потому что нет точки, куда направить решение читателя. Кнопка не украшение страницы, а единственный выход из сценария «просмотрел и закрыл вкладку».
Весь лендинг существует для одной цели: подвести человека к клику по кнопке. Заголовок объясняет, что вы предлагаете. Блок с выгодами снимает сомнения. Отзывы добавляют доверия. Но ни один из этих блоков не конвертирует сам по себе: они только зарабатывают право показать кнопку в момент, когда читатель готов нажать.
Если кнопка теряется на фоне, написана неясно или стоит не там, где заканчивается аргумент, вся предыдущая работа страницы обесценивается. Поэтому кнопку стоит проектировать не как финальный штрих дизайна, а как отдельный элемент со своими требованиями к цвету, тексту и месту. Порядок блоков и общую структуру страницы разбирали в статье про сборку макета лендинга, а здесь фокус только на кнопке.
Цвет кнопки лендинга: что влияет на клик на самом деле
Популярный миф: существует волшебный цвет кнопки, который конвертирует лучше остальных. На практике работает не конкретный оттенок, а контраст между кнопкой и фоном. Кнопка в цвете, который совпадает или близок к основной палитре сайта, растворяется в интерфейсе, даже если сама по себе выглядит аккуратно.
Рабочий подход: выбрать один акцентный цвет, который не встречается больше нигде на странице, кроме призыва к действию. Если фирменный цвет бренда уже насыщенный и часто используется в оформлении, для кнопки лучше взять контрастный оттенок, а не повторять фирменный. Тогда взгляд цепляется за кнопку автоматически, без усилий со стороны пользователя.
Ошибка, которая встречается чаще остальных: кнопка того же цвета, что ссылки в тексте, или светлая кнопка на светлом фоне ради воздуха в дизайне. В обоих случаях страница выглядит аккуратно, но кнопка перестаёт выделяться.
Стоит учитывать и людей с нарушением цветового восприятия: если кнопка отличается от фона только оттенком без разницы в яркости, часть аудитории её не заметит вовсе. Проверить это просто: превратить скрин страницы в чёрно белый и посмотреть, виден ли контур кнопки. Ориентир здесь есть: стандарт доступности WCAG требует контраст не менее 3 к 1 между элементом интерфейса, таким как кнопка, и соседним фоном, и это разумная планка даже для коммерческого лендинга, а не только для сайтов с обязательными требованиями доступности.
Стоит проверить цвет кнопки не только на экране дизайнера, но и на телефоне при ярком солнечном свете: то, что выглядит контрастным в тёмной комнате, на улице легко слить с фоном.
Текст на кнопке: слова, которые ведут к клику
Глагол на кнопке задаёт ожидание. «Отправить» звучит как обязательство, «Купить» подходит только тем, кто уже принял решение, а «Узнать больше» слишком размыто и не обещает конкретной выгоды. Лучше работают формулировки, которые называют результат: что человек получит сразу после клика.
- Вместо «Отправить»: «Получить расчёт стоимости»
- Вместо «Купить»: «Оформить заказ со скидкой»
- Вместо «Узнать больше»: «Посмотреть примеры работ»
- Вместо «Подписаться»: «Получать разборы на почту»
Второй момент: лицо глагола. Текст от первого лица («Получаю расчёт», «Хочу консультацию») в некоторых нишах работает лучше, чем безличная форма, потому что человек как бы произносит фразу за себя. Но это стоит проверять на конкретной аудитории, а не переносить универсально: в сделках с длинным циклом согласования нейтральная форма глагола часто уместнее.
Размер, форма и отступы вокруг кнопки
Кнопка должна быть крупнее второстепенных элементов интерфейса, но не крупнее заголовка блока: иначе она выглядит как баннер, а не как управляющий элемент. Хороший ориентир: кнопка заметна за секунду беглого взгляда на экран, но не перетягивает внимание с ключевого оффера.
Свободное пространство вокруг кнопки работает сильнее, чем яркость самого цвета. Если рядом с CTA стоят другие элементы: ссылки, иконки, мелкий текст, взгляд рассеивается. Пустое поле вокруг кнопки создаёт эффект изоляции, и глаз находит её быстрее, даже при менее контрастном цвете.
На мобильном экране это особенно критично: слишком мелкая кнопка требует точного попадания пальцем, и часть кликов уходит в соседние элементы. Стандарт WCAG задаёт минимальную кликабельную область в 24 на 24 пикселя, а для уверенного попадания пальцем на телефоне разумно закладывать заметно больше, около 44 на 44 пикселей, потому что палец не так точен, как курсор мыши.
Форма угла принципиальной роли не играет: скругления или прямые углы выбираются в стиле общего дизайна. Важнее последовательность: если на странице несколько CTA, у них должна быть одна форма и один цвет, а второстепенные действия, например «Подробнее о тарифах», стоит визуально приглушить, чтобы не спорили с главным призывом.
Где расположить кнопку на лендинге
Первая кнопка нужна в начале страницы, но не раньше, чем читатель поймёт, что вы предлагаете. Кнопка сразу под заголовком без объяснения оффера собирает клики от тех, кто всё равно не дойдёт до оплаты, и даёт мало результата. Лучше показать её сразу после короткого оффера в первом экране, а затем повторять после каждого блока, который снимает одно конкретное возражение.
Отдельный вопрос: сколько кнопок повторять на одной странице. Если лендинг короче двух трёх экранов, достаточно одной кнопки в начале и одной в конце. На более длинных страницах кнопку стоит повторять после каждого блока, который закрывает отдельное возражение: цену, сроки, гарантии, а не просто через равные промежутки текста.
На длинных лендингах уместна закреплённая кнопка, которая остаётся на экране при скролле, особенно на мобильных устройствах, где палец уже находится в нижней трети экрана. Такая кнопка не заменяет остальные CTA в теле страницы, а работает как запасной вариант для тех, кто решил кликнуть не сразу.
Расположение кнопки нельзя оценивать в отрыве от общего юзабилити страницы: даже заметная кнопка не спасёт лендинг, если до неё неудобно добираться из-за медленной загрузки или неработающей мобильной версии. Эти вопросы разбирали в статье про юзабилити сайта и конверсию.
Примеры удачных и неудачных CTA
Разница между рабочей и слабой кнопкой редко в одном параметре: обычно совпадают сразу два или три фактора. Ниже сравнение типичных решений без привязки к конкретному бренду.
| Параметр | Удачный CTA | Неудачный CTA |
|---|---|---|
| Цвет | Контрастный акцент, не встречается больше на странице | Совпадает с фирменным цветом фона или ссылок |
| Текст | «Получить расчёт за 10 минут» | «Отправить» |
| Место | После блока с ценами и условиями | Сразу под заголовком без объяснения оффера |
| Количество | Один стиль главной кнопки, повторяется по странице | Несколько разных по цвету и размеру кнопок |
| Окружение | Свободное пространство вокруг кнопки | Кнопка зажата между ссылками и мелким текстом |
Полные разборы структуры по отдельным нишам, где видно, как кнопка сочетается с остальными блоками, собраны в материале про примеры лендингов по нишам.
Как проверить, что кнопка работает
Самый доступный способ проверки: карта кликов и запись сессий через аналитику сайта. Если тепловая карта показывает, что люди кликают рядом с кнопкой, а не по ней, или подводят курсор к кнопке и уходят, не нажав, проблема в заметности или формулировке, а не в оффере.
Дальше работает простой A/B тест: одна версия страницы с текущей кнопкой, вторая с изменённым цветом, текстом или местом. Трафика с лендинга обычно немного, поэтому тестировать стоит один параметр за раз и ждать статистически значимой разницы, а не делать выводы по первым заявкам за сутки.
Количественные тесты не заменяют простого качественного способа: показать лендинг трём пяти людям из целевой аудитории и попросить найти кнопку, бросив на страницу короткий взгляд, а потом сказать, где она была. Если человек ищет кнопку дольше нескольких секунд, проблема видна без всякой аналитики.
Если результата нет ни в одном варианте, причина иногда не в кнопке, а в оффере или доверии к странице в целом. Кнопку стоит перепроверять в последнюю очередь, после того как остальная структура уже проверена.
Частые вопросы
Какой цвет кнопки конвертирует лучше всего
Универсального цвета нет. Работает контраст между кнопкой и остальной палитрой страницы, а не конкретный оттенок. Красная кнопка на красном фоне проиграет синей кнопке на белом фоне, и наоборот. Сначала определите фон и акцентные цвета сайта, а затем выберите для кнопки цвет, который не встречается больше нигде на странице.
Сколько кнопок должно быть на лендинге
Главный призыв к действию должен быть один по смыслу, но может повторяться визуально несколько раз: в первом экране, после блока с ценами и в конце страницы. Все повторения оформляются одинаково. Второстепенные действия, например переход в блог или на страницу с документами, стоит визуально отличать, чтобы они не конкурировали с основной кнопкой.
Стоит ли писать на кнопке слово Купить
Слово подходит, когда решение о покупке уже принято: в карточке товара с ценой или в корзине. На лендинге, где человек ещё не до конца определился, слово «Купить» создаёт лишнее ощущение финальности и может снижать число кликов. Формулировки с описанием результата, например «Получить предложение», обычно воспринимаются мягче.
Нужна ли на мобильной версии закреплённая кнопка
На длинных страницах закреплённая кнопка в нижней части экрана увеличивает число кликов, потому что палец пользователя уже находится рядом. На коротких лендингах, где кнопка видна в пределах одного двух экранов, закреплённый блок не обязателен и может перекрывать контент на маленьких экранах.
Как понять, что кнопку не замечают
Явный признак: в аналитике низкий процент кликов по кнопке при нормальном времени на странице и просмотре нужных блоков. Карта кликов и запись сессий показывают, доходит ли взгляд до кнопки и останавливается ли на ней курсор. Если курсор задерживается рядом, но клика нет, проблема в тексте или цвете, а не в расположении.
С чего начать
Проверьте текущую кнопку по трём пунктам: отличается ли её цвет от остальной палитры страницы, называет ли текст конкретный результат, стоит ли она сразу после блока, который снимает возражение читателя. Затем замените формулировку на кнопке с общей фразы на описание выгоды и посмотрите на карту кликов через одну две недели.
Если на странице несколько CTA разного вида, приведите их к одному стилю и оставьте один акцентный цвет только для главной кнопки. Дальше имеет смысл протестировать одно изменение за раз: сначала текст, потом место, потом цвет, чтобы понимать, что именно повлияло на заявки.
Если разбираться с этим самостоятельно нет времени, дизайн и сборку лендинга с проработанными CTA делает агентство Neurounit, а не только приводит трафик на готовую страницу.
