Введение
В любой воронке продаж есть одно слабое звено — кнопка. Можно тратить деньги на рекламу, улучшать тексты, рисовать красивые баннеры, но если кнопка «Купить» или «Оформить заказ» сделана бездумно — конверсии будут утекать сквозь пальцы.
Я часто встречаю сайты, где кнопка спрятана, выглядит «служебно» или написана так, что человек не понимает, что произойдёт после клика. А ведь это единственное место, где посетитель превращается в клиента.
Недавно я работал над лендингом интернет-магазина, и всего три простых приёма увеличили клики на кнопку на 40%. Давайте разберём всё пошагово.
1. Цвет и контраст
Первая ошибка — кнопка сливается с окружением. На тестируемом лендинге она была серо-синяя, как и весь интерфейс.
Мы сделали три изменения:
- выбрали яркий зелёный оттенок (он ассоциируется с действием и контрастировал с белым фоном);
- убрали лишний градиент — плоский цвет читается лучше;
- проверили доступность: контраст по WCAG составил 5:1, это выше рекомендуемого минимума.
📸 Скрин: «до/после» — серо-синяя и зелёная кнопка
Результат: CTR вырос на 18% только из-за цвета.
2. Текст кнопки
Классическая проблема: «Отправить», «Ок», «Оформить».
Мы заменили нейтральное «Оформить заказ» на конкретное:
👉 «Купить за 1 990 ₽» + подпись «Бесплатная доставка».
Почему это работает?
- Текст говорит, что будет после клика (покупка).
- Сразу видно цену, никаких сюрпризов.
- «Бесплатная доставка» снижает барьер кликнуть.
📸 Скрин новой кнопки с ценой и подписью
Результат: ещё +12% к CTR.
3. Размер и пространство
По закону Фиттса (Fitts’s Law), чем больше элемент и чем ближе он к зоне внимания, тем проще по нему попасть.
- Мы увеличили ширину кнопки на 20%.
- Добавили белое пространство вокруг, чтобы ничто не отвлекало.
- На мобильной версии сделали кнопку на всю ширину экрана — так удобнее нажимать большим пальцем.
📸 Сравнение мобильной версии до/после
Результат: +10% к CTR.
4. Типичные ошибки, которые я вижу на сайтах
- Две кнопки рядом («Купить» и «Подробнее») одинакового цвета.
- Слишком маленький текст — на мобильных кнопка становится «невидимой».
- Скрытие главного действия под бургер-меню.
- Использование красного цвета (ассоциация с ошибкой/стоп).
Итоговые цифры
- CTR кнопки: +40%
- Количество заказов: +27%
- Среднее время на странице сократилось — люди быстрее принимали решение.
Чек-лист: проверьте свою кнопку прямо сейчас
- Контрастный цвет, выделяется на фоне.
- Текст понятен: что произойдёт после клика.
- Размер удобен для нажатия, особенно на телефоне.
- Вокруг кнопки есть воздух.
- На странице только одно главное действие.
Что делать, если результат не изменился?
Если после правок CTR не растёт:
- Проверьте, что кнопка расположена правильно (выше первого экрана).
- Тестируйте разные тексты — иногда +1 слово решает.
- Сравните с конкурентами в вашей нише.
- Проведите A/B тест, а не полагайтесь на «ощущения».
Финал
Кнопка — мелкая деталь, но именно она решает судьбу всего сайта. Потратьте на неё время, протестируйте разные варианты — и вы удивитесь, как сильно изменятся ваши цифры.
А теперь вопрос к вам:
👉 А вы тестировали кнопки на своих сайтах? Что дало лучший результат?
Напишите в комментариях, поделимся опытом.
