Оставьте заявку!
Заполните контактные данные, мы свяжемся с вами, обсудим ваш проект и задачи.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
UX/UI

Всё, что нужно знать о call to action (СТА) в e-commerce проектах

Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Максим Жуков
Качество реализации призывов к действию и СТА-кнопок в интернет-магазине имеет огромное значение: если пользователь чего-то не поймет и не нажмет на кнопку, продажа не состоится. Разберемся, как создавать эффективные call to action с точки зрения текста и дизайна, где их размещать и как усиливать. Рассмотрим примеры СТА и способы анализа их эффективности.

Что такое СТА (Call To Action)

CTA — это призыв совершить действие, который оформляется как тестовая ссылка, кнопка или баннер (картинка). В интернет-магазинах чаще используются СТА-кнопки — самый эффективный вариант, повышающий вероятность выполнения целевого действия. На кнопке содержится надпись, поясняющая, что будет после нажатия. Так пользователь понимает, какие шаги нужно предпринять на каждом этапе воронки сайта. В статье сосредоточимся на кнопках.
Всё, что нужно знать о call to action (СТА) в e-commerce проектах
Ссылки в основном применяют для внутренней перелинковки — они направляют пользователя по определенному маршруту. Картинки используют на главной странице и в рассылке для привлечения внимания.

Значение Call To Action

Цель call to action — заставить посетителя выполнить целевое действие — сделать покупку, подписаться на рассылку и так далее. Если пользователь не поймет, чего от него хотят, все старания по подготовке и продумыванию контента или функционала будут напрасными. По сути, нажатие на СТА-кнопку — это результат, ради которого разрабатывали контент и функционал.
В попытках повысить конверсию часто тестируют все, что связано с СТА — текст, расположение и дизайн кнопки, потому что простые изменения могут привести к существенным улучшениям.
Грамотно реализованный СТА помогает:

Где может использоваться СТА в e-commerce проекте

Кнопки призыва к действию на сайте встречаются:
  • в карточке товара,
  • в корзине,
  • на главной (баннеры и формы подписки),
  • на странице категории,
  • на сервисных страницах,
  • в блоге,
  • на всплывающих окнах.
Кнопки call to action вне сайта могут использоваться:
  • в соцсетях,
  • в письмах рассылки,
  • на лендингах (акций и отдельных товаров).

Как создавать эффективные СТА

Чтобы СТА-кнопки привлекали внимание, мало сделать их крупными и яркими. Важно понимать психологию покупателя в целом и особенности аудитории в частности, чтобы и размещение, и текст, и дизайн кнопки отвечали потребностям покупателей. Главное правило: упрощайте пользователям жизнь.

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

Пользователь всегда должен видеть CTA, поэтому его размещают на видном месте — на первом экране, до «линии сгиба». Если страница длинная, кнопку дублируют через каждые 2-3 экрана. Также можно закреплять область экрана с кнопкой, чтобы СТА постоянно был на виду.
Крайне важно размещать СТА-элементы в привычных местах, там где пользователи ожидают их увидеть. Например, в карточках товаров фото обычно располагают слева, а кнопку — справа, возле или над кратким описанием товара.
Расположение СТА-кнопки на ozon.ru
Расположение СТА-кнопки на ozon.ru
Кнопка не должна перекрываться во время работы пользователя с элементами сайта.
Если вы размещаете сall to action на поп-апе, предлагайте покупателям что-то ценное и в подходящее вовремя, чтобы снизить градус раздражения.
Не выводите поп-ап сразу после входа посетителя на сайт. Привяжите к окну поведенческий триггер. Например, если покупатель долго изучает товары, но не делает покупку, подтолкните к ней с помощью СТА с выгодой. Или выведите подобное окно, если отследили намерение пользователя уйти с сайта.
Пример всплывающего окна с привлекательной СТА-кнопкой
Пример всплывающего окна с привлекательным СТА

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

CTA-кнопка должна выделяться на фоне контента, не нарушая при этом дизайн-концепцию. Выберите несколько цветов, которые соответствуют этому правилу, и определите лучший вариант с помощью A/B-тестирования. Цвет шрифта на кнопке тоже должен быть контрастным, а сам шрифт — таким, который уже используется на странице.
Размер кнопки имеет значение не только потому, что большая кнопка заметнее — по ней нужно легко попадать. Это особенно актуально для покупок с мобильных устройств. Вне зависимости от размера экрана, оптимальная высота кнопки — от 42 до 72 пикселей (11-19 мм), идеально — 60 пикселей (16 мм). А еще на большой кнопке легче уместить развернутый призыв к действию. Если кликать или тапать нужно на иконку, область касания должна быть шире, чем визуальные границы элемента.
Чтобы пользователь понимал статус кнопки, ее состояние должно меняться. Для этого применяют разные инструменты — изменение цвета, эффект нажатия, подсказки. Какие состояния должны быть:
  • с элементом не взаимодействовали,
  • элемент выделен,
  • на элемент навели курсор,
  • на кнопку нажали,
  • элемент неактивен.
Вот так меняется вид СТА-кнопки на wildberries.ru до и после нажатия:
Состояния кнопки призыва к действию CTA на wildberries.ru
Состояния кнопки добавления товара в корзину на wildberries.ru
Чтобы выстроить иерархию действий, создайте разные стили кнопок с помощью цветов или форм. Иначе основные и неосновные СТА будут сливаться. Пользователь не поймет, чего от него хотят в первую очередь и растеряется. Придется как минимум вчитываться в надписи на кнопках.
Неудачное оформление кнопок CTA
Неудачное оформление кнопок
Приоритетное целевое действие должно быть очевидным благодаря визуальным акцентам. Остальные СТА располагают ниже или рядом, подчеркивая их оформлением вторичность действия.
Обычно главную кнопку (первого уровня) создают самой яркой, а кнопки последующих уровней — более приглушенных оттенков того же цвета.
На citilink.ru кнопка «В корзину» выглядит гораздо ярче, объемней и контрастней, чем кнопки сравнения и избранного.
Реализация кнопок CTA на citilink.ru
Реализация кнопок на citilink.ru
В формах кнопка должна быть активной все время, даже если пользователь заполнил не все поля. Иногда кнопку деактивируют, но в этом случае посетитель может растеряться и уйти с сайта. При нажатии кнопки выводите подсказки, какие поля осталось заполнить.

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

Призыв должен быть простым и конкретным, чтобы пользователь понял, что от него требуется. Используйте глаголы — например, «Купить», «Добавить в корзину», «Подписаться».
Чтобы подобрать правильный глагол, ориентируйтесь на паттерны поведения аудитории. Если обычно покупают только один товар, логичнее использовать кнопку «Купить». Когда более 2 товаров — «Добавить в корзину».
Если можно сформулировать СТА от первого лица, используйте эту возможность — например, «Хочу подарок». Избегайте неоднозначных призывов вроде «Продолжить». Креативные призывы использовать можно, но только если уверены, что аудитория поймет.
Креативный призыв к действию на ozon.ru
Креативный призыв на ozon.ru
Покажите в призыве преимущества предложения и ценность для пользователя. Например, при подписке на блог можно предложить «Подписаться на рассылку», а можно «Получать полезные материалы о садоводстве». При этом стремитесь к лаконичности — уместите сall to action в 5 слов. В большинстве случаев уместно разместить рядом с СТА поясняющий и мотивирующий текст или использовать усилители.

Как усилить СТА

Чтобы привлечь к call to action больше внимания, используйте визуальные эффекты и понимание законов психологии.

Визуальное выделение кнопки

Обратить внимание аудитории на СТА можно, просто оставив вокруг него свободное пространство. Дополнительно используются всевозможные указатели и стрелочки, направленные на СТА.
Реализация СТА на tinkoff.ru
Реализация СТА на tinkoff.ru

Обещание выгоды

Напоминайте рядом с call to action, какую выгоду получит покупатель от конкретного товара. В интернет-магазине Yves Rocher ключевая выгода от применения товара размещена прямо под названием.
Выгода товара в карточке на yves-rocher.ru
Выгода товара в карточке на yves-rocher.ru
Не забывайте о выгодах от покупки в конкретном магазине. Все любят скидки, подарки и бонусы — по возможности используйте эти усилители. Внедрите программу лояльности и показывайте в карточке товара, сколько бонусов получит покупатель.
Отображение бонусов на eldorado.ru
Отображение бонусов на eldorado.ru

Быстрый результат

Покажите потенциальному покупателю возможность быстро получить товар — люди хотят обладать понравившейся вещью как можно скорее. Многие интернет-магазины используют эту технику, отображая в карточке привлекательный срок получения товара.
Отображение бонусов на eldorado.ru
Отображение бонусов на eldorado.ru

Принцип дефицита

Понимание, что предложение ограничено, стимулирует покупателей им воспользоваться — они боятся упустить важное. Можно сыграть на дефиците товаров или краткосрочности акции. Добавляйте фразы, которые создают впечатление дефицита — «предложение ограничено», «купить сейчас».
На rozetka.com.ua принцип дефицита используется в формате указания процента оставшегося товара.
Реализация принципа дефицита на rozetka.com.ua
Реализация принципа дефицита на rozetka.com.ua
Хорошо привлекает внимание таймер, подсчитывающий время до окончания предложения. Следите за тем, чтобы акции действительно заканчивались в обещанный срок, а не продлевались. Иначе доверие к интернет-магазину будет потеряно.

Социальное доказательство

Люди склонны доверять мнению других людей с релевантным опытом. Чем больше пользователей приобрели товар, тем выше его привлекательность в глазах потенциального покупателя. Чтобы это показать, используйте ярлык «ТОП продаж» или «Бестселлер», выводите число продаж товара, количество отзывов и рейтинг — это работает на доверие как социальное доказательство.
Реализация принципа дефицита на rozetka.com.ua
Указание количества отзывов и покупок на Wildberries.ru

Принцип авторитета

Невозможно разбираться во всем, поэтому люди склонны доверять авторитетам и приписывать их мнению высокую оценку. Кроме того, рекомендацию выполнить проще, чем решать самому.
В интернет-магазине принцип авторитета можно реализовать, указав в карточках товаров, что они рекомендованы соответствующими экспертами.
Пример рекомендации авторитета в карточке товара на naos.ru
Пример рекомендации авторитета в карточке товара на naos.ru
Лучше, если это будет конкретный известный эксперт.

Снятие тревоги

При покупке часто возникает сомнение в качестве товара. Никто не хочет рисковать. Дав пользователю гарантии и возможность возврата, вы существенно повысите шанс нажатия на СТА-кнопку. Размещайте информацию о гарантии и возврате или ссылку на соответствующие страницы как можно ближе к call to action.
Информация о возврате на ozon.ru
Информация о возврате на ozon.ru

Перечеркнутые цены

Понятия «дорого-дешево» относительны. Люди воспринимают цену не саму по себе, а в сравнении с другими. Если предоставить зачеркнутую старую цену, то актуальная, низкая цена будет выглядеть куда привлекательнее.
В yves-rocher.ru перечеркнутую и актуальную стоимость товара размещают прямо на СТА-кнопке.
Старая и новая цена на кнопке в yves-rocher.ru
Старая и новая цена на кнопке в yves-rocher.ru

Как проанализировать влияние СТА-кнопки на конверсию

Чтобы понять, как увеличить конверсию за счет изменения СТА-элементов, нужно изучить поведение пользователей, сформулировать гипотезы и проверить их.

Изучите поведение пользователей

Чтобы выяснить, как ведут себя покупатели, проанализируйте тепловые карты, карты скроллинга и записи сессий.
Тепловая карта покажет, как двигают мышкой, на какие элементы наводят курсор и кликают. Чем цвет ярче и теплее, тем большей популярностью пользуется элемент. Изучив тепловые карты, можно понять, что отвлекает внимание пользователя от СТА.
Пример карты кликов по кнопка CTA в Яндекс Метрике
Пример карты кликов в Яндекс Метрике
Карты скроллинга покажут, насколько далеко вниз страницу прокручивали. Карты скролла есть в Яндекс Метрике, Hotjar и других сервисах. Убедитесь, что пользователи доходят до СТА. В ином случае нужно поднять кнопку выше.
Пример карты скролла в Яндекс Метрике
Пример карты скролла в Яндекс Метрике
Записи сессий можно изучать в Hotjar. Вы увидите, как пользователи ведут себя в интернет-магазине, на каком этапе уходят. Возможно, им что-то мешает нажать на СТА-кнопку.

Подготовьтесь к тестированию гипотез

Изучая поведение пользователей, вы можете получить инсайт — новый взгляд на ситуацию, проблему и возможность ее решения. Например, увидеть, что пользователей отвлекает от кнопки «Купить» всплывающее окно. У вас возникает идея убрать поп-ап и гипотеза о том, что это приведет к повышению конверсии. Таких инсайтов, идей и гипотез может родиться множество — поэтому должна быть единая система подготовки к тестированию гипотез.
Если изучая поведение пользователей, вы не получили достаточно инсайтов, попробуйте протестировать расположение, дизайн и текст кнопки, добавить усилители — пройдитесь по моментам, которые упоминали выше.

Проведите A/B-тестирование

Выберите гипотезу и проведите A/B-тестирование — например, с помощью Google Optimize. Важно сравнивать варианты после внедрения только одного изменения. То есть за один раз менять, к примеру, только цвет кнопки, а не цвет, текст и расположение. Так можно последовательно и системно прийти к лучшему варианту.
Возьмите исходный вариант и вариант с измененным СТА, запустите тест, а затем сравните выбранные метрики — кликабельность, конверсию, средний доход на пользователя. Не всегда высокая кликабельность прямо коррелирует с конверсией и доходом.

Что запомнить и применить в работе

  • Упростите пользователю жизнь: позаботьтесь о грамотном размещении, дизайне и тексте call to action.
  • Усильте СТА: пообещайте выгоду и быстрый результат, используйте принцип дефицита, авторитета, социальное доказательство, снимите тревогу и перечеркните старую цену.
  • Проанализируйте влияние СТА-кнопки на конверсию: изучите поведение пользователя, подготовьтесь к сплит-тестированию и проведите его.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: