Кнопки 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 работает, когда у него есть цель, место и смысл: один главный шаг, ясный текст, достаточный контраст, верное расположение в зоне внимания/большого пальца и честная обратная связь. Зафиксируйте это в дизайн-системе, измеряйте поведение — и клики превращаются в уверенные, осознанные действия без ошибок и раздражения.