SERVICES
Motion Design
Motion und Emotion unterscheidet nur ein einzelner Buchstabe. Zufall? Wir glauben nicht. Animationen können interaktive Produkten lebendig wirken lassen, wecken Gefühle und den verstärken den Joy-of-Use, die Freude während der Nutzung.
Motion Design ist keine Spielerei. Animationen werden funktional eingesetzt um Inhalte zu kommunizieren, Zusammenhänge zu zeigen und den Nutzer zu entlasten.
Animationen sind fester Bestandteil des User Experience Design Werkzeugkastens.
Was haben Disneyfilme und User Interfaces gemeinsam?
1981 veröffentlichten Ollie Johnston und Frank Thomas das Buch “The Illusion of Life”. Die beiden Disney Animatoren brachen ihre jahrelange Erfahrung in 12 Animationsprinzipien herunter. Diese bilden die Grundlage für Charakteranimation.
Wo liegt nun die Gemeinsamkeit von einem User Interface zu sprechenden Mäusen und tolpatschigen Hunden? Die 12 “Disney-Animationsprinzipien” bieten Möglichkeiten, Motion Design effektiv und mit hoher Animationsqualität in moderne User Interfaces zu integrieren. Das Ergebnis:
- Bewegungen wirken weniger mechanisch, wodurch sie für den
Betrachter angenehmer sind. - Sie schärfen die Aussage der Animation und transportieren Informationen.
Nach dem “Slow-In & Slow-Out” Prinzip beginnen oder enden Bewegungen in der Echten Welt nicht ruckartig. Vielmehr besitzen sie eine beschleunigende und eine bremsende Kraft. Ein Winken ist nicht nur die Bewegung einer Hand von links nach rechts. Sie enthält die Beschleunigung, das Abbremsen und nach dem Stillstand ein erneutes Beschleunigen der Hand.
Die Motivation für Motion Design in User Interfaces
Die Vorteile der Prinzipien für Charakter Animation lassen sich auf User Interface Animationen anwenden. Bewegungen wirken natürlich und Inhalte sind leichter verständlich. Dem Einsatz von Animationen in der Benutzeroberfläche liegt jedoch eine grundlegend unterschiedliche Motivation zu Grunde.
Animationen in Trickfilmen sind verspielt und sollen unterhalten. In digitalen Produkten dienen Animationen dazu, die User Experience zu unterstützen. Sie sind nicht extravagant sondern subtil. Sie erklären das mentale Modell und lassen die Anwendung taktiler wirken.
Die wichtigesten Prinzipien für Motiondesign in User Interfaces
Nicht alle Animationsprinzipien lassen sich in der Gestaltung von Animationen für User Interfaces übertragen. “Straight Ahead & Pose to Pose” und “Timing” beziehen sich auf Eigenheiten der Erstellung von Animationen, die durch Keyframe Animationen hinfällig sind. “Solid Drawing” und “Appeal” beziehen sich auf die Gestaltung der Charaktere und Welten innerhalb der Animation.
Die übrigen Prinzipien können im UX Design einfach realisiert werden. Sie stiften Charakter, erzeugen Dynamik, kommunizieren Werte und Informationen.
Slow-In & Slow-Out
Das Manipulieren der Geschwindigkeit einer Bewegung wird auch als “Easing” bezeichnet. Easing kann eingesetzt werden um Animationen Natürlicher wirken zu lassen.
Follow Through
Eine Bewegung die leicht über das Ziel hinausschießt wird als “Follow Through” oder “Overshoot” bezeichnet. Dieses Prinzip kann als Stilmittel eingesetzt werden um Menschlichkeit oder Natürlichkeit zu kommunizieren. Ohne wirken Bewegungen nüchtern und perfektionistisch.
Overlapping Actions
Bewegungen laufen selten synchron oder symmetrisch ab. Overlapping Actions beschreibt, wie im User Interfaces einzelne Bewegungen versetzt, mit unterschiedlichen Längen und asynchron ablaufen können, um dem Produkt einen natürlichen und weniger mechanischen Charakter zu geben.
Anticipation
Kleine Bewegungen können genutzt werden, um große Bewegungen anzukündigen. So erscheinen diese natürlicher und der Nutzer wird nicht von ihnen überrascht. Dadurch können beispielsweise die Folgen einer Aktion angedeutet werden.
Durch Antizipationsbewegungen kann die Aufmerksamkeit des Nutzers gelenkt werden oder die Interagierbarkeit eines Objektes signalisiert werden.
Staging
Animationen können Zustände, Zusammenhänge oder Hierarchien kommunizieren. Um dies zu erreichen, müssen Ablauf und Aufbau abgestimmt werden. Das nennt man Staging. Durch eine einzigartige und zeitlich leicht abgesetzte Erschein-Animation eines CTA (Call-to-Action) kann die Signifikanz verdeutlicht werden.
Secondary Action
Um eine Bewegung hervorzuheben, können zusätzliche animierte Elemente temporär eingeblendet werden.
Arcs
Eine Bewegung verläuft in der natürlichen Welt selten entlang einer geraden Linie. Gekrümmte Bewegungspfade erzeugen das Gefühl natürlicher Bewegung.
Squash & Stretch
Objekte werden entlang des Bewegungspfades lang gezogen. Beim abbremsen werden sie auseinander gedrückt. Im Motion Design von User Interfaces kann dieses Prinzip eingesetzt werden, um Animationen verspielter wirken zu lassen.
Exaggeration
Dezente Animationen können leicht übersehen werden. Mit übertriebenen Bewegungen kann die Aufmerksamkeit des Nutzers gesteuert werden. Auch Relevanz lässt sich damit betonen.
Weitere Themen
You Like to Move it, Move it?
Du möchtest Schwung in dein Produkt und deinen Markenauftritt bringen? Wir helfen dir, die passenden Keyframes zu setzen. Melde dich und lass uns gemeinsam von “boring” zu “boing” reisen!
