Всем, кто занимается продажами в сети, знаком термин «Call-to-action», что означает «призыв к действию». На каждой странице сайта, который что-то продает, должен быть этот элемент. Как правильно его создать, где разместить, чтобы он эффективно работал, вы узнаете в этой статье.
CTA – это графический элемент, который мотивирует и призывает посетителей сайта совершить конкретное действие, к примеру: купить, скачать, подписаться на рассылку и т.д. СТА подсказывает, что именно должен сделать посетитель и чего от него ожидает разработчик этой страницы. Кнопка может «предложить» сделать заказ на услугу или товар, пройти регистрацию или получить бесплатную аналитику: например, с помощью (на сайтах маркетинговых сервисов) и т.п.
Целевое действие повышает конверсию, увеличивает продажи и облегчает продвижение товара.
Элементы для сайта, в виде кнопки CTA, должны быть заметными на странице, выделяться, чтобы человек сразу обратил на них свое внимание.
Наиболее популярным элементом СТА являются кнопки, на которых нанесена надпись, которая поясняет, что будет после ее нажатия. К примеру: «Зарегистрироваться», «Скачать», «Получить скидку» или кнопка «Купить» т.д. Кол ту экшн может переадресовывать клиента на другую страницу, где он может получить более подробную информацию. Тогда уместна надпись «Узнать подробнее», «Получить информацию» и т.д.
Именно призыв к действию мотивирует лида стать реальным покупателем. Если же покупатель не решился сделать заказ и ушел с сайта, инструментом для его возвращения станут (в 10 раз дешевле привлечения новых лидов).
Как же правильно сформулировать призыв CTA, где разместить и как проверить его эффективность?
Идеально, если на сайте будет размещено несколько призывов, которые проведут покупателя последовательно от выбора до покупки товара.
Для начала нужно определиться, к каким объектам вы будете делать колл-ту-экшн.
Это могут быть товары или продукты , эксклюзивные товары или уникальные услуги.
Также вы можете изучить поведение пользователя, куда они заходят после посещения вашей страницы и предложить им эту информацию в CTA. Такую статистику можно посмотреть в Google Аналитике. Можно разместить кнопку CTA с предложением подписки на новости сайта, информацию о скидках на странице, где вы благодарите клиента за совершение покупки.
Напомнить о скидках и акциях можно дополнительно — например, при помощи .
На главной странице сайта нужно расположить не менее трех СТА. Также не будет лишним разместить СТА на целевой странице, на которую вы непосредственно приводите пользователя, чтобы он совершил покупку, регистрацию и т.д. С этой странички нужно убрать все, что может отвлечь клиента (баннеры, ссылки, отзывы). СТА должны соответствовать содержанию самой страницы. Если это страница продаваемого продукта, то именно на ней лучше разместить призыв «Бесплатно протестировать продукт», а не на главной странице.
На всех страницах нужно продумать СТА, чтобы они направляли пользователя, куда ему двигаться дальше по вашему сайту и что он может получить. Это своего рода путеводитель по сайту: чтобы человек задержался на сайте, а не ушел с него, закрыл и больше никогда не вспомнил.
Если пользователь подписался на рассылку, скачал инструкцию или записался на курс – его взаимодействие с вашими СТА не должно на этом закончиться. Размещайте СТА во всех материалах, которые вы отправляете пользователю. Ваша активность — это залог успеха.
Чтобы CTA-кнопка привлекала к себе внимание, необходимо придерживаться определенных правил размещения:
Мало кто из пользователей скроллит страницу вниз, поэтому кнопку СТА нужно размещать на первом экране, иначе вы снизите конверсию.
Посмотрите, на каком пикселе вверху находится ваша кнопка, и сверьте ее с высотой экранов юзеров по Google Analytics. Если нижний край кнопки находится на 900-м пикселе, то треть юзеров получает ее на втором экране. Вы должны понимать, что, чем выше находится кнопка СТА, тем лучше. Учитывая, что большинство людей правши, кнопка должна находиться немного правее от центра экрана.
Факторы, которые влияют на эффективность СТА:
У всех призывов к действию есть обязательные общие черты.
CTA (Call to Action) - это призыв, мотивирующий пользователя к совершению того или иного действия (перейти, заполнить форму, позвонить, купить, узнать и т. д.). Call to Action является заключительным этапом в классической модели AIDA. Грамотно выстроенный CTA должен привлечь внимание, заинтересовать и побудить человека совершить действие. Эффективность CTA-элемента - это важный показатель, который необходимо постоянно отслеживать. Наблюдайте за тем, сколько людей пришло на целевую страницу и сколько из них совершило действие. Если данное значение слишком низкое, значит что-то не так с CTA-элементом.
В качестве элемента CTA может выступать кнопка, изображение, форма или даже текст, призывающий к какому-либо действию. Его можно использовать везде, в любом контенте, например в тех же презентациях, вебинарах, на баннерах и т. д. Даже голос по радио, призывающий позвонить или зайти на сайт радиостанции, является Call to Action.
Существует несколько техник, способных увеличить эффективность CTA.
Call to Action – это триггер, побуждающий пользователя совершить то или иное действие. И чем оригинальнее и интереснее будет данный триггер, тем больше людей по нему кликнут.
7 сентября 2012 в 12:56Форма и цвет - важные визуальные сигналы, они помогают привлечь внимание к расположению кнопки. Но в тот последний критический момент, когда клиент должен принять решение, он будет взаимодействовать именно с текстом кнопки.
Вот пример из исследования кейса, где изменение одного слова в CTA на B2B (wiki) сайте привело к 38.26% повышению конверсии.
У заказчика был портал, через который бизнесмены находили офисы под аренду. Сайт предоставлял тысячи офисов, которые потенциальные покупатели могли посмотреть. Когда клиенты находили подходящий офис, они должны были нажать на главный CTA (находившийся на всех страницах) чтобы получить на e-mail больше информации об арендном предложении.
Это значит, что нажатия на CTA это критически важная цель для конверсии и каждый дополнительный клик потенциально значит больше денег на счету.
Ответ в посыле кнопки. «Закажите» («Order») подчёркивает что вам нужно сделать - а не то, что вы собираетесь получить. При этом «Получить» («Get») подчёркивает что вы собираетесь получить, нежели то, что вам нужно сделать для этого. Другими словами трактовка текста отражает смысл.
Но отражения смысла не всегда достаточно. Чтобы достичь полного эффекта, текст вашей кнопки должен еще обоснован спецификой сценария конверсии, в котором окажется клиент, если нажмёт кнопку.
Чтобы показать это, посмотрите на пример, где CTA, отражающее только смысл, действует существенно хуже, чем кнопка, которая отражает и смысл и его уместность.
Здесь заказчик - популярный сайт эссе. Их лендинг пейджи (wiki) включают анонс эссе, и их цель - добиться от потенциальных клиентов перехода на страницу подписки.
Несмотря на тот факт, что «Получить мгновенный доступ сейчас» («Get Instant Access Now») передаёт смысл (можно было бы сказать «Купить доступ»), оно не сравнимо с «Читать полное эссе сейчас» («Read Full Essay Now»).
Этот CTA размещён на 120.000+ лендинг пейджах, поэтому правильное его использование имеет важнейшее значение для общей конверсии сайта.
Выше еще один пример, который показывает, как добавление уместности в CTA имеет впечатляющий эффект на конверсию - в этом случае, повышение на 68%.
Заказчик пожелал остаться анонимным, но я могу сказать, что это крупная сеть спортзалов в Скандинавии. Пример взят из PPC (wiki) лендинг пейджа, где цель - добиться от потенциального клиента кликов по процессу оформления заказа, в котором они смогут выбратьспортзал и подписаться на членство в нём.
Контроль-версия уже вполне хороша, потому что она отражает смысл и фокусирует на том, что вы собираетесь получать - а не то, что вам нужно сделать для этого. Тем не менее, это очень обобщённо, «Получи членство» («Get membership») можно применить к любой ситуации, где подразумевается членство.
Я сделал небольшое исследование и обнаружил, что местонахождение это очень важный фактор, влияющий на решение о вступлении в состав чего-нибудь. Поэтому, в этом случае, можно сделать CTA более уместным в конкретном сценарии конверсии и повысить конверсию добавлением «Найди спортзал» («Find gym») (Первый шаг в процессе оформления включает полный список местонахождений спортзалов).
Все исследования, которые я сделал, можно сжать в один простой оптимизационный принцип:
Смысл + Уместность = Больше Конверсии
Это правда очень просто. Чем больше смысла и уместности вы можете передать через ваш CTA, тем больше конверсии вы скорее всего получите. Конечно, важно не разочаровывать ваших потенциальных клиентов созданием вопиющих заявлений, которые вы не сможете подтвердить. Поэтому делайте ваши тексты уместными и фокусируйтесь на пользе от нажатия - но не преувеличевайте её.
Когда вы найдете CTA, который вы хотите оптимизировать, задайте себе два вопроса:
- Какая мотивация у клиента нажать эту кнопку?
- Что клиент получит, если нажмёт её?
Ответы на эти два вопроса будут основой нового текста кнопки. Конечно, вы потратите время, улучшая и оттачивая его, прежде чем он будет готов к тестам, но эти вопросы являются отличным способом начать.
Возьмём пример с членством в спорклуб:
- Мотивация клиента - стать членом-участником местного спортзала.
- Когда он нажмёт на кнопку, он получит возможность найти спортзал и вступить в его состав.
Текст кнопки: «Найди зал и получи членство»
Объединив научные исследования по психологии цвета с некоторыми принципами дизайна, вы сможете сделать отличную кнопку «Сall-to-action» (СТА) для вашего сайта отличную и существенно увеличить конверсию. Есть 4 инструмента, которые помогут этого достигнуть: расположение кнопки, форма (и размер), сообщение и цвет.
В этой статье я расскажу о цветовом аспекте.
Но давайте по-порядку...
Представьте, что ваш сайт — это цепочка действий, которые пользователям необходимо осуществить, чтобы найти то, за чем они пришли. Чтобы облегчить им жизнь, абсолютно необходимо сделать эту цепочку насколько простой (то есть user friendly ), насколько возможно, и вести их к желаемой странице без какого-либо вмешательства.
Так как некоторые из этих действий важнее других, они должны будут выделяться в интерфейсе. Вы хотите захватить внимание пользователей, пытаясь убедить их начать действовать (призыв к действию). Это чаще всего делается с помощь визуального маркера, элементов интерфейса с призывом к действию. Вот несколько примеров возможных действий: покупка продукта, подписка на рассылку, создание нового аккаунта, подача заявки, скачивание последней версии ПО,..
Но почему же цвета имеют такое значение?
Каждый цвет вызывает у людей разные чувства или настроения, и, следовательно, разную реакцию. Врачи и медсестры носят белое, что является знаком стерильности. Спортзалы часто выкрашены в синий, поскольку, как показали исследования, в синих залах тяжелоатлеты способны поднять больший вес.
Как видите, цвета — очень мощные инструменты для поощрения или, наоборот, блокировки определенных чувств. То есть вы можете в некоторой степени вести пользователей через ваш интерфейс, давая им принимать те решения, которые вы хотите, чтобы они приняли, при помощи правильных цветов и цветовых комбинаций. Но не начинайте прямо сейчас собирать цветовые схемы. Есть еще одна-две вещи, которые вам необходимо знать.
Хотя восприятие цветов и субъективно, некоторые цветовые эффекты имеют универсальное значение. К примеру: голубой цвет — холодный, а красный — теплый.
Во-вторых, восприятие цветов основано на особенностях культуры. Возьмем чёрный (который с научной точки зрения не является цветом) в качестве примера. Хотя во многих культурах чёрный ассоциируется со смертью и трауром, в Древнем Египте он также символизировал жизнь и перерождение.
Сьюзан Уэйншенк (Susan Weinschenk ), доктор философских наук и автор книги «Интуитивный веб-дизайн: Что заставляет людей переходить по ссылкам», написала об этом интересную . Не забудьте посмотреть McCandless Color Wheel, который вы можете его загрузить внизу страницы.
Kissmetrics сделали отличную инфографику о том, как цвета влияют на покупку.
Как я объясняю ниже, при разработке важных кнопок лучше использовать хороший контраст. Говоря о контрастных цветах, я на самом деле имею ввиду дополнительные (комплементарные) цвета. Комплементарные цвета расположены на цветовом круге друг напротив друга (см. картинку ниже). Если поместить их рядом, кажется, что они выглядят ярче.
Еще один пример использования комплементарных цветов — это одежда, которую надевают врачи во время работы в операционной. В большинстве случаев она зеленая или голубая. Эти два цвета позволяют докторам лучше воспринимать объекты красного цвета, а именно кровь и внутренности пациента, видеть их более чётко и замечать малейшие нюансы человеческого тела. Красный и зеленый — комплементарные цвета.
Как я отметил в начале статьи, СТА-кнопка представляет собой набор из 4 вещей: расположение, форма, сообщение и цвет. Если эти 4 аспекта хорошо соотносятся друг с другом, вы получаете отличную кнопку призыва к действию.
Имея это в виду, нужно также помнить о нескольких основных дизайнерских принципах и руководствах. Если вы хотите, чтобы элемент дизайна выделялся, вы можете окрасить его в комплементарный цвет по отношению к фону (вспомните о примере с The Resumator, который я приводил).
Маленькая подсказка: для больших кнопок используйте менее броский цвет (относительно окружающих её элементов и фона), а для маленьких кнопок, наоборот, нужны цвета поярче. Но какой бы цвет вы ни выбрали, убедитесь, разработанная кнопка будет заметна без вмешательства в основной дизайн.
Несмотря на то, что эта статья основана на научных исследованиях по психологии цвета и некоторых принципах дизайна, вы всегда должны сами тестировать свои кнопки призыва к действию, чтобы понять, что лучше подходит для вашего сайта. Вы можете ипользовать A/B или мультивариационное тестирование, или просто следовать этим
Ищете веб-студию, которая обеспечит вам качественную реализацию? Ознакомьтесь с результатами рейтинга креативности веб-студий.
Занимаемая в рейтинге креативности веб-студий строчка, зависит от количества побед и статуса конкурсов. Приглянулось сразу несколько команд? Нажав на зеленую кнопку, можно буквально в два клика пригласить их принять участие в вашем тендере.