Кнопки CTA і зони уваги

1) Роль CTA і принципи

1. Один головний крок на екран. Primary-CTA повинен бути очевидний і єдиний.
2. Контекст → дія. Поруч з CTA завжди є коротке пояснення «що станеться далі».
3. Видимість без агресії. Контраст ≥ AA, достатній розмір і текст, що читається - замість кричущих ефектів.
4. Послідовність. Однакові CTA поводяться однаково на всіх екранах.
5. Безпека. Ризиковані CTA супроводжуються підтвердженням або undo.

2) Ієрархія CTA

Primary - ключова дія сторінки («Зробити ставку», «Поповнити», «Підтвердити»). 1 шт.
Secondary - альтернативний або допоміжний крок («Детальніше», «Змінити метод»).
Tertiary - текстові/примарні кнопки (ghost) з найменшою візуальною вагою.
Destructive - окремий стиль (колір/іконка попередження) + підтвердження/undo.

Правило: якщо на екрані більше одного «сильного» CTA - ймовірний вибір без мети. Перепроектуйте потік.

3) Копірайтинг CTA

Дієслово + об'єкт, 2-4 слова: «Зробити ставку», «Поповнити баланс», «Встановити ліміт».
Конкретика: «Вивести 2 000 ₴» краще, ніж «Відправити».
Уникайте подвійних заперечень («Не скасовувати») і розпливчастих метафор.
Для ризикованих дій - підзаголовок 1 рядком: «Без підтвердження, можна скасувати 5 сек».

4) Розміри, форма, контраст

Мінімальна зона кліка: ≥ 44 × 44 px (тач), ≥ 32 × 32 px (десктоп).
Висота кнопки: 40–48 px; радіус 10-12 px; внутр. відступи по горизонталі 16-20 px.
Контраст тексту до фону: WCAG AA; не покладайтеся тільки на колір - використовуйте іконку/лейбл.
Табличні цифри для сум/коефф.: `font-variant-numeric: tabular-nums;`.

5) Стану і зворотний зв'язок

Hover/Focus/Active - видимі і помітні (focus-ring не приховувати).
Busy (loading): миттєвий відгук ≤ 100 мс, спінер/скелет замість «тиші».
Disabled: не просто «сірий» - поясніть, чому недоступно (tooltip/inline-hint).
Undo/Confirm: для деструктивних CTA - або модалка підтвердження, або панель з Undo 5-10 сек.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) Зони уваги (десктоп) і зони великого пальця (мобайл)

Патерни погляду: F-pattern/Z-pattern, «гарячі» точки: верх-ліво (заголовок), верх-право (вторинні), нижня частина екрану (завершення).

• над згином для коротких екранів або внизу форми на лінії погляду,
• «липкою» панеллю внизу на мобілі (thumb-zone).
• Мобільні «великі пальці»: зручніше нижні 1/3 екрану, правий/лівий край - залежить від домінуючої руки (за замовчуванням - нижній центр/право).

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) Розміщення та відступи

Відокремлюйте primary-CTA від другорядних елементів білим простором (16-24 px).
Не ставте два primary поруч - один стане «помилковим» вибором.
У формах: CTA після останнього поля; вторинні - зліва/під CTA («Назад», «Скасування»).
На картках/плитках: CTA внизу праворуч; для довгих списків - inline-CTA на кожній картці.

8) Анімації та motion-патерни

Вхід/вихід: 120-180 мс,'opacity/transform'( без layout-трясок).
Press-ефект: зменшення до 96-98% + тінь → «клік відчувається».
Для «успіху»: короткий чек-мікроанімація ≤ 400 мс; для reduce-motion - статична іконка.
Уникайте нескінченних мерехтливих ефектів (anti-pattern для відповідальної гри).

9) A11y і клавіатура

'role = «button»'не потрібен при нативному'< button>'.
Focus-ring видимий; порядок Tab логічний. Enter/Space активують CTA.
'aria-busy'при завантаженні; для статусу використовуйте live-регіон'role = «status»'.
Текст кнопки доступний SR; іконки - з'aria-hidden =» true»'і не єдиний носій сенсу.

10) Метрики та експерименти

CTR CTA, Conversion after click, Time-to-Click від появи до натискання.
Scroll-depth → click: частка кліків, що трапилися «над згином »/» під згином».
Heatmap зон (desktop/mob); Thumb-reach (моб).
Cancel/Undo rate для ризикованих CTA.
A/B: текст, колір/контраст, розмір, розташування, «липка» панель vs статичне розміщення.

11) Токени дизайн-системи (приклад)

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) Патерни для iGaming

Зробити ставку (Primary): поруч показуйте суму і коефіцієнт; при затримці> 3 с - «Очікуємо підтвердження»... + безпечний Retry.
Депозит: sticky-CTA внизу моб. екрану («Поповнити»), вторинний - «Змінити метод»; видимі комісії/терміни поруч.
Кешаут: CTA фіксується на екрані матчу/купона; завжди показує поточну суму кешауту; підтвердження перед виконанням.
Встановити ліміт: CTA не агресивний; поруч - «Вступить в силу через».... AAA-контраст, без миготінь.
Турніри: CTA «Приєднатися» на картці турніру + вторинний «Правила/Призи».

13) Антипатерни

Два primary-CTA поруч («Зробити ставку» і «Купити бонус») - когнітивна конкуренція.
«Сірі» disabled без пояснень.
Нескінченні анімації уваги і перемигування.
Кнопка, яка змінює розмітку і відводить фокус.
CTA нижче великого «декору», що їде під згин.
Іконка замість тексту (без лейблу) в критичних місцях.

14) Сніпети аналітики

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) QA-чек-лист

Сенс і ієрархія

• На екрані рівно один primary-CTA; вторинні не конфліктують за вагою.
• Текст CTA ясний, без подвійних заперечень; поруч - що станеться далі.

Доступність

• Focus-ring бачимо; Enter/Space працюють;'aria-busy'при завантаженні.
• Контраст тексту/фону ≥ AA; іконка не єдиний носій сенсу.

Поведінка

• Моментальний відгук ≤ 100 мс; busy-стан і Retry при збоях.
• Для ризикованих - підтвердження або undo.
• Sticky-CTA коректно прилипає на мобілі, не перекриває контент.

Розміщення

• CTA в зоні великого пальця (моб) або на лінії погляду (десктоп).
• Достатні відступи (16-24 px) від сусідніх елементів.

Метрики

• Знімаються CTR, Conversion after click, Time-to-Click, Undo-rate.
• Є експерименти по тексту/кольору/розміру/розташуванню.

16) Документація в дизайн-системі

Компоненти: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Токени розмірів/контрасту/анімацій, приклади копірайтингу.
Патерни: «Один primary на екран», «Sticky на мобілі», «Confirm/Undo для ризику».
Do/Don't-галерея з реальними екранами і тепловими картами.

Коротке резюме

CTA працює, коли у нього є мета, місце і сенс: один головний крок, ясний текст, достатній контраст, вірне розташування в зоні уваги/великого пальця і чесний зворотний зв'язок. Зафіксуйте це в дизайн-системі, вимірюйте поведінку - і кліки перетворюються на впевнені, усвідомлені дії без помилок і роздратування.