Что такое СТА и с чем его едят
Тем, кто занимается в сети продажами, термин «Call-to-action» приходилось слышать не раз. В переводе на русский язык СТА означает «призыв к действию». Элемент, который обязательно должен присутствовать на продающей странице сайта.
Наихудшим способом оформить СТА станет призыв из серии «Позвоните нам». Так делать нельзя. Для того, чтобы призыв к действию по-настоящему работал, важно предлагать пользователям нечто, что может их заинтересовать. К примеру, если СТА будет представлять собой предложение подписаться на рассылку, которую будет полезно читать, скачать важное программное обеспечение или учебник в электронном варианте.
С призывами к действию можно постоянно экспериментировать, необходимо добиваться повышения их кликабельности. Эксперименты могут касаться не только формы СТА, но также его дизайна, места, в котором он будет расположен. Рано или поздно вы поймете, какие именно призывы на вашем сайте собирают наибольшее число переходов.
Рано или поздно призывы к действию будут приводить ваших посетителей на так называемые страницы «приземления». Именно здесь посетители постепенно становятся важными лидами. Что должна включать в себя целевая страница?
— Интересные заголовок, а также подзаголовки, которые позволят понять, о чем идет речь на странице сайта. Важно, чтобы подзаголовки давали некую ценную информацию, способствующую прочтению текста страницы полностью. Они должны привлекать посетителей.
— Не забывайте о размещении на странице поддерживающих изображений. Это важно не только для дизайна, но и способствует продвижению сайта.
— Не забудьте о размещении веб-формы, которую пользователям необходимо будет заполнить для осуществления заказа, регистрации или скачивания предложенного продукта.
CTA-кнопка: 10 столпов эффективности
Расскажу о первых факторах которые, по моему мнению, влияют на эффективность CTA (call to action) кнопки, она же «купить» в икоммерц-проектах.
Никаких советов и кейсов, скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.
1) Расположение
Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране — то сами, своими руками, снижаем конверсию.
Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.
Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.
2) Размер
Размер это акцент, акцент это приоритет, приоритет это что? Да — кто здесь главный. Если мы хотим продавать, то СТА-кнопка должна быть главной, то есть большого размера.
Но, не слишком большого, чтобы не выпадать из дизайна и не занимать половину экрана.
На сайте Yoox нет сомнений какой элемент интерфейса главный.
3) Цвет
Что мы имеем здесь. Хорошо, если он контрастный, то есть отличается от цвета основных элементов сайта. Но, выпадение его из дизайна создает ощущение кичливости. Именно поэтому я не считаю универсальными и лучшими оттенки красного/оранжевого (что принято в среде юзабилистов). Но, в некоторых случаях, они действительно работают, все зависит от дизайна сайта.
На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.
4) Текст (содержание)
На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.
5) Форма
В этом пункте сильная привязка к дизайну сайта, но в общем случае прямоугольную форму можно считать предпочтительной, она наиболее распространена и комфортна для пользователей.
На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.
6) Интерактивность / тактильность
Как хорошо порой поиграть с кнопкой наведением мыши. Раз, два, три навел и вот — ты ее уже нажал. Редкий случай? Нет, это работает. Поэтому по оверлею меняем цвет, увеличиваем шрифт или еще каким-то образом меняем кнопку. И это правильно!
Еще можно по дать всплывающую подсказку, это тоже интерактивность.
Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.
И, конечно, если кнопка выпуклая, то при нажатии ее лучше вдавливать, это и есть тактильность. Поэтому объемная кнопка с тенью обычно предпочтительней плоской.
7) Повторение
Если у нас простыня контента (например, лендинг), то кнопку хорошо повторить. Почему? Чтобы для ее нажатия не надо было много скроллить вверх. И еще, чтобы напомнить пользователю зачем мы все это на странице ему показываем — чтобы он купил.
На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.
8) Качество исполнения
Отдельный пункт, который и так понятен, но не всегда реализован. Некрасивая, кривая кнопка нажимается реже, даже если весь сайт еще ничего. Это барьер, который никому не нужен и убирается легко любым толковым дизайнером.
Кроме того, хорошая кнопка вокруг имеет отступ, это увеличивает ее самостоятельность и выделяет из всего контента. Плохая — липнет к краям и другим объектам.
Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.
9) Изменяемость
При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? — Никому. Привлекает внимание? — Да.
Прием для сплит-теста годится, пробуем.
10) Взаимосвязь с другими CTA-кнопками
Самый сложный момент. Не могу дать правил, но если у нас рядом с основной кнопкой другие, то они друг на друга влияют и это надо учитывать. Нет ничего хуже двух похожих рядом, это пессимизирует обе, снижая их CTR.
На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.
Заключение
Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии — прямо и непосредственно. Я повышал за счет этого продуктивность в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.
CTA кнопка: она провоцирует меня!
Под понятием «СТА-кнопка» подразумевают кнопку действия на странице сайта или рекламного поста, которую пользователь должен нажать по мнению создателей. Обычно это такие кнопки как «купить», «заказать», «узнать подробнее» и так далее.
СТА элементы – это элементы, сопутствующие последовательности действий, которые ведут к целевой конверсии. Поля для ввода, выбора значения, сама форма сбора контактных данных – примеры таких элементов.
Представим: вы закупаете трафик и направляете его на лендинг.
В данном случае лендинг выполняет три самых важных функции:
СТА-кнопка нужна, чтобы повысить эффективность третьего пункта. Именно нажатие на нее приводит к конверсии. Странно, что многие арбитраны не уделяют ей такого же внимания, как тексту лендинга или заголовку формы обратной связи.
Заголовки лендинга привлекают внимание аудитории. Текст разъясняет особенности вашего продукта. Форма обратной связи помогает получить информацию о посетителях. Но именно СТА кнопка дает конверсии.
Дело в том, что ваши посетители не будут кликать на любую первую попавшуюся кнопку. Они нажмут лишь на эффективную СТА кнопку. Эта кнопка должна не просто привлекать внимание — она должна сообщать точно, что именно получит клиент, если нажмет на нее.
Кнопки СТА могут быть не только на лендингах, но и в рекламных постах таких социальных сетей как Facebook, Instagram, с недавних пор ВКонтакте и рекламной платформе MyTarget.
Работать с ними достаточно просто. Вы выбираете нужный вариант, в зависимости от преследуемой цели и включаете кнопку действия в свой рекламный пост:
Не заставляйте их задумываться, изучать ваши материалы без должной на то необходимости, сокращайте время на принятие решения и получайте гораздо больше лидов: подписчиков, звонков, контактных данных или мгновенных продаж.
Определитесь с целью и подобирайте под нее нужную кнопку, не забывая тестировать различные варианты.
Другое дело кнопка действия на собственном сайте, когда у вас в руках полный контроль над созданием и с расположением данной кнопки. В этом случае малейшие изменения, и манипуляции с СТА кнопкой могут существенно повысить конверсию или обвалить ее полностью.
Рассмотрим основные рекомендации по правильной работе с СТА кнопками на ваших сайтах/лендингах.
Представим среднестатистического посетителя сайта. Его интересует решение своей проблемы и он находится в поисках идеального предложения. Когда клиент оказывается на сайте, нужно успеть направить его в «правильное русло» как можно скорее. Не надо заставлять его разгадывать ментальные ребусы, чтобы понять где и как осуществить заказ.
Казалось бы, это очевидно. Если вы создаете страницу сайта и хотите, чтобы пользователь после ее просмотра нажал определенную кнопку, то стоит ли делать её яркой и контрастной к остальному содержимому, чтобы она была хорошо заметна? Но на самом деле, не все так просто и есть еще ряд моментов, которые необходимо понимать, чтоб СТА кнопка работала действительно эффективно.
Расположение кнопки
Согласно статистике, до 50% пользователей сайта не скроллят страницу вниз. Они могут изучить «первый экран» и сразу закрыть окно. Располагая кнопку действия на втором экране, мы увеличиваем шансы на ее неэффективность. Дайте возможность своим клиентам увидеть кнопку и совершить целевое действие при первом контакте с сайтом.
Традиционно, место CTA кнопки справа, потому как люди обычно читают информацию слева направо.
На сайте Nike с расположением кнопки СТA все в порядке
Размер и цвет кнопки
Если мы хотим успешно продавать, то СТА кнопка должна быть главной! Не дайте ей затеряться среди остальных кнопок сайта. Сделайте ее большой, но не настолько, чтобы выпадать из общего дизайна страницы и занимать половину экрана.
Хорошо, если цвет кнопки будет контрастным и отличаться от других элементов сайта. Только не стоит использовать слишком вызывающие цвета. Главное, чтобы все гармонично сочеталось.
Контрастный цвет СТА кнопки сразу дает понять кто здесь главный!
Текст кнопки
Правильный текст в СТА кнопке должен отражать и конкретизировать действие. А также содержать призыв, не быть нейтральным. И по возможности, включать эмпатию (положить в мою корзину, купи меня и тд.)
Сомнительный призыв к действию.
Форма
Более предпочтительной и распространенной является прямоугольная форма. Но главное, чтобы была привязка к дизайну страницы.
Интерактивность кнопки
Различные красивые эффекты с кнопкой, дополнительная анимация и всплывающие подсказки – все это действительно работает. Если кнопка выпуклая, при нажатии на нее можно показать, как она красиво «вдавливается», и этот маленький нюанс также повышает ее эффективность. Поэтому, объемные кнопки с тенью, обычно предпочтительнее плоских.
Нет текста с призывом, сомнительные форма и расположение
Повторение кнопки
Если мы используем лендинг, то на одной странице как правило, размещается огромное количество контента. Если пользователь, в ходе ознакомления не «отвалился» то, лучше будет повторить кнопку в завершающем блоке страницы. Этим самым мы напоминаем, зачем он здесь и какой цели нам нужно достигнуть. В противном случае, найдутся лентяи, которые не захотят скролить страницу вверх и просто закроют ее.
Повторная форма заявки и кнопка СТА в последнем блоке лендинга
Качество исполнения
Пункт, который и так понятен, но не всегда реализован. Кривые, некрасивые кнопки, будут нажиматься реже, даже если сам сайт сделан нормально. Качественно сделанная кнопка имеет небольшой отступ вокруг себя, что прибавляет ей самостоятельности. Плохая – будет липнуть к краям других элементов сайта, что поможет ей остаться незамеченной.
Качество дизайна и исполнение кнопок вызывают подозрение, что на дизайнере сэкономили
Взаимосвязь с другими кнопками и сайтом
Если ваша кнопка цепляется за край страницы при скроллинге или меняет цвет, шрифт и т.д. – это привлекает дополнительное внимание пользователей. Такой прием можно взять на вооружение. Но если кнопок две, и они находятся рядом с друг другом, это только снижает их CTR. Лучше избежать использование двух похожих кнопок.
Добавить в корзину или купить в 1 клик? Сомнения по поводу спеццены и расхождения с суммой возле кнопки. Пойду поищу куртку там, где все однозначно
Вывод:
Факторов, которые влияют на кликабельность и конверсию кнопки CTA, достаточно много. Каждый из них влияет по-своему, не говоря уже об их совокупности. Какие будут работать на вашем сайте – покажут тесты. Не ленитесь проводить сплит тестирование кнопки, постепенно внося коррективы и тестируя различные варианты цветов, оформления, текста, расположения и т.д.
Используйте кнопку призыва к действию – не оставьте потенциальным клиентам шансов сбежать.
Всем успехов в работе! Не забудьте сохранить эту ссылку у себя на странице или в закладках.
6 особенностей высококонверсионных СТА-элементов на лендинге
Кнопка призыва к действию (Call To Action) — возможно, один из самых важных элементов лендинга и товарной страницы интернет-магазина. Нужно понимать, что высококонверсионным лендинг делают множество деталей. Кнопка призыва к действию — лишь один из этих элементов, как ингредиент в кулинарном рецепте.
Эффективность посадочной страницы не зависит исключительно от CTA, ведь важна вся совокупность факторов, которая включает и настройку входящего трафика. Однако среди визуальных элементов в рамках макета страницы призыв к действию — в списке ТОП 5 наиболее значимых.
Содержание:
1. CTA-кнопки должны оставаться кнопками
Возможно, это прозвучит слишком банально, но конверсионная CTA-кнопка должна быть кнопкой, а не чем-нибудь еще.
Кнопка призыва к действию — не текст, не ссылка, не gif-анимация или нечто другое. Это настолько действенный и мощный инструмент, что нет нужды изобретать что-то, помимо обыкновенной кнопки, например, лендинга.
Совсем необязательно давать волю маркетинговой фантазии или пытаться стать трендсеттером в области оптимизации конверсии. И вот почему.
Мозг человека ориентируется на привычные вещи. Нам действительно нравится рутина. Дело в том, что головной мозг функционирует по определенным схемам и шаблонам, нейропсихологи их называют поведенческими паттернами.
Да, психические процессы обладают пластичностью и, как следствие, способностью к адаптации, которую можно развивать, но в действительности мы — рабы привычного образа действий. Если, к примеру, завтра утром путь от вашей кровати до ванной станет другим (допустим, стены исчезнут или передвинутся), вам будет очень тяжело сориентироваться. Перемены застанут вас врасплох.
То же самое распространяется и на CTA-кнопки. У пользователей уже сложился определенный опыт взаимодействия в онлайне, исходя из которого они знают: элементы призыва к действию обычно принимают форму кнопок. И если посетители видят кнопку, то сразу понимают, что надо делать.
Следующий пример: SMM-агентство iCrossing. Здесь мы видим не столько лендинг пейдж, сколько смесь из маркетинговых уловок и контента, нацеленного на самопиар. Невозможно понять, где именно элемент призыва к действию, потому что на странице нет кнопки. Что нужно сделать? Скачать pdf-документ? Как вообще связаться с кем-либо?
Такое же разочарование можно испытать в отношении еще одного известного бренда в сфере интернет-маркетинга — Levy Online. И хотя они позиционируют себя как самую надежную компанию в области интернет-рекламы, воспользоваться их услугами довольно сложно. Не стоит ждать, когда клиенты свяжутся с вами по телефону, ведь сегодня на это просто не хватает времени. Нужны CTA-элементы.
Следующий пример, лендинг Capgemini, кажется, пытается подтолкнуть посетителя к какому-то действию. Но к какому? Куда надо нажимать — на одну из панелей в стиле Windows 8? Странный подход для агентства интернет-рекламы.
Деньги, которые были вложены в PCP-рекламу, явно потрачены впустую.
South University стоит на ступеньку выше, чем iCrossing: на их лендинге есть кнопка. Да, небольшая и малозаметная. Но, по крайней мере, это кнопка.
Constant Contact знают, что делают. На их ресурсе есть большая и яркая кнопка призыва к действию. А главное — она сразу бросается в глаза.
В общем и целом, хорошие CTA-кнопки обладают следующими характеристиками:
СТА-элементы не всегда должны быть в виде прямоугольников, но, как правило, это так. Встречаются варианты со скругленными или скошенными краями, с тенью — и все они довольно неплохи.
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-кнопки в самом низу все равно остается логичным шагом.
4. Лучше использовать контрастные цвета
И хотя можно спорить насчет степени важности цвета кнопки, но все же стоит обратить внимание на данный аспект. Просто нужно помнить, что цветовая гамма не настолько значима, как это пытаются доказать многие маркетологи.
Эффективные кнопки всегда имеют контрастный оттенок по сравнению с остальными элементами интерфейса.
Приведем пример из email-маркетинга — ведь рекомендация относительно цветовой гаммы справедлива не только для лендингов. Перед вами письмо из CrazyEgg. Самое первое, что бросается в глаза по мере скроллинга — вот эта желтая кнопка в конце.
Думается, что email-маркетологам стоит взять на вооружение данный подход. Прежде всего, сделать так, чтобы CTA-кнопка стала обязательным элементом письма. Почему бы и нет? Во-вторых, эта самая кнопка, конечно, должна быть контрастного цвета.
Призыв к действию должен привлекать внимание посетителя. И добиться этого не получится, пока цвет самой кнопки не поможет вам.
Вот прекрасная кнопка призыва к действию, которая буквально кричит: «Нажми меня!» Очень мощный красный цвет.
Похоже на то, что красный и оранжевый — самые популярные оттенки для кнопок. Посмотрите еще один пример на сайте Disruptive Advertising.
А эта оранжевая кнопка размещена на Social Media Examiner.
Неоновый зеленый на голубом фоне, как у Toonimo? Тоже неплохо.
5. CTA-кнопки тесно связаны с предыдущим действием
СТА-кнопки стимулируют к активности в силу того, что находятся на пути движения взгляда и действий посетителя.
На многих лендингах используется эффекта параллакса. Каждая часть (или слой) страницы совершает определенное действие. И когда пользователь прокручивает ее вниз, он «встречает» элементы Call-to-Action. Т.е. после прокрутки производится переход к CTA — это и есть пример близости CTA-кнопок к предыдущему действию пользователя на сайте.
6. СТА-кнопки не должны конкурировать с элементами интерфейса
Хорошо, когда кнопка окружена достаточным количеством свободного пространства. Не стоит «заставлять» ее вступать в конфронтацию с другими элементами на странице.
Ниже приведен пример того, как делать не надо. Понятно, что кнопка «View our work» («Посмотреть наши работы») отвлекает внимание посетителей от кнопки «Get started today» («Приступить к работе»). Вместо того чтобы зарегистрироваться, пользователь только потратит время, просматривая предложенные кейсы. К чему такое соревнование? В этом нет необходимости.
А вот хороший пример. Взгляд переносится непосредственно к элементу призыва к действию. Все, что есть на веб-странице — изображения, список, заголовок и т.д, ведет к одному — к кнопке Call-to-Action.
На странице в Facebook СТА-кнопка очень важна. Ничто не привлекает внимание посетителя так сильно, как призыв «Create Ad» («Создать объявление»).
То же самое касается и сервиса Formstack. Все незаполненное пространство обслуживает большую оранжевую кнопку Call-to-Action.
Выводы
Создание эффективных СТА-элементов — не такое сложное занятие. Однако приемы из арсенала интернет-маркетинга и оптимизации конверсии через конверсионные элементы помогут в этом только до определенной степени.
В основном, стоит опираться на логику, здравый смысл и конечно сплит-тест. Тогда все обязательно получится.
