Microinteracțiuni și feedback

1) Ce este micro-interacțiunea

Microinteracțiile sunt scurte cicluri de semnal ↔ răspuns care confirmă faptul că sistemul a auzit utilizatorul și se îndreaptă spre rezultat.

1. Declanșare (clic, glisați, focalizați, eveniment de sistem).

2. Reguli (ce se schimbă și cum).

3. Fidbeck (vizual/sonor/tactil/text).

4. Reguli de buclă/meta (repetare, expirare, anulare/refacere).

Scopul: de a reduce incertitudinea și încărcătura cognitivă fără a distrage atenția de la sarcină.

2) Principii de proiectare

Înțeles> efect. Efectul explică „ce s-a întâmplat” şi „ce urmează”.
Instantaneitate. Primul răspuns ≤ de 100 ms (butoane/comutatoare).
Fără ambiguitate. Stări distinctive: hover/focus/pressed/disabled/loading.
Economii. Proprietăți minime, durate scurte, fără artificii.
Consistență. Aceleaşi acţiuni sunt aceleaşi semnale.
Accesibilitate. Fidbek este văzut, auzit și citit de un cititor de ecran; există o alternativă la mișcare/sunet.

3) Temporizări și curbe

Hover/Focus: 120-180ms

Presat/Comutare: 80-120 мс

Toast/Tooltip: intrare 180-240ms, ieșire 120-160ms

Validare inline: ≤ 100 ms după pierderea focalizării câmpului

Curba implicită este "cubic-bezier (0. 2, 0, 0. 2, 1)`; pentru apăsat - accelerat "cubic-bezier (0. 4, 0, 1, 1)`.

4) Catalog de microinteracție

4. 1 Butoane și întrerupătoare

Răspuns imediat: clic vizual/liniuță + stare ocupată atunci când este interogată de rețea.
Actualizare optimistă: schimbați UI imediat, reveniți la eroare (cu anulare).
Dublu clic pe dezbatere: blocați repetarea până când/se răspunde la timeout.

4. 2 Validarea în linie a formularelor

Validarea câmpurilor neclare; mesajele sunt scurte și constructive („cel puțin 8 caractere”).
Pictograma Stare + culoare + text (nu o culoare).
Pentru parole - un indicator instant de „putere” (nu interferează cu intrarea).

4. 3 Pâine prăjită/bannere/gustări

Utilizare pentru confirmări non-blocante.
Durata 2-5 s, pauză la hover/focus, Anulați butonul acolo unde este cazul.
Nu închideți conținutul important și CTA-urile.

4. 4 Progress și schelete

Dacă lungimea procesului este cunoscută, bara de progres; dacă nu, schelet în loc de spinner.
Nu există salturi de aspect: remediați. înălțimi de bloc.

4. 5 Ecusoane/contoare

Contrast cifre ≥ 4. 5:1; maxim 99/999 cu trunchiul „99 +”.
Increment animații - pași scurți de loturi 40-60 ms, fără aspectul „tremurând”.

4. 6 Tooltip/Ajutor

Aspect de hover/focus; accesibilitatea prin „aria-descrisă de”.
Interziceți informațiile critice numai în tooltip.

5) Erori, stări goale, anulare

Eroare: text onest, explicarea motivului și acțiunii („Repetare”, „Schimbare carte”).
Starea goală: ce este și cum să începeți; ilustrație dezactivată, contrast text AA/AAA.
Anulare fereastră: 5-10 s pentru acțiuni reversibile (eliminarea, anularea pariului înainte de glonț).

6) Feedback multimodal

Sunet: liniștit, scurt, un model pe tip de eveniment (succes/eroare/atenție); opriți în setările.
Vibro/haptika: răspuns ușor de presă/succes; respectă „prefers-redusă-mișcare” și limitările sistemului.
Vizual: numai „transformare/opacitate”, fără blur/umbre grele pe matrice.

7) Disponibilitate (A11y)

„: focus-vizibil” pentru tastatură; focalizare inel fără ceață.
Screensaver: „rol =” stare „/” alertă „” pentru pâine prăjită; regiuni vii 'aria-live =' politicos/asertiv ''.
Alternativă la sunet/mișcare; „prefers-redusă-mișcare: reduce”.
Text și contrast pictogramă - WCAG (regular ≥ 4. 5:1).

8) Performanță

Răspunde ≤ 100ms: răspuns vizual la rețea.
Animați „transformare/opacitate”; evitați „înălțimea/stânga/caseta-umbră” pe mai multe elemente.
Efecte de rețea - cu prefetch și optimism; retrai sunt idempotente.

9) Microinteraction token-uri (sistem de proiectare)

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) Fragmente de implementare

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ăsurători și controlul calității

INP p75 <200 ms, Sarcini lungi cota <5%.

Primul feedback al utilizatorului klik→vizualnyy ≤ 100ms

Proporția de acțiuni optimiste cu o revenire de <3% (altfel - neîncredere).
Sondaje UX: claritatea mesajelor de eroare, vizibilitatea confirmărilor.

Lista de verificare QA

• Fiecare interactiv are „apăsat/ocupat/dezactivat”.
• Erorile sunt însoțite de text și acțiuni (Retry/Anulare).
• Toasturile sunt disponibile pe SR și nu se suprapun conținutului cheie.
• Validarea inline nu interferează cu intrarea; mesajele sunt specifice.
• „preferă mișcarea redusă” susținută; sunetul/vibrațiile sunt oprite.
• Nici un aspect și strobe salturi; animații despre „transformare/opacitate”.

12) Specificul iGaming

Pariu/cumpărare: instant 'pressed→busy', toast „Acceptat” cu Anulare (dacă reglementările permit), chei idempotente; în întârziere> 1 s - „Așteptând confirmarea”....
Spin/Reveal: scurt feedback de presă, pornire/oprire fără clipire fără sfârșit; câștig - spargere ≤ 500 ms + text lizibil (AAA).
Coeficienți vii: actualizări cu loturi, diff vizual (săgeată/grosime) fără „salturi”.
Plăți/concluzii: progrese pas cu pas (KUS→Proverka→Vyplata), texte transparente ale motivelor refuzului.
Joc responsabil: notificări fără efecte distractive; contrast mai mare, CTA „Set Limit” explicite.

13) Anti-modele

Așteptați un răspuns la rețea înainte de a afișa un răspuns la un clic.
„Culoare fără formă”: starea diferă numai în nuanță.
Pulsații nesfârșite/clipește, sunete ascuțite fără întrerupător.
Tooltip cu conținut critic care nu este accesibil de la tastatură.
Spinner în gol> 1-2 s fără progres/schelet.
Umbre subțiri/blur pe sute de elemente (lag pe dispozitive slabe).

14) Documentația în sistemul de proiectare

„Micro-token-uri”: „durată/relaxare”, presetări de toasturi/insigne/validatoare.
„Modele”: butoane, forme, toasturi, progres, erori inline, anulare.
„A11y & Motion”: reguli pentru SR/HC/redusă-mișcare; ARIA exemple.
„Do/Don' t”: clipuri scurte cu temporizări, numere INP/First Feedback.

Scurt rezumat

Micro-interacțiunile sunt un limbaj de încredere. Oferiți un răspuns în ≤ 100 ms, capturați stări ușor de înțeles, utilizați optimist cu rollback sigur, nu vă bazați numai pe culoare și animați proprietățile luminii. Respectați disponibilitatea și performanța - apoi produsul se simte viu, onest și de încredere, în special în scenarii în timp real.