Überzeugend und bewegend – Ein Leitfaden zu Motion Design-Prinzipien

Bewegung hat einen tiefgreifenden Einfluss auf die Benutzererfahrung digitaler Produkte, aber wenn Schnittstellenelemente keine grundlegenden Motion-Design-Prinzipien aufweisen, wird die Benutzerfreundlichkeit untergraben. Im Kontext von Benutzerschnittstellen ist Bewegung mehr als eine visuelle Garnitur. Es ist eine überzeugende Kraft, die das Produktengagement stärkt und die Reichweite der Designkommunikation erweitert.

Unsere Welt ist eine Welt der Bewegung. Selbst in stillen Momenten zittern Blätter und Lungen dehnen sich aus. Im Bereich des digitalen Produktdesigns scheint Bewegung zur zweiten Natur zu werden, eine Erweiterung des Alltags, die mit wenig Aufwand genutzt werden kann. Wenn das nur wahr wäre.

Fragen Sie einfach jeden, der zum ersten Mal animierte UI-Elemente verwendet. Stundenlange Bemühungen führen zu Amateurergebnissen. Etwas so Einfaches wie eine Karte, die auf den Bildschirm gleitet, sieht unangenehm aus. Warum ist das so?

Theoretisch ist es einfach, UI-Elemente zu bewegen. Definieren Sie Punkte auf einem vorgegebenen Pfad, und die Software passt die Lücken an. In Wirklichkeit funktioniert das nicht so. Werkzeuge und Techniken sind unerlässlich, aber sie beziehen ihre Kraft aus Prinzipien. Wenn Motion die Usability digitaler Produkte verbessern soll, muss es auf unveränderlichen Verhaltensregeln basieren, die für unendlich viele Anwendungsfälle gelten.

Die Ursprünge des Bewegungsdesigns

Die Verbindung von Motion Design und UX ist relativ neu, aber ihre Wurzeln liegen in Disney. Frank Thomas und Ollie Johnston gehörten zu den am meisten geschätzten Animatoren von Walt Disney und waren maßgeblich an Klassikern wie Pinnochio , Bambi und Fantasia beteiligt. Ihre 12 Grundprinzipien der Animation sind nach wie vor einflussreich in Motion Graphics für Film, Fernsehen und digitale Inhalte.

Die Disney-Prinzipien destillieren die wesentlichen Gesetze der physischen Bewegung zum Zwecke des animierten Geschichtenerzählens. Sie befähigen gezeichnete Charaktere, sich zu bewegen und Emotionen zu zeigen, aber sie erfüllen nicht angemessen die interaktiven Bewegungsanforderungen moderner Benutzeroberflächen.

Zeitgenössische Designer haben versucht, diese Lücke zu schließen. Eines der anschaulicheren Beispiele sind die 10 Prinzipien des Bewegungsdesigns , eine Disney-Adaption des Animationsexperten Jorge R. Canedo Estrada. Dennoch bedürfen die Takeaways der Übersetzung, wenn sie ganzheitlich auf das digitale Produktdesign angewendet werden sollen.

Der ehrgeizigste Versuch, Bewegungsprinzipien um interaktive UI-Elemente (und ihre UX-Bedeutung) herum neu auszurichten, ist Issara Willenskomers UX in Motion Manifesto . Seine Tiefe ist erstaunlich, aber es ist keine leichte Lektüre.

Bei der Festlegung der 12 Prinzipien von UX in Motion sagte Willenskomer:

• Unterscheidet Motion Design von UI-Animation
• Artikuliert, wie Bewegung die Benutzerfreundlichkeit unterstützt
• Entpackt das Innenleben des Kernbewegungsverhaltens

Motion Design und UX: Wichtige Unterschiede

Bevor wir uns mit den Prinzipien des Motion Design befassen, ist es wichtig, die wichtigsten Unterscheidungen hervorzuheben, die in Willenskomers Manifest auftauchen.

Bewegung ist mehr als Ornamentik

Motion Design ist nicht gleichbedeutend mit UI-Animation. Dies ist von entscheidender Bedeutung, da die UI-Animation fast immer als kosmetischer nachträglicher Einfall ohne Einfluss auf UX behandelt wird (außer um Charme hinzuzufügen). Bewegung ist keine Verzierung, sondern Verhalten, und Verhaltensweisen können die Benutzererfahrung nur unterstützen oder behindern.

Zwei Interaktionstypen: Echtzeit vs. Nicht-Echtzeit

Motion Design befasst sich mit zwei grundlegenden Interaktionen: Echtzeit und Nicht-Echtzeit.

• Echtzeit- Interaktionen bieten sofortiges Feedback, wenn Benutzer UI-Elemente auf dem Bildschirm manipulieren. Mit anderen Worten, Bewegungsverhalten reagiert sofort auf Benutzereingaben.
• Nicht-Echtzeit- Interaktionen erfolgen nach Benutzereingaben, was bedeutet, dass Benutzer kurz innehalten und das resultierende Bewegungsverhalten beobachten müssen, bevor sie fortfahren.

Bewegung unterstützt die Benutzerfreundlichkeit

Motion Design muss die Benutzerfreundlichkeit auf vier verschiedene Arten unterstützen.

• Erwartung: Welches Bewegungsverhalten erwarten Benutzer, wenn sie mit UI-Elementen interagieren? Erfüllt Bewegung die Erwartung oder stiftet sie Verwirrung?
• Kontinuität: Produzieren Interaktionen konsistentes Bewegungsverhalten während der gesamten Benutzererfahrung?
• Narrative: Sind Interaktionen und das Bewegungsverhalten, das sie auslösen, an eine logische Abfolge von Ereignissen gebunden, die die Absicht des Benutzers erfüllt?
• Beziehung: Wie hängen die räumlichen, ästhetischen und hierarchischen Attribute von UI-Elementen zusammen und beeinflussen die Entscheidungsfindung der Benutzer? Wie wirkt sich Bewegung auf die verschiedenen existierenden Elementbeziehungen aus?

12 Motion-Design-Prinzipien für digitale Produkte

1. Lockerung

Die Beschleunigung ahmt die Art und Weise nach, wie reale Objekte im Laufe der Zeit beschleunigen und verlangsamen. Es gilt für alle UI-Elemente, die Bewegung aufweisen.

Das Gegenteil von Easing ist eine lineare Bewegung. UI-Elemente, die eine lineare Bewegung anzeigen, wechseln augenblicklich von stationär zu voller Geschwindigkeit und von voller Geschwindigkeit zu stationär. Ein solches Verhalten existiert nirgendwo in der physischen Welt und erscheint den Benutzern stockend.

2. Offset und Verzögerung

Wenn sich mehrere UI-Elemente gleichzeitig und mit derselben Geschwindigkeit bewegen, neigen Benutzer dazu, sie zu gruppieren und übersehen die Möglichkeit, dass jedes Element seine eigene Funktionalität haben könnte.

Versatz und Verzögerung schaffen eine Hierarchie zwischen UI-Elementen, die sich gleichzeitig bewegen, und kommunizieren, dass sie verwandt, aber dennoch unterschiedlich sind. Anstelle einer vollständigen Synchronisation sind das Timing, die Geschwindigkeit und der Abstand der Elemente gestaffelt, was zu einem subtilen „Nacheinander“-Effekt führt.

Wenn Benutzer zwischen Bildschirmen wechseln, signalisieren Offset und Verzögerung, dass mehrere Interaktionsoptionen vorhanden sind.

3. Erziehung

Parenting verknüpft die Eigenschaften eines UI-Elements mit den Eigenschaften anderer. Wenn sich eine Eigenschaft im übergeordneten Element ändert, ändern sich auch die verknüpften Eigenschaften der untergeordneten Elemente. Alle Elementeigenschaften können miteinander verknüpft werden.

Beispielsweise kann die Position eines übergeordneten Elements an die Skalierung eines untergeordneten Elements gebunden werden. Wenn sich das übergeordnete Element bewegt, vergrößert oder verkleinert sich das untergeordnete Element.

Parenting erstellt Beziehungen zwischen UI-Elementen, etabliert eine Hierarchie und ermöglicht mehreren Elementen, gleichzeitig mit Benutzern zu kommunizieren. Aus diesem Grund ist die Elternschaft am wirkungsvollsten, wenn sie in Echtzeitinteraktionen eingesetzt wird.

4. Umwandlung

Transformation tritt auf, wenn ein UI-Element in ein anderes umgewandelt wird. Beispielsweise verwandelt sich eine Download-Schaltfläche in einen Fortschrittsbalken, der sich wiederum in ein Abschlusssymbol verwandelt.

Aus UX-Perspektive ist Transformation ein effektiver Weg, Benutzern ihren Status in Bezug auf ein Ziel zu zeigen (Visibility of System Status). Dies ist besonders hilfreich, wenn das Fortschreiten zwischen UI-Elementen mit einem Prozess mit einem Start und einem Ende verknüpft ist (z. B. das Herunterladen einer Datei).

5. Wertänderung

Wertdarstellungen (numerisch, textbasiert oder grafisch) sind in digitalen Schnittstellen reichlich vorhanden und erscheinen in Produkten, die von Banking-Apps über persönliche Kalender bis hin zu E-Commerce-Websites reichen. Da diese Darstellungen an tatsächlich vorhandene Datensätze gebunden sind, können sie sich ändern.

Wertänderungen kommunizieren die dynamische Natur von Datendarstellungen und informieren Benutzer, dass Daten interaktiv sind und bis zu einem gewissen Grad beeinflusst werden können. Wenn Werte ohne Bewegung eingeführt werden, sinkt die Bereitschaft der Benutzer, sich mit den Daten auseinanderzusetzen.

6. Maskieren

Maskieren ist das strategische Aufdecken und Verbergen von Teilen eines UI-Elements. Durch die Änderung der Form und des Maßstabs des Umfangs eines Elements signalisiert die Maskierung eine Änderung des Nutzens, während das Element selbst identifizierbar bleibt. Aus diesem Grund sind detaillierte visuelle Elemente wie Fotos und Illustrationen ideale Kandidaten.

Aus Sicht der Benutzerfreundlichkeit können Designer Maskierung implementieren, um Benutzern zu zeigen, dass sie eine Reihe von Interaktionen durchlaufen.

7. Überlagerung

Im 2D-Raum gibt es keine Tiefe, und UI-Elemente können sich nur entlang der X- oder Y-Achse bewegen. Overlay erzeugt die Illusion einer Vorder-/Hintergrundunterscheidung im 2D-Raum von UIs. Durch die Simulation der Tiefe ermöglicht das Overlay das Ausblenden und Aufdecken von Elementen je nach Benutzeranforderungen.

Die Informationshierarchie ist ein wichtiger Aspekt bei der Verwendung von Overlay. Das erste, was Benutzer beispielsweise in einer Notizen-App sehen sollten, ist eine Liste ihrer Notizen. Dann könnte Overlay verwendet werden, um sekundäre Optionen für jede Nachricht anzuzeigen – wie Delete oder Archive .

8. Klonen

Klonen ist ein Bewegungsverhalten, bei dem ein UI-Element in andere aufgeteilt wird. Es ist eine clevere Möglichkeit, wichtige Informationen oder Interaktionsmöglichkeiten hervorzuheben.

Wenn UI-Elemente innerhalb einer Benutzeroberfläche materialisiert werden, benötigen sie einen klaren Ursprungspunkt, der mit einem bereits auf dem Bildschirm angezeigten Element verknüpft ist. Wenn Elemente einfach aus dem Nichts platzen oder verschwinden, fehlt den Benutzern der Kontext, der für sichere Interaktionen erforderlich ist.

9. Verdunkelung

Stellen Sie sich eine Milchglastür vor. Es erfordert Interaktion, um sich zu öffnen, aber es ist möglich (bis zu einem gewissen Grad) zu erkennen, was auf der anderen Seite auf uns wartet.

Die Verdunkelung funktioniert auf die gleiche Weise. Es präsentiert Benutzern eine Benutzeroberfläche, die zur Interaktion auffordert und gleichzeitig einen Hinweis auf den zu folgenden Bildschirm anzeigt. Navigationsmenüs, Passcode-Bildschirme und Ordner-/Dateifenster sind gängige Beispiele.

10. Parallaxe

Parallaxe wird angezeigt, wenn sich zwei (oder mehr) UI-Elemente gleichzeitig, aber mit unterschiedlichen Geschwindigkeiten bewegen. Auch hier ist die Absicht, eine Hierarchie zu etablieren.

• Interaktive Elemente bewegen sich schneller und erscheinen im Vordergrund.
• Nicht interaktive Elemente bewegen sich langsamer und treten in den Hintergrund.

Parallax lenkt Benutzer zu interaktiven UI-Elementen, während nicht-interaktive Elemente auf dem Bildschirm bleiben und die Designeinheit bewahren.

11. Dimensionalität

Die Dimensionalität erweckt den Anschein, als hätten UI-Elemente mehrere interaktive Seiten, genau wie Objekte in der physischen Welt. Das Verhalten wird erreicht, indem Elemente so erscheinen, als ob sie faltbar, kippbar, schwebend oder mit realistischen Tiefeneigenschaften ausgestattet sind.

Als narratives Mittel impliziert Dimensionalität, dass die verschiedenen Seiten eines UI-Elements verknüpft sind, und sorgt für nahtlose Bildschirmübergänge.

12. Dolly und Zoom

Dolly und Zoom ermöglichen es Benutzern, räumlich durch UI-Elemente zu „reisen“ oder ihre Skalierung zu erhöhen, um mehr Details anzuzeigen.

• Dolly: Dolly tritt auf, wenn sich der Standpunkt des Benutzers einem UI-Element nähert (oder weiter entfernt). Stellen Sie sich eine Person mit einer Kamera vor, die auf eine Blume zugeht, um eine nähere Aufnahme zu machen.
• Zoom: Beim Zoomen bleiben der Blickwinkel des Benutzers und das UI-Element fixiert, aber das Element vergrößert (oder verkleinert) die Größe innerhalb des Bildschirms des Benutzers. Stellen Sie sich nun vor, die Person bleibt stehen und verwendet die Zoomfunktion der Kamera, um die Blume größer erscheinen zu lassen.

Bewegung ist Kommunikation

Interaktive Erlebnisse erfordern Bewegung in all ihren spritzigen und subtilen Formen. Wenn die Prinzipien des Bewegungsdesigns eingehalten werden, werden selbst die rudimentärsten UI-Elemente zu raffinierten Agenten der menschlichen Kommunikation. Wenn die Prinzipien ignoriert werden, verkörpert Bewegung Eigenschaften, die in der natürlichen Welt nicht zu finden sind. Kein noch so ästhetischer Glanz kann die daraus resultierende Ungeschicklichkeit überwinden.

Die Beziehung zwischen Motion Design und der UX digitaler Produkte entwickelt sich schnell. Eine prinzipientreue Herangehensweise an Bewegung verhindert eine übermäßige Abhängigkeit von der flüchtigen Nützlichkeit von Trends, Werkzeugen und Techniken. Besser noch, es überbrückt die Kluft zwischen der abstrakten Bewegung von Elementen auf 2D-Bildschirmen und der Wahrnehmung von Bewegung in einer 3D-Welt.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Webanimation in der Post-Flash-Ära
• The Designer's Edge – Ein Überblick über Photoshop-Plugins
• UX Design Trends Retrospektive 2019
• Kennenlernen – Ein Leitfaden für Benutzer-Onboarding-Flows
• Mobile UX-Designprinzipien