Schon längst gehören Animationen zu den wichtigen Instrumenten, um die User Experience digitaler Produkte zu verbessern. Mein Arbeitsalltag wird durch die Integration von Animationen in das Konzept und Design enorm bereichert. Egal ob es sich um eine Animation mit kleinen Monstern für eine VoD-App für Kinder oder eine Fokuswanderung in einem TV UI handelt. Es macht schlichtweg Spaß 🙂

‍

‍

‍

Beide Videos wurden mit einer unterschiedlichen Intension erstellt. Zum einen, um den Kunden die Animation besser zu vermitteln und zum anderem, um die Animation für die Entwickler zu spezifizieren.

Immer wieder stehen wir vor dem Problem, dass Animationen, die zur Veranschaulichung erstellt wurden, nicht ohne hohen Mehraufwand für die Entwicklung aufbereitet werden können. Folgende drei „Tools“ setzen wir aktuell ein, um einen spezifischen Zweck in einer bestimmten Projektphase zu erfüllen:

Animation Sketching

Die wohl einfachste Methode, um Animationen zu visualisieren, ist das Zeichnen. Es bietet sich vor allem in frühen Projektphasen an, um erste Ideen schnell festzuhalten und zu diskutieren. Das Animation Sketching lässt sich sehr gut mit dem Wireframing verbinden, da man direkt während der Erstellung der Wireframes überlegt, ob und wie Animation sinnvoll eingesetzt werden kann.

Beim Skizzieren des Anfangs- und Endzustands eines UIs werden Objekte offensichtlich, die sich verändern oder bewegen müssen. Das Resultat ähnelt am Ende einem Storyboard. Schriftlich wird pro Sequenz festgehalten, was sich wie verändert.

‍

‍

Umso weiter das Projekt fortschreitet, umso schwieriger wird es, an Zeichnungen festzuhalten. Das Konzept entwickelt sich weiter, aber vor allem das Visual Design wird immer ausgereifter. Ab jetzt ist es interessant, wie sich die Animation wirklich anfühlt. Das kann einem Storyboard leider nicht leisten.

AfterEffects

Eines der wohl bekanntesten und mächtigsten Animationstools ist AfterEffects. Entwickelt, um komplexe Titelanimationen und Special Effects für Filme zu erstellen, wurde AfterEffects in den letzten Jahren genutzt, um Motion Graphics und Animationen zu visualisieren. Allein auf Dribbble finden sich viele AfterEffects-Videos zum Thema UI-Animation.

Doch mal eben eine Animation zu erstellen ist nur möglich, wenn man mit dem Tool vertraut ist. Das Interface ist komplex und die Einarbeitungszeit hoch. Der große Vorteil dieses Profi-Tools: Alle erdenklichen Eigenschaften bei einer Animation können im Detail beeinflusst und kontrolliert werden. Von Animationspfaden bis hin zum exakten Easing kann jedes Frame einzeln definiert werden. Dabei besteht die Möglichkeit finale Designs aus Photoshop zu importieren und direkt mit den Ebenen weiter zu arbeiten. Es muss sich jedoch nicht immer um ein fertiges Design handeln. Durch animierte Flächen lässt sich auch eine Page-Transition zeigen.

Ein weiteres Problem: neben dem hohen Aufwand für die Animationserstellung muss diese für die Entwicklung dokumentiert werden. AfterEffects erlaubt lediglich den Export von Videos. Doch nur anhand eines Videos kann die Umsetzung nicht erkennen, wie eine Animation verläuft. Deshalb müssen die Animations-Parameter und ihre Veränderung separat dokumentiert werden. Die Frage, ob sich die Animation umsetzen lässt, wird dabei nicht beantwortet.

‍

‍

Dieses kurze Video zeigt das Verhalten eines Eingabefeldes bei Fehleingabe. Was im Video recht kurz und einfach aussieht muss für die Umsetzung noch durch die Beschreibung von 7 verschiedenen Parametern erläutert werden, die sich alle während der Animation verändern.

Trotzdem hat AfterEffects seinen Platz in unserem Workflow gefunden – vor allem wenn darum geht, ein Gefühl für die Animation und deren Wirkung zu entwickeln oder die Animation an sich zu veranschaulichen.

CoreAnimator

Mit vergleichsweise geringem Aufwand lassen sich mit CoreAnimator Animationen zu erstellen, die später auch direkt von der Entwicklung verwendet werden können. Ein Hauptvorteil des Tools ist der Swift- oder Object-C Codeexport. Dieses Feature gewährleistet, dass die erstellten Animationen auch ohne großen zeitlichen und finanziellen Mehraufwand umsetzbar sind. Die fertige Animation kann dem Kunden präsentiert werden und die Entwicklung kann direkt mit dem Code arbeiten.

CoreAnimator ist ein klassisches Pose-to-Pose Animationstool, bei dem man einen Anfangs- und ein Endzustand eines Objektes angibt. CoreAnimator übernimmt dann das Tweening. Jeder, der schon einmal mit AfterEffects, Flash oder Principle gearbeitet hat, ist schnell mit dem Interface vertraut. Das Easing und Timing lässt sich über die Timeline bearbeiten.

Einen kleinen Wermutstropfen gibt es aber doch:
Leider kann man keinen Sound hinzufügen. Sobald eine Animation mit Sound verbunden ist, kann die Gesamt-Wirkung nicht beurteilt werden.

‍

‍

Was nun?

Unter dem Strich gilt die alte Weisheit: Der Einsatz von Tool und Methode ist von den Projektbeteiligten und dem Projektstatus abhängig. Persönliche Präferenzen spielen ebenfalls eine wichtige Rolle. Wer ein Tool perfekt beherrscht, greift immer wieder darauf zurück – vor allem, wenn es schnell gehen muss. Doch die technologische Entwicklung bleibt nicht stehen. Wir sollten deshalb offen für neue, kleine Alltagshelfer bleiben und diese ausprobieren. Aktuell versuche ich mich an Principle …

Ski Jump by Dimiter Petrov from the Noun Project

‍