Статья
Кнопка призыва к действию: текст, место и вид
Кнопка — последний шаг между интересом и заявкой. Человек уже готов, и всё решают мелочи: понятно ли, что произойдёт после нажатия, заметна ли кнопка и есть ли она под рукой. Разбираем, какой текст писать на кнопках, где их ставить и как понять, что они работают.
Текст: что произойдёт после нажатия
Лучший текст кнопки отвечает на вопрос «а что будет, если нажать?»:
| Вместо | Лучше |
|---|---|
| Отправить | Получить расчёт |
| Подробнее | Посмотреть цены |
| Заказать | Записаться на пятницу |
| Оставить заявку | Обсудить проект |
| Купить | Добавить в корзину — 2 990 ₽ |
Правила простые: глагол в начале, конкретика вместо общих слов, два-три слова, а не предложение. «Узнать стоимость ремонта» лучше, чем «Узнать больше о наших услугах», а «Записаться к врачу» — лучше, чем «Отправить».
Рядом с кнопкой
Короткая строка под кнопкой снимает последние сомнения:
- «Ответим в течение часа в рабочее время»;
- «Без предоплаты — расчёт бесплатный»;
- «Перезвоним, а не будем писать в рассылку».
Пишите только то, что правда: обещание «перезвоним за 5 минут», которое не выполняется, раздражает сильнее, чем его отсутствие.
Одна главная кнопка на экране
Если на экране три одинаковые яркие кнопки — «Купить», «Записаться», «Скачать каталог», — человек не понимает, что главное, и часто не нажимает ничего. На каждом экране — одна главная кнопка, заметная и яркая. Остальные действия — второстепенными кнопками: контурными, светлыми или ссылками.
Где ставить
- На первом экране — для тех, кто уже решил.
- После цен и примеров работ — для тех, кто прочитал и убедился.
- В конце страницы — для тех, кто дочитал до конца.
- В шапке — чтобы кнопка была под рукой при любой прокрутке.
- На телефоне — снизу экрана, если это главная кнопка магазина или записи: туда дотягивается большой палец.
Так устроено и у нас: кнопка «Обсудить проект» есть в шапке на каждой странице и открывает короткую форму — не нужно искать раздел контактов.
Как кнопка должна выглядеть
- Контраст. Цвет главной кнопки — акцентный, больше нигде на странице не повторяется. Как подобрать — в статье «Цвета для сайта».
- Размер. На телефоне — не меньше 44 пикселей в высоту и с отступами вокруг, чтобы не промахнуться пальцем.
- Похожа на кнопку. Плашка с текстом, а не просто подчёркнутое слово, которое можно принять за заголовок.
- Состояния. Кнопка меняется при наведении и нажатии, а после отправки формы показывает, что идёт отправка, — иначе её нажимают ещё раз.
Частые ошибки
- «Отправить» на кнопке формы. Ничего не говорит о том, что получит человек.
- Кнопка ведёт не туда. «Записаться» открывает страницу «О компании», а не форму записи.
- Кнопка внутри карусели, которая уезжает, пока на неё целятся.
- Кнопка неактивна без объяснений. Серая кнопка, на которую ничего не происходит, — сообщите, какое поле не заполнено.
Как проверить
Настройте в Метрике цели на нажатие главных кнопок и на успешную отправку формы — подробно в статье «Цели в Яндекс Метрике». Если кнопку нажимают, а заявок мало — проблема в форме: о ней статья «Форма заявки на сайте». Если кнопку почти не нажимают — в тексте, месте или в том, что её просто не видно.
Как это делаем мы
Лендинг мы строим от целевого действия: на брифе решаем, что считать результатом — заявку, звонок или оплату, — и выстраиваем блоки в том порядке, в котором посетитель принимает решение. Цель на заявку в Метрике настраиваем до запуска.