Orientierungseffekte und Interaktivität

1) Die Rolle der Führung in UX

• „Ist das interaktiv?“ (Hover/Cursor/Highlight),
• „Wo bin ich?“ (Fokusstil),
• „Was passiert mit dem Klick?“ (Zustand und Affordance),
• „Hat die Aktion geklappt?“ (aktiv/pressed und anschließendes Feedback).

Prinzip: Effekte verstärken die Bedeutung, anstatt sie zu ersetzen. Wichtige Informationen und der Zugriff auf die Aktion sollten nicht nur hinter der Führung verborgen sein.

2) Zustandsmodell und Semantik

Basis-Set: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (optional).
Für Links fügen wir 'visited' hinzu, für Schalter 'checked'.

• Zwischen den Zuständen gibt es einen visuellen Unterschied in Form/Dicke/Symbol, nicht nur Farbe.
• Text/Icon-Kontrast zum Hintergrund: ≥ 4. 5:1 (Klartext), ≥ 3:1 (groß/fett).
• Der Fokus ist ohne Führung sichtbar (Tastatur/Screenreader).

3) Geräte und Medienabfragen

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Bei Touch-Geräten sind die Lead-Effekte nicht kritisch, um eine Aktion zu erkennen - verwenden Sie explizite Affordanzen: Farbe/Symbol/Rahmen/Hinweis.
• Verstecken Sie die Navigation/Kontrollen nicht nur „unter dem Hover“.

4) Dauer und Kurven

• Hover: 120-180 ms
• Fokus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/Ink (falls verwendet): ≤ 240 ms, 1 Zyklus

Standardkurve: 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Aktiv - schneller ('cubic-bezier (0. 4, 0, 1, 1)'), die Ausbeute ist weicher ('cubic-bezier (0, 0, 0. 2, 1)`).

5) Design-System-Token (Beispiel)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Buttons: Referenzmuster

Default: Lesbarer Text ≥ 4. 5:1 zum Gießen.
Hover: − Δ L Hintergrund 0. 02–0. 04, leichter Schatten, Cursor 'pointer'.
Active: Noch − Δ L 0 02–0. 04, Kurzschatten/Eindrücken (Maßstab 0. 98), dauert. 80-100 ms.
Fokus: Kontrastring 2-3 px ohne blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, keine Hover-Effekte.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Links und Textaktionen

Unterscheidbarkeit nicht nur durch Farbe: Standardunterstreichung oder auf hover/focus.
Zur Orientierung: Unterstreichungsverstärkung (Dicke/Offset), leichte Tonänderung.
'Besucht' ist ein anderer Farbton der gleichen Palette, der Kontrast bleibt erhalten.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Karten, Listen, Tabellen

• Hover: weicher Schatten/Hintergrundbeleuchtung des Rahmens, Cursor 'pointer' nur, wenn die ganze Karte anklickbar ist.
• Aktiv: kurzes Eindrücken, Kopfzeilenbeleuchtung.
• Fokus: sichtbarer Ring um die Karte, nicht nur innen.

• Hover-Hintergrund mit Δ L 0. 02–0. 04; Aktive Zeile - klarer Rahmen.
• Klicks auf eine Zeile sind nur bei expliziter Affordance (Symbol „→“, Hinweis) zulässig.

• Beschränken Sie sorgfältig den „Lesenka“ von kaskadierenden Verzögerungen - maximal 6-8 Elemente (Stagger 20-30 ms).

9) Formulare und Eingabefelder

Hover bei den Feldern: feine Rahmenbeleuchtung (Δ L ~ 0. 05), ohne Änderung der Blockgröße.
Fokus: Kontrastring + Änderung der Rahmenfarbe; placeholder bleibt unterscheidbar (≥ 3:1).
Fehler: Farbe + Symbol/Text; Ein kurzes „Shake“ ist ≤ 6 px, ≤ 140 ms, einmal zulässig.

10) Icons und kleine Ziele

Erhöhen Sie die Klickzone auf 32 × 32 (Desktop )/40 × 40 (Mobile), auch wenn das Symbol selbst 20-24 px ist.
Hover: Änderung der Deckkraft/Füllung/Dicke, nicht mehr als 1-2 Eigenschaften.
Aktiv: kurzes „Snap“ auf Skala 0. 98.
Fokus: Klickzonencontainerring.

11) Verfügbarkeit (A11y) und Tastatur

Unterstützen Sie': focus-visible'(für die Maus zeigen wir keine Fokusstile, für die Tastatur zeigen wir).
Elemente, die Hover-Hinweise erstellen, müssen ein Äquivalent zum Fokus haben (der gleiche Inhalt erscheint über die Tab/Enter-Taste).
Aria-Attribute: Interactives haben 'role', 'aria-pressed '/' aria-expanded '/' aria-current' nach Situation.
Prefers-reduced-motion: Ersetzen Sie den Maßstab/die Verschiebung durch ein Minimum (opacity/fill), deaktivieren Sie die Pulsationen.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Produktivität

Animieren Sie nur 'opacity' und 'transform'; Vermeiden Sie' width/height/left/top', schwere Blur/Schatten auf vielen Elementen.
Mäßig verwenden 'will-change'; Entfernen Sie nach dem Ende des Übergangs.
Auf Listen/Tabellen gibt es minimale Effekte, keine „globalen“ Repaint.

13) Hover-intent und „Klebrigkeit“

• Verzögerungsschwelle 80-120 ms vor dem Anzeigen eines komplexen Tooltip/Menüs.
• „Klebrigkeit“ des Cursors: Wenn sich der Benutzer von einem Punkt zu einem Menü in einem Winkel bewegt, geben wir 200-300 ms „Korridor“ (Dreieck Fitts).
• Mit Touch - ersetzen Sie den Hover durch Presse oder einen expliziten „noch“ -Button.

14) Tooltip/Menü/Dropdowns

Eröffnung: hover-intent (Desktop )/press (Touch), Schließung - care/blur/ESC.
Position - zur Quelle, Pfeil ausgerichtet; max-width und Transfers sind enthalten.
Verfügbarkeit: 'role =' tooltip', Verknüpfung 'aria-describedby'; für Menü - 'role =' menu'+ Pfeilsteuerung.

15) Besonderheiten von iGaming

Koeffizienten/Leaderboards: Hover hebt die Zeile/Zelle hervor, ändert aber nicht die Positionsmetriken (ohne „Sprünge“).
Turnier-/Bonuskarten: Hover kann den Rahmen/das Symbol „zum Leben erwecken“, aber der Text CTA und die Bedingungen bleiben lesbar (≥ 4. 5:1).
Verantwortliche Benachrichtigungen (18 +, Limits): keine Ablenkungseffekte; beim Führen ist nur das Unterstreichen von Links und ein klarer Fokus erlaubt.
Wett-/Shopping-Buttons: Active-Feedback ist Pflicht (visuelles Klicken/Eindrücken) und nach dem Absenden eindeutig deaktivierbar.

16) Beispiele für Schnittstellenrezepte

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-Muster

Kritische Aktionen/Menüs nur hinter dem Hover ausblenden.
Ändern Sie die Abmessungen/Layouts, wenn Sie sich bewegen (Layoutsprünge).
Verlassen Sie sich nur auf Farbe, um Zustände zu unterscheiden.
Flimmern, endlose Pulsationen, „saures“ Glühen auf Texten.
Fehlende Fokusstile oder deren Unsichtbarkeit auf einem dunklen Thema.
Bewegen Sie den Cursor 'pointer' auf nicht interaktive Elemente.

18) QS-Checkliste

Fassbarkeit

• Alle Interactives sind über die Tastatur erreichbar; Fokus sehen.
• Hover-Inhalte sind unter 'focus '/' aria' verfügbar.
• Der Kontrast von Text und Icons entspricht der WCAG.

Verhalten

• Hover/active/disabled/visited sind in Form und Ton erkennbar.
• Keine Reaktionsverzögerung> 120 ms.
• Auf dem Touch gibt es eine Alternative zum Hover.

Leistung

• Nur 'transform '/' opacity' wird animiert.
• Keine schweren Blur/Schatten auf vielen Elementen.
• Auf langen Listen werden die Effekte minimiert.

19) Dokumentation im Konstruktionssystem

Zustandstabelle für Basiskomponenten (Buttons, Links, Karten, Felder, Tabellenzeilen).
Dauer/Kurve/Schatten-Token und Beispielcode für light/dark.
Abschnitt „Hover vs Touch“: Regeln für Alternativen und Beispiele.
„Do/Don't“ mit kurzen Clips und Kontrastwerten.

Kurze Zusammenfassung

Führungseffekte sind ein unterstützender, aber kritischer Teil der Schnittstellensprache. Machen Sie sie kurz und vorhersehbar, pflegen Sie Tastatur und Touch, sorgen Sie für Kontrast und sichtbaren Fokus, animieren Sie nur billige Eigenschaften. Interaktivität erhöht dann die Klarheit und Geschwindigkeit des Handelns, anstatt es zu behindern.