Microproduction et fidbek

1) Qu'est-ce que la micro-assistance

Les microprogrammes sont de courts cycles « signal ↔ réponse », confirmant que le système a entendu l'utilisateur et se dirige vers le résultat.

1. Déclencheur (clic, balayage, focus, événement système).

2. Règles (ce qui change et comment).

3. Fidbek (visuel/sonore/tactile/textuel).

4. Boucle/méta-règle (répétition, expiration, undo/redo).

Objectif : réduire l'incertitude et la charge cognitive sans distraire la tâche.

2) Principes de conception

Sens> effet. L'effet explique « ce qui s'est passé » et « ce qui s'est passé ensuite ».
L'instantanéité. Première réponse ≤ 100 ms (boutons/interrupteurs).
Sans ambiguïté. États distincts : hover/focus/pressed/disabled/loading.
Des économies. Un minimum de propriétés, de courtes durées, pas de « feux d'artifice ».
Consistance. Les mêmes actions sont les mêmes signaux.
Disponibilité. Fidbek voit, entend et lit avec un lecteur d'écran ; il existe une alternative mouvement/son.

3) Temps et courbes

Hover/Focus : 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip : entrée 180-240 ms, sortie 120-160 ms

Inline-validation : ≤ 100 ms après la perte de concentration du champ

La courbe par défaut est 'cubic-bezier (0. 2, 0, 0. 2, 1)`; pour pressed - accéléré 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Catalogue des microproduits

4. 1 Boutons et interrupteurs

Réponse immédiate : Clic visuel/pression + état 'busy' lors d'une requête réseau.
Mise à jour optimiste : nous changeons l'IU immédiatement, nous retournons en cas d'erreur (avec undo).
Debounce en deux clics : on bloque la répétition jusqu'à la réponse/timeout.

4. 2 Inline-validation des formes

Validation sur champ blur ; les messages sont concis et constructifs (« 8 caractères minimum »).
Icône de statut + couleur + texte (pas une couleur).
Pour les mots de passe - l'indicateur instantané « force » (n'empêche pas l'entrée).

4. 3 Toasts/bannières/snekbars

Utiliser pour les confirmations non bloquantes.
Durée 2-5 s, pause à hover/focus, bouton Undo le cas échéant.
Ne fermez pas le contenu important et le CTA.

4. 4 Progrès et squelettes

Si la longueur du processus est connue - Progressbar ; sinon, skeleton au lieu de spinner.
Pas de sauts layout : fix. les hauteurs des blocs.

4. 5 Badges/compteurs

Le contraste du chiffre ≥ 4. 5:1; 99/999 maximum avec tronconique « 99 + ».
Les animations incrémentales sont des pas courts de 40 à 60 ms de trampolines, sans « trembler » la mise en page.

4. 6 Tooltip/Help

Apparition par hover/focus ; accessibilité via 'aria-describedby'.
Interdiction des informations critiques uniquement dans tooltip.

5) Erreurs, états vides, undo

Erreur : texte honnête, explication de la raison et de l'action (« Refaire », « Modifier la carte »).
État vide : qu'est-ce que c'est et comment commencer ; illustration muette, contraste du texte AA/AAA.
Fenêtre undo : 5-10 s pour les actions réversibles (supprimer, annuler la mise à la balle).

6) Fidbek multimodal

Son : silencieux, court, un modèle par type d'événement (succès/erreur/attention) ; Nous l'éteignons dans les paramètres.
Vibro/haptique : réponse facile à la presse/succès ; nous respectons les « prefers-reduced-motion » et les contraintes du système.
Visuel : Seulement « bou/opacity », sans blur/ombres lourdes sur les matrices.

7) Accessibilité (A11y)

': focus-visible' pour le clavier ; anneau de focus sans blur.
Lecteur d'écran : 'role = « status »/ » alert »' pour les toasts ; les régions vivantes 'aria-live =' polite/assertive '.
Alternative au son/mouvement ; 'prefers-reduced-motion : reduce'.
Le contraste du texte et des icônes est par WCAG (normal ≥ 4. 5:1).

8) Performance

Réagissez en ≤ 100 ms : réponse visuelle jusqu'au réseau.
Animer « bou/opacity » ; évitez 'height/left/box-shadow' sur une multitude d'éléments.
Les effets de réseau - avec la perfection et l'optimisme ; les retrai sont idempotentes.

9) Tokens de microproduction (système de conception)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) Snappets de réalisation

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) Métriques et contrôle de qualité

INP p75 <200 ms, proportion de Long Tasks <5 %.
First User Feedback (réponse klik→vizualnyy) ≤ 100 ms.
Proportion d'actions optimistes avec un recul <3 % (sinon méfiance).
Sondages UX : compréhension des messages d'erreur, visibilité des confirmations.

Liste de vérification QA

• Chaque interactif a 'pressed/busy/disabled'.
• Les erreurs sont accompagnées de texte et d'actions (Retry/Undo).
• Les toasts sont disponibles par RS et ne chevauchent pas le contenu clé.
• La validation inline n'empêche pas l'introduction ; les messages sont concrets.
• Soutenu par 'prefers-reduced-motion' ; le son/vibration est éteint.
• Pas de sauts de layout et de strobe ; animations sur « bou/opacity ».

12) Spécificités iGaming

Pari/achat : instantané 'pressed→busy', toast « Accepté » avec Undo (si la réglementation le permet), clés idempotent ; avec un retard> 1 s - « En attente de confirmation »....
Spin/Reveal : courte presse-fidback, démarrage sans heurt/stop sans clignotement sans fin ; gain - sursaut ≤ 500 ms + texte lisible (AAA).
Facteurs de vie : rafraîchissements par trampoline, diff visuel (flèche/épaisseur) sans « sauts ».
Paiements/conclusions : progrès pas à pas (KUS→Proverka→Vyplata), textes transparents des motifs de refus.
Jeu responsable : notifications sans effets distrayants ; le contraste le plus élevé, clairement CTA « Fixer une limite ».

13) Anti-modèles

Attendre la réponse réseau avant de montrer la réponse au clic.
« Couleur sans forme » : l'état ne diffère que par une nuance.
Pulsations/clignotements sans fin, bruits bruyants sans interrupteur.
Tooltip avec du contenu critique non disponible à partir du clavier.
Spinner dans le vide> 1-2 s sans progression/squelette.
Ombre fine/blur sur des centaines d'éléments (lag sur les appareils faibles).

14) Documentation dans le système de conception

« Micro-tokens » : « durée/easing », préréglages de toasts/badges/validateurs.
« Patterns » : boutons, formes, toasts, progrès, inline-error, undo.
"A11y et Motion" : les règles pour SR/HC/reduced-motion; exemples ARIA.
« Do/Don't » : courts clips avec timings, chiffres INP/First Feedback.

Résumé succinct

La microbiologie est un langage de confiance. Répondons pour ≤ 100 ms, capturez les états compréhensibles, utilisez l'optimisme avec un retour en arrière sûr, ne comptez pas uniquement sur la couleur et animez les propriétés faciles. Respecter la disponibilité et la performance - alors le produit se sent vivant, honnête et fiable, en particulier dans les scénarios en temps réel.