PAGE macht auf sie aufmerksam und zeigt, wie viel Arbeit in ihnen steckt – ganz gleich in welcher Form sie vorliegen: als Computer- oder Echtzeitanimation, Zeichentrick- oder Stop-Motion-Film oder in interaktiven Anwendungen.
Der folgende Beitrag wurde zuerst in PAGE 05.2017 veröffentlicht.
Autoren: Dennis Hatwieger/Angelika Eckert
INHALT
1 Animation im UX Design
2 Einsatzgebiete für Animationen
3 Ein Schuss Disney hilft immer
4 Kleine Tools, große Tools
5 Vorsicht vor Überfluss
6 Beispiele im UX Design
7 Microinteractions: Animationen & Transitions
●Animationen – richtig eingesetzt, erfüllen sie ein ganzes Bündel an Aufgaben
Sie signalisieren das Feedback auf User-Interaktionen, überbrücken Ladezeiten, geben Orientierung, lenken die Aufmerksamkeit des Nutzers in die gewünschte Richtung, verbessern die Verständlichkeit, erklären Features, drücken Emotionen aus und verleihen der Marke Persönlichkeit.
»Die Persönlichkeit der Marke zu kennen und zu wissen, wie sie sich in Bewegung ausdrücken kann, ist der Schlüssel, um mit Animationen ein einzigartiges Erlebnis über viele Plattformen und Medien hinweg zu schaffen«, betont Val Head. Die Web- und User-Interface-Designerin aus Pittsburgh, Pennsylvania, hat sich auf Motion-Styleguides und Animation-Training spezialisiert und veröffentlichte 2016 »Designing Interface Animation – Meaningful Motion for User Experience« (Brooklyn, Rosenfeld Media 2016, 39,00 Dollar, ISBN 978-1933820323). Das Buch richtet sich an Webdesigner, User-Experience-Profis und Frontend-Entwickler und ist ein echter Crashkurs in Theorie und Praxis des Motion Designs, denn es zeigt eindrücklich und gut nachvollziehbar, wie man Webanimationen erstellen muss, damit sie Zweck und Stil verbinden und sich nahtlos in die Erfahrung des Users einfügen.
So wie klassisches Branddesign der Marke über Inhalte, Typografie und Farbigkeit eine bestimmte Tonalität und Stimmung verleiht, müssen auch klassisches Web- und Mobile Design bei der Gestaltung von Animationen einen markengerechten Weg finden. Eine Möglichkeit, so Val Head, könnte ein sogenanntes Motion Audit sein, das alle vorhandenen Animationen katalogisiert und die Basis für neue Formen bildet. Oder man übersetzt die Persönlichkeitsmerkmale der Marke direkt in Animationen. Auf jeden Fall sollten Animationen nicht Selbstzweck oder nettes visuelles Beiwerk sein, sondern immer einen bestimmten Zweck verfolgen und sich nahtlos in den Rest des Designs integrieren, um die Nutzererfahrung zu verbessern.
Top
2 Einsatzgebiete für Animationen
Neben Tutorial-Animationen, animierten GIFs oder aufwendigen 2D- und 3D-Animationen, die – etwa als Hero- oder Backgroundvideo – ein Eigenleben unabhängig vom Zweck der digitalen Anwendung entwickeln können, sind für die User Experience im Web- und App Design insbesondere drei Animationstypen relevant:
1. Page Transitions bilden das Grundgerüst jedes digitalen Interfaces und spielen insbesondere im Mobile Design eine große Rolle, um den User beim Wechsel zwischen Unterseiten zu führen. Damit der Nutzer die Orientierung auf dem kleinen Display nicht verliert, stellen Designer die Inhalte der Unterseiten nicht einfach durch hartes Neuladen dar, sondern blenden sie weich mittels Animation ein. Wechselt man beispielsweise in der Facebook-App vom News Feed zu den Notifications, bewegt sich der aktuelle Content links aus dem Bild hinaus und der neue Content von rechts herein. Animationen helfen dem User, den an sich unsichtbaren digitalen Raum außerhalb des Viewports zu imaginieren, sodass er quasi die virtuelle Karte des Interfaces und der Informationsarchitektur vor dem inneren Auge hat. Auf diese Weise fühlt sich die App an wie aus einem Guss.
Dank aktueller Webtechnologien wie der Facebook-User-Interface- und JavaScript-Bibliothek React, die auch Instagram, WhatsApp, Yahoo und Airbnb einsetzen, wird sich dieser Trend mittelfristig auch im Web- und App Design widerspiegeln. Ziel von React ist es, dass Entwickler kein oder wenig HTML und dafür nur noch JavaScript selbst schreiben müssen. Der JavaScript-Code generiert dann den HTML-Code. Ein Beispiel: Früher luden Websites wie beispielsweise Trivago die komplette Seite nach Eingabe der Suchanfrage neu, um die Suchergebnisse anzuzeigen. Dank React läuft es nun viel eleganter: Statt der kompletten Seite wird nur der Bereich neu geladen, der die verschiedenen Hotels anzeigt.
2. Microinteractions haben ebenfalls eine große Bedeutung für Website-User. Ein gutes Beispiel ist Twitters »Gefällt mir«-Interaktion. Klickt man auf das graue Herz unter einem Tweet, entlädt sich dieses in einem Schwall aus buntem Konfetti, bevor es endgültig rot wird. Diese kleine Animation ist nicht nur eine visuelle Reaktion auf die Interaktion des Nutzers, sondern unterstreicht auch die emotionale Bedeutung eines Klicks auf »Gefällt mir«. Im Ergebnis also hauchen Microinteractions dem digitalen Produkt Leben ein und machen Interaktionen emotional nachvollziehbar.
3. Dekorative Animationen und Emojis erfüllen ihren Zweck, wenn man eine Website emotional aufladen oder die Nutzer in einem komplexen Navigationsprozess unterstützen möchte. Ein schönes Beispiel ist die mobile Dropbox-App: Hier erzählen die Designer mithilfe animierter Illustrationen eine Geschichte, die den Onboarding-Prozess wie in einem Tutorial unterstützt. Zwar ist diese Animation für den Nutzer nicht zwingend notwendig, doch im kritischen Moment der Registrierung für einen Dienst schafft sie ein positives Gefühl und kann so die Convergence sichern.
Top
3 Ein Schuss Disney hilft immer
All diese Animationsarten wollen von Designern gestaltet werden. Dazu braucht es vor allem ein Grundverständnis für Animationsprinzipien. Bereits in den 1930er Jahren entwickelten die Walt-Disney-Animationsdesigner Frank Thomas und Ollie Johnston zwölf Prinzipien der Animation, die ihre Gültigkeit bis heute bewahrt haben.
Auch wenn Interface-Animationen in einem anderen Medium arbeiten, zeigen Disneys Prinzipien dennoch sehr effizient, wie man Animationen gestaltet, die die reale Welt widerspiegeln und effektiv kommunizieren. Das wichtigste Prinzip ist »Squash and Stretch«, weil es animierten Objekten wie beispielsweise einem Ball durch das Verleihen physikalischer Eigenschaften wie Gewicht und Flexibilität Leben einhaucht. Übertrieben kann eine Streckung oder Quetschung einen komischen Effekt haben.
»Anticipation« beschreibt die Vorbereitung auf ein bevorstehendes Ereignis: Bereitet sich ein Character beispielsweise auf einen Sprung vor, muss er erst einmal in die Knie gehen. »Staging« lenkt den Blick der Nutzer in eine bestimmte Richtung. »Slow in and Slow out« simuliert die Be- und Entschleunigung eines Körpers zu Beginn und Ende einer Bewegung. Eine Animation wirkt wesentlich realistischer, wenn sie mehr Zeichnungen also Frames per Second in der Nähe von Anfang und Ende einer Handlung hat. Theoretische Grundlagen zum Thema kann man bei Wikipedia nachlesen. Zudem zeigen die Videos hier, hier und hier Disneys zwölf Prinzipien sehr anschaulich in Bewegung.
»Anticipation«, »Timing« und »Solid Drawings« sind nur drei von Disneys zwölf Principles of Animation. Der New Yorker Motion Artist und Animation Director Vincenzo Lodigiani hat sie sehr schön nachvollziehbar und zeitlos umgesetzt.
Top
4 Kleine Tools, große Tools
Hat man diese grundlegenden Prinzipien erst einmal verinnerlicht, erprobt man diese am besten hands-on. Dank der vielen schlanken Prototyping-Tools, die in den vergangenen Jahren auf den Markt kamen, ist dies auch für Designer ohne Programmierkenntnisse einfacher denn je. Wireframing-Werkzeuge wie Principle, Flinto oder mitya unterstützen bei der Exploration und eignen sich hervorragend, um Page Transitions, Microinteractions und Emojis und Co zu gestalten. Vom Prinzip her funktionieren sie wie die Präsentationsprogramme Keynote oder PowerPoint. Der Designer erstellt verschiedene Stadien einer Seite oder eines Elements und überlässt es dann dem Programm, diese zu einer flüssigen Animation zu verbinden. Anders als bei den Präsentationsprogrammen hat man jedoch eine große Bandbreite an Parametern zur Verfügung, wie beispielsweise Easing oder Timing. Nur Mitya erlaubt den Export von HTML Code, Flinto und Principle veranschaulichen Prototypen in der iOS App.
Im Aufwind befindet sich momentan auch wieder das klassische Animationsprogramm After Effects von Adobe. Eigentlich ein Tool, um Animationen für Videos zu erstellen, war After Effects für Web- und App-Animationen lediglich bedingt geeignet, denn komplizierte Animationen ließen sich nur mit großem Programmieraufwand realisieren. Als Designer musste man also bei der Animationsgestaltung ein erhebliches Maß an Empathie für den Developer mitbringen. Doch dank Plug-ins wie dem von der Airbnb-Designabteilung entwickelten Lottie, Marcus Eckerts Squall oder Facebooks Keyframes lassen sich Animationen nun direkt in Code umwandeln, was nicht nur alle After-Effects-affinen Designer, sondern ganz besonders die Entwickler freut.
Für Designer, die keine Angst vor Code haben oder gerade dabei sind, sich in diese Welt einzuarbeiten, ist die Prototypingsoftware Framer eine echte Alternative. Mit dem grafischen Editor kann man schnell realistische Animationen ausprobieren, während das Programm die Animationsparameter direkt in Code umsetzt, den man dann an die Entwickler weitergeben kann. Dank des grafischen Interfaces lassen sich Animationen einfach verändern, und Framer schreibt im Hintergrund brav den JavaScript-Code mit. Weiterer Vorteil: Die große Framer-Community steht einem bei Fragen und Problemen rund um die Programmierung mit Feedback zur Seite.
Top
5 Vorsicht vor Überfluss
Animationen können sowohl positive als auch negative Auswirkungen auf den Zugang zum Interface haben. Sind sie geschickt eingesetzt, reduzieren sie, ganz nach der Devise »Don’t make me think«, die kognitive Last und helfen den Usern, Zustandsänderungen leichter zu verfolgen und zu verstehen.
Diese eigentlich positiven Aspekte machen sich Designer mitunter aber etwas zu übereifrig zunutze.
»Manche Agenturen neigen dazu, Seiten überzuanimieren, weil sie damit Awards gewinnen wollen«
meint Matthias Mentasti, Creative Director und Co-Founder des Digital Branding Studios wild in Wien. So würden Award-Websites wie Awwwards oder The Favorite Website animierte Seiten eher vorschlagen als nicht animierte. Auch Mike John Otto, Geschäftsführer und Executive Creative Director Digital bei Philipp und Keuntje in Hamburg, ist von zu viel Bling-Bling auf Websites genervt: »Eine Website ist überanimiert, wenn die Form, also die Animation als Stilelement, vom Inhalt ablenkt oder den User überfordert.« Weiter gibt er zu bedenken, dass man auf Animationen eher verzichten sollte, wenn sie die Seite so performancelastig machen, dass der User die Journey lieber früher als später abbrechen würde. Jürgen-Rahlff Lindner, Creative Director bei DDB Tribal in Hamburg, schüttelt manchmal nur den Kopf:
»Eine Animation ist überflüssig, wenn sie nicht auf das User-Erlebnis abgestimmt ist und exzessiv ohne relevanten Grund eingesetzt wird.«
Wie viel Animation nötig ist, hängt immer vom Kontext der Site oder App ab. Auf keinen Fall darf sie den User daran hindern, zum Ziel zu kommen. Und auch wenn Designer Animationen zurzeit in erster Linie zur Unterstützung der User Experience einsetzen, um Ladezeiten zu überbrücken oder gewisse Punkte hervorzuheben – Spaß, vielleicht sogar ein bisschen so wie in der Welt der Walt Disney Studios, sollten sie schon machen.
Top
6) Beispiele im UX Design
siehe PAGE 05.2017 und hier auf PAGE Online
>> Animation schafft Markenidentität: Wild für Bang & Olufsen
>> Kaufprozess reanimieren: Sh|ft TWT Strategy Consultants für ROSE Bikes
>> Wellenanimation als Grundmotiv: Spring/Summer für die Danish Shipownersʻ Association
>> Animation trifft Technikgeschichte: IBM Design für IBM
Top
Zum Autor:
Dennis Hatwieger studierte im Fachbereich Interaction Design an der Hochschule Magdeburg-Stendal und präsentiert nun stolz seine Masterarbeit »Dokumentation von dynamischen und interaktiven Elementen in Interfaces«.
Microinteractions: Animationen & Transitions
Im PAGE eDossier »Microinteractions: Animationen & Transitions« finden Sie Best Practices für Web & Mobile, CSS3-Coding-Tipps sowie Tools, Libraries und Generatoren fürs Prototyping & Wireframing:
Top
PAGE 04.2020
PAGE 03.2020