In deinem Workshop geht es ja um Animationen im Web. In welchem Anwendungsbereich ist durch gute Animation ein Mehrwert für den Nutzer zu erwarten?
Lisi Linhart: Web-Animationen können in verschiedensten Bereichen hilfreich sein. Ein Anwendungsfall kann sein, Nutzern zu helfen, während der Navigation nicht die Orientierung zu verlieren, indem man animierte Übergänge einbaut. Ein zweiter guter Einsatzzweck von Animation: Man kann dem Nutzer Feedback geben, beispielsweise wenn er ein Formular ausfüllt, und damit zeigen, dass etwas richtig oder falsch gemacht wurde.
Was sind die wichtigsten Trends im Bereich der Web-Animation, die man 2019 kennen muss?
Linhart: Ein interessanter Trend im Bereich der User Interfaces ist das Beschreiben von Zuständen in Interfaces durch State Machines. Diese State Machines erlauben konsistentere Interfaces zu bauen, die alle verschiedenen Fälle berücksichtigen. Damit kann man auch die verschiedenen States des Interfaces mit Animationen zu verbinden. Ein andere großer und interessanter Trend ist die Entwicklung von CSS Houdini, was eine Implementierung der Animationen von CSS Variablen direkt im CSS erlauben würde.
Welche Konzepte von Animation eignen sich deiner Erfahrung nach besonders gut, um den Fokus des Nutzers zu lenken?
Linhart: Gerade bei Web-Animation ist es sehr wichtig, nicht störend für den User zu sein, wenn er mit dem Interface interagieren will. Gute Animation wird oft nur unterbewusst wahrgenommen und hilft dabei, kognitive Prozesse zu verringern. Animation kann daher hilfreich sein, wenn wir die Funktion des menschlichen visuellen Systems nutzen um mit Animationen gewisse Ziele zu erreichen. So kann man auffällige Animation nutzen um die Aufmerksamkeit des Nutzers auf ein wichtiges Interface Element zu ziehen oder unauffällige, subtile Animation um das Verständnis für Änderungen und Beziehung im Interface zu erhöhen. Zusätzlich kann Animation sehr hilfreich sein, um gewisse Abläufe interessant zu erklären. Oft sehen Nutzer liebe eine kurze Animation an als eine längere, aufwendige Textbeschreibung zu lesen.
In deinem Workshop auf den JavaScript Days 2019 wirst du auch SVG-Animation mit GSAP behandeln, was versteht man denn darunter?
Linhart: SVG ist ein ganz eigenes Fachgebiet im Web-Bereich und heute aus der Technologie nicht mehr wegzudenken. Wenn es aber um die Animation von SVG-Elementen geht, gibt es viele kleine Stolpersteine. Das macht auch Sinn, wenn man sich bewusst macht, dass SVG anfänglich nicht dazu geschaffen wurde, animiert zu werden. Dementsprechend funktioniert SVG-Animation in allen Browsern etwas unterschiedlich, was oft zu viel Optimierungsarbeit führt.
Wann sollte man eher zu GASP greifen?
Linhart: GSAP ist eine große, sehr effiziente Animationlibrary, die das Verhalten von SVG-Animationen über die Browser hinweg normalisiert hat und somit erlaubt cross-browser-kompatible, performante Animationen auf sehr einfach Art und Weise zu erstellen.
Welches Take-Away können die Teilnehmer deines Workshops mitnehmen?
Linhart: Eine Übersicht über die Art und Weisen zu bekommen, wie man Web-Animationen in User Interfaces im Web praktisch einbauen kann, sodass sie nicht störend für den Nutzer sind und gleichzeitig auch performant bleiben.
Vielen Dank für das Interview!
Interviewt von: Florian Roos
Florian Roos ist seit Januar 2019 Redakteur für Software & Support Media. Er hat Politikwissenschaft an der Technischen Universität Darmstadt Studiert und erste redaktionelle Erfahrungen in den Bereichen Games und Consumer-Hardware gesammelt.
