Da bin i her, da g’her’ i hin

Animationen sollten vor allem dann eingesetzt werden, wenn sie dazu dienen, den Nutzer zu informieren, zu fokussieren und zu unterhalten. Animationen informieren, wenn sie räumliche und hierarchische Beziehungen zwischen Elementen zeigen, zeigen welche Aktionen verfügbar sind, und was passiert, wenn eine Aktion durchgeführt wird. Animationen fokussieren, wenn sie die Aufmerksamkeit auf das Wesentliche lenken, ohne dabei unnötige Ablenkung zu erzeugen. Und Animationen unterhalten, wenn besondere Momente während der User Journeys hervorgehoben werden. Zudem verleihen sie gemeinsamen Interaktionen Charakter und drücken die Persönlichkeit und den Stil einer Marke aus. In diesem Blogeintrag sehen wir uns diese drei Prinzipien genauer an und versuchen, sie in einem konkreten Beispiel umzusetzen.

Wie schon in anderen Blogeinträgen beschrieben, helfen uns Animationen, die UX einer Website oder einer App wesentlich zu verbessern. Auch dieser Blogbeitrag fällt in diese Kategorie – hier versuchen wir, mit einfachen Animationen bei Buttons eine nachvollziehbare Hierarchie zu schaffen, den Nutzer sodann auf die getätigte Interaktion zu konzentrieren und das Interface durch eben diese unerwarteten, kurzweiligen Animationen aufzulockern. Zur Anwendung kommen dabei die drei in der Einleitung genannten Prinzipien.

Animationen sollten vor allem dann eingesetzt werden, wenn sie dazu dienen, den Nutzer zu informieren, zu fokussieren und zu unterhalten.

Morphing Buttons

https://fh.florianlackner.at/8/desres/ursprung/
Als praktisches Beispiel habe ich „Morphing Buttons“ gewählt, also Buttons, die sich nach einem Klick in ein anderes Element verwandeln. Im ersten Beispiel wird nach einem Klick auf den Button eben dieser zu einem Modal-Window. Im zweiten Beispiel erweitert sich der Button zur Anmeldung zu einem Newsletter nach unten und gibt ein Eingabefeld frei. In beiden Beispielen verschwindet der Button nach einem Klick also nicht einfach, sondern ändert seine Form – und schließlich seine Funktion. Der Nutzer kann sich so, dank der Animation dieses Prozesses, ein Bild von der Hierarchie der Anwendung machen und weiß ganz genau, woher ein neues Element „gekommen“ ist.

Beide Morphing-Animationen haben einen ähnlichen Charakter (sie wirken „bouncy“), und erzeugen somit ein Gefühl von Zusammengehörigkeit. Eben solche Abwandlungen einer Animation können wie schon angesprochen die Persönlichkeit und den Stil einer Marke ausmachen oder repräsentieren. Der zusätzlich abgedunkelte Hintergrund legt abschließend den Fokus auf die Elemente.