Все письма серии «Сделай сам»

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

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

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

Опираясь на чек-лист выше, можете поколдовать над своим ресурсом сами. Обязательно проверяйте Карту кликов в Яндекс.Метрике – есть ли клики на кнопки?

• Что такое CTA: настоящий гипноз в продающих текстах
• Раскрываем карты Яндекс.Метрики