Functional Animation

Functional Animation

Funktionale Animationen erfüllen im Interface verschiedene Aufgaben: Sie führen den Nutzer durch einen Prozess, verbessern die Orientierung und liefern Feedback auf Eingaben. Sie ergänzen die Interaktion durch kleine Details, die zur Verbesserung der Usability führen, Spaß machen und Emotionen wecken. Für ein hochwertiges, begeisterndes und markentypisches Nutzererlebnis sind sie damit sehr wichtig.

Von Views über Komponenten bis hin zu einzelnen Icons kann alles animiert werden. Für ein stimmiges Gesamterlebnis sollte das Timing aller Parameter fein aufeinander abgestimmt und die Performance von verschiedenen Devices berücksichtigt werden. Alle im Interface verwendeten Animationen bauen auf den Animationsgrundlagen auf. So geben sie jeder Audi Anwendung einen typischen, dynamischen Charakter.

Feedback

Durch visuelles Feedback vermitteln interaktive Elemente, dass eine Aktion stattgefunden hat. Dazu zeigt das Feedback, ob eine Interaktion begonnen wurde, wie lange die Interaktion noch dauert und ob eine Aufgabe erfolgreich oder nicht erfolgreich abgeschlossen werden konnte.

 

Der Response-Effekt vermittelt ein klares visuelles Feedback. Ein weiteres Beispiel für die Kommunikation verschiedener Systemzustände ist die Loader-Komponente

Highlight

Durch animierte visuelle Hinweise kann die Aufmerksamkeit des Nutzers auf ein bestimmtes Element gelenkt werden.

 

Eine Badge Notification erzeugt Aufmerksamkeit durch Animation.

 

 

Bedeutung

Nachdem der Nutzer verstanden hat, warum eine bestimmte Animation ausgeführt wird, kann sie zur Vermittlung neuer möglicher Interaktionen eingesetzt werden.

 

Die Listeneinträge lassen sich per Drag & Drop verschieben. Dabei vermittelt die Bewegung der Einträge, wo es möglich ist, den zu verschiebenden Listeneintrag einzusortieren. Ein weiteres Beispiel sind Formularfelder, in denen das Label nach Klick in das Feld nach oben bewegt wird, um Raum für die Texteingabe des Nutzers zu schaffen.

Position

Durch Interaktion des Nutzers können sich bestimmte Elemente zu einer definierten Position bewegen oder an einer Position fixiert werden. So kann er nachvollziehen, wo ein Element herkommt oder wo es erreichbar ist.

 

Ein Sticky Element kann durch Scrollen seine Position und sein Layout ändern. Durch den animierten Übergang ist die Positions- und Größenänderung für den Nutzer einfach nachvollziehbar.

Anwendungsbeispiel