Motion Design im Web ist die gestalterische Disziplin, die den Einsatz von Bewegung auf einer Website festlegt: welche Übergänge es gibt, wie lange sie dauern, wie sie beschleunigen und was sie dem Betrachter mitteilen sollen. Es verhält sich zur einzelnen Animation wie ein Design System zum einzelnen Button.
- Motion Design im Web
Die Gestaltung von Bewegung in digitalen Oberflächen, einschließlich Dauer, Beschleunigung und Bedeutung der einzelnen Übergänge.
Beispiel: „Das Motion Design gibt vor, dass alle Overlays von unten hereinkommen.“Abgrenzung zur Animation: Die Animation ist die einzelne Umsetzung. Motion Design legt die Regeln fest, nach denen alle Animationen einer Oberfläche funktionieren.
Woraus die Regeln bestehen
Drei Größen tragen die meisten Entscheidungen. Die Dauer bestimmt, wie schnell etwas geschieht: Kleine Zustandswechsel liegen bei 100 bis 200 Millisekunden, größere Bewegungen wie ein einfahrendes Overlay bei 250 bis 400. Alles darüber fühlt sich zäh an, alles darunter wird kaum wahrgenommen.
Die zweite Größe ist die Beschleunigung. Bewegung, die gleichmäßig läuft, wirkt mechanisch. Natürlicher ist ein Start mit Schwung und ein weiches Auslaufen, in CSS über Werte wie ease-out beschrieben. Für Elemente, die verschwinden, gilt oft das Umgekehrte.
Die dritte Größe ist die Richtung. Was von rechts hereinkommt, sollte nach rechts wieder verschwinden. Diese Folgerichtigkeit erklärt dem Betrachter, wo sich ein Element befindet, während es unsichtbar ist, und ist der Grund, warum Bewegung überhaupt Orientierung stiftet.
Wozu ein eigenes Regelwerk gut ist
Ohne Festlegung entstehen Bewegungen im Einzelfall, und nach einem halben Jahr hat eine Anwendung sieben verschiedene Öffnungsanimationen mit sechs verschiedenen Dauern. Das fällt niemandem einzeln auf und macht das Ganze trotzdem unruhig.
Deshalb gehören die Werte in dieselbe Sammlung wie Farben und Abstände, als benannte Tokens im Design System. Ein Baustein greift dann auf eine Dauer namens kurz oder mittel zu, statt eine Zahl zu setzen, und eine spätere Änderung wirkt überall.
Wo die Grenze liegt
Bewegung ist ein Mittel zur Erklärung. Sobald sie länger dauert als der Vorgang, den sie begleitet, wird sie zur Verzögerung, und Nutzer, die eine Seite täglich benutzen, empfinden sie als Bremse. Für sie ist die kürzeste Fassung meist die beste, weshalb Motion Design nach dem ersten Eindruck vor allem eine Frage der Zurückhaltung ist.