Оптимізація CTA-кнопок та закликів до дії на сайті

Оптимізація CTA-кнопок та призивів до дії на сайті

CTA (call-to-action) — точка, де намір користувача перетворюється в дію. Кнопка «Залишити заявку» з правильним контекстом, кольором, позицією та текстом працює принципово іншим чином, ніж та сама кнопка, перенесена вниз сторінки або з заміною тексту на «Відправити». Оптимізація CTA — це не дизайн заради дизайну, а робота з поведінковими факторами.

Діагностика поточного стану

Перш ніж змінювати кнопки, потрібно зрозуміти, як з ними взаємодіють зараз.

Click tracking через GA4:

// gtag подія для відслідковування кліку по CTA
document.querySelectorAll('[data-cta]').forEach(btn => {
  btn.addEventListener('click', () => {
    gtag('event', 'cta_click', {
      cta_id: btn.dataset.cta,
      cta_text: btn.textContent.trim(),
      page_location: window.location.pathname,
      scroll_depth: Math.round(window.scrollY / document.body.scrollHeight * 100)
    });
  });
});

Heatmap аналіз — клік-карти показують розподіл кліків. Частими паттернами є:

• користувачі кліка́ють по не редагованому тексту, приймаючи його за кнопку
• ігнорують кнопку, тому що вона не виглядає кліка́бельною
• кліка́ють по кнопці, яку вважають вторинною, замість головної

Scroll depth — якщо 60% користувачів не дорахуються до CTA, проблема не в кнопці, а в позиції.

Текст кнопки: найважливіше

Текст CTA повинен описувати результат дії, а не саму дію. Різниця:

Орієнтири по довжині: 2–5 слів. Більше — гаситься фокус і кнопка виглядає перевантажена. Дієслова від першої особи («Хочу отримати») іноді працюють краще за наказ («Отримайте»), але це гіпотеза для тесту, не універсальне правило.

Контекст під кнопкою (мікро-копі) знижує тривогу:

[Отримати розрахунок вартості]
Без передоплати. Відповімо протягом 2 годин.

Або:

[Завантажити шаблон]
PDF, 12 сторінок. Без реєстрації.

Візуальне оформлення

Колір. Принцип не «червоний краще зеленого», а «контрастність до фону та достатня різниця від інших інтерактивних елементів». CTA повинна бути єдиним елементом такого кольору. Якщо всі посилання та кнопки сині — виділити CTA неможливо без зміни колірної схеми.

Перевірка контрастності: співвідношення кольору тексту до фону кнопки — мінімум 4.5:1 (WCAG AA). Онлайн: WebAIM Contrast Checker. У Figma: плагін Contrast.

Розмір. Touch target на мобільних — мінімум 44×44px (Apple HIG), 48×48dp (Material Design). Внутрішній padding зазвичай 12px 24px для desktop, 14px 20px для мобільного.

.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

Above the fold. Головна CTA повинна бути видима без скролу на 90% дозволів екранів аудиторії. Перевіряється через DevTools з різними viewport size: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1280px (типовий ноутбук).

Кількість. Одна головна CTA на екран. Якщо є вторинна (наприклад, «Дивіться демо» поруч із «Почните безплатно»), вона повинна бути візуально підпорядкована — outline або text-only стиль, менший розмір.

Повтор на довгих сторінках. Правило: CTA повторюється кожні 2–3 змістовних блоки. На лендингу висотою 2000px — мінімум 3 входження CTA. Текст може незначно варіюватися: перший — «Почніть», другий — «Отримайте консультацію», третій (після блоку кейсів) — «Обговоріть мій проект».

Sticky CTA на мобільних. Фіксована кнопка внизу екрана при прокручуванні сторінки — збільшує конверсію на мобільних, але перекриває контент. Реалізується з position: fixed; bottom: 0 і сховуванням при досягненні footer:

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);

Стани кнопки

Повний набір станів для production-кнопки:

• default — базовий вид
• hover — зміна фону/тіні, cursor: pointer
• active / pressed — невелике зменшення scale (0.97–0.99)
• focus-visible — видимий outline для keyboard navigation
• loading — spinner + текст «Відправляємо...» + disabled, запобігає повторному submit
• disabled — знижена непрозорість, cursor: not-allowed, aria-disabled="true"
• success — опціональний стан після успішної дії

<button
  type="submit"
  disabled={isLoading || isDisabled}
  aria-disabled={isLoading || isDisabled}
  aria-busy={isLoading}
>
  {isLoading ? (
    <>
      <Spinner aria-hidden="true" />
      <span>Відправляємо...</span>
    </>
  ) : (
    'Отримати розрахунок'
  )}
</button>

Терміновість та соціальний доказ поруч з CTA

Елементи, розташовані в безпосередній близькості від кнопки, впливають на конверсію:

• «Залишилося 3 місця на цьому тижні» — дефіцит (працює, якщо правдиво)
• «Вже 847 компаній» — соціальний доказ
• «Без зобов'язань. Безплатна консультація 30 хвилин» — знімання бар'єру
• Аватари + імена клієнтів поруч з кнопкою — довіра через обличчя

Зловживання помилковою термінністю («Залишилося 00:05:00» з таймером, який скидується при перезавантаженні) руйнує довіру та часто порушує норми рекламного законодавства.

Строки

Аудит + оптимізація CTA в рамках існуючого дизайну без редизайну сторінок — 2–3 робочих дні. Розробка A/B гіпотез, підготовка варіантів, налаштування tracking — +2 дні. Супровід тестування та аналіз результатів — окремо за результатами збору трафіку.