Działania mikrointerpretacyjne i informacje zwrotne

1) Czym jest mikro-interakcja

Mikrointerterakcje to krótkie cykle reakcji sygnału, które potwierdzają, że system słyszał użytkownika i zmierza w kierunku wyniku.

1. Wyzwalacz (kliknij, przesuń, ostrość, zdarzenie systemowe).

2. Zasady (jakie zmiany i jak).

3. Fidbeck (wizualny/dźwiękowy/dotykowy/tekst).

4. Reguły pętli/meta (powtórzenie, wygaśnięcie, cofnięcie/przeredagowanie).

Cel: zmniejszenie niepewności i obciążenia poznawczego bez odwracania uwagi od zadania.

2) Zasady projektowania

Znaczenie> efekt. Efekt wyjaśnia „co się stało” i „co dalej”.
Chwilowość. Pierwsza odpowiedź ≤ 100 ms (przyciski/przełączniki).
Jednoznaczność. Odróżnialne stany: zawisanie/ostrość/naciśnięcie/wyłączone/załadowanie.
Oszczędności. Minimalne właściwości, krótkie okresy, brak fajerwerków.
Spójność. Te same działania to te same sygnały.
Dostępność. Fidbek jest widziany, słyszany i czytany przez czytnik ekranu; istnieje alternatywa dla ruchu/dźwięku.

3) Czasy i krzywe

Hover/Focus: 120-180ms

Naciśnięty/Toggle: 80-120 мoz

Toast/Tooltip: wejście 180-240ms, wyjście 120-160ms

Walidacja inline: ≤ 100 ms po utracie ostrości pola

Domyślną krzywą jest 'cubic-bezier (0. 2, 0, 0. 2, 1)`; dla tłoczonych - przyspieszonych "sześcienno-bezier (0. 4, 0, 1, 1)`.

4) Katalog mikrointerpretacji

4. 1 Przyciski i przełączniki

Natychmiastowa odpowiedź: kliknięcie/tiret wizualne + stan zajęty po zapytaniu przez sieć.
Aktualizacja optymistyczna: natychmiast zmień interfejs użytkownika, cofnij się o błąd (z cofnięciem).
Dwukrotnie kliknij debatę: powtórzenie bloku do czasu odpowiedzi/timeout.

4. 2 Inline-walidacja formularzy

Walidacja na rozmytych polach; wiadomości są krótkie i konstruktywne („co najmniej 8 znaków”).
Ikona stanu + kolor + tekst (nie jeden kolor).
Dla haseł - natychmiastowy wskaźnik „siły” (nie zakłóca wejścia).

4. 3 tosty/banery/przekąski

Użyj do niezablokowania potwierdzeń.
Czas trwania 2-5 s, pauza przy zawisku/ostrości, przycisk Cofnij, w stosownych przypadkach.
Nie wyłączaj ważnych treści i CTA.

4. 4 Postępy i szkielety

Jeśli długość procesu jest znana, pasek postępu; jeśli nie, szkielet zamiast spinner.
Brak skoków układu: naprawić. wysokości bloku.

4. 5 Odznaki/liczniki

Kontrast cyfr ≥ 4. 5:1; maksymalnie 99/999 z okrawaniem „99 +”.
Animacje przyrostowe - krótkie kroki 40-60 ms partii, bez układu „drżenia”.

4. 6 Podpowiedź/pomoc

Wygląd przez hover/focus; dostępność poprzez „aria-described”.
Zabronić krytycznych informacji tylko w podpowiedzi.

5) Błędy, puste stany, cofnij

Błąd: uczciwy tekst, wyjaśnienie przyczyny i działania („Powtórz”, „Zmiana karty”).
Pusty stan: co to jest i jak zacząć; ilustracja wyciszona, kontrast tekstowy AA/AAA.
Cofnij okno: 5-10 s dla odwracalnych działań (usunięcie, anulowanie zakładu przed kulą).

6) Opinie multimodalne

Dźwięk: cichy, krótki, jeden wzór na typ zdarzenia (sukces/błąd/uwaga); Wyłącz ustawienia.
Vibro/haptika: łatwa reakcja prasy/sukces; szacunek dla „ruchu zredukowanego” i ograniczeń systemowych.
Wizualny: tylko „przekształcić/nieprzezroczystość”, brak ciężkiej rozmycia/cienia na tablicach.

7) Dostępność (A11y)

„: ostrość widoczna” dla klawiatury; pierścień ostrości bez rozmycia.
Screensaver: 'role = „status „/” alert ”'for toast; żywe regiony „aria-live =” uprzejmy/asertywny „”.
Alternatywa dla dźwięku/ruchu; „ruch zredukowany prefers: zmniejszyć”.
Kontrast tekstu i ikony - WCAG (regularne ≥ 4. 5:1).

8) Wydajność

Odpowiedź ≤ 100ms: odpowiedź wizualna na sieć.
Animacja „transformacja/nieprzezroczystość”; unikać „wysokości/lewej/skrzynki-cienia” na wielu elementach.
Efekty sieciowe - z prefetchem i optymizmem; retrai są idempotentne.

9) Żetony mikrointerpretacji (system projektowania)

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) Snippety wdrożeniowe

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) Mierniki i kontrola jakości

INP p75 <200 ms, udział Long Tasks <5%.

Pierwszy User Feedback klik → vizualnyy ≤ 100ms

Odsetek działań optymistycznych przy przewróceniu <3% (inaczej - nieufność).
Ankiety UX: jasność komunikatów o błędach, widoczność potwierdzeń.

Lista kontrolna QA

• Każda interaktywna osoba jest „naciśnięta/zajęta/wyłączona”.
• Błędom towarzyszy tekst i działania (Retry/Undo).
• Toasty są dostępne na SR i nie nakładają się na zawartość klucza.
• Walidacja inline nie zakłóca wejścia; wiadomości są specyficzne.
• „Preferers-reduced-motion” obsługiwane; dźwięk/wibracje są wyłączone.
• Brak układu i skoki strobowe; animacje dotyczące „transformacji/nieprzezroczystości”.

12) Specyfika iGaming

Zakład/zakup: natychmiastowy 'naciśnięty → zajęty', toast „Akceptowany” z cofnięciem (jeśli pozwalają na to przepisy), idempotent keys; z opóźnieniem> 1 s - „Czekanie na potwierdzenie”....
Spin/Reveal: krótka prasa zwrotna, gładki start/stop bez niekończącego się mrugania; win - pęknięcie ≤ 500 ms + tekst czytelny (AAA).
Współczynniki na żywo: aktualizacje z partiami, visual diff (strzałka/grubość) bez „skoki”.
Płatności/wnioski: krok po kroku postęp (KUS → Proverka → Vyplata), przejrzyste teksty powodów odmowy.
Odpowiedzialna zabawa: powiadomienia bez rozpraszania skutków; wyższy kontrast, wyraźne „Set Limit” CTA.

13) Anty-wzory

Poczekaj na odpowiedź sieci przed wyświetleniem odpowiedzi na kliknięcie.
„Kolor bez kształtu”: stan różni się tylko odcieniem.
Niekończące się pulsacje/mrugnięcia, ostre dźwięki bez przełącznika.
Wskazówka z treścią krytyczną niedostępną z klawiatury.
Spinner w pustce> 1-2 s bez postępu/szkieletu.
Cienkie cienie/rozmycie na setkach elementów (opóźnienie na słabych urządzeniach).

14) Dokumentacja w systemie projektowym

„Mikro-żetony”: „czas trwania/ułatwianie”, wstępne tosty/odznaki/walidatory.
„Wzory”: guziki, kształty, tosty, postęp, błędy wewnątrz linii, cofnij.
„A11y & Motion”: zasady dotyczące SR/HC/reduced-motion; Przykłady ARIA.
„Do/Don not”: krótkie klipy z terminami, numery INP/First Feedback.

Krótkie podsumowanie

Mikro-interakcje są językiem zaufania. Daj odpowiedź w ≤ 100 ms, przechwytywać zrozumiałe stany, używać optymistyczne z bezpiecznym rollback, nie polegać tylko na kolorze i animacji właściwości światła. Szanuj dostępność i wydajność - wtedy produkt czuje się żywy, uczciwy i niezawodny, zwłaszcza w czasie rzeczywistym.