8 правил создания кнопки призыва к действию

Как создать кнопку с призывом к действию
16.02.2018 КОММЕНТАРИИ: 0

Под CTA (призывом к действию) принято подразумевать кнопку, текст, изображение или видео, содержащие ссылку на страницу с более детальным описанием предложения или форму совершения целевого действия. Такие элементы используются, чтобы подтолкнуть пользователя к покупке товара, заказу услуги, подписке на новости, установке пробной версии программы, скачиванию приложения / электронной книги / кода купона и т. д. От эффективности CTA-элемента напрямую зависит успех маркетинговой кампании. Как показывает практика, эффективная кнопка с призывом к действию способна в 100 раз увеличить количество переходов и конверсий. Чтобы создать такую, придерживайте следующих правил.

  1. Контрастный цвет CTA-кнопки

Кнопка призыва к действию должна бросаться в глаза. Это не значит, что она непременно должна быть ярко-оранжевой. Достаточно, чтобы её цвет контрастировал с основной палитрой сайта. Кнопка должна выделяться на фоне остальных компонентов интерфейса, но при этом вписываться в общий дизайн. Хороший пример демонстрирует Firefox. Зелёную CTA-кнопку на синем фоне невозможно не заметить.

Кнопка призыва к действию контрастного цвета

Ещё один пример контрастной кнопки, гармонирующей с дизайном сайта, можно увидеть на главной странице Hipmunk.

Выделяющаяся на фоне сайта кнопка призыва к действию

  1. Свободное пространство вокруг кнопки

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

Пример использования свободного пространства вокруг CTA-кнопки

  1. Стимулирующий текст кнопки призыва к действию

Надпись на кнопке должна быть одновременно лаконичной и эффективной — побуждающей к совершению целевого действия. Правила написания текста для CTA-элемента достаточно просты:

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

Evernote использует один из самых распространённых  призывов к действию: «Подпишитесь бесплатно».

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

Более интересный пример представлен на сайте Treehouse. Хотя и в ущерб лаконичности, текст кнопки гласит «Получите свою пробную версию бесплатно». Если бы просто написали «Попробовать бесплатно», послание не было бы столь тонким и личным.

Пример нестандартной подписи кнопки призыва к действию

  1. Дополнительное стимулирование к переходу

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

Зная основной страх пользователей перед подписками, Netflix размещает над CTA-кнопкой сообщение о возможности отписаться в любой момент.

Успокаивающий околокнопочный текст-усилитель призыва к действию

Также пространство возле кнопки можно использовать для размещения дополнительного стимула. К примеру, временного ограничителя. Создайте ощущение срочности с помощью текста подобного содержания: «Зарегистрируйтесь сегодня и получите скидку 25%. Предложение действует один день».

CTA-кнопка с дополнительным стимулом-ускорителем

  1. Использование направленных сигналов

Привлечь дополнительное внимание к кнопке помогают так называемые направленные сигналы. Это могут быть броские стрелочки, указание пальцем или направленные на CTA-элемент взгляды людей на фоновом фото.

Пример использования направленных сигналов на сайте

  1. Видимость кнопки без прокрутки

Новаторы утверждают, что кнопка с призывом к действию может располагаться ниже линии прокрутки первого экрана. Якобы пользователю нужно поступательно и основательно подготовиться к совершению целевого действия. Но большинство экспертов не разделяет эту точку зрения. Так что CTA-кнопка должна располагаться на первом экране на самом видном месте.

Где должна располагаться кнопка призыва к действию

  1. Органичный дизайн CTA-кнопки

Исследования показывают, что люди лучше нажимают на большие кнопки со скруглёнными углами. При этом кнопка непременно должна выглядеть как кнопка. Если вы не являетесь приверженцем плоского дизайна, то, помимо скошенных углов, можете смело использовать 3D-эффекты, растушёвку, тени, лёгкий градиент. Что касается формы, то тут надо экспериментировать. Исследование ContentVerve, например, показало, что округлые зелёные кнопки кликабельнее синих прямоугольников. Но это отнюдь не универсальное решение.

А ещё в дизайне кнопки призыва к действию уместны такие графические и интерактивные эффекты, как:

  • стрелочки и иконки;
  • логотипы PayPal и прочие эмблемы, формирующие ощущение безопасности и доверие к сайту;
  • hover-эффект при наведении курсора.

Графические эффекты в дизайне кнопки с призывом к действию

  1. Минимизация выбора

Когда речь идёт о призыве к действию, ситуация выбора по возможности должна быть устранена. Пользователю и так нелегко решиться нажать на кнопку — не заставляйте его ещё и выбирать. В идеале CTA-кнопка на странице должна быть одна. Если необходимо разместить две, выделите основную цветом.

Пример грамотного использования нескольких CTA-кнопок на странице

Заключение

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

Источники:

Статья Ника Бабича на Webdesignerdepot

Статья Богдана Санду на Webdesignerdepot.com

 

НЕ ПРОПУСТИТЕ НОВЫЙ МАТЕРИАЛ! Подпишитесь на «Лепосите» в Twitter или Facebook!

 

Добавить комментарий


Защитный код
Обновить