Motion Design

Intro

Motion Design spielt eine zentrale Rolle in Kommunikation und Storytelling und kann die User Experience erheblich bereichern.

In diesem Sinne hat Bewegung zwei wesentliche Qualitäten:

• informativ
• ästhetisch

Informativ weil:

• sie User:innen aufzeigen kann, wie diese mit einem UI interagieren können
• sie aktivieren und anleiten kann
• sie eine Geschichte erzählen kann

Ästhetisch weil:

• sie einem Produkt Leben, Persönlichkeit und Stil verleihen kann

Beispiele:

Produkt-Website Apple
Corporate Website Farner Consulting

Bereiche

Im Webkontext lassen sich die Optionen zur Erzeugung von Bewegung in drei Bereiche aufteilen:

• Transitions
• Animations
• Video

Häufig verschwimmen diese Disziplinen auch, d.h. Animations beinhalten Transitions und werden durch die Ergänzung zu Ton und Dramaturgie zu Videos und als solche eingebunden.

Video

Videos sind effektiv, weil sie verschiedene Aspekte vereinen (können):

• Bild
• Ton
• Bewegung
• Dramaturgie (Story)

Allerdings bringen Videos auch die Herausforderung von sehr grossen Datenmengen mit sich.

Um dem entgegenzuwirken werden Videos in der Regel gepuffert und gestreamt. Das heisst der Content wird segmentiert und kontinuerlich vom Server an den Client ausgeliefert. Das heisst, das Video muss nicht vollständig geladen werden, bis es abgespielt werden kann.

Videos selber zu hosten und dabei alle Aspekte der Usability zu berücksichtigen ist sehr aufwändig und muss gut überlegt werden. Deutlich einfacher ist es, auf bestehende Plattformen zurückzugreifen. Dabei muss allerdings berücksichtigt werden, dass das teilweise auch Kosten und Abhängigkeiten mit sich bringen kann (z.B. nicht steuerbare Video-Vorschläge im Anschluss an die Wiedergabe bei Youtube).

Eine Übersicht über entsprechende Anbieter mit Pros und Cons ist hier aufgelistet:
Video Hosting Plattformen

Transitions

Transitions sind Effekte, die Eigenschaften von Elementen schrittweise von einem Zustand in den Nächsten transformieren. Sie werden häufig für einfache «Von-Zu-Bewegungen» verwendet. Z.B.:

• Interaktives Feedback
• Benutzerführung
• Ästhetik

Mit CSS können Transition-Effekte ganz einfach angewendet werden. Dafür müssen zwei Eigenschaften definiert werden:

• CSS Property, die verändert werden soll
• Dauer des Effekts

Die W3C liefert dazu eine einfache und zugängliche Einführung:
CSS Transitions

Animations

Animationen sind ähnlich wie Transitions, transportieren aber komplexere Informationen und können kontinuierliche Bewegungsabläufe beinhalten. Sie finden insbesondere in folgenden Bereichen Anwendung:

• Benutzerführung
• Ästhetik
• Storytelling

Auch hier liefert die W3C eine gute Beschreibung:
CSS Animations

Motion und Accessibility

Obwohl animierte Inhalte die UX einer Webanwendung effektiv aufwerten können, sollten auch Aspekte der Accessibility berücksichtigt werden.

Optionale Animationen
Wenn Animationen durch Interaktionen ausgelöst werden, sollten sie wenn möglich optional sein. Die Media Querry «prefers-reduced-motion» kann verwendet werden, um Animationen entsprechend abzuschwächen oder auszuschalten. Das Mozilla Developer Network liefert dazu Eine Ressourcen-Seite an.

Vorsicht bei Lichteffekten
Blitzende und blinkende Animationen können bei Personen mit Empfindlichkeit auf Licht- und/oder Blitz-Effekten Probleme verursachen. Die WCAG empfiehlt, dass maximal oder weniger als 3 Blitze pro Sekunde auftreten sollten.

Kontrolle für User
Für Animationen und Bewegungen, die länger als 5 Sekunden dauern, sollten Controls für Play/Pause/Stop bereitgestellt werden.

Umsichtiger Einsatz von animierten Inhalten
Grundsätzlich gilt, dass Animationen bedacht und gezielt eingesetzt werden sollten. Es kann auch zuviel sein und die User:innen verwirren bzw. den Fluss der Informationsaufnahme beeinträchtigen.

Präsentation

• Google Präsentation zum Thema

Quellen und Ressourcen

• Motion Design for the Web - Online Kurs zum Thema von Adi Purlida (sponsored by Envato Elements)
• CSS Transitions - W3C Tutorial zu CSS Transitions
• CSS Animations - W3C Tutorial zu CSS Animations
• Making Your Web Animations Accessible - Blogpost Juli 2022, Bureau of Internet Accessibility