Animationen: Jeder will sie, nicht jeder braucht sie

Animationen Header-Bild

Animationen stehen bei Web-Designern seit einigen Jahren hoch im Kurs. Unter „Animationen“ verstehen wir v.a. dynamische, visuelle Änderungen bzw. Bewegungen eines GUI. Hier einige Beispiele:

Grundsätzlich geht es bei Animationen darum, die User Experience (UX) eines GUI zu vervollständigen und Interaktionen zu unterstützen.

Zu häufig eingesetzte Animationen können die UX jedoch verschlechtern und zum Ärgernis werden, wenn sie mit einer Zeitverzögerung oder gar Behinderung in der Informationsvermittlung einhergehen. Zum Beispiel besteht hohes Ablenkungspotenzial durch Animationen durch ihre hohe visuelle Aufmerksamkeitsstärke. Das können wir auch in unseren Eyetracking-Studien immer wieder beobachten.

Was ist also bei der Konzeption von Animationen zu beachten? Hier einige Denkanstöße:

Von Anfang an an Bord

Es ist wichtig, dass die Frage zur Konzeption und Integration von Animationen am Anfang des Gestaltungsprozesses geklärt wird. Zieht man sie erst gegen Ende in Betracht, fungieren sie häufig nur als „Eye Candy“ und stellen eher eine Nutzungshürde dar.

Ebenso plädieren wir für etwas Mut Animationen wieder zu verwerfen, wenn sie bestimmte Probleme nicht lösen können.

Keine Animation ohne Funktion

Hübsch aussehende Animationen sind beim ersten Mal ansprechend, werden irgendwann aber auch langweilig. Speziell bei wiederholten Aufrufen einer Website/ App. Daher ist es essentiell, dass Animationen eine Funktionalität mit sich bringen.

Hilfreich sind Animationen beispielsweise beim Upload von Dateien oder Einreichen von Formularen:

  • durch unmittelbares Systemfeedback wird dem Nutzer Sicherheit gegeben
  • Bestätigungsseiten, die dem Nutzer Systemfeedback geben, müssen nicht zusätzlich gestaltet werden

 

Animationen können auch als Orientierungsstütze für den Nutzer eingesetzt werden. Beim Wechsel in einen anderen Bereich können sie helfen, Aufbau und Struktur eines GUI  schneller zu erlernen und einfacher zu nutzen.

Animationen als Markenbotschafter

Es gibt unzählige Spielarten von Animationen. Allein zum Beispiel schon dafür, wie ein Element von unten nach oben „eingefahren“ wird:

A: schnell, B: gleichmäßig, C: federnd

Um die Entscheidung zum richtigen Animationsmuster fällen zu können, sollte folgende Frage im Vordergrund stehen: Was möchte ich vermitteln und wie sollen die Nutzer die Marke wahrnehmen?

Als Beispiel: Eine Banking App sollte auf eine federnde Animation wie in „C“ verzichten. Solche Animationen werden vermehrt in Videospielen eingesetzt und würden bei einer Bank nicht vertrauenserweckend wirken.

Animationen als Wartezeit-Verkürzer

Das menschliche Gehirn nimmt Prozesse unter 0,1 Sekunden als unmittelbar wahr. Prozesse unter 1 Sekunde werden als reibungslos oder nahtlos eingestuft.

Angenommen, ein Prozess (z.B. Ladevorgang) dauert 6 Sekunden: eine Animation, die in unterschiedliche Schritte aufgeteilt ist, kann die wahrgenommene Prozessdauer aus Nutzersicht reduzieren. Zusätzlich wird der Nutzer während des Prozesses an das Interface gebunden.

Don’t: Keine schrittweise Visualisierung eines Prozesses, die wahrgenommene Dauer ist hoch.

Do: Eine in Schritten aufgebaute Animation reduziert die wahrgenommene Dauer eines Prozesses.

 

Fazit

Animationen können hilfreich sein, um dem Nutzer eine gute User Experience zu bieten. Dennoch gibt es einige Stolpersteine, die im Optimalfall iterativ aus dem Weg geräumt werden.

Dies beinhaltet Prototyping und kontinuierliches Testen. Denn wie es häufig ist: Animationen können den zusätzlichen WOW-Effekt bringen, wenn sie passend und gut umgesetzt sind. Wenn nicht, können sie auch störend sein und den User im schlimmsten Fall in der Nutzung einschränken.

 

Beitrag teilen
Paul Kritzinger
Paul Kritzinger
Paul hat bei Facit Digital Projekte durch Anwendung unterschiedlichster Methoden durchgeführt. Bei der Analyse von Benutzeroberflächen findet er Zusatzfeatures und Mikrointeraktionen besonders spannend. Seiner Meinung nach liegt hier häufig ein großer und unausgeschöpfter Hebel zur Steigerung der User Experience.