Animationen

Verwendung

Animationen als Resultat von Interaktionen mit der Anwendung und ihren Bedienelementen geben Nutzenden ein wichtiges haptisches Feedback zum Beispiel über die Durchführung und den Erfolg (oder Misserfolg) eine durchgeführten Aktion. Animationen tragen unmittelbar zur User Experience bei:

• Nutzende begeistern: Bewegung verwandelt einen trockenen Prozess in ein angenehmes Erlebnis.
• Nutzende unterstützen: Bewegung stellt Kontext und Informationen bereit, ohne dass weitere Maßnahmen wie zusätzliche Klicks erforderlich sind.
• Nutzende fokussieren: Bewegung zieht Aufmerksamkeit auf sich und kann für den aktuellen Kontext wichtige Daten oder UI-Elemente hervorheben.

Fläche und Dauer

Das Design System unterteilt Animationen, die sich aus Interaktionen der Nutzenden ergeben in zwei Typen:

1. Interaktionen, die ein schwach wahrnehmbares, subtiles visuelles Feedback zu einer möglichen oder soeben durchgeführten Interaktion geben. Dies sind oftmals Interaktionen, die zu einer weiteren Aktion hinführen und einen Aufforderungscharakter haben, z. B. ein :hover vor dem Aufklappen eines Akkordeon-Panels, aber auch das Aktivieren einer Checkbox durch Klick / Tap oder Leerschritt. Die Dauer der Animationen sollten hier im Bereich von 80–160ms liegen.
2. Interaktionen, die ein deutlich wahrnehmbares visuelles Feedback zu einer durchgeführten Aktion geben. Dies kann z. B. die kurze, aber trotzdem als solche erkennbare Animation beim Öffnen eines Akkordeon-Panels oder Menüs sein. Diese liegen im Bereich von 200–400ms, der Verlauf der Bézierkurve ist abhängig von der jeweiligen Komponente und der Art der Interaktion.

Je nach Pattern und Umgebungsvariablen wie der Bildschirmgröße kann es nötig sein, die Dauer von Animationen des Typs b. zu verändern. Bei großflächigen Animationen kann man davon ausgehen, dass die Animationsdauer für die nächsthöhere Geräteklasse um ca. 30% ansteigt, da Elemente sich über einen entsprechend längeren Weg auf dem Bildschirm bewegen müssen. Hier bietet sich an, die Animationsdauer an die verwendeten Breakpoints zu binden.

Da das Design System aber die Größe von Akkordeon-Panels oder die Anzahl von Menü-Einträgen nicht vorhersehen kann, legen wir vernünftige Mittelwerte fest, die im Bedarfsfall von den Fachverfahren verändert werden können.

Tokens

CSS

Das CSS wird grundsätzlich so aufgebaut, dass eine mögliche clientseitige Unterdrückung von Animationen durch Systemeinstellungen von Nutzenden honoriert und der vollständige Inhalt statisch abgebildet wird und damit wahrnehmbar und bedienbar bleibt. Das Design System verwendet hierzu das Media Query prefers-reduced-motion, welches in allen modernen Browsern zuverlässig unterstützt wird.

/* Bei Einhaltung der Kaskade ist dieses Media Query optional, kann aber als
   Filter benutzt werden, damit ältere Browser die Animation ignorieren */
@media (prefers-reduced-motion: no-preference) {
  .werbebanner {
    animation:       bounce 5000ms;
  }
  .anchor_local {
    scroll-behavior: smooth;
  }
}

/* Hier wiederum ist das Media Query verpflichtend! */
@media (prefers-reduced-motion: reduce) {
  * {
    animation:       none;
    transition:      none;
    scroll-behavior: auto;
  }
}

CSS bietet darüber hinaus die Möglichkeit, über (update:slow) weniger performante Endgeräte mit einer geringen Framerate abzufragen und mit besser für sie geeigneten Regeln zu versorgen – keine Animation ist besser als eine ruckelnde Animation.

Dadurch dass die Werte hier nicht auf none, sondern auf für das menschliche Auge nicht mehr wahrnehmbare 0,001 Millisekunden gesetzt sind wird sichergestellt, dass alle Funktionen aktiviert werden können, die an das erfolgreiche Durchlaufen der Animation gebunden sind.

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration:        .001ms;
    transition-duration:       .001ms;
    animation-iteration-count: 1;
  }
}

Do’s and Dont’s

Barrierefreiheit

Auswirkungen von Animationen auf die Barrierefreiheit

Animationen sind automatische oder unerwartete visuelle Änderungen von Inhalten und ihrer Darstellung, aber auch erwartbare Veränderungen im User Interface, die sich über die Zeitachse aus Interaktionen mit der Anwendung ergeben.

Beispiele für automatische visuelle Veränderungen sind Laufschriften oder automatisch scrollende Inhalte, blitzende oder blinkende Inhalte, selbsttätig startende Videos oder Karussells und jegliche Inhalte, die sich von alleine nach einer gewissen Zeit aktualisieren.

Unerwartete visuelle Änderungen sind Inhalte, die beim Scrollen zusätzlich animiert oder mit unterschiedlicher Geschwindigkeit gescrollt werden (sog. Parallax-Effekt), horizontales Verschieben während Nutzende vertikal scrollen oder Inhalte, die beim Erscheinen nicht unmittelbar und ohne Verzögerung eingeblendet, sondern skaliert, verschoben, gedreht oder über ihre Transparenz bzw. Opazität verändert werden. Viele dieser Animationsformen sind problematisch für Personen mit Störungen des Gleichgewichtssinns oder kognitiven Behinderungen wie Aufmerksamkeitsdefiziten oder Legasthenie.

Die Vorteile von Animationen, bewusst eingesetzt Aufmerksamkeit auf sich zu ziehen, kann für bestimmte Nutzergruppen durch ihre ablenkende Wirkung auch nachteilig sein. Im Ernstfall können bestimmte Frequenzen von Blitzen oder Flackern bei Menschen mit photosensitiver Epilepsie sogar einen Anfall auslösen. Auch wenn manuell zu startende Videos blinkende oder blitzenden Inhalte enthalten, oder wenn Fehlermeldungen nach Absenden eines Formulars blinken, dann gelten hier besondere Anforderungen an die Barrierefreiheit.

Relevante BITV-Anforderungen

• 1.1.1 Nicht-Text-Inhalt
• 1.3.3 Sensorische Eigenschaften
• 2.2.2 Pausieren, beenden, ausblenden
• 2.3.1 Grenzwert von dreimaligem Blitzen oder weniger
• 2.3.3 Animation durch Interaktionen (Level AAA)

Testhinweise & Akzeptanzkriterien

Bewegte Inhalte müssen systemweite Einstellungen der Nutzenden zur Unterdrückung von Animationen honorieren. Daraus folgt, dass bei deaktivierten automatischen Animationen keine Informationsverluste stattfinden dürfen: Wenn über die Animation relevante Informationen übermittelt werden, dann müssen diese Informationen auch in Textform hinterlegt sein; wenn Animationen dem Verständnis oder der Bedienung der Anwendung dienen, dann dürfen Inhalte nicht ausschließlich auf diese Animation Bezug nehmen.

Einstellungen

In Windows 11:

Einstellungen > Barrierefreiheit > Visuelle Effekte > Animationseffekte

In macOS:

Systemeinstellungen > Bedienungshilfen > Anzeige > Bewegung reduzieren

In iOS:

Einstellungen > Bedienungshilfen > Bewegung

In Android 9+:

Einstellungen > Bedienungshilfen > Animationen entfernen

Wenn die Anwendung Inhalte enthält, die sich automatisch bewegen, scrollen oder blinken, und wenn diese Animationen länger als 5 Sekunden andauern sowie zusammen mit anderen statischen oder animierten Inhalten angezeigt werden, dann müssen die Animationen durch Nutzende pausiert, gestoppt oder ausgeblendet werden können. Dies betrifft zum Beispiel Komponenten wie das Karussell (Beispielseite).

Inhalte, die mehr als dreimal pro Sekunde blitzen und den definierten Grenzwert für Blitze überschreiten sollen vermieden werden (vgl. WCAG 2.2 Level AAA: Three Flashes or Below Threshold).

Animationen im GIF-Format sind aus Gründen der mangelnden Barrierefreiheit nicht erwünscht.