Conseils et helpers d'interface

1) Pourquoi ils sont nécessaires

• apparaissent dans un contexte où ils sont vraiment nécessaires,
• courte et spécifique, sans commercialisation,
• ne bloquent pas le scénario de base et respectent l'accessibilité.

2) Carte des outils et quand les appliquer

Règle : le contenu critique est dans le champ de vision et dans le texte de l'interface, pas seulement dans l'indice.

3) Modèles de placement et déclencheurs

Avant l'action : helper text/inline-hint (« Mot de passe ≥ 8 caractères »).
Au moment de l'action : tooltip/coachmark au focus/hover/long-press.
Après l'action : toast/bannière avec explication du résultat et lien « Plus ».
Par intention : affichage par '?', 'i', 'Plus', 'Ctrl +/' (commande palette).

4) Copywriting

Une pensée est une phrase. Commencez par le verbe (« Choisir »..., « Remplir »...).

Sans faute : "Le filtre a exclu tous les enregistrements. Voulez-vous réinitialiser le filtre ?"

Chiffres et faits au lieu des estimations : "Commission 1. 5–2%».
Important : ne promettez pas l'heure exacte si elle n'est pas garantie.

5) Disponibilité (A11y)

Tooltip : 'role =' tooltip ', communication via' aria-describedby 'avec le déclencheur ; disponible par clavier.
Blocs d'information : 'role = « status » (polite), erreurs -' role = « alert ».
Coachmark/Tour : focus dans l'ordre, 'Esc' ferme, retour focus à la source.
Contraste du texte ≥ AA ; l'indice n'est pas le seul porteur de sens.

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Gestion des expositions et « hygiène »

Déduplication : ne pas afficher le même message plus souvent N fois par session.
Contrôle de fréquence : cool-down 24 h pour coachmark/tour ; l'utilisateur a un « Ne pas rappeler ».
Les outils ne sont pas en concurrence : ne pas ouvrir tooltip sur coachmark et vice versa.
Mémoire du progrès : les étapes terminées de la tournée ne sont plus proposées.

7) Textes Helper aux formes

Écrivez « comment passer » la règle, pas « ce que vous avez fait de mal ».
Exemple de format à côté de : 'DD. MM. YYYY`, `user@domain. tld`.
Pour les champs complexes, le bouton « Exemple » (ouvre un petit retrait/masque).
La validation et le helper ne sont pas en conflit : en cas d'erreur, le helper se transforme en un court « comment réparer ».

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Palette de commande et recherche par action

Déclencheur : 'Ctrl +/',' Ctrl + K 'ou le bouton'.
Dans la palette : actions avec icônes et touches chaudes ("Parier... — ⏎»).
Machine à stat : lorsque vous sélectionnez une action - navigation/exécution instantanée, « Annuler » - 'Esc'.

9) AI-helper/copilote

Indices de forme/termes ("Qu'est-ce qu'un vader ? "), remplissant les champs avec la liste des modifications avant l'application.
Pour les scénarios sensibles (paiement/pari) - seulement les explications et les chèques de vérification, la solution reste à l'utilisateur.
Former sur votre propre documentation/FAQ ; Loger les questions pour améliorer la statique.

10) Spécificité iGaming

Règles et limites : helpers visibles à côté des boutons Miser, Cache, Définir la limite. Langage clair et exemples.
KYC/AML : conseils par étapes (documents, délais de vérification, ce qui se passera ensuite).
Tournois : dans la carte - « Comment les points sont attribués » (tooltip/inline-hint), lien « Règles ».
Paiements : helper sur les commissions/délais et « Pourquoi la vérification est nécessaire ».
Jeu responsable : Conseils discrets mais visibles « Réglez la limite du jour » (contraste AAA, pas de scintillement).

11) Performance et positionnement

Animations faciles 'opacity/bou' ≤ 180 ms, out plus rapide.
Positionnement à la source, décalage de 4-8 px, auto-flip aux bords.
Ne créez pas un arbre DOM à partir de centaines d'indices - montez paresseusement par focus/hover.
Considérez 'prefers-reduced-motion' : conseils statiques au lieu de shimmer.

12) Métriques et expériences

Conseils CTR (projections → clics sur STA/« Plus »).
Réduction des erreurs/pannes dans les formes avec chelpers vs control.
Le temps avant le premier succès après empty/tour.
Masquer/refuser les indices (signal négatif - réécrire le texte/moment d'affichage).
Logs de requêtes populaires dans la palette de commandes/AI-helper.

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

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Réalisation : coachmark et « ne pas rappeler »

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15) Anti-modèles

Conseils fermant le CTA ou chevauchant le focus.
Informations critiques uniquement dans tooltip/hover.
Tour de 10 + pas sans « Rater plus tard ».
Conseils scintillants/sautants, en particulier dans le mode dark.
« Blagues » et métaphores culturelles dans les erreurs et les limites.
Couleurs agressives et son pour un jeu responsable.

16) Liste de vérification QA

Disponibilité

• Tooltip/coachmark disponible sur le clavier, 'Esc' ferme, le focus revient.
• Contraste ≥ AA, les textes ne dépendent pas seulement de la couleur.

Comportement

• Les indices ne chevauchent pas les éléments importants, ils sont positionnés à la source.
• Il y a la déduplication des projections et « Ne pas rappeler ».
• Animations ≤ 180 ms, out plus rapide.

Sens

• Texte spécifique et court, la LTC est appropriée.
• Les formules/restrictions donnent des exemples.

Métriques

• Le CTR est filmé, le temps avant le succès, la proportion de cachettes.

17) Documentation dans le système de conception

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Tokens taille/temps/tons, hyde ARIA et exemples de copywriting.
Modèles pour les scénarios fréquents (KYC, limites, paiements, tournois, paris).
Do/Don't-gallery avec des écrans réels.

Résumé succinct

Les helpers sont bons quand à l'heure, dans le contexte et sans trop de dramaturgie. Donnez des conseils courts, accessibles et vérifiables, respectez la concentration et la fréquence des projections, fixez des jetons et des modèles dans le système de conception. Ainsi, les utilisateurs sont moins susceptibles de se tromper et d'atteindre les résultats plus rapidement - en particulier dans les scénarios sensibles iGaming.