Уявіть: на ваш сайт заходить 10 000 цільових відвідувачів на місяць, але кнопку «Замовити консультацію» натискають лише 50 осіб. Теплова карта показує, що 80% сесій обриваються на сторінці з формою — користувачі просто не доскроллюють до CTA. Ми стикалися з кейсом, коли заміна тексту «Надіслати» на «Отримати розрахунок» і зміна кольору кнопки з сірого на контрастний зелений дали зростання конверсії на 120% (у 2,2 рази) без зміни трафіку. Оптимізація CTA — це не гадання, а системний процес: від бенчмаркінгу конкурентів до A/B-тестування з p-value < 0.05. Типові проблеми: кнопка зливається з фоном, текст не описує вигоду, або CTA захована в підвалі. Ми вирішуємо їх через click tracking і теплові карти.
Процес оптимізації CTA включає 4 кроки:
- Аналіз поточних показників (коефіцієнт конверсії, показник відмов, середній час на сторінці)
- Формування гіпотез на основі закону Фітса та принципів гештальту
- A/B тестування з використанням Google Optimize або VWO
- Впровадження змін переможця
Як вибрати колір кнопки для CTA?
Колір кнопки. Принцип — контрастність до фону та унікальність серед інших інтерактивних елементів. Якщо всі посилання та кнопки сині, CTA не виділити без зміни кольорової схеми. Перевірте контрастність тексту до фону кнопки (мінімум 4.5:1 за WCAG AA). Фахівці з юзабіліті-тестування застосовують Fitts's law для визначення оптимального розміру. За даними досліджень, зміна кольору кнопки з сірого на контрастний підвищує клікабельність в 1,5-2 рази.
Чому текст CTA такий важливий?
Текст — перший тригер. Він має описувати результат, а не дію. Порівняйте:
| Слабкий текст | Сильний текст |
|---|---|
| Надіслати | Отримати аудит |
| Детальніше | Дивитись кейси |
| Зареєструватися | Розпочати безкоштовно |
| Купити | Отримати доступ на 30 днів |
| Замовити дзвінок | Передзвонимо за 15 хвилин |
Оптимальна довжина тексту кнопки — 2–5 слів. Короткі фрази легше зчитуються, довгі втрачають фокус. Дієслова від першої особи («Хочу отримати») іноді працюють краще імперативу — перевіряйте на A/B-тесті. Мікрокопі під кнопкою знижує тривогу:
[Отримати розрахунок вартості]
Без передоплати. Відповімо протягом 2 годин.
Візуальне оформлення CTA: розмір, відгук, інтерактивність
Розмір. На мобільних touch target — мінімум 44×44px (Apple HIG), 48×48dp (Material Design). Типовий padding: 12px 24px для десктопу, 14px 20px для мобільного. Приклад CSS для primary-кнопки:
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
line-height: 1;
border-radius: 6px;
background-color: var(--color-action-primary);
color: var(--color-on-primary);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover {
background-color: var(--color-action-primary-hover);
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-primary:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
}
Іконка посилює сприйняття, якщо додає сенсу: стрілка у «Перейти до оформлення» — так, іконка заради іконки — шум.
Розміщення CTA на сторінці
Основна CTA має бути видимою без скролу на 90% роздільних здатностей аудиторії. Перевірте через DevTools: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1280px (ноутбук).
Одна основна CTA на екран. Вторинні (наприклад, «Дивитись демо») — візуально підпорядковані: outline або text-only, менший розмір.
На довгих сторінках дублюйте CTA кожні 2–3 смислових блоки. Текст може незначно змінюватися: перший — «Розпочати», другий — «Отримати консультацію», третій — «Обговорити проект».
На мобільних ефективний sticky CTA — фіксована кнопка внизу екрана. Реалізація на IntersectionObserver:
const footer = document.querySelector('footer');
const stickyBtn = document.querySelector('.sticky-cta');
const observer = new IntersectionObserver(
([entry]) => {
stickyBtn.hidden = entry.isIntersecting;
},
{ threshold: 0 }
);
observer.observe(footer);
Детальніше про стани кнопки
Повний набір: default, hover, active (scale 0.98), focus-visible (outline), loading (spinner + «Надсилаємо...» + disabled), disabled (низька прозорість + aria-disabled), success (опціонально). Приклад React-компонента:<button
type="submit"
disabled={isLoading || isDisabled}
aria-disabled={isLoading || isDisabled}
aria-busy={isLoading}
>
{isLoading ? (
<>
<Spinner aria-hidden="true" />
<span>Надсилаємо...</span>
</>
) : (
'Отримати розрахунок'
)}
</button>
Використання терміновості та соціального доказу
Елементи, розміщені впритул до кнопки, впливають на конверсію:
- «Залишилося 3 місця на цьому тижні» — дефіцит (тільки якщо правдиво);
- «Вже 847 компаній використовують» — соціальний доказ;
- «Без зобов'язань. Безкоштовна консультація 30 хвилин» — зняття бар'єрів.
Хибна терміновість («Залишилося 00:05:00» з нескінченним таймером) руйнує довіру та може порушувати рекламне законодавство.
Що входить в роботу з оптимізації CTA
Кожен проект включає:
- Аудит існуючих CTA: аналіз click tracking, теплових карт, конкурентоспроможність.
- Формулювання гіпотез: від тексту до позиціонування.
- Налаштування A/B-тесту в Google Optimize або VWO.
- Реалізація гіпотези-переможця: правки CSS/JS, інтеграція tracking.
- Документація по змінах і рекомендації щодо подальшого зростання.
Маємо досвід понад 5 років у CRO, реалізовано 150+ проектів з оптимізації конверсії. Гарантія якості: ми перевіряємо кожну гіпотезу на статистичній значущості. Маємо сертифікацію Google Analytics та Optimize.
Терміни робіт
- Аудит поточних CTA: 2–3 робочих дні (вартість від $300).
- Розробка та впровадження гіпотез: ще 2 дні.
- Супровід A/B-тесту: за погодженням, зазвичай 1–3 тижні.
Вартість розраховується індивідуально під ваш проект. За нашими даними, оптимізація CTA приносить додатковий прибуток у розмірі $1000–$10 000 на місяць залежно від трафіку.
Замовте аудит CTA — отримайте конкретні гіпотези для зростання конверсії. Зв'яжіться з нами для консультації.