Pulsanti CTA e zona di attenzione

1) Ruolo CTA e principi

1. Un passo principale sullo schermo. Primary-CTA deve essere evidente e unico.
2. Contesto → azione. Accanto al CTA c'è sempre una breve spiegazione «cosa succederà dopo».
3. Apparenza senza aggressività. Contrasto AA, dimensioni sufficienti e testo leggibile - invece di effetti urlanti.
4. Sequenza. Gli stessi CTA si comportano allo stesso modo su tutti gli schermi.
5. Sicurezza. I rischi CTA sono accompagnati da una conferma o undo.

2) Gerarchia CTA

Primary è un'azione chiave della pagina (Scommetti, Ricarica, Conferma). 1 pezzo.
Secondary è un passaggio alternativo o secondario (Più informazioni, Cambia metodo).
Tertiary - pulsanti di testo/ghost (ghost) con il peso visivo più basso.
Distruttive è uno stile separato (colore/icona di avviso) + conferma/undo.

Regola: se ci sono più CTA «forte» sullo schermo, è possibile scegliere senza obiettivo. Riprogettate il flusso.

3) Copiratting CTA

Verbo + oggetto, 2-4 parole: «Scommetti», «Rifornisci saldo», «Imposta limite».
In particolare, « 2.000 » è meglio di «Spedisci».
Evitare doppie negazioni («Non annullare») e metafore vaghe.
Per le azioni rischiose, sottotitolo 1 riga: «Senza conferma, è possibile annullare 5 secondi».

4) Dimensioni, forma, contrasto

Area click minima: ≥ 44 x 44 px (serbatoio), ≥ 32 x 32 px (dectop).
Altezza pulsante 40-48 px; raggio 10-12 px; L'interno. indentazione orizzontale 16-20 px.
Contrasto del testo al fondo: WCAG AA; Non fare affidamento solo sul colore - usa l'icona/etichetta.
Numeri tabellari per gli importi/koff: 'font-variant-numeric: tabula-nums;'.

5) Stati e feedback

Hover/Focus/Active - visibile e differente (focus-ring non nascosto).
Busy (loading): risposta immediata da 100 ms, spinner/scheletro anziché «silenzio».
Disabled: non solo grigio - Spiegami perché non è disponibile (tooltip/inline-hint).
Undo/Confirm - Per i CTA distruttivi, è un modello di conferma o un pannello Undo da 5 a 10 secondi.

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 di attenzione (dectop) e aree del pollice (mobile)

Pattern dello sguardo: F-pattern/Z-pattern, hot point: alto-sinistro (titolo), superiore-destra (secondario), inferiore dello schermo (fine).

• sopra il piegatura per le schermate corte o sotto la forma sulla linea dello sguardo,
• il pannello «appiccicoso» sul cellulare (thumb-zone).
• I pollici mobili sono più comodi 1/3 dello schermo, il lato destro/sinistro dipende dalla mano dominante (il valore predefinito è il centro/destra).

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) Posizionamento e indentazione

Separare il primary-CTA dagli elementi secondari dallo spazio bianco (16-24 px).
Non mettere due primary accanto - uno diventerà una scelta «falsa».
Nei moduli: CTA dopo l'ultimo campo; secondario a sinistra/sotto CTA (Indietro, Annulla).
Schede/piastrelle: CTA in basso a destra; per i lunghi elenchi - inline-CTA su ogni scheda.

8) Animazioni e motion-pattern

Ingresso/uscita: 120-180 ms, 'opacity/transfer' (senza scatto layout).
Effetto Press: riduzione del 96-98% + ombra del click percepito.
Per «successo»: un breve assegno-microanimazione da 400 ms; per reduce-motion è un'icona statica.
Evitare infiniti effetti di mischia (anti-pattern per il gioco responsabile).

9) A11y e tastiera

"role =" button "non è necessario con il nativo" <button> ".
Focus-ring visibile; l'ordine di Taib è logico. Enter/Space attiva CTA.
«aria-busy» al caricamento; per lo stato, utilizzare la regione live 'rolle = «status».
Il testo del pulsante è disponibile SR; le icone sono con "aria-hidden =" true "e non sono l'unico portatore di significato.

10) Metriche ed esperimenti

CTR CTA, Conversion after click, Time-to-Click dall'apparizione al clic.
Scroll-depth-click: percentuale di click avvenuti sopra il piegatura/sotto il piegatura.
Heatmap zone (desktop/mob); Thumb-reach (mob).
Cancel/Undo rate per CTA rischioso.
A/B: testo, colore/contrasto, dimensione, posizione, pannello vs «appiccicoso» statico.

11) Token di progettazione (esempio)

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) Pattern per iGaming

Premi (Primary) - Mostra accanto l'importo e il coefficiente; in caso di ritardo> 3 c - «Attendiamo conferma»... + Retry sicuro.
Deposito: sticky-CTA in basso mob. schermata (Ricarica), secondaria - Modifica metodo commissioni visibili/scadenze vicine.
Cache: CTA viene registrato sullo schermo del match/coupon; visualizza sempre l'importo corrente della cache. conferma prima dell'esecuzione.
Imposta limite: CTA non aggressivo; accanto a «Entrerà in vigore attraverso»... Contrasto AAA, niente lampeggianti.
Tornei: CTA «Unisci» sulla scheda del torneo + secondario «Regole/Premi».

13) Antipattern

Due primary-CTA accanto («Scommettere» e «Compra bonus») sono la competizione cognitiva.
«Grigio» disabled senza spiegazioni.
Animazioni infinite di attenzione e lampeggianti.
Un pulsante che cambia la marcatura e porta via il trucco.
Il CTA è al di sotto del grande «decoro» che va in piega.
Icona invece di testo (senza etichetta) in posizioni critiche.

14) Snippet analisti

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 assegni QA

Significato e gerarchia

• Sullo schermo c'è esattamente un primary-CTA; i secondari non sono in conflitto di peso.
• Il testo CTA è chiaro, senza doppie negazioni; A fianco, cosa succederà dopo.

Disponibilità

• Focus-ring vediamo; Invio/Space funzionano; 'aria-busy'durante il caricamento.
• Contrasto del testo/sfondo dell'AA; l'icona non è l'unico portatore di significato.

Comportamento

• Risposta istantanea da 100 ms; stato busy e Retry in caso di guasti.
• Per i rischiosi - conferma o undo.
• Sticky-CTA si attacca correttamente sul cellulare, non sovrappone i contenuti.

Posizionamento

• CTA nella zona del pollice (mob) o sulla linea dello sguardo (dectop).
• Indentazioni sufficienti (16-24 px) dagli elementi adiacenti.

Metriche

• CTR, Conversion after click, Time-to-Click, Undo-rate.
• Ci sono esperimenti di testo/colore/dimensione/posizione.

16) Documentazione in progettazione

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Token di dimensioni/contrasto/animazioni, esempi di copiatura.
Pattern: Un primary sullo schermo, Sticky sul mobile, Confirm/Undo per il rischio.
Do/Don't-gallery con schermi reali e mappe termiche.

Breve riepilogo

CTA funziona quando ha un obiettivo, un luogo e un significato: un passo principale, un testo chiaro, un contrasto sufficiente, una posizione corretta nella zona di attenzione/pollice e un feedback onesto. Fissatelo in un sistema di design, misurate il comportamento e i click si trasformano in azioni sicure e consapevoli senza errori o irritazioni.