8 правил создания кнопки призыва к действию
1.Контрастный цвет CTA-кнопки
Кнопка призыва к действию должна бросаться в глаза. Это не значит, что она непременно должна быть ярко-оранжевой. Достаточно, чтобы её цвет контрастировал с основной палитрой сайта. Кнопка должна выделяться на фоне остальных компонентов интерфейса, но при этом вписываться в общий дизайн. Хороший пример демонстрирует Firefox. Зелёную CTA-кнопку на синем фоне невозможно не заметить.
Ещё один пример контрастной кнопки, гармонирующей с дизайном сайта, можно увидеть на главной странице Hipmunk.
2.Свободное пространство вокруг кнопки
Рядом с кнопкой призыва к действию не должно быть никаких посторонних элементов. Так называемое белое (или негативное) пространство обеспечивает визуальную передышку и отделяет CTA от не имеющего отношения к делу контента. Вблизи кнопки допустимо оставить только усилители, которые также подстёгивают к совершению целевого действия.
3.Стимулирующий текст кнопки призыва к действию
Надпись на кнопке должна быть одновременно лаконичной и эффективной — побуждающей к совершению целевого действия. Правила написания текста для CTA-элемента достаточно просты:
- Надпись должна начинаться с глагола: «присоединяйтесь…», «скачайте…», «подпишитесь…».
- Текст должен быть понятным. Не умничайте и не креативьте особо — человек должен ясно осознавать, что произойдёт при нажатии на кнопку.
- Будьте лаконичны. Избегайте многословия и наводящих скуку фраз типа «Нажмите для получения большей информации». В английском языке оптимальная длина CTA-подписи варьируется в пределах 2 – 5 слов.
- Включайте в текст слова, подчёркивающие ценность предложения: «бесплатно», «бонус», «скидка», «мгновенно» и т. п.
Evernote использует один из самых распространённых призывов к действию: «Подпишитесь бесплатно».
Более интересный пример представлен на сайте Treehouse. Хотя и в ущерб лаконичности, текст кнопки гласит «Получите свою пробную версию бесплатно». Если бы просто написали «Попробовать бесплатно», послание не было бы столь тонким и личным.
4.Дополнительное стимулирование к переходу
Рядом с кнопкой призыва к действию допускается размещение дополнительных сведений, помогающих пользователю в принятии решения. К примеру, можно уточнить, что срок действия бесплатной версии программы составляет 30 дней. Текст пояснения должен быть действительно ценным и полезным. Иначе он вообще не нужен.
Зная основной страх пользователей перед подписками, Netflix размещает над CTA-кнопкой сообщение о возможности отписаться в любой момент.
Также пространство возле кнопки можно использовать для размещения дополнительного стимула. К примеру, временного ограничителя. Создайте ощущение срочности с помощью текста подобного содержания: «Зарегистрируйтесь сегодня и получите скидку 25%. Предложение действует один день».
5.Использование направленных сигналов
Привлечь дополнительное внимание к кнопке помогают так называемые направленные сигналы. Это могут быть броские стрелочки, указание пальцем или направленные на CTA-элемент взгляды людей на фоновом фото.
6.Видимость кнопки без прокрутки
Новаторы утверждают, что кнопка с призывом к действию может располагаться ниже линии прокрутки первого экрана. Якобы пользователю нужно поступательно и основательно подготовиться к совершению целевого действия. Но большинство экспертов не разделяет эту точку зрения. Так что CTA-кнопка должна располагаться на первом экране на самом видном месте.
7.Органичный дизайн CTA-кнопки
Исследования показывают, что люди лучше нажимают на большие кнопки со скруглёнными углами. При этом кнопка непременно должна выглядеть как кнопка. Если вы не являетесь приверженцем плоского дизайна, то, помимо скошенных углов, можете смело использовать 3D-эффекты, растушёвку, тени, лёгкий градиент. Что касается формы, то тут надо экспериментировать. Исследование ContentVerve, например, показало, что округлые зелёные кнопки кликабельнее синих прямоугольников. Но это отнюдь не универсальное решение.
А ещё в дизайне кнопки призыва к действию уместны такие графические и интерактивные эффекты, как:
- стрелочки и иконки;
- логотипы PayPal и прочие эмблемы, формирующие ощущение безопасности и доверие к сайту;
- hover-эффект при наведении курсора.
8.Минимизация выбора
Когда речь идёт о призыве к действию, ситуация выбора по возможности должна быть устранена. Пользователю и так нелегко решиться нажать на кнопку — не заставляйте его ещё и выбирать. В идеале CTA-кнопка на странице должна быть одна. Если необходимо разместить две, выделите основную цветом.
Для достижения максимального эффекта от CTA, необходимо позаботиться не только о цвете, размере и подписи кнопки, но и об окружающем контенте: тексте, изображении, зонировании интерфейса. И не забывайте о важности тестирования. Каждый бизнес индивидуален, и не факт, что решение, работающее на одном сайте, сработает и на другом.
Источники: