Интернет-магазин должен, прежде всего, использовать простые, явные и иерархические кнопки: "Добавить в корзину" на листе товара, "Перейти к оплате" в корзине, "Откройте для себя коллекцию", чтобы направлять навигацию, и "Спросите совета", когда поддержка действительно полезна. лучшая кнопка не самая оригинальная: именно она четко указывает на следующий шаг.
Для чего на самом деле нужна кнопка действия?
Кнопка действия, или CTA, превращает намерение в конкретный шаг, Он может двигаться в сторону покупки, открыть коллекцию, добавить товар в корзину, запросить информацию или доработать заказ.Ее эффективность зависит как от его местоположения и формулировки, так и от цвета.
Самое полезное правило простое: экран должен иметь очевидный приоритет. На доступном листе продукта, основное действие, как правило, добавление в корзину. ссылка на руководство по размеру, совместное использование или добавление в избранное остается вторичной. в корзине приоритет становится оплатой.
Основные кнопки интернет-магазина
Добавить в корзину
Это основной CTA листа продукта, Он должен оставаться видимым после выбора вариантов и четко указывать, если опция отсутствует.
Перейти к оплате
В корзине эта кнопка однозначно приводит к оформлению заказа. Избегайте выставлять его таким же, как "Продолжить покупки".
Откройте для себя коллекцию
На домашней странице или на редакционной странице, он направляется к точной подборке Конкретное название лучше, чем расплывчатое "Учись больше".
Попросите совета
Полезно для технических, настраиваемых или высокововлекаемых продуктов. он завершает покупку без излишней замены основной кнопки.
Сообщите мне о возвращении
Для недоступного продукта предупреждение о возврате на склад дает честный следующий шаг вместо того, чтобы оставлять кнопку покупки неактивной.
Смотрите мой заказ
После покупки действия по отслеживанию должны быть отделены от коммерческих CTA и точно описывать пункт назначения.
Какую кнопку использовать в зависимости от страницы?
У одного и того же посетителя нет одинаковых намерений в отношении приема, коллекции или листа продукта. Поэтому иерархия должна развиваться в течение курса.
| Страница | Основное действие | Возможны вторичные действия | Чтобы избежать |
|---|---|---|---|
| Главная | Откройте для себя конкретную коллекцию или предложение | Посмотрите, что нового | Несколько конкурирующих кнопок в одном баннере |
| Коллекция | Просмотр продукта | Фильтр или сортировка | Быстрая покупка без достаточной информации |
| Лист продукта | Добавить в корзину | Руководство по размеру или совет | Социальные CTA более заметны, чем покупки |
| Корзина | Перейти к оплате | Продолжайте покупки | Внешняя акция, которая отклоняется от оформления заказа |
| Блог статья | Откройте для себя соответствующий продукт или услугу | Прочтите связанное руководство | Коммерческая кнопка, не связанная с темой |
Как написать формулировку, вызывающую желание нажать?
Текст должен объявлять непосредственный результат клика Начните с глагола действия, держите его кратким и избегайте чрезмерных обещаний "Смотрите летние платья" более информативно, чем "Нажмите здесь". "Получить руководство" точнее, чем "Отправить".
Дизайн, контраст и мобильность: правила, которые следует уважать
Зарезервируйте наиболее заметный цвет для приоритетного CTA и используйте более сдержанный стиль для второстепенных действий. кнопка должна быть узнаваема как кликабельный элемент, с удобной областью щелчка, читаемым текстом и видимым состоянием при наведении курсора или фокусировке.
На мобильном, главная кнопка должна оставаться легко добраться, не скрывая важную информацию. полная ширина часто работает хорошо, пока вы поддерживаете боковые поля и не складываете несколько фиксированных полос. Также проверьте длинные вариации, увеличенные тексты и переводы.
Ошибки, ослабляющие призывы к действию
Раскрасить все
Если каждая кнопка так сильно бросается в глаза, ни одна не указывает на приоритет. сохраните доминирующий цвет для основного действия.
Изменить лексику
"Купить", "Заказать" и "Добавить" не должны случайным образом обозначать один и тот же шаг. Последовательность обнадеживает.
Скрыть условия
CTA не должен заменять информацию о ценах, доставке, наличии или изменении, необходимую для принятия решения.
Оптимизируйте только прием
Лист продукта и корзина часто ближе к конверсии Их иерархия заслуживает приоритетного внимания.
Более широкий взгляд на путешествие также читайте как улучшить корзину покупок Shopify и почему посетители выходят из магазина, не покупая.
Какую услугу вам следует выбрать для улучшения ваших CTA?
Бесплатный мини-аудит
Подходит, если вы хотите определить некоторые видимые приоритеты, прежде чем рассматривать более широкое вмешательство.
Оптимизация товарных листов
Выберите, когда проблема сосредоточена на представлении продукта, иерархии покупки и ясности информации.
Редизайн магазина Shopify
Соответствует, должны ли CTA, навигация, коллекции, товарные листы и корзина быть гармонизированы вместе.
Персонализированный запрос
Представьте контекст, соответствующие страницы и технические ограничения, чтобы получить соответствующую рекомендацию.
Практичный контрольный список перед публикацией кнопок
- На каждом экране доминирует одно основное действие.
- Формулировка точно описывает следующий шаг.
- Основной CTA контрастирует с фоном, не теряя читаемости.
- Вторичные действия визуально более незаметны.
- Кнопку можно использовать при ширине 375 пикселей.
- Вариации и ошибки отображают четкую инструкцию.
- Щелчок ведет к объявленному пункту назначения.
- Клавиатура и фокус позволяют использовать кнопку.
- Цена, доставка и наличие остаются видимыми перед покупкой.
- Маршрут тестируется от приема до подтверждения.
кнопка действия электронной коммерции Часто задаваемые вопросы
Какой цвет мне следует использовать для кнопки "Добавить в корзину"?
Используйте цвет, который достаточно контрастирует с окружающей средой листа продукта и зарезервируйте его для основного действия. не существует универсально выигрышного цвета: согласованность с брендом и читаемость имеют большее значение.
Стоит ли писать "Купить сейчас" или "Добавить в корзину"?
"Добавить в корзину" соответствует классическому маршруту, который позволяет вам продолжать покупки. "Купить сейчас" подходит только в том случае, если щелчок действительно приводит к прямому путешествию покупки и если это ускорение полезно.
Сколько кнопок можно отобразить на листе товара?
Действий может быть несколько, но доминировать должен только один Покупка остается основной; руководство по размеру, совет, избранное или совместное использование должны быть второстепенными и четко дифференцированными.
Рекомендуется ли фиксированная кнопка внизу экрана на мобильном телефоне?
Это может облегчить добавление в корзину на длинном листе продукта, если вы не скрываете контент, варианты выбора или важные сообщения. Его необходимо протестировать на экране нескольких размеров.
Можно ли использовать значки без текста?
Для общих действий, таких как корзина покупок или поиск, значок может работать, если его значение очевидно и предусмотрена доступная формулировка. Для решительных действий явный текст остается предпочтительным.
Где разместить основную кнопку на листе товара?
Поместите его рядом с ценой, вариациями и информацией, необходимой для принятия решения, в быстро видимой части. Он должен появиться после обязательных выборов и перед очень подробным вторичным содержанием.
Как узнать, нужно ли менять CTA?
Анализируйте щелчки, выпадения и отзывы пользователей, затем сначала проверьте ясность путешествия. Проверьте одно изменение за раз: формулировку, контраст, положение или иерархию, чтобы понять его эффект.
Превратите кнопки в четкие шаги по пути
SiteQuiVend может изучить иерархию ваших CTA, ваших товарных листов и вашего пути к покупке, чтобы направить вас к целевой оптимизации или более глобальному редизайну, в зависимости от реального состояния магазина.
