Prinzip P7

Bewegung als adaptive Schicht

Animation ist eine Option, kein Designstandard — sie respektiert die Präferenz der Nutzer:in.

Warum dieses Prinzip wichtig ist

Animation ist eine Option, kein Designstandard — sie respektiert die Präferenz der Nutzer:in.

Bewegung lenkt Aufmerksamkeit — gezielt eingesetzt ist sie ein mächtiges Designwerkzeug. Wahllos eingesetzt wird sie zum Ausschluss-Mechanismus für eine substanzielle Nutzergruppe: Menschen mit vestibulärer Sensitivität, mit ADHS, mit Migräne, mit kognitiven Einschränkungen.

prefers-reduced-motion ist eine System-Einstellung in macOS, iOS, Windows und Android, die zwischen 10 und 20 Prozent der Nutzer:innen aktiv gesetzt haben. Eine Website, die diese Einstellung ignoriert, ignoriert eine messbare Minderheit jedes Besuchers.

Bewegung als Designstandard ist die ressourcenhungrigste Designentscheidung, die Sie treffen können. Animation kostet Performance (CPU, GPU, Akku), Bandbreite (große Hero-Videos), Entwicklungszeit (jedes Element braucht Reduced-Motion-Fallback) und mentale Energie der Nutzer:innen. Setzen Sie sie sparsam und bewusst ein.

Drei Stufen, drei Voreinstellungen

Eine Animation verdient den Namen erst, wenn klar ist, zu welcher Stufe sie gehört.

  1. Essenziell

    Animation mit funktionaler Bedeutung — Loading-Indikatoren, Confirmation-Feedback, Toast-Notifications. Bei reduced-motion auf instant geschaltet, aber nicht entfernt.

  2. Dekorativ mit Opt-out

    Hover-Effekte, scroll-getriggerte Reveals, sanfte Übergänge. Bei reduced-motion deaktiviert.

  3. Opt-in-only

    Aufwendige Effekte wie Parallax, Video-Auto-Play, Particle-Animationen. Standardmäßig deaktiviert — Nutzer:in stimmt aktiv zu.

Drei Stufen, drei unterschiedliche Voreinstellungen. Eine Animation verdient den Namen erst, wenn klar ist, zu welcher Stufe sie gehört.

Best Practice und Anti-Pattern

Drei Bewegungs-Entscheidungen, die regelmäßig zur Bedienhürde werden — und ihre adaptiven Alternativen.

Anti-Pattern

Parallax-Hero auf jeder Seite

Vestibulärer Trigger bei jedem Seitenwechsel.

Best Practice

Bewegung als Belohnung für gezielte Interaktion

Hero ist statisch, gezielte Mikro-Animation bei Aktionen.

Anti-Pattern

Auto-Slider ohne Pause-Button

Verletzt WCAG 2.2.2, lenkt von Inhalten ab.

Best Practice

Auto-Slider mit Pause-Button und prefers-reduced-motion-Fallback

Nutzer:in entscheidet.

Anti-Pattern

Scroll-getriggerte Reveals als Standard-Pattern

Jeder Inhaltsblock wartet auf den Reveal-Trigger, Lesefluss bricht.

Best Practice

Reveals nur kurz, subtil und mit Reduced-Motion-Off-Switch

Oder ganz verzichten.

Anbindung an WCAG 2.2

Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.

  • SC 2.2.2Pause, Stop, HideA
  • SC 2.3.1Three Flashes or Below ThresholdA
  • SC 2.3.3Animation from InteractionsAAA

Verwandte Prinzipien

Bewegung als adaptive Schicht lehnt sich an diese Prinzipien an.

Respektiert Ihre Website die Bewegungs-Präferenz Ihrer Nutzer?

Selbstcheck starten

Neun Fragen, etwa vier Minuten. Kein Login.