Microassicurazione e fidback

1) Cos'è la microassicurazione

La microimmissione è un breve ciclo dì segnale di risposta "che conferma che il sistema ha sentito l'utente e si sta muovendo verso il risultato.

1. Trigger (click, swipe, attivazione, evento di sistema).

2. Regole (cosa e come cambia).

3. Fidback (visivo/audio/tattile/testo).

4. Ciclo/meta-regole (ripetizione, estinzione, undo/redo).

Obiettivo: ridurre l'incertezza e il carico cognitivo senza distogliere l'attività.

2) Principi di progettazione

Senso> Effetto. L'effetto spiega cosa è successo e cosa è successo.
L'istantanea. La prima risposta è 100 ms (pulsanti/pulsanti di scelta).
Un'ambiguità. Stati diversi: hover/focus/pressed/disabled/loading.
Risparmio. Proprietà minime, durata breve, senza fuochi d'artificio.
Consistenza. Le stesse azioni sono gli stessi segnali.
Disponibilità. Fidbeck vede, ascolta e leggiamo con lo screener; c'è un'alternativa al movimento/suono.

3) Timing e curve

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: ingresso 180-240 mc, uscita 120-160 mc

Convalida inline: 100 ms dopo aver perso il focus del campo

La curva predefinita è 'cubic-bezier (0. 2, 0, 0. 2, 1)`; per pressed - accelerato'cubic-bezier (0. 4, 0, 1, 1)`.

4) Catalogo di microassicurazioni

4. 1 Pulsanti e pulsanti

Risposta immediata: cliccare/ingrandire visivamente + stato «busy «in una query di rete.
Aggiornamento ottimistico: cambiamo l'UI subito, ripristiniamo in caso di errore (con undo).
Il debouns dei click doppi blocca la ripetizione fino alla risposta/timeout.

4. 2 Inline-convalida forme

Convalida sul campo blur; i messaggi sono brevi e costruttivi («minimo 8 caratteri»).
Icona di stato + colore + testo (non un colore).
Per le password è un indicatore istantaneo di forza (non interferisce con l'immissione).

4. 3 Toast/banner/sneckbar

Utilizzare per le conferme non bloccanti.
Durata 2-5 s, pausa hover/focus, pulsante Undo se necessario.
Non chiudere contenuti importanti e CTA.

4. 4 Progressi e scheletri

Se la lunghezza del processo è nota - Progressbar; Se no, skeleton invece dello spinner.
Nessun salto layout: fix. Altezza dei blocchi.

4. 5 Badge/contatori

Il contrasto è il numero 4. 5:1; al massimo 99/999 con taglio «99 +».
Animazioni di ingrandimento - Passi brevi 40-60 ms con batch, senza «tremare» layout.

4. 6 Tooltip/Help

Apparizione hover/focus; disponibilità attraverso «aria-describedby».
Impedisce le informazioni critiche solo in tooltip.

5) Errori, stati vuoti, undo

Errore: testo corretto, spiegazione del motivo e dell'azione (Ripeti, Modifica mappa).
Stato vuoto: cosa è e come iniziare; illustrazione assordata, contrasto del testo AA/AAA.
Undo window: 5-10 c per le azioni reversibili (eliminazione, cancellazione della puntata a pallottola).

6) Fidback multimodale

Suono: silenzioso, breve, un pattern per tipo di evento (successo/errore/attenzione); disattiva nelle impostazioni.
Vibro/haptica: facile risposta a press/successo; rispettiamo «preferers-reduced-motion» e i vincoli di sistema.
Visivo: Solo 'transfer/opacity', senza blur/ombre pesanti sugli array.

7) Disponibilità (A11y)

'focus-visibile'per la tastiera un anello di fuoco senza blur.
Screener: "role =" status "/" alert "per i brindisi; "aria-live =" polite/assistenziale ".
Alternativa al suono/movimento; 'preferers-reduced-motion: reduce'.
Il contrasto tra testo e icone è WCAG (normale) 4. 5:1).

8) Performance

Rispondi con 100 ms di risposta visiva alla rete.
Animare 'form/opacity'; evitare «height/left/box-shadow» su molti elementi.
Effetti di rete con prefetch e ottimismo I retrai sono idipotenti.

9) Token micropromozione (sistema di progettazione)

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) Snippet di implementazione

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) Metriche e controllo qualità

INP p75 <200 mc, quota Long Tasks <5%.
First User Feedback (risposta klik→vizualnyy) ≤ 100 ms.
Percentuale di azioni ottimistiche con un ritorno <3% (altrimenti diffidenza).
Sondaggi UX: comprensione dei messaggi di errore, visibilità delle conferme.

Foglio di assegno QA

• Ogni interazione ha «pressed/busy/disabled».
• Gli errori sono accompagnati da testo e azioni (Retry/Undo).
• I toast sono disponibili su SR e non sovrappongono i contenuti chiave.
• Inline-validazione non impedisce l'immissione; i messaggi sono specifici.
• Supportato'preferers-reduced-motion '; il suono/vibra è spento.
• Nessun salto di layout e strub; animazioni sù form/opacity '.

12) Specificità del iGaming

Puntata/acquisto: istantaneo «pressed→busy», toast «Accettato» con Undo (se il regolamento lo consente), chiavi idempotent; in caso di ritardo> 1 c - «In attesa di conferma»....
Spin/Reveal: fifback stampa breve, partenza fluida/stop senza lampeggiare senza fine; vincite - ≤ 500 ms + testo leggibile (AAA).
Coefficienti Live: aggiornamenti con batch, diff visivo (freccia/spessore) senza «salto».
Pagamenti/conclusioni: progresso passo per passo (KUS→Proverka→Vyplata), testi trasparenti delle cause di rifiuto.
Gioco responsabile: notifiche senza effetti distrattivi; contrasto superiore, CTA esplicito «Imposta limite».

13) Anti-pattern

Attendere la risposta di rete prima di mostrare la risposta al click.
Colore senza forma: lo stato è solo tonalità.
Infinite pulsazioni/lampeggianti, rumori bruschi senza interruttore.
Tooltip con contenuti critici non disponibili dalla tastiera.
Spinner nel vuoto> 1-2 s senza progresso/skeleton.
Ombre sottili/blur su centinaia di elementi (lega su dispositivi deboli).

14) Documentazione in progettazione

Micro-tokens: «duration/easing», preset toast/badge/validatori.
«Patterns»: pulsanti, moduli, toast, progresso, inline-errori, undo.
A11y & Motion: regole per SR/HC/reduced-motion; esempi di ARIA.
«Do/Don't» è un breve video con timing, INP/First Feedback.

Breve riepilogo

La microimmissione è un linguaggio di fiducia. Rispondiamo per 100 ms, fissate gli stati di comprensione, usate ottimisti con un ritorno sicuro, non affidatevi solo al colore e animate le proprietà leggere. Rispetto della disponibilità e delle prestazioni: il prodotto si sente vivo, onesto e affidabile, soprattutto negli scenari in tempo reale.