Interaktionsmuster
Bewegung sollte Zusammenhang erklären – nicht Aufmerksamkeit erzwingen.
KONVERSIV nutzt Bewegung als Orientierungshilfe: Elemente treten in einer begründeten Reihenfolge auf, Zustände werden sichtbar und Zusammenhänge bleiben nachvollziehbar. Reduced Motion erhält denselben Informationsstand ohne Übergangseffekt.
Redaktionelles Muster
Keine reale Leistung, kein Kundendashboard und keine Ergebnisdarstellung.
Worauf dieses Muster achtet
- 01Motion hat eine benennbare Informationsaufgabe
- 02Reduced Motion ist ein vollständiger Zustand
- 03Keine Inhalte bleiben von Scroll-Events abhängig
01
Drei sinnvolle Aufgaben für Motion
Erstens kann Bewegung eine Reihenfolge erklären, etwa vom Problem über die Prüfung zur Entscheidung. Zweitens kann sie die Beziehung zwischen einem Navigationselement und dem zugehörigen Inhalt zeigen. Drittens gibt sie Feedback auf eine Handlung, zum Beispiel beim Öffnen einer mobilen Navigation.
Für jede Animation sollte die Frage beantwortbar sein: Welche Information wäre ohne sie schwerer zu verstehen? Ist die Antwort nur ‚wirkt moderner‘, ist Zurückhaltung meist die bessere Entscheidung. Lange Intro-Sequenzen und ständig driftende Flächen konkurrieren mit dem Inhalt.
02
Reduced Motion als eigener Qualitätszustand
Die Medienabfrage `prefers-reduced-motion` darf nicht bloß die Dauer verkürzen. Inhalte müssen ohne initiale Unsichtbarkeit, Translate-Reste oder endlose Loops vollständig lesbar sein. Fokus, Navigation und Sprungmarken funktionieren unabhängig von Animationsbibliotheken.
KONVERSIV setzt deshalb sichtbare Endzustände und reduziert dekorative Bewegung. Systemvisuals bleiben statisch verständlich. Tests prüfen mehrere Viewports mit normaler und reduzierter Bewegung, damit Barrierefreiheit nicht nur eine CSS-Absicht bleibt.
03
Motion dokumentieren
Ein kleines Motion-Inventar hält Trigger, Zweck, Dauer, Easing, Abbruch und Reduced-Motion-Verhalten fest. Das verhindert, dass ähnliche Elemente widersprüchlich reagieren oder spätere Komponenten wieder unsichtbare Initialzustände einführen.
- Zweck vor Effekt benennen
- Keine Pflichtinformation nur animiert vermitteln
- Fokus und Scrollposition stabil halten
- Endzustände automatisiert prüfen
Weiterlesen