Indicateurs de progrès et d'état

1) Principes

1. Réponse instantanée (≤ 100 ms). N'importe quelle action se confirme à la fois visuellement : la pression → ' busy le '/squelette/microanimation.
2. Honnêteté et prévisibilité. Les intérêts reflètent des progrès réels et non « 99 % éternels ». Si l'évaluation n'est pas possible, utilisez une option et une explication non définies (indeterminate).
3. Le contexte est proche de l'action. L'indicateur est là où l'utilisateur regarde/agit (bouton, carte, bloc) et non dans un coin lointain.
4. L'invisibilité après le succès. Le succès est un court chèque/feed et c'est tout. L'erreur est une explication compréhensible et une répétition sûre.
5. Disponibilité par défaut. 'role = « progressbar »,' aria-valuenow ', régions en direct, contraste ≥ AA.

2) Types d'indicateurs et quand les utiliser

Progression linéaire (determinate/indeterminate). Téléchargement/importation/exportation, étapes avec volume compréhensible.
Progrès circulaire (généralement indéterminé). Opérations locales courtes dans des endroits compacts.
Stepper (étape par étape). Étapes successives (« Étape 2 de 4 »), KYC, processus maîtres.
Skeleton. Pour remplacer la structure de contenu par des spinners ; évitez « shimmer » pour les utilisateurs avec 'prefers-reduced-motion'.
Statut-badge (success/warning/danger/info). État de l'objet (En cours de traitement, Rejeté, Terminé).
Bannière/toast de statut. Événements globaux : hors ligne, échec du serveur, synchronisation de la file d'attente.
Inline loader (bouton/ligne). Opérations locales : « Enregistrer »..., « Envoyer »....

3) Certain vs progrès incertains

Determinate : nous connaissons la quantité de travail → montrons les %/étapes.
Indeterminate : volume inconnu → « Traitement en cours »... + contexte (« Habituellement jusqu'à 1-2 min »).
Changement d'état : vous pouvez commencer par indeterminate → aller à determinate quand le score apparaît.
ETA est prudent : montrez la gamme ("~30-60 fouettait") et évitez "les promesses".

4) Hébergement et modèles

Local à l'action : bouton 'aria-busy', spinner dans la ligne du tableau, progression dans la carte.
Au-dessus de l'unité/liste : barre linéaire sous la tête de section en cas d'opérations par lots.
Global : Top subtil progress (route-change), bannières système.
Panneau de sticky (mob.) : Confirmation/progrès sur le CTA dans le quai inférieur.

5) Disponibilité (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

Indeterminate : exposez 'role = « progressbar »' sans 'aria-valuenow', ajoutez le texte explicatif dans 'role = « status ».
"aria-live =" polite "pour les mises à jour ordinaires," assertive "pour les mises à jour critiques seulement.
'aria-busy = 'true' sur un conteneur temporairement bloqué par des actions.
Le focus ne « saute » pas : lorsque vous changez d'étape, déplacez le focus sur le titre de l'étape du stepper.

6) Copywriting et sémantique visuelle

Bref et sur l'affaire : « Le téléchargement est en cours »..., « Nous traitons le paiement »....
Ajoutez "quoi d'autre" : "Terminé. Actualisons la page automatiquement".
Couleurs : vert - succès, orange - avertissement/attention, rouge - erreur. La couleur ≠ le seul porteur de sens : donnez une icône/texte.

7) Mises à jour et retours optimistes

Optimisme : nous changeons l'IU immédiatement (par exemple, la marque « Dans les favoris ») et nous confirmons silencieusement par le serveur.
En cas d'erreur, retour doux + explication et « Retry ».
Transactions critiques (taux/paiement) : optionnellement « doux optimisme » (nous enregistrons « Envoyé → En attente de confirmation »...), mais sans changement de cash avant confirmation.

8) Files d'attente et tâches de fond

Montrez la file d'attente : "n'tâches dans le traitement, cartes individuelles avec progrès.
Accordez une pause/annulation pour de longues opérations, si possible.
Traitement de fond : badge « En arrière-plan », toasts à la fin, section « Historique des tâches ».

9) Performance et timings

Première réaction ≤ 100 ms : appliquer skeleton/inline-busy au lieu de vide.
Animations : 120-180 ms (in), 80-140 ms (out), seulement « bou/opacity ».
Processus longs : Mise à jour des progrès 10 à 15 fois/s au maximum ; regroupez les changements.

10) Snappets

Progression locale au bouton

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Determinate linéaire

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

Stepper

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) Skeleton est correct

Utilisez la forme du contenu futur (carte/ligne), sans shimmer infini (ou désactivez avec 'prefers-reduced-motion').
Limite de temps : si le chargement> 300-500 ms, skeleton est justifié ; avec moins de retard, un « micro faid » suffit.

12) Statut-badge (état objet)

Exemples : Brouillon, En cours de traitement, En attente de confirmation, Terminé, Rejeté.

Texte court, couleurs d'icône/arrière-plan stables, contraste ≥ AA.
Icône' aria-hidden = » true » + label texte (pour SR).
En un clic, nous révélons les détails ou ouvrons l'Histoire.

13) Spécificité iGaming

• Appuyez sur CTA → « Envoyé »..., avec un retard> 3 s - « En attente de confirmation... » (indeterminate).
• Succès - « Taux accepté » + chèque ; erreur - explication honnête (« période de marché fermée/coefficient changé ») et sécurité Retry.

• Determinate par étapes : « Validation de la méthode → Soumission → Confirmation PSP ».
• Pour la sortie - badge B de traitement, l'écran d'état dans le profil, ETA gamme ; une fois terminé.

• Stepper d'inscription (étapes), progrès vers le prix (N/points), badge de statut « Participe ».
• Mise à jour du temps réel - soigneusement, sans clignotements, avec 'aria-live = « polite ».

• Stepper + badge « Au contrôle ». Montrez ce qui a déjà été accepté (tique) et ce qui reste.

14) Couleurs, contraste et texte

Success/Info/Warning/Danger - quatre tons durables dans le système de conception.
Contraste du texte avec l'arrière-plan badge ≥ AA.
N'utilisez pas la même couleur pour « en traitement » et « avertissement ».

15) Métriques

Time-to-First-Feedback (TTFF) : du clic à la première réponse visuelle.
Completion Time sur les opérations et drop/abort rate pour de longues tâches.
Taux de réussite Retry pour les opérations de progression.
% optimiste qui a réussi (et proportion de retraits).
Temps visible skeleton/spinner (objectif : le moins possible).

16) Anti-modèles

Bouton « muet » (pas de busy/spinner)> 100 ms.
Des filins sans fin sans explication ni alternative.
Faux pourcentage/curseur dépendant de 99 %.
Réinitialiser le contenu en cas d'erreur sans pouvoir le répéter.
Seule la couleur sans texte/icônes pour le statut.
Progression loin du lieu de l'action (l'utilisateur ne voit pas).

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

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) Liste de vérification QA

Réponse et honnêteté

• TTFF ≤ 100 ms ; il y a un busy/skeleton local.
• Determinate est le % réel ; indeterminate - avec explication.

Disponibilité

• 'role = « progressbar » '/' aria-valuenow' sont corrects ; régions en direct sur les mises à jour.
• Contraste badge/texte ≥ AA ; la couleur n'est pas le seul porteur de sens.

Comportement

• Optimiste avec le bon retour en arrière et l'explication.
• Les files d'attente sont affichées ; il y a annulation/pause (le cas échéant).
• Progrès près du lieu de l'action, ne chevauche pas la LTC.

Performance

• Mises à jour 10 à 15 fois/s au maximum ; animations « bou/opacity ».
• Skeleton ne taquine pas shimmer 'om avec' reduce-motion '.

Textes

• Bref, sans techjargon ; « quoi d'autre » une fois terminé.
• Sans « promesses » de l'heure exacte, si elle n'est pas garantie.

19) Documentation dans le système de conception

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Règles de sélection de type, de copywriting et de couleur pour les statuts.
Modèles : Optimisme, files d'attente, traitement de fond, synchronisation hors ligne.
Do/Don't-gallery : « éternel spinner », faux intérêts, « muet » CTA vs bon TTFF.

Résumé succinct

Les indicateurs de progrès et de statut doivent fournir une rétroaction opportune, honnête et accessible. Placez-les à côté de l'action, distinguez les progrès définis et incertains, respectez a11y et n'abusez pas des animations. Dans iGaming, c'est particulièrement important pour les paris, les paiements, les tournois et KYC - des progrès calmes et prévisibles augmentent directement la confiance et la conversion.