<|||>

Прокачиваем кнопки целевых действий на сайте

Web-графика, дизайн сайта подготовка с нуля

Сегодня акцентируем внимание на том, как стимулировать пользователя к действию. Всё про кнопки на сайте – где ставить, каким цветом делать, указывать ли в них текст и какой.

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

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

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

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

Расположение кнопок CTA:

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

Красная кнопка размером в половину экрана хоть и привлечет внимание, но вряд ли будет нажата. Кнопки должны быть не только заметными, но и убедительными.

Размеры и оформление кнопок CTA:

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