Butoane CTA și zone de atenție

1) Rolul CTA și principiile

1. Un pas important pe ecran. CTA primară ar trebui să fie evidentă și unică.
2. Context → acţiune. Există întotdeauna o scurtă explicație „ce se întâmplă în continuare” pentru CTA.
3. Vizibilitate fără agresivitate. Contrast ≥ AA, dimensiune suficientă și text ușor de citit - în loc de efecte strălucitoare.
4. Consistență. Aceleași CTA-uri se comportă la fel pe toate ecranele.
5. Securitate. CTA riscante sunt însoțite de confirmare sau anulare.

2) ierarhia CTA

Primar - acțiunea paginii cheie („Plasați un pariu”, „Reîncărcați”, „Confirmați”). 1 buc.
Secundar - pas alternativ sau auxiliar („Detalii”, „Metoda de schimbare”).
Terțiar - butoane text/fantomă cu cea mai mică greutate vizuală.
Distructiv - stil separat (pictograma culoare/avertizare) + confirmare/anulare.

Regulă: dacă există mai mult de un „puternic” CTA pe ecran, o alegere fără un obiectiv este probabil. Reproiectează fluxul.

3) Copywriting CTA

Verb + obiect, 2-4 cuvinte: „Plasați un pariu”, „Completați soldul”, „Setați o limită”.
Specificații: „Ieșire 2.000 ₴” este mai bună decât „Trimite”.
Evitați dublele negații („Nu anulați”) și metaforele vagi.
Pentru acțiuni riscante - subpoziție 1 linie: „Fără confirmare, puteți anula 5 secunde”.

4) Dimensiuni, formă, contrast

Zona minimă de clic: ≥ 44 × 44 px (touch), ≥ 32 × 32 px (desktop).
Înălțimea butonului: 40-48 px; raza 10-12 px; int. liniuțe orizontale 16-20 px.
Contrast text-fundal: WCAG AA; nu vă bazați doar pe culoare - utilizați o pictogramă/etichetă.
Cifre tabel pentru cantități/factor: 'font-variant-numeric: tabular-nums; '.

5) Stări și feedback

Hover/Focus/Active - vizibil și distinctiv (focus-ring nu se ascund).
Ocupat (încărcare): răspuns instantaneu ≤ 100 ms, spinner/schelet în loc de „tăcere”.
Dezactivat: nu doar „gri” - explică de ce nu este disponibil (tooltip/inline-indiciu).
Anulare/Confirmare: pentru CTA-uri distructive - fie un modal de confirmare, fie un panou cu Anulare 5-10 sec.

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) Zone de atenție (desktop) și zone degetul mare (mobil)

Modele de priviri: F-model/Z-model, puncte fierbinți: stânga sus (titlu), dreapta sus (secundar), partea de jos a ecranului (finisaj).

• deasupra curbei pentru ecrane scurte sau în partea de jos a formei la linia de vedere,
• panoul „lipicios” din partea de jos a telefonului mobil (zona degetului mare).
• „Degetele mari” mobile: partea inferioară 1/3 a ecranului este mai convenabilă, marginea dreaptă/stângă depinde de mâna dominantă (în mod implicit - centrul inferior/dreapta).

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) Plasarea și liniuțele

CTA primară separată de elementele secundare cu spațiu alb (16-24 px).
Nu puneți două primare una lângă cealaltă - una va fi o alegere „falsă”.
Pe formulare: CTA după ultimul câmp; secundar - stânga/sub CTA („Înapoi”, „Anulează”).
Pe cărți/plăci: CTA dreapta jos; pentru liste lungi - inline-CTA pe fiecare card.

8) Animații și modele de mișcare

Intrare/ieșire: 120-180 ms, „opacitate/transformare” (fără shake-uri de aspect).
Efect de presă: reducere la 96-98% + umbră → „clic se simte”.
Pentru „succes”: scurta microanimare ≤ 400 ms; pentru reducerea mișcării - o pictogramă statică.
Evitați efectele interminabile de pâlpâire (anti-model pentru joc responsabil).

9) A11y și tastatură

'role = „buton”' nu este necesar cu '<buton>' nativ.
Focus-ring vizibil; Ordinea filelor este logică. Enter/Space activează CTA.
„aria-ocupat” la boot; pentru status, utilizați live-region 'role = „status”'.
Textul butonului este disponibil SR; icoane - cu 'aria-ascuns = "adevărat" "și nu singurul purtător de înțeles.

10) Măsurători și experimente

CTR CTA, Conversie după clic, Time-to-Click de la aspect la clic.
Derulați-adâncime → faceți clic pe: proporția de clicuri care au avut loc „deasupra îndoiți „/” sub îndoire ”.
Zone Heatmap (desktop/mafie); Degetul mare (mafia).
Anulare/Anulare rată pentru CTA riscante.
A/B: text, culoare/contrast, dimensiune, locație, panou lipicios vs plasare statică.

11) Proiectarea tokenurilor sistemului (exemplu)

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) Modele pentru iGaming

Faceți un pariu (Primar): afișați suma și coeficientul unul lângă altul; la întârziere> 3 s - „În așteptare pentru confirmare”... + Retry în condiții de siguranță.
Depozit: lipicios-CTA ecran mobil de jos („Reaprovizionare”), secundar - „Metoda de schimbare”; comisioane vizibile/termene limită în apropiere.
Cashout: CTA este capturat pe ecranul de meci/cupon; arată întotdeauna suma curentă de încasare; confirmare înainte de execuţie.
Limita stabilită: CTA nu este agresivă; în apropiere - „Va intra în vigoare în”.... Contrast AAA, nu intermitent.
Turnee: CTA „Join” pe cartea de turneu + secundar „Reguli/Premii”.

13) Antipattern

Două CTA-uri primare din apropiere (Bet and Buy Bonus) sunt competiție cognitivă.
„Gray” dezactivat fără explicaţii.
Animații nesfârșite atenție și cu ochiul.
Un buton care schimbă marcajul și îndepărtează focalizarea.
CTA este mai mică decât „decorul” mare care merge sub îndoire.
Pictograma în loc de text (fără etichetă) în locuri critice.

14) Fragmente de analiză

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 de verificare QA

Semnificație și ierarhie

• Există exact un primar-CTA pe ecran; cele secundare nu intră în conflict cu greutatea.
• Textul CTA este clar, fără duble negații; în apropiere - ce se întâmplă în continuare.

Disponibilitate

• Focus-ring vezi; Introduceți/Spațiu de lucru; „aria-ocupat” la boot.
• Contrast text/fundal ≥ AA; icoana nu este singurul purtător de sens.

Comportament

• Răspuns instantaneu ≤ 100 ms; stat ocupat și încercați din nou pe eșecuri.
• Pentru cele riscante, confirmare sau anulare.
• Sticky-CTA se lipește corect pe mobil, nu se suprapune conținutului.

Cazare

• CTA în zona degetului mare (mafie) sau pe linia de vedere (desktop).
• Indentare suficientă (16-24 px) din elementele adiacente.

Măsurători

• CTR, Conversia după clic, Time-to-Click, Undo-rate sunt eliminate.
• Există experimente text/culoare/dimensiune/locație.

16) Documentația în sistemul de proiectare

Компоненты: 'ButtonPrimary', 'ButtonSecundar', 'ButtonGhost', 'StickyCTA', 'UndoBar'.
Dimensiune/contrast/animație jetoane, exemple de copywriting.
Modele: „Un primar pe ecran”, „Lipicios pe un mobil”, „Confirmați/Anulați pentru risc”.
Do/Don' t galerie cu ecrane reale și hărți de căldură.

Scurt rezumat

CTA funcționează atunci când are scop, loc și sens: un pas major, text clar, contrast suficient, locație corectă în zona de atenție/degetul mare și feedback onest. Capturați acest lucru în sistemul de proiectare, măsurați comportamentul - iar clicurile se transformă în acțiuni încrezătoare, deliberate, fără greșeli și iritare.