Кнопки и призывы к действию: как повысить кликабельность

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

Любопытно, что кнопки часто оформляют по остаточному принципу. Дизайнер выбирает «фирменный цвет», разработчик ставит стандартное «Отправить», менеджер просит «сделать побольше». А между тем изменение формулировки или положения кнопки может заметно повлиять на число обращений, без увеличения рекламных расходов.

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

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

Призыв к действию (call to action, CTA) — это элемент интерфейса, который побуждает человека совершить следующий шаг. Чаще всего это кнопка, но им может быть и ссылка, баннер, форма, фраза в тексте. Задача призыва — убрать неопределённость: показать, что делать дальше, и сделать это действие простым и безопасным.

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

Текст на кнопке

Формулировка — самый влиятельный элемент. Хороший текст отвечает на вопрос: «Что я получу, если нажму?». Универсальные «Отправить», «Далее», «Подробнее» ничего не обещают. Конкретные формулировки работают лучше.

Правила хорошей формулировки

• Начинайте с глагола. «Получить», «Заказать», «Скачать», «Рассчитать» задают движение.
• Говорите от лица действия, а не системы. Не «Отправка формы», а «Получить консультацию».
• Будьте краткими. Обычно две–четыре слова. Длинные подписи нечитаемы и ломают вёрстку на смартфоне.
• Снижайте риск. Слова «бесплатно», «без обязательств», «за минуту» убирают страх, если они правдивы.
• Согласуйте с обещанием. Если реклама обещала расчёт, кнопка должна вести к расчёту. Несоответствие вызывает недоверие.
• Не врите. Кнопка «Скачать бесплатно», ведущая к платной форме, уничтожит доверие.

Иногда помогает добавить микротекст рядом: «Ответим в течение рабочего дня» или «Данные не передаются третьим лицам». Он поддерживает решение и устраняет основные сомнения. Практика формулировок для форм приведена в материале про формы обратной связи.

Цвет и контраст

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

Практические рекомендации таковы.

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

Размер, форма и пространство

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

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

Расположение призывов на странице

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

• Первый экран. Главная кнопка видна сразу, без прокрутки. Для людей, пришедших с чётким намерением, это самый короткий путь. Об устройстве первого экрана подробно в статье про первый экран сайта.
• После блока аргументов. Когда вы привели доводы, самое время предложить действие: после перечня преимуществ, примеров, отзывов.
• Конец страницы. Те, кто дочитал, готовы к решению. Финальный призыв подводит итог и даёт выход.
• Закреплённая панель. Кнопка, которая остаётся на экране при прокрутке, особенно полезна на смартфонах и на длинных страницах.
• Рядом с ценой или описанием. В карточке товара кнопка должна быть вплотную к цене.

Не нужно повторять один и тот же призыв после каждого абзаца: избыточное давление раздражает. Для длинных страниц достаточно трёх–четырёх точек, расположенных по логике повествования. Ещё лучше менять формулировку в зависимости от этапа: вначале мягкое «Посмотреть примеры», позже более сильное «Рассчитать стоимость».

Состояния кнопки

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

1. Обычное. Базовый вид.
2. Наведение. На компьютере кнопка слегка меняет цвет или тень, подтверждая интерактивность.
3. Нажатие. Мгновенная реакция, показывающая, что действие принято.
4. Фокус. Видимая рамка при навигации с клавиатуры. Без неё сайт недоступен части пользователей; тема раскрыта в материале про доступность сайта.
5. Загрузка. Индикатор, пока идёт отправка. Без него люди нажимают повторно и создают дубликаты.
6. Отключённое. Если действие недоступно, объясните причину рядом, а не просто сделайте кнопку серой.

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

Другие виды призывов

Кнопки — не единственный инструмент. Эффективны также следующие форматы.

• Текстовые ссылки. Подходят для вторичных переходов внутри текста. Формулируйте их так, чтобы было понятно, что внутри.
• Баннеры и плашки. Для акций и важных предложений. Не перегружайте страницу: слишком много баннеров порождает «баннерную слепоту».
• Формы в блоке. Короткая форма сразу в тексте сокращает шаги.
• Квизы и калькуляторы. Вовлекают интерактивом и собирают данные. См. статью про квизы на сайте.
• Всплывающие окна. Использовать нужно аккуратно: показывать по смыслу, а не сразу при входе, и давать лёгкий способ закрыть.
• Кнопки мессенджеров и чата. Для тех, кому проще написать, чем заполнять форму. Подробнее о плюсах и минусах — в материале про онлайн-чат.

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

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

Как проверять и улучшать

Любые советы по кнопкам — гипотезы. Подтвердить их можно только на своей аудитории. Полезны несколько способов проверки.

1. Наблюдение. Дайте нескольким людям задачу и посмотрите, замечают ли они кнопку и понимают ли её. Метод описан в материале про юзабилити-тестирование.
2. Карты кликов. Они показывают, куда нажимают, а куда нет. Если люди тычут в неактивные элементы, возможно, их нужно сделать кликабельными.
3. Цели в аналитике. Отслеживайте клики по кнопкам и конверсию в заявки. Для основных кнопок настройте отдельные события.
4. A/B-тесты. При достаточном трафике сравнивайте варианты текста, цвета, расположения. Менять нужно по одному параметру за раз. Подробности методики в статье про A/B-тестирование.

Помните, что кнопка — это только часть воронки. Если страница не убеждает, никакой цвет не поможет. Прежде чем экспериментировать с оттенками, убедитесь, что предложение понятно, доверие обеспечено, а форма проста. Как всё это связано, объясняется в материале про конверсию сайта.

Пример из практики

На одном из проектов студии Mevero страница услуги выглядела аккуратно, но заявок приходило мало. Единственная кнопка внизу называлась «Отправить» и вела на форму с восемью полями. Мы переписали подпись на «Получить расчёт за один рабочий день», вынесли кнопку на первый экран, добавили закреплённый вариант для смартфонов и сократили форму до трёх полей. Через несколько недель число обращений заметно выросло, а качество заявок не пострадало: менеджеры по-прежнему получали всё нужное для расчёта, остальное уточняли в разговоре. Ничего нового в дизайне мы не рисовали: изменились только формулировка, расположение и простота пути.

Больше примеров изменений, которые дали результат, можно посмотреть в разделе портфолио. Если нужно оценить, как устроены призывы к действию на вашем сайте, закажите UX-аудит.

Итог

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

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