Boutons CTA et zones d'attention

1) Rôle et principes de l'OTC

1. Une étape principale sur l'écran. Primary-CTA doit être évident et unique.
2. Contexte → action. À côté du CTA, il y a toujours une brève explication de « ce qui va se passer ensuite ».
3. Visibilité sans agression. Contraste ≥ AA, taille suffisante et texte lisible - au lieu d'effets flashy.
4. Séquence. Les mêmes CTA se comportent de la même manière sur tous les écrans.
5. La sécurité. Les CTA à risque sont accompagnés d'une confirmation ou non.

2) Hiérarchie CTA

Primary est l'action clé de la page (« Parier », « Compléter », « Confirmer »). 1 pièces

Secondaire est une étape alternative ou auxiliaire (En savoir plus, Modifier la méthode).
Tertiary - boutons texte/fantôme (ghost) avec le moins de poids visuel.
Destructive est un style distinct (couleur/icône d'avertissement) + confirmation/undo.

Règle : s'il y a plus d'un CTA « fort » sur l'écran, un choix sans objectif est probable. Remodeler le flux.

3) Copywriting CTA

Verbe + objet, 2-4 mots : « Parier », « Réapprovisionner le solde », « Définir la limite ».
Spécificité : « Sortir 2 000 ₴ » vaut mieux que « Envoyer ».
Évitez les doubles dénégations (« Ne pas annuler ») et les métaphores vagues.
Pour les actions risquées, sous-titre 1 ligne : « Sans confirmation, vous pouvez annuler 5 secondes ».

4) Dimensions, forme, contraste

Zone minimale de clic : ≥ 44 × 44 px (tache), ≥ 32 × 32 px (poste de travail).
Hauteur du bouton : 40-48 px ; un rayon de 10 à 12 px ; à l'intérieur. tirets horizontaux 16-20 px.
Contraste du texte au fond : WCAG AA ; ne vous fiez pas seulement à la couleur - utilisez l'icône/label.
Nombres tabulaires pour les montants : 'font-variant-numeric : tabular-nums ;'.

5) États et rétroaction

Hover/Focus/Active - visible et visible (focus-ring ne peut pas cacher).
Busy (loading) : la résonance instantanée ≤ 100 мс, le spinner/squelette au lieu du "silence".
Disabled : pas seulement « gris » - expliquez pourquoi il n'est pas disponible (tooltip/inline-hint).
Undo/Confirm : Pour les CTA destructeurs, soit une modalité de confirmation, soit un panneau avec Undo 5-10 secondes.

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) Zones d'attention et zones du pouce (mobile)

Motifs du regard : F-pattern/Z-pattern, points « chauds » : haut-gauche (titre), haut-droite (secondaire), bas de l'écran (achèvement).

• au-dessus du pli pour les écrans courts ou en bas de la forme sur la ligne de regard,
• un panneau « collant » en bas sur le mobile (thumb-zone).
• Mobile « pouces » : plus pratique 1/3 de l'écran inférieur, bord droit/gauche - dépend de la main dominante (par défaut est le centre inférieur/droit).

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) Hébergement et retraits

Séparez le primaire-CTA des éléments secondaires par un espace blanc (16-24 px).
Ne mettez pas deux primaires à côté - l'un deviendra un « faux » choix.
Dans les formulaires : CTA après le dernier champ ; les secondaires sont à gauche/sous CTA (« Back », « Annuler »).
Sur les cartes/tuiles : CTA en bas à droite ; pour les listes longues - inline-CTA sur chaque carte.

8) Animations et modèles de mouvement

Entrée/sortie : 120-180 ms, 'opacity/bou' (pas de secousses de layout).
Effet presse : réduction à 96-98 % + ombre → « clic ressenti ».
Pour le « succès » : courte microanimation par chèque ≤ 400 ms ; pour reduce-motion est une icône statique.
Évitez les effets scintillants infinis (anti-pattern pour un jeu responsable).

9) A11y et clavier

'role =' button 'n'est pas nécessaire avec' <button> 'natif.
Focus-ring visible ; l'ordre de Tabulation est logique. Enter/Space activent le CTA.
'Aria-busy 'au chargement ; pour le statut, utilisez la région live 'role = « status ».
Le texte du bouton est disponible par SR ; les icônes sont avec' aria-hidden = » true » et ne sont pas le seul porteur de sens.

10) Métriques et expériences

CTR CTA, Conversion after click, Time-to-Click de l'apparition au clic.
Scroll-depth → click : proportion de clics qui se sont produits « au-dessus du pli »/ » sous le pli ».
Zones Heatmap (desktop/mob) ; Thumb-reach (mob).
Taux de Cancel/Undo pour les CTA à risque.
A/B : texte, couleur/contraste, taille, emplacement, panneau « collant » vs placement statique.

11) Tokens de système de conception (exemple)

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) Patterns pour iGaming

Parier (Primary) : affichez le montant et le coefficient à côté ; avec un retard> 3 s - « En attente de confirmation »... + sécurité Retry.
Dépôt : sticky-CTA en bas mob. Écran (« Recharger »), secondaire - « Modifier la méthode » ; commissions visibles/échéances à proximité.
Cache : Le CTA est enregistré sur l'écran de match/coupon ; affiche toujours la somme actuelle du cache ; confirmation avant exécution.
Fixer une limite : CTA non agressif ; proche - « Entrera en vigueur par ».... Contraste AAA, pas de clignotements.
Tournois : CTA « Rejoindre » sur la carte du tournoi + secondaire « Règles/Prix ».

13) Anti-modèles

Deux primary-CTA à proximité (« parier » et « acheter un bonus ») - la concurrence cognitive.
Les « gris » sont désablés sans explication.
Des animations infinies d'attention et de savoir-vivre.
Un bouton qui change le marquage et évite le focus.
CTA est en dessous d'un grand « décor » qui part sous le pli.
L'icône au lieu du texte (sans label) dans les endroits critiques.

14) Snappets d'analystes

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) Liste de vérification QA

Sens et hiérarchie

• Il y a exactement une primary-CTA sur l'écran ; les secondaires ne sont pas en conflit de poids.
• Le texte de la LTC est clair, sans double déni ; à côté - ce qui va se passer ensuite.

Disponibilité

• Focus-ring voir ; Enter/Space fonctionne ; 'aria-busy' au démarrage.
• Contraste texte/fond ≥ AA ; l'icône n'est pas le seul porteur de sens.

Comportement

• Réponse instantanée ≤ 100 ms ; busy-status et Retry en cas de défaillance.
• Pour les risqués - confirmation ou non.
• Sticky-CTA adhère correctement sur le mobile, ne chevauche pas le contenu.

Hébergement

• CTA dans la zone du pouce (mob) ou sur la ligne de vue (desktop).
• Retrait suffisant (16-24 px) des éléments voisins.

Métriques

• Filmés par CTR, Conversion after click, Time-to-Click, Undo-rate.
• Il y a des expériences de texte/couleur/taille/emplacement.

16) Documentation dans le système de conception

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Tokens de taille/contraste/animation, exemples de copywriting.
Modèles : « Une première par écran », « Sticky sur mobile », « Confirmation/Undo pour le risque ».
Do/Don't-gallery avec des écrans réels et des cartes thermiques.

Résumé succinct

L'OTC fonctionne quand il a un but, un lieu et un sens : une étape principale, un texte clair, un contraste suffisant, un emplacement correct dans la zone d'attention/pouce et une rétroaction honnête. Fixez-le dans le système de conception, mesurez le comportement - et les clics se transforment en actions confiantes et conscientes, sans erreur ni irritation.