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

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

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

Ссылки в основном применяют для внутренней перелинковки — они направляют пользователя по определенному маршруту. Картинки используют на главной странице и в рассылке для привлечения внимания.

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

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

Грамотно реализованный СТА помогает:

Кнопки призыва к действию на сайте встречаются:

Кнопки call to action вне сайта могут использоваться:

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

Пользователь всегда должен видеть CTA, поэтому его размещают на видном месте — на первом экране, до «линии сгиба». Если страница длинная, кнопку дублируют через каждые 2-3 экрана. Также можно закреплять область экрана с кнопкой, чтобы СТА постоянно был на виду.

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

Кнопка не должна перекрываться во время работы пользователя с элементами сайта.

Если вы размещаете сall to action на поп-апе, предлагайте покупателям что-то ценное и в подходящее вовремя, чтобы снизить градус раздражения.

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

CTA-кнопка должна выделяться на фоне контента, не нарушая при этом дизайн-концепцию. Выберите несколько цветов, которые соответствуют этому правилу, и определите лучший вариант с помощью A/B-тестирования. Цвет шрифта на кнопке тоже должен быть контрастным, а сам шрифт — таким, который уже используется на странице.

Размер кнопки имеет значение не только потому, что большая кнопка заметнее — по ней нужно легко попадать. Это особенно актуально для покупок с мобильных устройств. Вне зависимости от размера экрана, оптимальная высота кнопки — от 42 до 72 пикселей (11-19 мм), идеально — 60 пикселей (16 мм). А еще на большой кнопке легче уместить развернутый призыв к действию. Если кликать или тапать нужно на иконку, область касания должна быть шире, чем визуальные границы элемента.

Чтобы пользователь понимал статус кнопки, ее состояние должно меняться. Для этого применяют разные инструменты — изменение цвета, эффект нажатия, подсказки. Какие состояния должны быть:

Вот так меняется вид СТА-кнопки на wildberries.ru до и после нажатия:

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

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

Обычно главную кнопку (первого уровня) создают самой яркой, а кнопки последующих уровней — более приглушенных оттенков того же цвета.

На citilink.ru кнопка «В корзину» выглядит гораздо ярче, объемней и контрастней, чем кнопки сравнения и избранного.

В формах кнопка должна быть активной все время, даже если пользователь заполнил не все поля. Иногда кнопку деактивируют, но в этом случае посетитель может растеряться и уйти с сайта. При нажатии кнопки выводите подсказки, какие поля осталось заполнить.

Призыв должен быть простым и конкретным, чтобы пользователь понял, что от него требуется. Используйте глаголы — например, «Купить», «Добавить в корзину», «Подписаться».

Чтобы подобрать правильный глагол, ориентируйтесь на паттерны поведения аудитории. Если обычно покупают только один товар, логичнее использовать кнопку «Купить». Когда более 2 товаров — «Добавить в корзину».

Если можно сформулировать СТА от первого лица, используйте эту возможность — например, «Хочу подарок». Избегайте неоднозначных призывов вроде «Продолжить». Креативные призывы использовать можно, но только если уверены, что аудитория поймет.

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

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

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

Напоминайте рядом с call to action, какую выгоду получит покупатель от конкретного товара. В интернет-магазине Yves Rocher ключевая выгода от применения товара размещена прямо под названием.

Не забывайте о выгодах от покупки в конкретном магазине. Все любят скидки, подарки и бонусы — по возможности используйте эти усилители. Внедрите программу лояльности и показывайте в карточке товара, сколько бонусов получит покупатель.

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

Понимание, что предложение ограничено, стимулирует покупателей им воспользоваться — они боятся упустить важное. Можно сыграть на дефиците товаров или краткосрочности акции. Добавляйте фразы, которые создают впечатление дефицита — «предложение ограничено», «купить сейчас».

На rozetka.com.ua принцип дефицита используется в формате указания процента оставшегося товара.

Хорошо привлекает внимание таймер, подсчитывающий время до окончания предложения. Следите за тем, чтобы акции действительно заканчивались в обещанный срок, а не продлевались. Иначе доверие к интернет-магазину будет потеряно.

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

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

В интернет-магазине принцип авторитета можно реализовать, указав в карточках товаров, что они рекомендованы соответствующими экспертами.

Лучше, если это будет конкретный известный эксперт.

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

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

В yves-rocher.ru перечеркнутую и актуальную стоимость товара размещают прямо на СТА-кнопке.

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

Чтобы выяснить, как ведут себя покупатели, проанализируйте тепловые карты, карты скроллинга и записи сессий.

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

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

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

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

Если изучая поведение пользователей, вы не получили достаточно инсайтов, попробуйте протестировать расположение, дизайн и текст кнопки, добавить усилители — пройдитесь по моментам, которые упоминали выше.

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

Возьмите исходный вариант и вариант с измененным СТА, запустите тест, а затем сравните выбранные метрики — кликабельность, конверсию, средний доход на пользователя. Не всегда высокая кликабельность прямо коррелирует с конверсией и доходом.