Taux d'interaction et UI latitude

1) Qu'est-ce que la vitesse de l'interface

1. Input latency - du geste au gestionnaire d'événement.

2. Network latency - avant la réponse backend/cache.

3. Render latency - traitement sur le flux principal (JS/CSS/layout/paint).

4. Animation latency - fluidité et stabilité des images.

Objectif : l'utilisateur voit instantanément que l'action a commencé et où le processus se déplace ; le résultat réel est prévisible.

2) Les seuils de la perception humaine

≤ 50 ms - « éclair » (écho d'impression, appuyez sur la touche).
≤ 100 ms - « instantanément » (clic → réponse visuelle).
≤ 200 ms - acceptable pour la plupart des réactions d'IU.
≤ 1000 ms - toléré avec une nette progression/squelette.

3) Modèle RAIL et budgets ciblés

R (Response) : Réponse à l'entrée

Click/tap → réponse visuelle ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animation) : fluidité

60 FPS ⇒ cadre 16. 7 ms ; opérations lourdes à retirer du cadre.
Nous ne faisons qu'animer « bou »/« opacity ».

I (Idle) : Tâches d'arrière-plan

Nous divisons en fentes ≤ 50 ms, nous utilisons des fenêtres idle.

L (Load) : téléchargement

TTFB ≤ 200 ms, LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1.

4) KPI et alertes de vitesse

INP (Interaction to Next Paint) : p75 <200 ms (ok), 200-500 (à améliorer).
Long Tasks (> 50 ms) : proportion de trames avec LT <5 %.

TTFB p75 <200 ms (cache/Edge), LCP p75 <2. 5 s

First User Feedback (FUF) : durée jusqu'à la première confirmation visuelle de l'action ≤ 100 ms.
Time-to-Usable pour les formulaires : ≤ 1 s avant de saisir le premier champ.

5) Modèles UX de réponse instantanée

1. Mises à jour optimistes : nous changeons l'IU immédiatement (balance/pari/j'aime), nous baissons en cas d'erreur.
2. Squelettes au lieu de spinner si la structure est connue.
3. Progrès/étapes : progression déterministe si la longueur du processus est connue.
4. Conseils locaux : Toasts instantanés/Steat « Envoyer »... ≤ 100ms.
5. Préchargement sur l'intention : hover/visibilité → 'prefetch '/' preload'.

6) Techniques de réduction des retards

6. 1 Input → Render

Filmer 300 ms delay sur mobile : '<meta name = « viewport » content = « width = device-width, initial-scale = 1 »>'.
Auditeurs passifs pour scroll/tach : 'addEventListener (' touchstart ', handler, {passive : true})'.
Traitement d'un clic - en microclic ou 'requestAnimationFrame' pour un rendu rapide de la confirmation.
Évitez layout-thrash : lire/écrire layout - piquer.

6. 2 JS et le flux principal

Séparez les bandles (code-splitting), téléchargez le long des itinéraires.
Calcul lourd → Web Worker.
Utilisez 'scheduler. postTask '/' requestIdleCallback 'pour les tâches d'arrière-plan.
CSS critique - inline ; JS с `defer`/`async`.
Virtualisation des listes, 'content-visibility : auto', 'content : content'.

6. 3 Renders et animations

Animer « bou/opacity » ; n'animez pas 'height/left/box-shadow' sur des centaines d'éléments.
« will-change » mis temporairement avant l'animation ; nettoyer après.
Sprites/vecteur au lieu d'énormes PNG ; évitez le heavy blur.

6. 4 Réseau et cache

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnect aux domaines critiques ; Early Hints (103), HTTP/2/3.
Prefetch par intention (hover/viewport).
Streaming/SSR + hydratation progressive/îles.

7) Debouns/trottling et files d'attente

Debounce - pour la recherche pendant l'entrée (150-300 ms).
Trottling - pour scroll/resize (100-200 ms).
Files d'attente/Batching UI mises à jour en cas d'événements fréquents (données en direct).

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8) Modèles de téléchargement et de rétroaction

Skeleton → Content (pas de décalage, hauteurs fixes).
Shimmer 1200-1600 ms, amplitude ≤ 20 %.
Carte optimiste : Prévisualisation grise + texte - à remplacer à l'arrivée des données.
Erreur : courte bannière retry, idempotency clés pour les répétitions.

9) Stratégies réseau pour une réponse rapide

• confirmation de l'IU immédiatement (optimiste), le backend est idempotent ;
• dans le tymaut (3-5 s), l'affichage du statut « reçu, traité » + retraits de fond ;
• WebSocket/SSE pour les statuts, backoff 1-2-4-8 s.

Données de pré : Cache warm-up programmé, pré-fetch des itinéraires populaires.

Fonction Edge : validation/agrégation plus proche de l'utilisateur.

10) Code de retrait de l'UI rapide

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11) Diagnostic et surveillance

Champ : RUM (mesures sur le terrain) p75 par pays/réseaux/appareils.
Trace d'un clic : 'input → handler → network → paint'.
Marquage « zones rouges » : Marqueurs Long Task, blocking-time, Slow-route list.
Alertes de dégradation INP/LCP/TTFB.
Tests de scénario : enregistrement de l'heure de référence « click → change DOM ».

12) Spécificités iGaming

• UI : fixation instantanée de l'état du bouton (pressé → busy), prise - toast « Accepté ».
• Backend : clé idempotent au taux ; Statut - via WebSocket ; Timaut → transparent « pending ».
• Budget UI : FUF ≤ 100 ms, confirmation finale ≤ 1 s (si plus longtemps - montrer la minuterie/cause).

• Accélération ≤ 200 ms, rotation uniforme, atténuation 300-500 ms ; sans cycles infinis.
• Bouchons de gain - sans stroboscope, texte/somme lisible (AAA).

• Patchs delta tous les 250 à 1000 ms, batch ;
• diff visuel (flèche/couleur/épaisseur) sans sauts de layout ;
• anti-drebezg mises à jour sur hover/focus.

• incrémentation de la facture par battes de 40 à 60 ms, chiffres tabulaires ;
• sticky-chapeau, virtualisation des lignes.

13) Anti-modèles

Absence de réponse instantanée au clic (attente du réseau).
Animations lourdes 'filter/box-shadow' sur des centaines d'éléments.
Un énorme JS-bandle> 1-2 Mo par chemin critique.
« Spinner dans le vide » est plus de 1-2 avec aucun progrès/squelette.
Lire/écrire layout en un seul tik (layout thrashing).
Fonctions Hover-only sur mobile.

14) Jetons de vitesse (système de conception)

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

15) QA-chèque de vitesse

Réponse

• Click/tap → réponse visuelle ≤ 100 ms ; entrée → écho ≤ 50 ms.
• Pas de retard de 300 ms sur les mobiles.
• INP p75 ≤ 200 ms ; la part de Long Tasks est ≤ 5 %.

Téléchargement

• TTFB ≤ 200 ms ; LCP ≤ 2. 5 s ; CLS ≤ 0. 1.
• Squelettes/progrès au lieu de spinners « suspendus ».

Rendu

• Seulement « bou/opacity » dans les animations ; il n'y a pas d'ombres « lourdes » sur les massifs.
• content-visibility/virtualisation pour les listes longues.

Réseau

• Edge-cache, preconnect, prefetch par intention.
• Idempotence et rétroactions pour les actions critiques.

A11y

• 'prefers-reduced-motion' est pris en charge.
• Le contenu hover est disponible par focus/clavier.

16) Documentation pour le système de conception

« Latinity Budgets » : tableau des seuils (tap, hover, modal, toast, forme).
« Instant Feedback » : schémas d'actions optimistes + retour en arrière.
« Prefetch by Intent » : hyde et utilitaires.
« Performance Playbook » : chèques de profilage et alertes RUM.
« Do/Don't » : exemples de scénarios rapides/lents avec des chiffres.

Résumé succinct

La vitesse d'interaction est une réponse instantanée + une livraison prévisible du résultat. Gardez 100 ms comme budget sacré pour first-feedback, optimisez votre réseau (Edge/Cache/Préfixe), déchargez le flux principal, animez uniquement les propriétés bon marché et appliquez des modèles optimistes. L'interface se sent alors vivante, compréhensible et stable - en particulier dans les scénarios iGaming avec des taux élevés et du temps réel.