Сделай сам: Мощный CTA, или прокачиваем кнопки на сайте

сео, ноутбук, раскрутка сайта, продвижение сайта

1. Что такое CTA и зачем они нужны?

1 CTA – call to action, или кнопки целевых действий. Кнопки – важный элемент, так как нажатия на многие из них напрямую связаны с конверсией сайта. Но не стоит думать, что чем больше и ярче кнопка, тем лучше. Всё гораздо сложнее, разбираемся.

2. Чек-лист: какими должны быть CTA

1 Дизайн и расположение кнопок целевого действия должны соответствовать контексту, то есть всегда быть «в тему». Для некоторых тематик кнопка целевого действия, вопреки устойчивому мнению, не обязательно должна быть на первом экране.
Расположение кнопок CTA:
CTA нужно размещать на видных местах, в верхних частях страниц, в визуальном центре.
Чтобы визуально выделить кнопку, нужно оставлять пустое пространство вокруг нее. Она не должна «прилипать» к другим элементам, нужно отделять пробелами. При этом размер пробела можно чуть уменьшить, чтобы обозначить логическую связь кнопки с сопутствующими элементами, например, с текстом.
Если продукт простой и понятный, то CTA можно расположить уже на первом экране (без применения прокрутки вниз).
Если продукт комплексный, сложный, то CTA на первом экране располагать не нужно – слишком рано. Сначала нужно объяснить клиенту смысл и назначение продукта, выгоды.
Верхний левый угол и правый нижний хорошо подходят для размещения кнопки целевого действия. Меньше обращают внимания на информацию, представленную в верхнем правом углу и левом нижнем.
Кнопок не должно быть слишком много – если каждый экран ими пестрит, это покажется посетителю слишком навязчивым (как приставучий торговец на базаре, от которого хочется убежать). 2-3 кнопки вполне достаточно.
CTA нужно делать только там, где они логично вписываются в контекст повествования. Например, после того, как мы показали товар/услугу, рассказали о ней подробно.
Красная кнопка размером в половину экрана хоть и привлечет внимание, но вряд ли будет нажата. Кнопки должны быть не только заметными, но и убедительными.

Размеры и оформление кнопок CTA:
Кнопка должна несколько превышать размером окружающие элементы.
Кнопки должны контрастировать с фоном, чтобы их можно было легко заметить. Текст на кнопке должен быть контрастным ее цвету. Контрастные (комплементарные, дополняющие) цвета находятся точно друг напротив друга на цветовом круге.
Для CTA лучше использовать «чистые» цвета – без добавления белого, серого, черного. На них глаз реагирует быстрее. Вариации цветов можно использовать для других элементов.
Убедитесь, что на сайте нет других элементов, близких по цвету с CTA.
При наведении на кнопку она реагирует – меняется курсор мыши (показывает, что это ссылка), сама кнопка подсвечивается. При нажатии кнопка обычно становится вогнутой (как физические кнопки).
Следует избегать чрезмерных эффектов: теней, объемов, закруглений. Скевоморфизм ушел в прошлое, в моде минимализм, material design.
Текст на кнопке – призыв к действию: глагол в инфинитивной форме (например: найти, купить, заказать, отправить). После глагола можно добавить уточняющее существительное, раскрывающее смысл целевого действия.
Можно дополнительно проиллюстрировать призыв к действию, добавив на кнопку иконку, стрелку.

3. Как сделать самому?

1 Опираясь на чек-лист выше, можете поколдовать над своим ресурсом сами.

Обязательно проверяйте Карту кликов в Яндекс.Метрике – есть ли клики на кнопки?
Ну а в помощь для более глубокого изучения темы 2 статьи:
Что такое CTA: настоящий гипноз в продающих текстах
Раскрываем карты Яндекс.Метрики

Запасной вариант

Не знаете, как оформить кнопки на сайте? По кнопкам никто не кликает? Есть бюджетный вариант решения Вашей проблемы – экспресс-аудит со скайп-консультацией, цена которого всего 3000. А после Вы еще и скидку 3% получите на доработки по выявленным проблемам. Ваш сайт оценят опытные специалисты, в процессе skype-консультации ответят на Ваши вопросы, расскажут, как смотреть метрику, как интерпретировать карту кликов и что именно править.

Заказать экспресс-аудит


Красивое имя