# Reduzieren Sie unwesentliche Bewegungen, ohne die Bedeutung zu verbergen

> Verwenden Sie die Einstellung „Bewegungsreduzierung“, um eine ruhigere Präsentation zu bieten und gleichzeitig wichtige Spielinformationen und verständliches Feedback beizubehalten.

- URL: https://oneshotgems.ai/de/topics/reduced-motion-in-games
- Kategorie: Für Spieleentwickler
- Typ: Ratgeber
- Aktualisiert: 5. Oktober 2026

Ein Browserspiel kann Kamerabewegungen, Bildschirmverwacklungen, Parallaxen, wiederholte Skalierungen und dekorative Partikel enthalten. Einige Bewegungen kommunizieren den wesentlichen Spielzustand, während andere Bewegungen der Präsentation dienen. Respektieren Sie die Vorliebe des Betriebssystems für reduzierte Bewegung und entscheiden Sie, welche Effekte abgeschwächt, ersetzt oder entfernt werden können, ohne dass ein Treffer, eine Punkteänderung oder ein Richtungshinweis verdeckt wird.

## Rückmeldung von rein dekorativen Effekten unterscheiden

Erkennen Sie die CSS-Medienfunktion prefers-reduced-motion, um die Einstellung des Nutzers auszulesen, und wenden Sie dieselbe Einstellung bei Bedarf auch auf skriptgesteuerte Effekte an. Entfernen Sie zum Beispiel einen wiederholten Hintergrundzoom, lassen Sie aber einen kurzen Farb- oder Texthinweis stehen, der eine erfolgreiche Aktion signalisiert. Die reduzierte Bewegung darf kein unbemerkter Funktionsverlust sein: Spieler müssen weiterhin verstehen, was sich geändert hat und was als Nächstes zu tun ist.

Entfernen Sie nicht automatisch jede Animation. Ein bewegliches Ziel kann zum Gameplay gehören, während Kamerawackeln nach einer Kollision dekorativ sein kann. Behalten Sie Bewegungen bei, die für Position oder Timing wichtig sind, und bieten Sie nach Möglichkeit ein anderes klares Signal. MDN erklärt, dass die Einstellung nicht wesentliche Bewegungen reduzieren oder ersetzen soll.

## Testen Sie Übergänge und wiederholte Effekte

Prüfen Sie Bewegungen im gesamten Ablauf: Menüs, Laden, Kameraübergänge, Sieg und Niederlage sowie wiederkehrende Effekte in längeren Partien. Eine Einstellung, die nur eine CSS-Animation abschaltet, kann Bewegungen aus JavaScript oder Canvas unbeeinflusst lassen. Wenden Sie die Einstellung in allen Darstellungsebenen einheitlich an und vermeiden Sie abrupte Wechsel, wenn sie während des Spiels im System geändert wird.

Aktivieren Sie die Betriebssystemeinstellung für reduzierte Bewegung und prüfen Sie, ob Spieler Ziele weiterhin finden, Treffer erkennen und Übergänge verstehen können. Testen Sie CSS-, skriptgesteuerte und Canvas-Effekte zusammen. MDN beschreibt die Medienfunktion und wie bei aktivierter Einstellung ein alternativer Stil bereitgestellt werden kann.

## Fragen

**Sollte reduzierte Bewegung alle Bewegungen in einem Spiel stoppen?** Nein. Etwas Bewegung ist wichtig, um zu spielen oder den Zustand zu kommunizieren. Reduzieren oder ersetzen Sie unwesentliche Effekte und bewahren Sie eine klare Möglichkeit, Timing, Ort und Feedback zu verstehen.

**Wie erkennt eine Seite die Präferenz?** CSS kann die Medienfunktion prefers-reduced-motion verwenden. Skript- oder Canvas-Effekte brauchen einen gleichwertigen Einstellungsweg, damit die visuelle Darstellung einheitlich bleibt.

## Folge deiner Neugier

- [Spielfarben barrierearm gestalten: Farbe allein reicht nicht](https://oneshotgems.ai/de/topics/accessible-game-colors): Nutzen Sie Kontrast und zusätzliche visuelle Merkmale, damit Spielzustände auch dann unterscheidbar bleiben, wenn Farbtöne ähnlich wirken oder nicht erkennbar sind.
- [Entwerfen Sie nützliche Audiosteuerungen für Browserspiele](https://oneshotgems.ai/de/topics/game-audio-controls): Geben Sie den Spielern die Kontrolle über den Spielsound mit klarem Stumm- und Lautstärkeverhalten und bewältigen Sie die Autoplay-Einschränkungen des Browsers, ohne dass akustische Hinweise unterbrochen werden.

## Weiterlesen

- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)
- [MDN: Medienabfragen für Barrierefreiheit](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using_for_accessibility)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/reduced-motion-in-games