Mit Animationen überzeugende Kundenerlebnisse schaffen

1. Home
2. Publikationen
3. Mit Animationen überzeugende Kundenerlebnisse schaffen

Visuelles Storytelling fördert die Kundenbindung und verbessert die Customer Experience

Die Gestaltung einer ansprechenden User Experience ist der Schlüssel zu jeder erfolgreichen Markenpositionierung. In einer reizüberfluteten digitalen Welt ist es für eine wirkungsvolle Marketingkampagne entscheidend, die Aufmerksamkeit von Kunden zu gewinnen und richtig zu nutzen.

Animierte Visualisierungen helfen dabei, die Sichtbarkeit zu erhöhen und das Interesse der Zielgruppe aufrecht zu erhalten. Führende Unternehmen nutzen dafür animierte Produktwelten, um eine starke Identität ihrer Marke aufzubauen und am Ende die Conversion-Rate zu steigern. Die Visualisierung von Daten wie z. B. Produktvorteilen oder besser aufbereiteten Informationen schaffen dabei ein Vertrauen bei einem potenziellen Kunden und stärken die Bindung zur Marke.

Für visuelle Designer ist es bei sich stetig weiterentwickelten Technologien, Anforderungen und Kundenerwartungen herausfordernd, hochwertig animierte Produktwelten zu erschaffen. Essentiell ist dabei die enge Zusammenarbeit zwischen Designern und Entwicklungsteams, um ein werthaltiges Marketingprodukt zu schaffen, das nahtlos über alle Kundenkanäle und Plattformen funktioniert.

Abgesehen von konventionellen Videoinhalten oder Interaktionsmöglichkeiten des Browser-Standards, gibt es zahlreiche Tools und Technologien, die den Prozess der reibungslosen und funktionalen Entwicklung von Animationen im Web oder auf Mobile-Devices unterstützen. Ein beliebtes Open-Source-Tool ist Lottie (entwickelt von AirBnB). Es handelt sich dabei um ein effizientes Animations-Framework, das anspruchsvolle und zuverlässige Animationen für alle gängigen Plattformen wie z.B. Websites oder Mobile-Apps ermöglicht. Lottie arbeitet mit sogenannten JSON-Dateien, welche alle Animationsinformationen enthalten, die dann auf die Website übertragen und dargestellt werden können.

Die erste Lottie-Animation selbst erstellen

Der Start und die Erstellung einer Animation mit Adobe After Effects (oder Figma)

Der Designer beginnt im ersten Schritt hierbei mit der Platzierung von Vektorinhalten auf unterschiedlichen Ebenen und der anschließenden Animierung (zu viele Gruppen oder Masken sollten dabei vermieden werden, lesen Sie auch unseren Artikel über leistungsstarke Lottie-Animationen im Web). Dabei gilt es zu berücksichtigen, dass nicht alle Adobe After Effects Funktionen vollständig in Lottie unterstützt werden. Vor Benutzung verschiedener Animationsmöglichkeiten sollte hierbei die Liste der unterstützten Funktionen berücksichtigt werden.

Als allgemeine Faustregel gilt hierbei, dass die Verwendung von Keyframes und die Vermeidung von Effekten (insb. wenn diese Ebenen rastern), zu einem besseren Ergebnis bei der endgültigen Animation führen. Um eine flüssige Animation zu erhalten, ist es ebenso wichtig, die Anzahl der Bilder pro Sekunde auf 60 FPS einzustellen. Dadurch wird beim Einsatz der Animationen ein deutlich natürlicher und flüssiger empfundener Effekt erzielt.

Export der Lottie-Animation als JSON-Datei

Um die Animation für gängige Plattformen zu exportieren ist es erforderlich das Bodymovin-Plugin herunterzuladen und zu installieren. Bodymovin ist ein Open-Source-Plugin bzw. Erweiterung für den Export von Animationen aus Adobe After Effects. Es übersetzt Animationen in ein SVG-Format und fasst sie in einem JSON-Austauschformat zusammen. Sobald das Plugin heruntergeladen und installiert wurde, lässt sich in Adobe After Effects unter dem Menüpunkt “Fenster” > “Erweiterungen” die Option “Bodymovin” aufrufen.

Das Plugin öffnet dabei ein Popup, in welchem die zu exportierende Komposition und der Zielordner ausgewählt werden können, in dem die Lottie-Animationsdatei (JSON-Datei) abgelegt werden soll.

Nach allen getroffenen Einstellungen lässt sich mit einem Klick auf “Rendern” die Animation in den ausgewählten Ordner exportiert.

Einbinden der Lottie-Animation in eine Website

Um die erstellte Lottie JSON-Datei in einer Webseite einzubinden, müssen der Lottie Web Player installiert werden (oder alternativ der optimierte dotLottie-Player). Der Lottie Web Player kann dabei einfach per NPM oder Bower wie folgt installiert werden:

# mit Hilfe von npm
npm install lottie-web

# mit Hilfe von bower
bower install bodymovin

Das Einbetten des Lottie-Players sollte als Teil des Frontend-Build-Prozesses erfolgen. Lottie kann alternativ auch manuell eingebunden werden durch Laden der lottie.js-Datei welche im Verzeichnis build/player des Node-Moduls aufzufinden ist:

<script src="js/lottie.js" type="text/javascript"></script>

Nach dem Laden des Lottie Web Players können Animation ganz einfach auf jedes beliebige DOM-Element der Website gerendert werden, indem die loadAnimation-Funktion des Lottie Players wie folgt aufgerufen wird:

const myAnimation = document.getElementById("myanimation");

lottie.loadAnimation({
   container: myAnimation, // das DOM-Element, welches die Animation anzeigen soll
   renderer: 'svg',
   loop: true,
   autoplay: true,
   path: 'path/to/your/json-lottie-animation.json' // der Pfad zur exportierten JSON-Datei am Webserver
});

Die Lottie-Animationen mit weiterer Interaktivität ergänzen

Nutzer der Website aktiv in das Animationserlebnis mit einzubeziehen steigert die User Experience und das Animationserlebnis. Lottie-Interactivity bietet dafür eine kostenlose Interaktionsbibliothek, mit der sehr einfach interaktive Animationen erreicht werden können, die auf Aktionen der Benutzer reagieren. Eine Nutzerinteraktivität kann hierbei z.B. das Scrollen des Nutzers durch eine Seite mit einer interaktiven Animation sein, bei dem die Animation die Scroll-Bewegung adaptiert oder auf die Cursor-Bewegung des Website-Besuchers reagiert.

So wird jede Produktpräsentation oder Inhaltserlebnis spielerisch erweitert und führt zu mehr Engagement des Nutzers.

Animationen als Bestandteil des Designprozesses

Lottie kann dabei nahtlos in den Design-Prozess mit Adobe XD integriert werden, ein interaktives Design-Tool, mit dem sich professionelle Prototypen für Web und Mobile erstellen lassen. Die Integration von Lottie in den Design-Workflow hilft dabei das Testen und Teilen von Animationen mit verschiedenen Teams zu verbessern, einschließlich der Anpassung und des Testing verschiedener Wiedergabeoptionen.

Adobe XD Umgebung unterstützt das Lottie Dateiformat was mühsame Konvertierungsarbeiten oder Ähnliches erspart. Dafür muss lediglich das Lottie Plugin für Adobe XD heruntergeladen werden und schon lassen sich Animationen in der Dateibibliothek verwalten.

Mit Adobe XD können auch Lottie JSON-Dateien importiert werden, die lokal gespeichert sind oder einfach durch Eingabe einer Web-URL.

Über uns

Als Digitalberatung und Marketingagentur unterstützt 8awake führende Unternehmen bei der erfolgreichen strategischen Ausrichtung, Entwicklung und Optimierung von effektiven Marketingkampagnen und -taktiken. Gerne setzen wir uns mit Ihnen in Verbindung, um über Ihre Unternehmensziele und Herausforderungen zu sprechen.