Призыв к действию на сайте может изменить многое. Например, увеличить продажи или убить конверсии. Разбираемся на примерах, как создать убедительный CTA для интернет-магазина.
Что такое CTA
CTA — Call to Action, или призыв к действию, — это элемент веб-страницы, который побуждает посетителя совершить определенное действие. Например, купить товар, подписаться на рассылку или поделиться контентом в соцсетях.
В интернет-магазинах и на маркетплейсах CTA играет ключевую роль. Именно от призыва к действию зависит, перейдет ли посетитель от просмотра страницы к покупке товара.
Виды CTA
CTA могут выглядеть совершенно по-разному, а значит, и классификаций призывов к действию может быть множество. Например, CTA различаются по способам реализации на сайте. Вот некоторые распространенные варианты:
- Кнопки в карточках товаров. Сокращают путь к покупке.
- Баннеры на главной странице сайта или в отдельных секциях. Часто служат тому, чтобы возбудить у пользователя интерес к определенным товарам или акциям.
- Поп-ап окна, или всплывающие окна. Обычно появляются после определенного времени пребывания на сайте или при попытке покинуть страницу. В первом случае призваны повысить конверсию, во втором — удержать пользователя или получить его контакты.
- Формы, анкеты или опросы. Размещаются в разных частях сайта, их главная задача — мотивировать пользователя оставить свои контакты.
Еще одна классификация CTA основана на степени их воздействия на пользователя. Здесь все призывы к действию можно разделить на две большие группы:
- Жесткие CTA. Всё, что нацелено на покупку: «Купить сейчас», «Оформить заказ», «Оплатить». Зачастую используются на нижних этапах воронки продаж, например, в карточке товара или перед оформлением покупки.
- Мягкие CTA. Они мотивируют пользователя к дальнейшему взаимодействию с сайтом или брендом, расширяя верх воронки продаж.
Мягкие призывы к действию также можно разделить на несколько групп в зависимости от их целей:
- Узнать больше — удерживают пользователя на сайте бренда, помогают повысить его осведомленность о продукте. В ecommerce¹ обычно используются призывы познакомиться с брендом или какой-то категорией товаров, узнать о товарах, участвующих в акции и т. д.
- Оставить контакты — помогают получить лид, чтобы «догреть» его и продвинуть на нижние стадии воронки продаж. В онлайн-торговле часто используется схема «скидка за подписку на рассылку».
- Распространить информацию — мотивируют пользователей поделиться контентом с другими людьми, чтобы расширить охват бренда среди потенциальных клиентов. Чаще используется в нативных форматах продвижения. Например, если бренд добавляет кнопку «поделиться» в экспертную статью о компонентах в косметике или в стрим с блогером.
Несмотря на разнообразие видов CTA, большинство из них работают по похожим правилам. В этой статье мы на примерах разберемся, каким должен быть удачный призыв к действию на сайте ecommerce-бренда.
Признаки удачной СТА
Не все CTA одинаково полезны для бизнеса. Какими чертами должен обладать призыв к действию, способный принести результат?
Контрастность и заметность
Элемент с призывом к действию должен выделяться на странице, чтобы сразу же привлечь внимание пользователя. Это достигается благодаря использованию контрастного цвета, размера шрифта или расположения элемента. Простую надпись того же цвета, что и остальной текст, будет легко пропустить.
Хорошая тактика — оформить CTA в виде кнопки. По некоторым данным, такой подход позволяет увеличить количество кликов на 45%². К тому же кнопка зачастую заметнее, чем простой текст. К примеру, призыв к действию на баннере выглядит как кнопка контрастного по отношению к фону цвета, что сразу обращает на себя внимание.
Понятные формулировки и вид
CTA похожи на ценники в офлайн-магазинах — покупатель ожидает, что они будут выглядеть определенным образом; слишком необычный формат может сбить с толку. В этом смысле кнопка в виде удлиненного прямоугольника насыщенного цвета лучше, чем круг или ромб.
Кстати, 92%³ брендов используют один и тот же стиль CTA на всем сайте. Цвет кнопки выбран так, чтобы вписываться в палитру и эстетику бренда. Поэтому чаще всего вы можете встретить в онлайн-магазинах CTA черного, синего и красного цветов.
Текст призыва также важно не усложнить. Четкие, лаконичные формулировки могут подтолкнуть пользователей к следующему шагу на вашем сайте, в то время как запутанные, длинные CTA вызывают замешательство и нерешительность. Знакомые формулировки вроде «Добавить в корзину» или «Заказать» скорее всего сработают лучше, чем, например, «Порадовать себя».
Сохранение фокуса при использовании двух CTA
Иногда интернет-магазины используют сразу несколько CTA, чтобы повысить шансы на конверсию. В этом случае важно, чтобы призывы к действию не конфликтовали друг с другом за внимание пользователя. Основной CTA должен визуально доминировать над остальными через яркий цвет, больший размер кнопки или шрифта, а также убедительный текст.
Ниже пример решения от косметического бренда, который предоставляет покупателям опцию сделать заказ у своих официальных представителей на маркетплейсах. В то же время, благодаря размеру кнопки сразу понятно, какой призыв к действию всё-таки в приоритете
Нередко в интернет-магазинах можно встретить так называемые кнопки-призраки (ghost button) — прозрачные кнопки, у которых видна только граница. 54%⁴ ecommerce-компаний используют их, как вторую опцию. Такие CTA не оттягивают на себя слишком много внимания от главной опции и легко вписываются практически в любой стиль бренда.
Вариация на тему кнопок-призраков — кнопки в менее насыщенном цвете, чем основной CTA. Такой вариант можно увидеть на примере ниже — вторая кнопка хоть и непрозрачная, но не конкурирует с основным призывом к действию слишком сильно. При этом использование двух оттенков одного цвета не вызывает диссонанса и не раздражает глаз.
Размещение на первом экране страницы
Всё просто: чем дольше нужно прокручивать страницу до кнопки «Купить», тем меньше заказов будет оформлено. Поэтому подавляющее большинство брендов размещают CTA на первом экране.
Часто страницы с товаром довольно длинные: нужно уместить подробное описание и характеристики товара, отзывы, похожие продукты — всё, чтобы помочь клиенту принять решение о покупке. При этом чем дольше пользователь прокручивают страницу, тем дальше он от CTA, а значит и ниже шансы на конверсию.
На этот случай используют sticky⁵-баннер — элемент, закрепленный на экране при прокрутке страницы пользователем. Он позволяет не потерять CTA из виду и начать оформление c любого места на странице. Чаще всего такие баннеры расположены вверху, но могут «прилипать» и сбоку.
Подчеркивание опции забрать товар в магазине
Если у бренда есть как онлайн-, так и офлайн-магазины, полезно упомянуть возможность самовывоза в CTA. Часто заехать в торговый центр после работы гораздо удобнее, чем ожидать доставку курьером весь день.
Если сроки получения товара существенно различаются, это тоже стоит подчеркнуть. Бывают ситуации, когда товар нужен срочно, и возможность купить его прямо сейчас и забрать уже через полчаса может оказаться решающим фактором при выборе покупки.
Вот так зоомагазин подсветил возможность забрать нужный товар в торговой точке. По клику на надпись «6 магазинов» можно посмотреть список адресов, а выбрать желаемый способ получения товара — при оформлении покупки.
Создание ощущения срочности
Добавление временных ограничений или эксклюзивных предложений помогает создать чувство дефицита и подтолкнуть пользователей к быстрому принятию решения. Поэтому, если скидка действует ограниченное количество времени, лучше отразить это в самом CTA или рядом с ним.
Пример сверху одновременно и удачный, и нет. Временные рамки акции указаны и создают ощущение срочности. Улучшить CTA можно было бы, добавив активный глагол, например, «Успеть до 31.01».
Соответствие контексту
CTA должен логично вписываться в общий контент страницы. Проще всего объяснить это на примере двух баннеров из одного онлайн-гипермаркета.
Первый баннер знакомит пользователей с новым ароматом. У них пока нет потребности приобрести новинку, поэтому используется СТА с предложением перейти к товару. Кнопка «Добавить в корзину» на этом шаге могла бы восприниматься как слишком навязчивая.
На втором баннере продвигаются подарочные карты с интересным дизайном, а СТА призывает «Выбрать карту». В сущности это то же самое, что и призыв купить, но формулировка лучше гармонирует с контентом, не сбивая пользователя с толку.
Ориентация на выгоду
Глядя на CTA, пользователь должен точно понимать, что он получит, выполнив действие. Важно подчеркнуть ценность предложения, например, с помощью формулировок «Сэкономьте до 50%» или «Получите бесплатную доставку».
Такой прием чаще всего можно встретить на баннерах или поп-ап окнах. Однако маркетплейсы всё чаще подчеркивают выгоду рядом с CTA в карточке товара. Например, они предлагают скидки или начисление кешбэка при использовании определенных видов оплаты.
Как проанализировать эффективность CTA
Даже самый продуманные CTA элементы требуют проверки на практике. Чтобы понять, работает ли призыв к действию на сайте, важно опираться не на ощущения, а на конкретные метрики.
Обратите внимание на ключевые показатели:
Чтобы получить точные данные, используйте инструменты аналитики, например, Яндекс. Метрику, и обязательно настраивайте события на клики по кнопкам.
Дополнительно применяйте A/B-тестирование⁹:
Даже небольшие изменения CTA могут существенно повлиять на конверсию — как и отмечалось ранее, этот элемент напрямую влияет на поведение пользователя и результат сайта.
Обратите внимание на ключевые показатели:
- CTR⁷ (кликабельность CTA) — показывает, сколько пользователей нажали на кнопку. Если показатель низкий, проблема может быть в тексте, цвете или расположении элемента.
- Конверсия⁸ — сколько пользователей выполнили целевое действие после клика (покупка, заявка, подписка). Это главный показатель эффективности CTA.
- Глубина взаимодействия — помогает понять, доходят ли пользователи до CTA, особенно если он расположен не на первом экране.
- Показатель отказов — если пользователь уходит со страницы, не взаимодействуя с CTA, стоит пересмотреть его релевантность или заметность.
Чтобы получить точные данные, используйте инструменты аналитики, например, Яндекс. Метрику, и обязательно настраивайте события на клики по кнопкам.
Дополнительно применяйте A/B-тестирование⁹:
- сравнивайте разные тексты («Купить» vs «Получить скидку»),
- тестируйте цвета и размеры кнопок,
- проверяйте разные позиции на странице.
Даже небольшие изменения CTA могут существенно повлиять на конверсию — как и отмечалось ранее, этот элемент напрямую влияет на поведение пользователя и результат сайта.
Заключение
CTA — не тот элемент интерфейса, которым можно заниматься по остаточному принципу. Грамотно составленный призыв к действию способен значительно повысить конверсии сайта в любой нише.
К примеру, отель смог повысить конверсии на 32.12%⁶, заменив текстовый призыв к действию на кнопку. Брендам в разных нишах удавалось добиваться не менее впечатляющих результатов, изменив цвет или размер кнопки, текст на ней, добавив или убрав поля ввода данных и так далее.
В этой статье мы разобрали основные приемы работы с CTA в ecommerce. Эти лучшие практики считаются необходимой базой, чтобы получить от ваших призывов к действию максимум эффективности. Но важно помнить, что маркетинг — это всегда поле для экспериментов. Тестируйте разные варианты CTA и находите то, что сработает лучше всего именно в вашем случае.
Больше инсайтов и материалов по продвижению бизнеса в ecommerce и других сферах читайте в телеграм-канале Наш Бизнес Софт.
¹ Электронная коммерция
² https://copyblogger.com/call-to-action-buttons/
³ https://www.outerboxdesign.com/search-marketing/search-engine-optimization/call-to-action-buttons-an-analysis-of-top-ecommerce-companies
⁴ https://www.outerboxdesign.com/search-marketing/search-engine-optimization/call-to-action-buttons-an-analysis-of-top-ecommerce-companies
⁵ липкий
⁶ https://vwo.com/success-stories/the-vineyard/
⁷ CTR (от англ. Click-through Rate, «кликабельность») — это коэффициент, который показывает отношение числа кликов на рекламу к количеству ее показов.
⁸ Конверсия (от англ. conversion rate, CR) в интернет-маркетинге — это отношение числа посетителей сайта, совершивших целевое действие (покупку, регистрацию, подписку), к общему числу посетителей, выраженное в процентах.
⁹ A/B‑тестирование (англ. A/B testing, также split testing — «сплит‑тест») — это метод маркетингового и продуктового исследования, основанный на рандомизированном контролируемом эксперименте. Его цель — сравнить два варианта какого‑либо элемента (A и B), чтобы определить, какой из них эффективнее влияет на целевые метрики.
² https://copyblogger.com/call-to-action-buttons/
³ https://www.outerboxdesign.com/search-marketing/search-engine-optimization/call-to-action-buttons-an-analysis-of-top-ecommerce-companies
⁴ https://www.outerboxdesign.com/search-marketing/search-engine-optimization/call-to-action-buttons-an-analysis-of-top-ecommerce-companies
⁵ липкий
⁶ https://vwo.com/success-stories/the-vineyard/
⁷ CTR (от англ. Click-through Rate, «кликабельность») — это коэффициент, который показывает отношение числа кликов на рекламу к количеству ее показов.
⁸ Конверсия (от англ. conversion rate, CR) в интернет-маркетинге — это отношение числа посетителей сайта, совершивших целевое действие (покупку, регистрацию, подписку), к общему числу посетителей, выраженное в процентах.
⁹ A/B‑тестирование (англ. A/B testing, также split testing — «сплит‑тест») — это метод маркетингового и продуктового исследования, основанный на рандомизированном контролируемом эксперименте. Его цель — сравнить два варианта какого‑либо элемента (A и B), чтобы определить, какой из них эффективнее влияет на целевые метрики.
