Przyciski CTA i obszary uwagi

1) Rola CTA i zasady

1. Jeden ważny krok na ekran. Primary-CTA powinny być oczywiste i unikalne.
2. Kontekst → działanie. Zawsze jest krótkie wyjaśnienie „co się stanie dalej” dla CTA.
3. Widoczność bez agresji. Kontrast ≥ AA, wystarczający rozmiar i czytelny tekst - zamiast efektów błyskawicznych.
4. Spójność. Te same CTA zachowują się tak samo na wszystkich ekranach.
5. Ochrona. Ryzykowne umowy o partnerstwie towarzyszą potwierdzeniu lub cofnięciu.

2) hierarchia CTA

Podstawowy - akcja strony klucza („Postaw zakład”, „Doładuj”, „Potwierdź”). 1 szt.
Drugorzędny - krok alternatywny lub pomocniczy („Szczegóły”, „Metoda zmiany”).
Tertiary - przyciski tekstowe/duchowe z najniższą wagą wizualną.
Destrukcyjny - osobny styl (kolor/ikona ostrzegawcza) + potwierdzenie/cofnięcie.

Zasada: jeśli na ekranie jest więcej niż jeden „silny” CTA, wybór bez celu jest prawdopodobny. Przeprojektuj przepływ.

3) Copywriting CTA

Czasownik + obiekt, 2-4 słowa: „Postaw zakład”, „Uzupełnij równowagę”, „Ustaw limit”.
Dane szczegółowe: "Wyjście 2000" jest lepsze niż "Wyślij'.
Unikaj podwójnych negacji („Nie anuluj”) i niejasnych metafor.
Dla ryzykownych działań - podpozycja 1 wiersz: „Bez potwierdzenia można anulować 5 sekund”.

4) Wymiary, kształt, kontrast

Minimalna strefa kliknięcia: ≥ 44 × 44 px (dotyk), ≥ 32 × 32 px (pulpit).
Wysokość przycisku: 40-48 px; promień 10-12 px; indenty poziome 16-20 px.
Kontrast tekstowy: WCAG AA; nie polegaj tylko na kolorze - użyj ikony/etykiety.
Cyfry tabeli dla kwot/współczynnika: "font-variant-numeric: tabular-nums; '.

5) Państwa i informacje zwrotne

Hover/Focus/Active - widoczne i odróżniające (focus-ring nie ukryć).
Zajęty (załadunek): natychmiastowa odpowiedź ≤ 100 ms, spinner/szkielet zamiast „ciszy”.
Wyłączony: nie tylko „szary” - wyjaśnij, dlaczego nie jest dostępny (podpowiedź/podpowiedź).
Cofnij/Potwierdź: dla niszczycielskich CTA - modal potwierdzający lub panel z cofnięciem 5-10 sekund.

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) Strefy uwagi (pulpit) i kciuki (mobilne)

Wzory spojrzeń: wzór F/Z-wzór, gorące miejsca: górna-lewa (tytuł), górna-prawa (druga), dolna część ekranu (wykończenie).

• powyżej zakrętu dla krótkich ekranów lub na dole formy na linii widzenia,
• Panel „lepki” na dole telefonu komórkowego (strefa kciuka).
• Mobilne „kciuki”: dolna 1/3 ekranu jest wygodniejsza, prawa/lewa krawędź zależy od dominującej ręki (domyślnie - dolna środkowa/prawa).

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) Umieszczenie i tiret

Oddzielić pierwotny-CTA od elementów drugorzędnych z białą przestrzenią (16-24 px).
Nie stawiaj dwóch podstawowych obok siebie - jeden będzie „fałszywy” wybór.
Na formularzach: CTA po ostatnim polu; secondary - left/under CTA („Back”, „Anuluj”).
Na kartach/płytkach: CTA w prawo; dla list długich - inline-CTA na każdej karcie.

8) Animacje i wzory ruchu

Wejście/wyjście: 120-180 ms, „nieprzezroczystość/przekształcenie” (bez wstrząsów układu).
Efekt prasy: redukcja do 96-98% + cień → „kliknięcie jest odczuwalne”.
Dla „sukcesu”: krótka mikroanimacja kontrolna ≤ 400 ms; do redukcji ruchu - ikona statyczna.
Unikaj niekończących się efektów migotania (anty-wzór odpowiedzialnej zabawy).

9) A11y i klawiatura

'role =' przycisk 'nie jest potrzebny z natywnym' <button> '.
Widoczny pierścień ostrości; Kolejność kart jest logiczna. Enter/Space aktywuje CTA.
"aria-busy 'at boot; dla statusu należy użyć żywego regionu 'role =' status '.
Tekst przycisku jest dostępny SR; ikony - z 'aria-hidden =' true'i nie jedynym nośnikiem znaczenia.

10) Metryki i eksperymenty

CTR CTA, Konwersja po kliknięciu, Time-to-Click from appearance to click.
Przewiń-głębokość → kliknij: proporcja kliknięć, które wystąpiły „powyżej zakrętu „/” pod zakrętem ”.
Strefy mapy ciepłowniczej (pulpit/motłoch); Zasięg kciuka (motłoch).
Anuluj/cofnij stawkę dla ryzykownych CTA.
A/B: tekst, kolor/kontrast, rozmiar, lokalizacja, lepki panel vs ułożenie statyczne.

11) Żetony systemu projektowania (przykład)

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) Wzory dla iGaming

Zakład (Podstawowy): pokaż kwotę i współczynnik obok siebie; z opóźnieniem> 3 s - „Czekanie na potwierdzenie”... + bezpieczny Retry.
Depozyt: lepki-CTA dolny ekran mobilny („Uzupełnienie”), wtórny - „Metoda zmiany”; widoczne prowizje/terminy w pobliżu.
Cashout: CTA jest przechwytywany na ekranie meczu/kuponu; zawsze pokazuje bieżącą kwotę wypłaty; potwierdzenie przed wykonaniem.
Limit: CTA nie jest agresywny; w pobliżu - „Zacznie działać w....” Kontrast AAA, bez migania.
Turnieje: CTA „Dołącz” na karcie turnieju + wtórne „Zasady/Nagrody”.

13) Antypattery

W pobliżu dwie podstawowe umowy o partnerstwie (Bet and Buy Bonus) są konkurencją poznawczą.
„Szary” wyłączony bez wyjaśnień.
Niekończące się animacje i drgania.
Przycisk, który zmienia znaczniki i odbiera skupienie.
CTA jest niższa niż duży „wystrój”, który idzie pod zakręt.
Ikona zamiast tekstu (bez etykiety) w miejscach krytycznych.

14) Snippety analityczne

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) Lista kontrolna QA

Znaczenie i hierarchia

• Na ekranie znajduje się dokładnie jedna podstawowa CTA; drugorzędne nie kolidują z wagą.
• Tekst CTA jest jasny, bez podwójnych negacji; w pobliżu - co będzie dalej.

Dostępność

• Zobacz pierścień ostrości; Enter/Space work; 'aria-busy' w bagażniku.
• Kontrast tekst/kontekst ≥ AA; ikona nie jest jedynym nosicielem znaczenia.

Zachowanie

• Odpowiedź natychmiastowa ≤ 100 ms; zajęty stan i Retry o porażkach.
• Dla ryzykownych, potwierdzenie lub cofnięcie.
• Sticky-CTA prawidłowo przykleja się do telefonu komórkowego, nie pokrywa się z treścią.

Zakwaterowanie

• CTA w obszarze kciuka (motłoch) lub na linii widzenia (pulpit).
• Wystarczające nacięcie (16-24 px) z sąsiednich elementów.

Metryka

• CTR, Konwersja po kliknięciu, Time-to-Click, Undo-rate są usuwane.
• Istnieją eksperymenty tekstowe/kolor/rozmiar/lokalizacja.

16) Dokumentacja w systemie projektowym

Кобонента: „ButtonPrimary”, „ButtonSecondary”, „ButtonGhost”, „StickyCTA”, „UndoBar”.
Żetony rozmiaru/kontrastu/animacji, przykłady kopiowania.
Wzory: „Jeden podstawowy na ekran”, „Lepki na telefonie komórkowym”, „Potwierdź/cofnij ryzyko”.
Do/Nie galeria z prawdziwymi ekranami i mapami ciepła.

Krótkie podsumowanie

CTA działa, gdy ma cel, miejsce i znaczenie: jeden ważny krok, wyraźny tekst, wystarczający kontrast, prawidłowa lokalizacja w strefie uwagi/kciuka i uczciwe opinie. Przechwytuj to w systemie projektowania, zmierz zachowanie - a kliknięcia zmieniają się w pewne, celowe działania bez błędów i podrażnień.