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

Sony Cybershot Rebranding Microsite

Erst 2005 gegründet, hat die Kölner Designagentur Elastique. (Spezialist für Online-Rich-Media und Motion Graphics) schon diverse hochkarätige Auszeichnungen eingeheimst – etwa für das Kakerlakenrennen unter

mehr

Minilogue/hitchhikers choice

N

Demo Trailer Competion

Die von Intel Intel, Digitale Kultur e.V. und Computer-Hersteller ASUS veranstaltete „Intel Demo Trailer Competition“, bei der die besten Demo-Gruppen Europas über die Website www.intel.de/demoscene mit ihren Kreationen gegeneinander

mehr

Explodierende Lautsprecher

Einen coolen Spot bringt Jung von Matt/Neckar für den Radiosender bigFM an den Start, und zwar auf VIVA, in Kinos sowie in Clubs und Diskotheken: Ein Lautsprecher explodiert, aus den Partikeln bilden sich Instrumente und am Ende eine

mehr

Anzeige

Der Countdown läuft

 Am 1. Dezember ist Einsendeschluss für Filmeinreichungen zum 14. Internationalen Trickfilm-Festival Stuttgart. Noch gibt es die Möglichkeit, Film zur Vorauswahl für eine der folgenden Sektionen einzureichen: * Internationaler

mehr

Kapitaal Typoanimation

Passend zum Wochenende gibt es noch eine wunderbar gemachte Typoanimation aus den Niederlande:"It is a typo-animation about legible signs in a city, it's an impression of the enormous amount of visual stimuli that we are harassed by every day. The

mehr

Sebastien – Der Film

Neues aus dem Hause Gobelins: Die vier Studenten Mourad Seddiki, Carole Carrion, Samuel Wambre and Geneviève Godbout, alle aus dem dritten Lehrjahr, haben unter http://www.sebastien-lefilm.net/pages/voir_le_film.html einen wunderbaren Film

mehr

Music Video mit iStopMotion

Die dreiköpfige Band mit dem Namen The Deathly Deaths realisierte ihr Musikvideo mit einer Software von Boinx. "See the World" entstand mit iStopMotion. Das Video steht auf YouTube. Wie es entstand steht im Blog der Band aus Hamilton in Neu Seeland.

mehr

Anzeige

AniFest 2007 – call for entries

Aus der Pressemeldung:We are pleased to invite you to participate in the **6th edition of the annual International Festival of Animated Films**** AniFest 2007****, taking place in Trebon, Czech Republic.In order to take part in the competition, the Entry

mehr

Kurzfilmfestivals in Berlin und Köln

Flight patterns

"Air traffic as seen by the FAA.The following flight pattern visualizations are the result of experiments leading to the project Celestial Mechanics by Scott Hessels and Gabriel Dunne. FAA data was parsed and plotted using the Processing programming

mehr

MTV sucht den Superdesigner

"MTV and onedotzero have combined to run a competition to search for the best new talent across the world to express themselves through a series of short one-minute films designed to seek out innovative new visions exploring the contemporary world."Mehr

mehr

Anzeige

Autodesk Maya und 3ds Max im Kino

Für die Produktion aktueller Kinoerfolge wurden die Animations-, 3D-Modeling und Rendering-Lösungen von Autodesk Inc ausgiebig eingesetzt. Mithilfe von Autodesk 3ds Max und Autodesk Maya schufen Artists ausgeklügelte 3D-Inhalte für

mehr

Parasol Island mit neuem Creative Director

Für mich seit langem einer der talentiertesten deutschen »Nachwuchsdesigner«, Sebastian Onufszak, ist seit kurzem bei der Düsseldorfer Agentur »Parasol Island« als Creative Director unter Vertrag. »Parasol

mehr

Profile Intermedia 9: Jetzt Early Birds Tickets sichern!

Profile Intermedia ist der Titel eines der außergewöhnlichsten Medien- und Designfestivals in Europa: unkonventionell, vielfältig, inspirierend. Profile Intermedia ist die internationale Konferenz über den inspirierenden Crossover

mehr

Animation – ein Muss für alle

Ab sofort im Handel: PAGE 02.2006

mehr

Anzeige

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