Animation

24 Bilder pro Sekunde – und der Eindruck von Bewegung ist (fast) perfekt. Oder sagen wir: bewegt sich auf Tonfilmniveau. Längst sind im Kinofilm und Gaming-Bereich viel höhere Bildfrequenzen Standard, und animierte Bildinhalte erreichen uns unterhalb der Wahrnehmungsschwelle, weil sie einfach überall sind …

mehr

Pictoplasma in Berlin

Mark Ryder Schon mal vormerken: Ab nächster Woche findet die dritte Pictoplasma Konferenz in Berlin statt, bei der sich vom 19. bis 21. März Characterdesigner und Animationsspezialisten im Haus der Kulturen der Welt einfinden. Begleitend

mehr

The Best of Flash on the Net: Deadline am 30. Juni

Cinematheque - streaming media project environments, die Stream-Abteilung des "ersten globalen Museums" von The Network, sucht bis Ende Juni den besten Flash-Film im Web. Dabei werden Clips der letzten 9 Jahre berücksichtigt. Das Motto des

mehr

Toca Me Opening Titles

Still © Strukt Wer die Toca Me-Designkonferenz am vergangenen Wochenende in München verpasst hat - keine Sorge. Die 3D-animierten Opening Titles des Wiener Designstudios Strukt können hier noch einmal angeschaut werden. Link zum Clip

mehr

Plug Out Boy

Anzeige

RenderQueue in AfterEffects?

Chris vom http://themographblog.com/ hat einen feinen Artikel über die Render-Queue in After Effects geschrieben. Alle die noch Fragen haben oder die Rendereinstellung noch nie so richtig verstanden haben, finden dort bestimmt die Antwort.

mehr

Urbanscreen

Ist zwar schon ein bisschen älter – jedoch weiterhin sehr sehenswert: Urbanscreen aus Bremen hatte im September 2007 ein Haus »am Ecke« im Bremer »Viertel« mit einer interessanten Videoinstallation bespielt. Die

mehr

Visuelle Opulenz beim Opernball

Beim Wiener Opernball heute abend darf sich auch die VJ-Culture fein herausputzen: Studio Strukt aus Wien wird die edle Lounge des Weinguts Esterházy standesgemäß als Rauminstallation mit animierter Bildtapete ins mediale Licht

mehr

alva noto. xerrox – Konzert von und mit Carsten Nicolai

Am Samstag, 21. Februar, stellt Carsten Nicolai um 21 Uhr im Lichthof der Hamburger Galerie der Gegenwart sein neustes Musikprojekt „xerrox vol. 2“ vor. Dafür entwickelte er eine Software nach dem Prinzip der alten xerox-Kopierer, mit

mehr

Anzeige

‚Stereoscopic Storytelling’ beim invaZion’09 Challenge

Achtung, Animatoren: Am 31. März ist Einsendeschluß für Kurzfilme im 3D-Stereo-Verfahren beim invaZion '09 Challenge Wettbewerb. Prämiert werden Werke, die den 3D-Effekt für ihre Story gelungen zu nutzen wissen

mehr

Physical Computing – Drawing Machine by Paul Hoc

Grafikdesign durch Programmierung

Hana from Andreas Muller on Vimeo.Andreas Müller, NANIKA London, zeigt ein wunderschönes Beispiel von dynamischem Grafikdesign durch Programmierung.Screenshots: http://flickr.com/photos/hahakid/sets/72157602261925896/Weitere

mehr

Happyness Factor, Teil III

Anzeige

Navigon-Clip

Ace of Mace

»Ace of Mace« ist ein wirklich gelungenes Online-Game, das von Studenten der FH Salzburg für den Kunden »Wiberg« im Rahmen einer Semesterarbeit entwickelt wurde. Für die Idee, Konzept und Realisierung zeichnen sich

mehr

Vortrag Gamedesign

D

Slut sucht Videomacher

Nach den »Fantastischen Vier« jetzt also »Slut«: Erneut sucht eine Kapelle Menschen im Netz die Lust haben das Musikvideo zu einem Lied zu gestalten. »Die Ingolstädter Band »Slut« hat ihren Song "Tomorrow

mehr

Anzeige

Filme von Deli Pictures

DELI PICTURES aus Hamburg hat eine kurze Geschichte des Marketings in einer Corporate-Animation für Scholz & Friends zusammengefasst, zu sehen etwa hier. Außerdem freut man sich über den Spot des talentierten Jungdesigners und

mehr

Cut&Paste 2009

Grafikdesigner aus aller Welt können 2009 wieder ihre Skills beim Designwettbewerb Cut&Paste unter Beweis stellen. Die Grafik-Battles finden dieses Mal in 16 Städten rund um den Globus statt. Die Kandidaten erhalten vor dem Wettbewerb

mehr

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: Anima­tio­­nen & 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 Pitts­burgh, Pennsylvania, hat sich auf Motion-Styleguides und Animation-Training spezialisiert und veröffentlichte 2016 »Designing Interface Anima­tion – 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 Front­end-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 soll­ten 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 Nutzer­erfahrung 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 digita­len 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üh­ren. 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 Con­tent 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 schrei­ben müssen. Der JavaScript-Code generiert dann den HTML-Code. Ein Beispiel: Früher luden Web­sites 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 Mo­ment 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. Be­reits 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 Prinzi­pien dennoch sehr effizient, wie man Animatio­nen gestaltet, die die reale Welt widerspiegeln und effektiv kommunizieren. Das wichtigste Prin­zip 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 Prinzi­pien sehr anschaulich in Bewegung.

Animation im UX Design

Animation im UX Design

Animation im UX Design

»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 ein­mal verinnerlicht, erprobt man diese am bes­ten 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. Wire­framing-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 funktionie­ren sie wie die Präsentationsprogramme Key­note 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 Pro­totypen in der iOS App.

Im Aufwind befindet sich momentan auch wie­der 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 Animatio­nen ließen sich nur mit großem Programmier­aufwand realisieren. Als Designer musste man al­so bei der Animationsgestaltung ein erhebli­ches Maß an Empathie für den Developer mit­brin­gen. 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 ein­zuarbeiten, ist die Prototypingsoftware Framer eine echte Alternative. Mit dem grafischen Editor kann man schnell realisti­sche 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 Hoch­schu­le Magdeburg-Stendal und präsentiert nun stolz seine Masterarbeit »Dokumentation von dynamischen und interaktiven Elementen in Interfaces«.


Microinteractions: Anima­tio­­nen & Transitions

Im PAGE eDossier »Microinteractions: Anima­tio­­nen & Transitions« finden Sie Best Practices für Web & Mobile, CSS3-Coding-Tipps sowie Tools, Libraries und Generatoren fürs Proto­ty­ping & Wireframing:

Button, call to action, onlineshop, PAGE


Top