Как оформить кнопки CTA в интернет-магазине

Кнопка CTA — кнопка призыва к действию — должна объяснять результат нажатия, выделяться среди второстепенных действий и давать понятный отклик. Начните с того, что реально произойдёт: товар добавится в корзину, откроется форма или начнётся оплата. Цвет и размер помогают заметить действие, но не исправляют ложную подпись или неработающий переход.

Перед изменениями пройдите текущую покупку и сохраните доступные показатели: показы кнопки, нажатия, успешные добавления и выполненные заказы. Сначала устраните ошибки действия, затем проверяйте варианты текста и оформления. Само изменение цвета не доказывает рост продаж.

Подпись должна совпадать со следующим шагом

«Добавить в корзину», «Перейти к оформлению» и «Оплатить» описывают разные действия. Если после «Купить» только открывается новая форма, покупателю придётся угадывать, завершён ли заказ. На последнем шаге особенно полезно ясно показать, что нажатие подтверждает заказ или запускает оплату.

Действие после нажатия	Понятная подпись	Что проверить
Товар остаётся в корзине, покупку можно продолжить	«Добавить в корзину»	Добавился выбранный вариант и количество
Открывается форма с адресом и контактами	«Перейти к оформлению»	Заказ ещё не изображён завершённым
Создаётся заказ с оплатой при получении	«Подтвердить заказ»	Условия и итог показаны до подтверждения
Начинается платёж на указанную сумму	«Оплатить 880 ₽»	Сумма совпадает с итогом и действие действительно ведёт к оплате
Открываются условия доставки	«Условия доставки» как ссылка	Это переход к информации, а не добавление товара

Сумму в примере подставляйте из текущего заказа, а не из отдельной ручной надписи. Не обещайте «в один клик», если дальше требуется несколько обязательных шагов. Краткость полезна, пока не теряется смысл.

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

Выделите главное действие без конкурирующих акцентов

В одном блоке покупки определите визуальный приоритет. Если «Купить», «Быстрый заказ», «Подробнее» и «В избранное» одинаково яркие, различие приходится выяснять по тексту каждого элемента. Второстепенное действие можно сделать спокойнее, сохранив читаемость и доступность.

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

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

Размер, контраст и видимый фокус

Проверяйте область нажатия, а не только размер букв. Для основного действия на телефоне можно начать с области не меньше примерно 44 × 44 CSS-пикселей и удобных отступов. Это практический ориентир для макета; он не означает, что весь интерфейс автоматически соответствует требованиям доступности.

В рекомендациях по доступности веб-контента WCAG 2.2 на уровне AA критерий минимальной цели указывает 24 × 24 CSS-пикселя с оговорёнными исключениями, включая достаточное расстояние между небольшими целями. Это минимальное условие, а не рекомендуемый размер главной кнопки магазина. Удобство проверьте на настоящем телефоне: соседняя цель не должна нажиматься вместо выбранной.

Для обычного текста WCAG задаёт контраст не ниже 4,5:1, для крупного — 3:1. Если не уверены, относится ли надпись к крупной, проверяйте по более строгому порогу. Например, белая надпись #FFFFFF на непрозрачном фоне #236B5E имеет расчётный контраст примерно 6,29:1 и проходит порог обычного текста. Это учебная пара: замените её реальными цветами и отдельно проверьте состояния кнопки, прозрачность и фон под ней.

Для нетекстовой информации, необходимой для распознавания активного элемента и его состояния, WCAG задаёт отдельный порог контраста 3:1 к соседним цветам с предусмотренными критерием исключениями. Это не требует контрастной обводки у любой кнопки: элемент может распознаваться по другим достаточным признакам. Проверяйте применимость критерия к конкретному оформлению и не ограничивайте аудит только надписью.

Клавиатурный фокус должен быть видимым. Пройдите страницу клавишей Tab: понятно ли, на какой кнопке вы находитесь, и не скрыта ли она под закреплённой панелью. Цветовую палитру и контраст соседних элементов подробнее разбирает статья о цветах интернет-магазина.

Продумайте состояния до и после нажатия

Если обязательный размер ещё не выбран, объясните, что требуется сделать. Безмолвная серая кнопка не сообщает причину. Возможны разные решения: недоступное действие с видимой подсказкой или проверка выбора после нажатия с переводом внимания к нужному полю. Оба варианта нужно проверить на понятность и доступность.

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

Ошибка должна объяснять доступный следующий шаг. При неопределённом результате запроса сначала сверьте корзину или заказ: повторение вслепую может создать дубль. Не показывайте «Добавлено», если система не подтвердила операцию, и не меняйте подпись на «Ошибка» без пояснения рядом.

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

Учебный сценарий: от кружки до оплаты

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

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

В корзине разместим «Перейти к оформлению», поскольку дальше ещё нужна форма. На последнем шаге выбранной онлайн-оплаты допустим «Оплатить 880 ₽», если итог действительно 880 ₽ и дальше начинается платёж. Все суммы и товары здесь учебные. Для оплаты при получении финальное действие будет другим: «Подтвердить заказ».

Теперь синяя кружка закончилась. Покажем «Нет в наличии» и возможность выбрать доступный белый вариант; не оставим активное действие, которое молча добавляет другой цвет. Если магазин действительно собирает заявки на пополнение, предложим «Сообщить о поступлении» с отдельным понятным процессом. После смены на белую кружку проверим, что сообщение о добавлении и корзина называют именно белую.

Пройдите пример с мышью, затем с клавиатурой. Для настоящей кнопки проверьте Enter и пробел, для ссылки — предусмотренное браузером управление. Повторите на телефоне, с медленным ответом и ошибкой. Успешная проверка означает, что выбранный вариант добавился один раз, результат понятен, а следующие шаги соответствуют подписям. Она не означает, что такой дизайн уже увеличил конверсию.

Как оценить результат изменения

Сравнивайте не только нажатия, но и подтверждённые действия, оформление и выполненные заказы на сопоставимом трафике. Яркая кнопка может получить больше случайных нажатий без улучшения покупки. При малом числе заказов не приписывайте разницу только новому тексту: могли измениться канал, наличие или доставка.

Проверку всей покупки и порядок измерения объясняет статья о повышении конверсии. Для первого исправления достаточно зафиксировать найденную проблему и убедиться, что она устранена; статистическое доказательство роста требует отдельного измерения.

Чек-лист кнопки действия

• Прочитайте подпись и нажмите кнопку: следующий шаг совпадает с обещанием.
• Сравните соседние действия: у основного есть понятный приоритет, остальные доступны.
• Проверьте нажатие на телефоне: область и отступы позволяют выбрать нужный элемент.
• Пройдите Tab и активацию с клавиатуры: фокус виден, действие выполняется.
• Замерьте контраст текста и значимых состояний: использованы реальные цвета макета.
• Испытайте загрузку, повтор и ошибку: нет лишнего добавления, результат и следующий шаг понятны.
• Сверьте завершённую покупку: рост нажатий не выдан за доказанный рост продаж.