Lottie - Animation in der App Gestaltung

Heute reicht es nicht mehr aus, als UI Designer nur statische Screens einzelner Zustände zu gestalten, um das Aussehen einer App in ihrer endgültigen Form zu vermitteln. Voneinander losgelöste Screens zu visualisieren und anhand dieser Vorgaben umzusetzen, hat lange nicht berücksichtigt, dass für Nutzerinnen und Nutzer eine klassische und interaktive Animation genauso wichtig ist, um eine App effektiv bedienen zu können. Definiert der Designer die Animationen und interaktive Verhaltensweisen nicht, setzt der Programmierer diese in der Regel beliebig um, was zu Inkonsistenzen in der Nutzererfahrung führen kann.

Bis vor kurzem wurde Animation innerhalb einer App relativ stiefmütterlich behandelt. Dass sich diese Praxis überhaupt so lange halten konnte, liegt an den herkömmlichen Design Tools, die insbesondere für den Printbereich oder die Filmproduktion entwickelt wurden. Diese waren nicht darauf ausgelegt, interaktive Animationen für digitale Projekte zu schaffen.

Der Wert einer Animation als Kommunikationsmittel, mit dem eine Geschichte erzählt werden kann, ist schon lange bekannt. War dies aber aus Kostengründen bisher nur Firmen mit großen Budgets möglich, Animationen in ihre Apps zu integrieren, da es bislang keine Hilfsmittel gab die es zugelassen hätten, individuell geschaffene Animationen ohne Probleme direkt in eine App einzufügen. Alles was auf Seiten des Designs gemacht werden konnte, war eine Animation am Computer zu erstellen und im Anschluss jede Verhaltensweise einer Animation so zu beschreiben, dass diese von den Entwicklern manuell und mit Code nachgebaut werden konnte. Dies war und ist ein extrem aufwendiger und nervenaufreibender Prozess, der aufgrund der unterschiedlichen Denkmuster von Design und Entwicklung selten ohne Probleme abläuft.

 

Was ist Lottie?

Eine Firma, die es für sich selber zum Ziel gemacht hat, dieses Problem ein für alle mal aus der Welt zu schaffen, ist das Unternehmen AirBnB. Mit Lottie präsentiert die Firma eine brillante Lösung. Zudem ist „Lottie“ frei zugänglich. Doch worum geht es bei Lottie überhaupt?

Nüchtern betrachtet ist die Lösung denkbar einfach und gerade deshalb großartig. „Lottie“ ist ein Framework für die Plattformen iOS, Android und React Native, das es durch Einbindung des Lottie Frameworks erlaubt Animationen des Programmes Adobe After Effects wiederzugeben ohne dass diese von der Entwicklung manuell nachgebaut werden müssen.

 

 

Und so funktionierts

Die Einbindung der Library in eine App scheint dabei denkbar einfach und funktionierte bei internen Tests sowohl für Native Apps wie auch Xamarin basierte Projekte ohne Probleme.

Mit dem Plugin Bodymovin für Adobe After Effects kann eine in Adobe After Effect erstellte Animation mit einem Klick als JSON File exportiert werden, welches solange der Inhalt auf vektorbasierten Formen beruht, ohne zusätzliche Bild Assets auskommt.

Das erstellte JSON File kann im Anschluss ohne Probleme in die App integriert werden und wird von Lottie ohne weiteres zutun korrekt interpretiert und dargestellt. Falls es sich nur um eine simple Animation handelt, die ohne Interaktion auskommt ist die Arbeit damit bereits erledigt. Falls die Animation Teil einer Interaktion (wie beispielsweise in einem Onboarding) ist, entsteht ein zusätzlicher Mehraufwand der, vergleicht man es mit dem Aufwand der früher betrieben werden musste, jedoch gering ausfällt.

 

Quelle: www.airbnb.design/introducing-lottie/

 

Warum ist das wichtig?

Animationen egal ob interaktiv oder nicht, erfüllen vor allem zwei wichtige Funktionen, die den Unterschied zwischen einem durchschnittlichen und einem großartigen Nutzererlebnis ausmachen. Dies sind zum einen visuelles Feedback sowie sogenanntes Eye Candy das beim Nutzer zu entzückenden Erlebnissen führt.

 

Visuelles Feedback

Animationen machen interaktive Vorgänge verständlicher und technische Abläufe greifbarer. Im Umkehrschluss führt dies beim Benutzer zu weniger Frustration wenn die App “nicht funktioniert”. Visuelles Feedback, dass Nutzerinnen und Nutzern verständlich macht was gerade passiert und woran sie sind, reduziert die potenzielle Gefahr eines Gefühls von Hilflosigkeit und Frustration.

 


 

Eye Candy / Entzückung

Eye Candy lässt sich auf Deutsch mit einem allgemeinen “Entzücken” über etwas positiv Unerwartetes umschreiben, wie es beispielsweise eine Animation an unerwarteter Stelle in einer App sein kann. Bestimmt befand sich jeder der ein Smartphone besitzt schon einmal in der Situation, eine neue App bedient zu haben und plötzlich von einer Animation oder Interaktion überrascht worden zu sein. Es sind solche Momente, die spezielle von den gewöhnlichen Apps unterscheiden und an die sich Nutzerinnen und Nutzer erinnern werden. Wer an einer App mit einer einzigartigen “Identität” interessiert ist, kommt um die Schaffung solcher Momente nicht herum.

 

Euer Nikolai

Nikolai Hafen, Designer

Noch keine App oder nur eine, die gestalterisch ein wenig hinter den Möglichkeiten herhinkt? Beratung, Konzeption, Design, Entwicklung – schreib uns einfach an: info@next-munich.com