Кнопка призыва к действию (Call To Action) — быть может, один из самых серьёзных элементов лендинга и товарной страницы вебмагазина. Необходимо осознавать, что высококонверсионным лендинг делают множество подробностей.
Кнопка призыва к действию — только один из этих элементов, как ингредиент в кулинарном рецепте.
Эффективность посадочной страницы не зависит только от CTA, поскольку серьёзна вся совокупность факторов, которая включает и настройку входящего трафика. Но среди визуальных элементов в рамках макета страницы призыв к действию — в перечне ТОП 5 важнейших.
Содержание:
CTA-кнопки должны оставаться кнопками
Текст обязан побуждать к действию
CTA-кнопка должна быть расположена логично
Лучше применять контрастные цвета
CTA-кнопки тесно связаны с прошлым действием
СТА-кнопки не должны соперничать с элементами интерфейса
1. CTA-кнопки должны оставаться кнопками
Быть может, это раздастся через чур очевидно, но конверсионная CTA-кнопка должна быть кнопкой, а не чем-нибудь еще.
Кнопка призыва к действию — не текст, не ссылка, не gif-анимация либо что-то второе. Это такой действенный и замечательный инструмент, что нет потребности изобретать что-то, кроме обычной кнопки, к примеру, лендинга.
Совсем необязательно давать волю маркетинговой фантазии либо пробовать стать трендсеттером в области оптимизации конверсии. И вот из-за чего.
Мозг человека ориентируется на привычные вещи. Нам вправду нравится рутина. Дело в том, что мозгфункционирует по шаблонам и определённым схемам, нейропсихологи их именуют поведенческими паттернами.
Да, психологические процессы владеют пластичностью и, как следствие, свойством к адаптации, которую возможно развивать, но в конечном итоге мы — рабы привычного образа действий. В случае если, например, на следующий день утром путь от вашей кровати до ванной станет вторым (допустим, стенки провалятся сквозь землю либо передвинутся), вам будет весьма не легко сориентироваться. Перемены застанут вас неожиданно.
То же самое распространяется и на CTA-кнопки. У пользователей уже сложился определенный опыт сотрудничества в онлайне, исходя из которого они знают: элементы призыва к действию в большинстве случаев принимают форму кнопок. И в случае если визитёры видят кнопку, то сходу знают, что нужно делать.
Следующий пример: SMM-агентство iCrossing. Тут мы видим не столько лендинг пейдж, сколько смесь из контента и маркетинговых уловок, нацеленного на самопиар. Нереально осознать, где как раз элемент призыва к действию, по причине того, что на странице нет кнопки. Что необходимо сделать?
Скачать pdf-документ? Как по большому счету связаться с кем-либо?
Такое же разочарование возможно испытать в отношении еще одного известного бренда в сфере интернет-маркетинга — Levy Online. И не смотря на то, что они позиционируют себя как самую надежную компанию в области интернет-рекламы, воспользоваться их одолжениями достаточно сложно. Не нужно ожидать, в то время, когда клиенты свяжутся с вами по телефону, поскольку сейчас на это просто не хватает времени.
Необходимы CTA-элементы.
Следующий пример, лендинг Capgemini, думается, пробует подтолкнуть визитёра к какому-то действию. Но к какому? Куда нужно нажимать — на одну из панелей в стиле Windows 8? Необычный подход для агентства интернет-рекламы.
Деньги, каковые были положены в PCP-рекламу, очевидно израсходованы впустую.
South University стоит на ступень выше, чем iCrossing: на их лендинге имеется кнопка. Да, маленькая и малозаметная. Но, по крайней мере, это кнопка.
Constant Contact знают, что делают. На их ресурсе имеется громадная и броская кнопка призыва к действию. А основное — она сходу кидается в глаза.
В общем и целом, хорошие CTA-кнопки владеют следующими чертями:
- у них имеется границы и чёткая форма,
- они отличаются по цвету от остальных элементов интерфейса,
- кнопка постоянно содержит текст призыва к действию.
СТА-элементы не всегда должны быть в виде прямоугольников, но, в большинстве случаев, это так. Видятся варианты со скругленными либо скошенными краями, с тенью — и все они достаточно хороши.
- Из-за чего стереотипныe лендинги и сайты конвертируют лучше?
Назад к содержанию
2. Текст обязан побуждать к действию
Как бы то ни было, а текст на СТА-кнопке значительно серьёзнее ее цвета, расположения и размера на странице.
CTA-кнопка на Hootsuite — пример действенного подхода. Таковой СТА-элемент стимулирует к совершению действия.
На кнопке Sunglass Warehouse написано легко: «Do It» («Сделай это»). Таковой текст усиливает привлекательность СТА-элемента для пользователя.
Не следует пробовать придумать что-то необыкновенное. Самые действенные CTA-кнопки достаточно несложны и наивны. Слово «Get» («Взять») — одно из самые действенных в этом случае (прим. — справедливо для английского).
Надпись должна быть маленькой. Предложения, каковые содержат больше 10–15 слов через чур долгие. Простые фразы — лучшее ответ.
Самый популярный призыв к действию в отечественном сегменте “Взять консультацию“.
Возможно разместить на кнопке и два предложения, лишь если они маленькие. К примеру, так произвели в oDesk: «Post a job. It s free!» («Опубликуйте вакансию.
Это безвозмездно!»).
- Все, что вам необходимо знать о психологии призыва к действию на лендинг пейдж
Назад к содержанию
3. CTA-кнопка должна быть расположена логично
В соответствии с законом Фиттса (Fitt s law) кнопка обязана размешаться по траектории перемещения взора пользователя. Разглядим данное утверждение на примере. Текст на сайдбаре размещен так, что сходится с траекторией взора просматривающего — сверху вниз.
И кнопка призыва к действию находится в самом низу. Все логично.
Конечная цель — поместить CTA в то место, где визитёр наверное захочет перейти дальше. Словом, необходимо мочь прогнозировать и предвидеть поведение пользователей.
В общем, мысль по поводу логичности расположения CTA-кнопки сама по себе несложна. Страно, из-за чего маркетологи упускают ее из виду.
Apple в большинстве случаев продумывают размещение элементов интерфейса, но сейчас — поразительно! — призыв к действию размещен совсем не в том месте, где нужно. Кнопки находятся в «неинтуитивных» местах.
А вот пример хорошего размещения CTA-кнопки.
СТА на Social Media Examiner вышел удачно. Нарисованная стрелка — одна из обстоятельств, по которой лид-форма столь удачно справляется со своей задачей. И не смотря на то, что она кроме того не находится в центре страницы, стрелка показывает на нее, направляя взор от рекламного текста к форме захвата.
Стрелка, задающая направление взора, превосходно смотрится и в этом случае.
Большая часть успешных лендингов имеют следующую структуру:
- заголовок,
- текст преимущест,
- форма захвата и CTA-элемент.
Из этого направляться логичный вывод — кнопка призыва к действию обязана размешаться в конце (но выше линии сгиба). Вот еще один пример, где реализована как раз такая структура.
Кроме того в случае если на лендинге размещено большое количество текста, размещение CTA-кнопки в самом низу все равно остается логичным шагом.
- Как дизайн CTA-кнопки может расширить конверсию?
Назад к содержанию
4. Лучше применять контрастные цвета
И не смотря на то, что возможно спорить по поводу степени важности цвета кнопки, но все же стоит обратить внимание на этот нюанс. Легко необходимо не забывать, что цветовая гамма не так значима, как это пробуют доказать многие маркетологи.
Действенные кнопки постоянно имеют контрастный оттенок если сравнивать с остальными элементами интерфейса.
Приведем пример из email-маркетинга — так как совет довольно цветовой гаммы честна не только для лендингов. Перед вами письмо из CrazyEgg. Самое первое, что кидается в глаза по мере скроллинга — вот эта желтая кнопка в конце.
Думается, что email-маркетологам стоит взять на вооружение этот подход. В первую очередь, сделать так, дабы CTA-кнопка стала необходимым элементом письма. Почему бы и нет?
Во-вторых, эта самая кнопка, само собой разумеется, должна быть контрастного цвета.
Призыв к действию обязан завлекать внимание визитёра. И добиться этого не окажется, пока цвет самой кнопки не окажет помощь вам.
Вот красивая кнопка призыва к действию, которая практически кричит: «Надави меня!» Весьма замечательный красный цвет.
Похоже на то, что красный и оранжевый — самые популярные оттенки для кнопок. Посмотрите еще один пример на сайте Disruptive Advertising.
А эта оранжевая кнопка размещена на Social Media Examiner.
Неоновый зеленый на голубом фоне, как у Toonimo? Также хорошо.
- CTA-элемент «выше линии сгиба»: миф либо действительность?
Назад к содержанию
5. CTA-кнопки тесно связаны с прошлым действием
СТА-кнопки стимулируют к активности потому, что находятся на пути действий посетителя и движения взгляда.
На многих лендингах употребляется результата параллакса. Любая часть (либо слой) страницы совершает определенное воздействие. И в то время, когда пользователь прокручивает ее вниз, он «встречает» элементы Call-to-Action.
Т.е. по окончании прокрутки производится переход к CTA — это и имеется пример близости CTA-кнопок к прошлому действию пользователя на сайте.
Назад к содержанию
6. СТА-кнопки не должны соперничать с элементами интерфейса
Прекрасно, в то время, когда кнопка окружена достаточным числом свободного пространства. Не следует «заставлять» ее вступать в конфронтацию с другими элементами на странице.
Ниже приведен пример того, как делать не нужно. Ясно, что кнопка «View our work» («Взглянуть отечественные работы») отвлекает внимание визитёров от кнопки «Get started today» («Приступить к работе»). Вместо того дабы пройти регистрацию, пользователь лишь израсходует время, просматривая предложенные кейсы. К чему такое соревнование?
В этом нет необходимости.
А вот хороший пример. Взор переносится конкретно к элементу призыва к действию. Все, что имеется на веб-странице — изображения, перечень, заголовок и т.д, ведет к одному — к кнопке Call-to-Action.
На странице в Facebook СТА-кнопка крайне важна. Нет ничего, что завлекает внимание визитёра так очень сильно, как призыв «Create Ad» («Создать объявление»).
То же самое касается и сервиса Formstack. Все незаполненное пространство обслуживает громадную оранжевую кнопку Call-to-Action.
- Интерфейс пользователя: 6 советов повышения конверсии
Назад к содержанию
Выводы
Создание действенных СТА-элементов — не такое сложное занятие. Но приемы из арсенала оптимизации-конверсии и интернет маркетинга через конверсионные элементы окажут помощь в этом лишь до определенной степени.
По большей части, стоит опираться на логику, здравый суть и само собой разумеется сплит-тест. Тогда все в обязательном порядке окажется.
Высоких вам конверсий!
По данным: blog.crazyegg.com
Случайные статьи:
- 9 Приложений для более эффективного тайм-менеджмента
- 8 Хаков по оптимизации конверсии интернет-магазинов
Landing Page или сколько можно заработать на идеальном landing page (лендинг пейдж).
Подборка похожих статей:
-
10 Ошибок на лендинге, которые убивают вашу конверсию
Вы израсходовали деньги на рекламу, создали и оптимизировали собственные объявления так, дабы расширить переходы. Вы два раза удостоверились в…
-
Какие видео на лендинге могут быть разрушительны для вашей конверсии?
Сейчас на сайтах некоторых поставщиков онлайн-одолжений вместо привычных видео-презентаций, демонстрирующих ключевые преимущества и особенности…
-
15 Психологических правил организации контента на лендинге
Как правило визитёры лендингов ведут себя достаточно предсказуемо. И это дает вам, обладателям бизнеса, огромное преимущество. Из-за чего? Психология….
-
15 Золотых принципов визуальной иерархии на лендинге
Визуальная иерархия есть одной из наиболее значимых составляющих действенного веб-дизайна. При создании лендинга крайне важно выяснить место…