Motion Design
04 / Bewegung im Interface
Kernfrage
Wann hilft Bewegung im Interface?
Im Interface ist Bewegung kein Schmuck, sondern Information. Sie zeigt, dass etwas passiert ist, woher ein Element kommt und wohin es geht. Gleichzeitig muss sie schnell sein und darf niemanden ausschliessen.
Lernziel: Du kannst Bewegung im Interface begründet einsetzen, Microinteractions gestalten und eine ruhige Fassung für Menschen bereitstellen, die Bewegung reduzieren.
Bewegung ist Information.
4.1 / Aufgaben von UI-Animation
Rückmeldung, Orientierung, Zusammenhang.
Jede Bewegung im Interface braucht einen Grund. Drei Gründe tragen fast immer.
01
Rückmeldung
Der Knopf reagiert, das Häkchen erscheint. Man weiss, dass die Eingabe angekommen ist.
02
Orientierung
Ein Menü gleitet von links herein und geht dorthin zurück. Man versteht, wo es wohnt.
03
Zusammenhang
Eine Karte wächst zur Detailansicht. Man sieht, dass beides zusammengehört.
Fehlt der Grund, fehlt die Bewegung. Dekorative Animation, die bei jedem Besuch gleich abläuft, nervt spätestens beim dritten Mal.
Kein Grund, keine Bewegung.
4.2 / Microinteractions
Kleine Momente, grosse Wirkung.
Microinteractions sind kleine Reaktionen auf eine einzelne Handlung: ein Herz, das kurz pulsiert, ein Schalter, der hinübergleitet, ein Ladezustand. Sie sind kurz, meist unter 300 Millisekunden, und verändern immer auch den Zustand, nicht nur die Bewegung.
Beim Laden zeigt ein Skelett, also graue Platzhalter in der Form des Inhalts, schon den Aufbau der Seite. Das wirkt schneller als ein drehender Kreis, auch wenn es gleich lange dauert.
Zustand vor Effekt.
4.3 / Bewegung reduzieren
Rücksicht ist Teil des Designs.
Manche Menschen bekommen von Bewegung Schwindel oder Übelkeit, etwa bei Störungen des Gleichgewichtssinns. Sie können im Betriebssystem «Bewegung reduzieren» einstellen. Websites lesen das mit der Abfrage prefers-reduced-motion aus und zeigen dann eine ruhige Fassung.
Die Richtlinien für Barrierefreiheit (WCAG) verlangen zudem: nichts darf öfter als dreimal pro Sekunde blitzen, und Bewegung, die länger als fünf Sekunden läuft, muss sich anhalten lassen. Mehr dazu im Kurs Barrierefreiheit.
Ruhig ist auch eine Fassung.
Übung
Ein bewegtes Interface
Aufgabe: Gestalte die Microinteractions der Ticketbuchung von Museum Klang.
SCHRITT 1
Liste alle Momente auf, in denen eine Rückmeldung nötig ist: wählen, bestätigen, laden, Fehler.
SCHRITT 2
Gestalte für jeden Moment eine Bewegung und begründe sie mit Rückmeldung, Orientierung oder Zusammenhang.
SCHRITT 3
Lege Dauer und Easing für jede Bewegung fest.
SCHRITT 4
Gestalte die ruhige Fassung für «Bewegung reduzieren».
Auswertung: Funktioniert die Buchung auch ohne jede Bewegung? Was geht verloren, was bleibt?