10MOTION & ZUGANG

Bewegung erklärt.Zugang bleibt.

Die beste Animation spart Denkzeit. Sie zeigt Ursache, Richtung und Abschluss – schnell genug für Arbeit, weich genug für Wertigkeit und vollständig ersetzbar, wenn Bewegung reduziert werden muss.

10.1MOTION-GRAMMATIK

Schnell reagieren.
Ruhig ankommen.

Microinteractions sind kurz und physisch. Größere Übergänge dauern länger, weil das Auge räumlichen Zusammenhang verstehen muss.

LIVE PATTERNMotion grammarREDUCED-SAFE

GR-28420Michelin Pilot Sport 5205/55 R16 · 6,5 mm

0INPUT90RESPONSE240SETTLE850ASYNC

90 msPRESS

Berührung, Toggle, Iconwechsel

linear / ease-out

160 msMICRO

Hover, Fokus, Badge, Tooltip

cubic-bezier(.2,.8,.2,1)

240 msSTATE

Tab, Zeilenstatus, Filter

cubic-bezier(.2,.8,.2,1)

360 msSPACE

Sheet, Dialog, Seitenbereich

cubic-bezier(.16,1,.3,1)

850 msASYNC

sichtbare Erfolgsschleife

nur einmal

Kontinuität

Eine geöffnete Zeile wächst aus ihrer Position. Ein Sheet kommt von der Seite, an der die Aktion lag.

Bestätigung

Press verkleinert minimal, Busy hält Geometrie, Erfolg wechselt Inhalt statt den Button verschwinden zu lassen.

Dauerbewegung

Keine pulsierenden Karten, schwebenden Kennzahlen oder Endlosschleifen neben operativer Arbeit.

10.2SOUND & HAPTIK

Hören bestätigt.
Sehen beweist.

Scanner-Töne sind semantische Codes und bewusst kurz. Admin-Sounds bleiben standardmäßig aus; kritische Hinweise dürfen opt-in hörbar sein.

LIVE PATTERNSemantic soundUSER-INITIATED

Töne ergänzen den visuellen Zustand, ersetzen ihn nie. Sie laufen nur nach einer Nutzeraktion und respektieren lautlose Arbeitsplätze.

SCANNER

Scan, Prüfung, Erfolg und Fehler besitzen unterscheidbare kurze Motive. Lautstärke bleibt moderat.

HAPTIK

Kurzer Impuls für Scan, Doppelimpuls für Erfolg, längeres Muster nur für echten Fehler.

SICHERHEIT

Kein Autoplay, keine Stimme für private Daten, keine akustische Nachricht ohne sichtbares Äquivalent.

10.3ACCESSIBILITY

Nicht Sonderfall.
Definition von Qualität.

Kontrast, Fokus, Sprache, Tastatur und Touch werden im Komponentenvertrag gelöst – nicht nachträglich auf einzelne Screens geklebt.

SEHEN

Text mindestens 4,5:1, große Schrift 3:1; Fokus und Status nie nur über Farbe.

TASTATUR

Logische Tab-Reihenfolge, sichtbarer Fokus, Escape schließt, Enter bestätigt.

MOTORIK

44 px Minimum, Scanner 56–64 px; keine Drag-only- oder Hover-only-Aktion.

ZEIGER

Tooltip ergänzt Beschriftung, niemals Pflichtinformation; Cursor und Presszustand stimmen.

MOTION

prefers-reduced-motion entfernt Parallax, Auto-Scroll und räumliche Ausschläge.

HÖREN

Sounds optional, stumm schaltbar und durch visuelles Feedback vollständig ersetzt.

FOKUS IST EIN SIGNAL

3 px Signalring + 2 px Abstand. Auf jeder Theme-Fläche klar sichtbar, ohne das Layout zu verschieben.

10.4RESPONSIVE & FREIGABE

Nicht schrumpfen.
Neu priorisieren.

12 → 4GRID

Spalten werden neu komponiert; Text und Ziele bleiben lesbar.

TABLE → CARDDATA

Produkt, Status, Preis vorn; Details in aufklappbarer zweiter Ebene.

SIDEBAR → SHEETNAV

Aktiver Ort bleibt benannt, Suche bleibt global erreichbar.

HOVER → PRESSINPUT

Keine Information oder Aktion existiert nur auf Hover.

VIDEO → POSTERMEDIA

Reduced Motion und Datensparmodus erhalten dieselbe Aussage.

RELEASE GATE / 10Alle zehn Fragen müssen beantwortet sein.

Ist die Hauptaufgabe in drei Sekunden erkennbar?
Ist genau eine nächste Hauptaktion dominant?
Bleibt jeder Status ohne Farbe verständlich?
Existieren Laden, Leer, Fehler, Offline und Berechtigung?
Funktioniert der vollständige Tastaturweg?
Bleiben Text und Ziele mobil gleichwertig lesbar?
Ist jeder Bewegungsablauf begründet und reduzierbar?
Bleibt Auswahl nach Fehler oder Rücksprung erhalten?
Sind Messwerte, Preise, IDs und Zeiten korrekt formatiert?
Wurde der echte Workflow mit realistischen Daten durchgespielt?