Mikrointeraktionen und Feedback

1) Was ist Mikrointeraktion

Mikrointeraktionen sind kurze „Signal ↔ Antwort“ -Zyklen, die bestätigen, dass das System den Benutzer gehört hat und sich auf das Ergebnis zubewegt.

1. Trigger (Klick, Swipe, Fokus, Systemereignis).

2. Regeln (was und wie sich ändert).

3. Fidbeck (visuell/akustisch/taktil/textlich).

4. Schleife/Meta-Regeln (Wiederholung, Ablauf, undo/redo).

Das Ziel: Unsicherheit und kognitive Belastung reduzieren, ohne von der Aufgabe abzulenken.

2) Gestaltungsprinzipien

Bedeutung> Wirkung. Der Effekt erklärt, „was passiert ist“ und „was als nächstes kommt“.
Augenblicklichkeit. Die erste Reaktion ≤ 100 ms (Tasten/Schalter).
Eindeutigkeit. Unterscheidbare Zustände: hover/focus/pressed/disabled/loading.
Einsparungen. Minimale Eigenschaften, kurze Dauer, keine „Grüße“.
Konsistenz. Gleiche Aktionen - gleiche Signale.
Verfügbarkeit. Fidbek sehen, hören und lesen mit einem Screenrider; Es gibt eine Alternative zu Bewegung/Klang.

3) Timings und Kurven

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: Eingang 180-240 ms, Ausgang 120-160 ms

Inline-Validierung: ≤ 100 ms nach Verlust des Feldfokus

Standardkurve: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; für pressed - beschleunigt 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Katalog der Mikrointeraktionen

4. 1 Tasten und Schalter

Sofortige Reaktion: visueller „Klick „/Eindrücken + Zustand 'busy 'bei Netzwerkabfrage.
Optimistisches Update: UI sofort ändern, Rollback bei Fehler (mit undo).
Doppelklick-Debunce: Wir blockieren die Wiederholung bis zur Antwort/Timeout.

4. 2 Inline-Validierung von Formularen

Validierung auf blur Felder; die Botschaften sind kurz und konstruktiv („mindestens 8 Zeichen“).
Statussymbol + Farbe + Text (nicht Farbe eins).
Für Passwörter - ein sofortiger Indikator für „Stärke“ (stört die Eingabe nicht).

4. 3 Toast/Banner/Snackbars

Verwenden Sie für nicht blockierende Bestätigungen.
Dauer 2-5 s, Pause bei Hover/Focus, Undo-Taste wo angebracht.
Schließen Sie wichtige Inhalte und CTAs nicht.

4. 4 Fortschritt und Skeleton

Wenn die Länge des Prozesses bekannt ist - progressive bar; wenn nicht, Skelett statt Spinner.
Keine Layoutsprünge: fix. Höhe der Blöcke.

4. 5 Abzeichen/Zähler

Der Kontrast der Zahl ≥ 4. 5:1; maximal 99/999 mit einer Kürzung von „99 +“.
Inkrement-Animationen - kurze Schritte von 40-60 ms Schlachten, ohne „Zittern“ des Layouts.

4. 6 Tooltip/Help

Auftritt durch hover/focus; Verfügbarkeit über „aria-describedby“.
Verbot kritischer Informationen nur im Tooltip.

5) Fehler, Leerzustände, undo

Fehler: Ehrlicher Text, Erklärung der Ursache und Aktion („Wiederholen“, „Karte ändern“).
Leerer Zustand: was es ist und wie man beginnt; Abbildung gedämpft, Kontrast des Textes AA/AAA.
Undo window: 5-10 s für reversible Aktionen (Löschen, Stornieren der Wette vor der Kugel).

6) Multimodale Zuführung

Ton: leise, kurz, ein Muster pro Ereignistyp (Erfolg/Fehler/Aufmerksamkeit); Wir schalten in den Einstellungen aus.
Vibro/Haptik: einfache Reaktion auf Presse/Erfolg; respektieren 'prefers-reduced-motion' und systemische Einschränkungen.
Visuell: nur 'transform/opacity', keine schweren Blur/Schatten auf Arrays.

7) Verfügbarkeit (A11y)

': focus-visible' für die Tastatur; Fokusring ohne Blur.
Screenrider: 'role =' status '/' alert 'für Toast; lebende Regionen „aria-live =“ polite/assertive „“.
Eine Alternative zu Sound/Bewegung; 'prefers-reduced-motion: reduce'.
Der Kontrast von Text und Symbolen - nach WCAG (normal ≥ 4. 5:1).

8) Performance

Reagieren Sie in ≤ 100 ms: visuelle Reaktion auf das Netzwerk.
Animieren Sie' transform/opacity'; Vermeiden Sie' height/left/box-shadow 'auf vielen Elementen.
Netzwerkeffekte - mit Präfekt und Optimismus; retrai sind idempotent.

9) Microinteraction Token (Designsystem)

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) Snippets der Umsetzung

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) Metriken und Qualitätskontrolle

INP p75 <200 ms, Long Tasks Anteil <5%.

Erstes Benutzerfeedback (klik→vizualnyy Response) ≤ 100 ms

Anteil der optimistischen Aktionen mit einem Rollback <3% (sonst Misstrauen).
UX-Umfragen: Verständlichkeit von Fehlermeldungen, Sichtbarkeit von Bestätigungen.

QA-Checkliste

• Jede Interaktivität hat 'pressed/busy/disabled'.
• Fehler werden von Text und Aktionen begleitet (Retry/Undo).
• Toasts sind über SR verfügbar und überlappen wichtige Inhalte nicht.
• Die Inline-Validierung stört die Eingabe nicht. Die Botschaften sind konkret.
• Unterstützt von „prefers-reduced-motion“; Ton/Vibration sind ausgeschaltet.
• Keine Layout- und Strobe-Sprünge; Animationen auf 'transform/opacity'.

12) Besonderheiten von iGaming

Gebot/Kauf: sofort „pressed→busy“, Toast „akzeptiert“ mit Undo (wenn die Vorschriften es zulassen), idempotent-keys; bei einer Verzögerung> 1 s - „Wir warten auf Bestätigung“....
Spin/Reveal: kurzer Presse-Feedback, sanfter Start/Stopp ohne endloses Blinken; Gewinn - ein Anstieg ≤ 500 ms + lesbarer Text (AAA).
Live-Koeffizienten: Schlachtfeld-Updates, visueller Diff (Pfeil/Dicke) ohne „Sprünge“.
Zahlungen/Schlussfolgerungen: Schritt für Schritt Fortschritt (KUS→Proverka→Vyplata), transparente Texte der Gründe für die Ablehnung.
Verantwortungsvolles Spielen: Benachrichtigungen ohne Ablenkungen; höchster Kontrast, explizite CTA „Set Limit“.

13) Anti-Muster

Warten Sie auf eine Netzwerkantwort, bevor Sie eine Antwort auf einen Klick anzeigen.
„Farbe ohne Form“: Der Zustand unterscheidet sich nur im Farbton.
Endloses Pulsieren/Blinken, scharfe Geräusche ohne Schalter.
Tooltip mit kritischen Inhalten, die nicht über die Tastatur erreichbar sind.
Spinner im leeren> 1-2 s ohne Fortschritt/Skeleton.
Dünne Schatten/Blur auf Hunderten von Elementen (lag auf schwachen Geräten).

14) Dokumentation im Konstruktionssystem

„Micro-tokens“: „duration/easing“, Voreinstellungen für Toast/Badge/Validator.
"Patterns': Buttons, Formulare, Toast, Fortschritt, Inline-Fehler, Undo.
„A11y & Motion“: Regeln für SR/HC/reduced-motion; Beispiele für ARIA.
„Do/Don't“: kurze Clips mit Timings, INP/First Feedback-Nummern.

Kurze Zusammenfassung

Mikrointeraktionen sind die Sprache der Zuversicht. Geben Sie eine Antwort in ≤ 100 ms, erfassen Sie verständliche Zustände, verwenden Sie einen Optimisten mit einem sicheren Rollback, verlassen Sie sich nicht nur auf Farbe und animieren Sie leichte Eigenschaften. Respektieren Sie Verfügbarkeit und Leistung - dann fühlt sich das Produkt lebendig, ehrlich und zuverlässig an, insbesondere in Echtzeit-Szenarien.