Webanimationen: So verleihen Sie Ihrer Web App den letzten Schliff

Veröffentlicht am 10.06.2024 von Sascha Lehmann

Wenn es nach Entwicklern und Kollegen geht, die ich bisher in verschiedensten Projekten kennenlernen durfte, dann fallen hier Phrasen wie

• “Viel zu zeitaufwändig”
• “Unnötiger Boilerplate-Code”
• “Haben keinen wesentlichen Mehrwert”
• “Verursachen doch nur Performanceprobleme”

Ich könnte noch eine ganze Weile mit dieser Aufzählung weitermachen. Geht es Ihnen vielleicht genauso, und haben Sie während des Lesens eventuell sogar zustimmend genickt? Dann sind Sie hier genau richtig – ich kann Ihnen nämlich beweisen, dass Animationen mehr sind als “Klicki-Bunti” oder “Effekthascherei”. 

Im Gegenteil: Richtig eingesetzt sind sie ein wichtiges Steuerungs- und Orientierungswerkzeug für unsere Nutzer, das sich (mit etwas Aufmerksamkeit) nicht zwangsläufig zum Performancekiller für unsere Webanwendungen herausstellt.

Warum wir Animationen brauchen

Wir Menschen sind von Natur aus sehr visuell geprägte Wesen. Das hängt vor allem mit unserer Evolution zusammen und damit, wie das menschliche Auge funktioniert. 

Peripheres Sichtfeld (generiertes und bearbeitetes Bild)

Wir sehen nämlich nur an einem zentralen Punkt unseres Auges (Makula) wirklich scharf. Das ist dort, wo unser Fokus liegt. Alles drum herum verschwimmt leicht und bildet unser s.g. “Peripheres Sichtfeld”. Wenn sich hier etwas regt, können wir blitzschnell unseren Fokus dorthin verlagern, um auf eventuelle Gefahren reagieren zu können. 

Diesen Effekt können wir uns auch in unseren Anwendungen zu Nutze machen, um beispielsweise den Fokus unseres Nutzers dorthin zu verlagern, wo wir ihn gerade gerne haben möchten. Jedoch sollten wir mit diesem Wissen sorgsam umgehen. Zu häufig eingesetzt oder schlecht platziert, können Animationen dann nämlich schnell störend oder gar ablenkend wirken. 

Ich denke, jeder von uns hat schon Erfahrungen mit z.B. ständig aufblinkenden Notification-Bannern gemacht, die im falschen Moment – nämlich genau dann, wenn wir uns eigentlich auf einen Task konzentrieren wollen – unseren kostbaren Fokus klauen.

Was uns Menschen außerdem den Alltag in der digitalen Welt schwierig macht, ist unsere s.g. “Change Blindness”. Dabei entgehen uns gerne einmal wichtige Details, wenn wir ähnliche Bilder oder Bereiche mit größeren und kleineren Änderungen gezeigt bekommen. Hier ein kleines Beispiel:

Beispiel für Change Blindness, erkennen Sie den Unterschied? (Quelle: Wikipedia) 

Haben Sie alle sechs Änderungen bemerkt? Die “größeren” Unterschiede fallen meist direkt ins Auge, jedoch übersehen die meisten Menschen die subtilen Änderungen im Bild. 

Übertragen wir diese Erfahrung nun auf die digitale Welt. Editieren wir beispielsweise ein komplexes Formular, in dem Felder abhängig voneinander aus- oder eingeblendet werden, können wir – ohne die bewusste Hervorhebung durch Animationen – gerne einmal die Übersicht verlieren oder uns desorientiert fühlen. Das gilt es für eine gelungene UX auf alle Fälle zu verhindern.

Aufgaben von Animationen in der UX

Uns wird so langsam bewusst: Animationen übernehmen wichtige Aufgaben, wenn es um unsere Wahrnehmung im Alltag geht. Die Lenkung des Fokus, die Kommunikation von “State Change” und die “Verhinderung von Desorientierung” haben wir bereits kennengelernt. Doch welche Aufgabe erfüllen Animationen noch darüber hinaus?

Aufgaben der Animationen in der UX (selbst erstellt)

Sie helfen uns etwa noch dabei, ein sogenanntes “Mentales Modell” unserer Anwendung aufzubauen. Aber was bedeutet das? Aus unseren täglichen Streifzügen durch das World Wide Web oder durch die Nutzung unserer Smartphones haben wir bereits diverse gängige “Modelle” erlernt. 

Beispielsweise könnte mir jeder bestimmt aus dem Stehgreif sagen, wo in einem Onlineshop der Warenkorb zu finden ist, oder wo sich die generelle Artikelsuche befindet. (In der Regel ist der Warenkorb in der oberen rechten Ecke und die Suchleiste eher zentral angesiedelt.) 

Ähnlich funktioniert das auch mit Animationen. Durch diverse Wischgesten haben wir gelernt, dass wenn ich etwas löschen möchte, oder tiefer in die Navigationsstruktur einer Anwendung eintauchen möchte, dies mit bestimmten Animationen verbunden ist. Durch das Wischen vom Bildschirmrand kann ich Kontextmenüs in sichtbarem Bereich bewegen. Wenn ich in einer Liste ein Item nach rechts wische, kann ich es in der Regel löschen: 

Wischanimation aus Gmail-App (selbst erstellt)

Wenn wir uns dieser “gelernten” Muster bewusst sind und sie in unserer Applikation anwenden, tragen wir einen wesentlichen Teil dazu bei, dass der Benutzer sich intuitiv durch unsere Anwendung bewegen kann.

Und last but not least ist da noch der sogenannte “Vergnügens”- oder “Delight”-Faktor.

Der Delight-Faktor macht den Unterschied

Animationen sind natürlich auch ein hervorragendes Stilmittel und können künstlerisch genutzt werden, um unsere Nutzer zu überraschen oder ihnen vielleicht ein kleines Lächeln auf das Gesicht zu zaubern.

Ein sehr gutes Beispiel für eine derartige Integration von Animationen ist die Management-Software Asana. Dieses Produkt nimmt den Delight-Faktor sehr ernst und ist fester Teil des gesamten UX-Konzeptes. Bei jedem Taskabschluss gibt es beispielsweise eine gewisse Wahrscheinlichkeit, dass eines ihrer “Celebration Creatures” über den Bildschirm huscht. 

Man kann sich nun natürlich fragen: “Und was bringt mir das?” Naja, im Grunde genommen nichts. Aber egal wie schlecht die Laune momentan vielleicht sein mag, oder wie nervtötend der Task gerade war, verblüfft die Animation kurz und lässt den Nutzer innerlich vielleicht sogar etwas schmunzeln. Und insgeheim entsteht nun bei jedem Taskabschluss eine gewisse innerliche Vorfreude, wann und welche Kreatur wohl das nächste Mal erscheint.

Es sind genau diese Dinge, die auf den ersten Blick vielleicht nutzlos erscheinen, aber den Nutzer durch den “Spaßfaktor” unterbewusst immer wieder zur Anwendung zurückkehren lassen und eine positive Assoziation mit dem Produkt hervorrufen. 

Asana Celebration Creature bei Taskabschluss (Quelle: Zapier) 

Ich will damit jetzt nicht bewirken, dass Sie, nachdem Sie den Artikel gelesen haben, losziehen und bunte Tiere in Ihre Anwendung einbauen. Sondern ich will Ihnen lediglich vor Augen führen, wie Animationen – richtig eingesetzt – für Kunden das Zünglein an der Waage sein können, ob sie unser Produkt oder das der Konkurrenz bevorzugen.

Wann sollte ich mir Gedanken machen?

Wenn Animationen also so entscheidend sein können, wann sollte ich mir Gedanken über deren Einsatz machen? In meinen Kundenprojekten muss ich leider oft feststellen, dass Animationen – wenn überhaupt – immer erst gegen Ende des Projekts ins Spiel kommen. Reicht die Zeit im Projekt noch aus, sollen sich meist die Entwickler in Eigenregie darum kümmern, wo und wann Animationen angebracht sind.

Was bei so einer Vorgehensweise herauskommt, kann man sich bestimmt selbst ausmalen. Oder vielleicht erkennen sich vielleicht gerade einige in dieser Situation wieder. Das Ergebnis beinhaltet meist eine kunterbunte Zusammenstellung aus diversen Animationen, duplizierten Implementierungen, mit unterschiedlichen Timings und/oder Easings. Je nach Entwickler wird auch gerne mal nach dem Motto “Viel hilft viel” agiert.

Wenn wir uns nochmal ins Gedächtnis rufen, was wir bisher gelernt haben, sollten alle Alarmglocken läuten. Denn genau aufgrund von diesen Vorgehensfehlern genießen Animationen – meiner Meinung nach – ihren schlechten Ruf. Ohne Struktur und bewusstem Einsatz sind sie oft mehr schlecht als recht. 

Doch wie kann man dem entgegenwirken? Animationen müssen von Anfang an, also bereits im Designprozess, miteinbezogen werden. Im Optimalfall übernimmt diese Aufgabe der Designer oder Designverantwortliche. Nur so kann gewährleistet werden, dass Animationen sinnvoll und strukturiert angewendet werden und die UX unterstützen.

Technische Möglichkeiten

Jetzt aber genug mit der Theorie. Schließlich wollen wir ja auch wissen, wie Sie diese Animationen letztendlich “auf die Straße” bzw. ins Web bekommen. Prinzipiell stehen uns dafür folgende Technologien zur Verfügung.

Technische Umsetzungsmöglichkeiten von Animationen im Web (selbst erstellt)

Die einfachste Art und Weise stellen die CSS Transitionen und Animationen dar. Mit ihnen dürften die meisten Webentwickler im Laufe ihrer Karriere schon in Berührung gekommen sein, auch wenn es nur für den Hover-Effect eines Buttons war. Sie sind in die CSS Syntax integriert und dadurch einfach zu erlernen und anzuwenden. Durch die Strukturierung des Animations-Codes in Form von Klassen können sie außerdem optimal auf Wiederverwendbarkeit ausgelegt werden.

Zum Codepen-Beispiel: https://codepen.io/Sascha-Lehmann/pen/KKJOXJb

Grundlegende Animationen von Elementen, Komponenten und das Reagieren auf Nutzerinteraktionen wie :hover, :focus etc. lassen sich problemlos damit abbilden.

Allerdings stoßen wir an Grenzen, wenn wir Animationen aus unserem Code heraus triggern, deren Animationstimeline feingranularer steuern, oder Elemente animieren wollen, die vom DOM entfernt werden. (Beispielsweise, wenn wir Elemente aus einer Liste entfernen.) Wir können schließlich nichts animieren, was sich zu diesem Zeitpunkt nicht mehr im DOM befindet.

Hierbei kommt uns die Web Animations API zur Hilfe. Sie bildet die Schnittstelle zur CSS Animationsengine und bietet die Möglichkeit, Animationen mit Hilfe von JavaScript zu definieren und zu manipulieren.

Zum Codepen-Beispiel: https://codepen.io/Sascha-Lehmann/pen/YzBmEzx

Bei genauerer Betrachtung der Syntax fällt auf, dass sie im Wesentlichen mit der CSS Syntax übereinstimmt. So mächtig diese API auch ist, bei komplexeren Animationen kann der nötige Code schnell viele Zeilen Code umfassen. An diesem Punkt gilt es in der Regel, sich Gedanken über Abstraktionsebenen zu machen oder ggf. sogar auf Frameworks zurückgreifen, die diesen Job übernehmen.

Etablierte Animations-Frameworks wie Greensock, Popmotion oder Lottie sind dabei mächtige Werkzeuge. Jedoch lohnt es sich, bei deren Auswahl zuvor genauer hinzusehen. Nicht jedes Framework eignet sich für jeden Anwendungsfall und kommt immer mit einem gewissen “Gewichtsfaktor”, was die letztendliche Bundelsize oder die Treeshakability angeht. 

Greensock beispielsweise ist der “mächtige Allrounder”. Mit diesem Framework können Sie so ziemlich alle Anwendungsfälle abdecken. Allerdings schlägt es auch mit einem npm-Package von knapp 4MB zu Buche. Wenn Sie auf der Suche nach einer leichtgewichtigen Abstraktionsebene für die View-Transition-API sind, ist Popmotion die richtige Adresse. Und falls Sie aufwendige Animationen mit Adobe After Effects erstellen und unkompliziert ins Web bringen wollen, sollten Sie sich unbedingt einmal Lottie anschauen. 

So einfach wie möglich, so komplex wie nötig

Doch wie treffe ich jetzt für meinen Anwendungsfall die richtige Entscheidung? Dafür gibt es leider kein Patentrezept. Allerdings kommt es auf die richtige Mischung an. Wenn es nach mir geht, sollte bei Animationen immer nach dem Prinzip “So einfach wie möglich, so komplex wie nötig” agiert werden. 

Natürlich kann direkt von Anfang an auch ein Framework mit einbezogen werden. Prinzipiell spricht da nichts dagegen. Doch wenn sich die generelle Komplexität der Animationen innerhalb der Anwendung lediglich auf einem einfachen Level bewegt, sollte man sich vielleicht fragen, ob man den unnötigen “Ballast” eines Frameworks in diesem Fall durch CSS Animationen ersetzen könnte. 

Webanimationen - Zusammenfassung 

Wir haben nun gesehen, dass hinter Animationen wesentlich mehr steckt als bewegte bunte Bilder und Effekthascherei, und ich hoffe, ich konnte mein Ziel erreichen und auch Sie davon überzeugen.

Animationen sind aufgrund unserer Natur wichtige Werkzeuge für das Design einer User Experience, um Vorgänge in der digitalen Welt besser erfassbarer zu machen und den Nutzer zu leiten. Außerdem müssen sie für den größtmöglichen Nutzen bereits von Anfang an im Designprozess mitgedacht und eingeplant werden. Nur so können wir Frustrationen bei Entwicklern und Anwendern vermeiden. 

Und zu guter Letzt: Nutzen Sie nicht gleich den "Framework-Vorschlaghammer", sondern tasten Sie sich, von einfach bis komplex, an Ihre Animationslösung heran.