Animationen im UI/UX-Design: Worauf kommt es an?

Über das Thema Animation im User Interface Design wird viel debattiert. Dabei zeichnen sich zwei Fronten ab. Die eine Seite findet, dass Animationen eine Oberfläche unnötig überfrachten und verkomplizieren. Die andere Seite ist der Meinung, Animationen sind ein integraler Bestandteil der Interaktionserfahrung und ein wichtiges Werkzeug zum Lösen von Problemen sowie zur Verbesserung der Usability eines Produktes. Stetige Verbesserung der Methoden und Werkzeuge sorgen gleichzeitig für natürlicher und angenehmer wirkende Bewegungen in Apps und Webinterfaces.

Warum lieben wir Bewegung?

Durch Animationen verleihen wir einem Interface idealerweise natürliche, lebendige Züge. Wir erzeugen eine Gefühls- und Wahrnehmungsebene, die der Interaktion mit einem physischen Objekt (im echten Leben) nahekommt. Je natürlicher die Bewegung und je treffsicherer die Erwartungshaltung der Nutzer:innen erfüllt wird, desto leichter fällt es, eine Benutzeroberfläche zu verstehen. Daraus resultieren Spaß bei der Bedienung und ein sicheres Gefühl. Dabei werden Animationen, die Funktionen unterstützen und Prozessabläufe visualisieren, dankend angenommen. Sie liefern einen Überblick über das, was bei der Nutzung des Produktes aktuell im Hintergrund passiert. Nicht zuletzt, dass etwas passiert. Dadurch entsteht das Gefühl von Kontrolle. Die allgemeine Zufriedenheit mit dem Produkt und die Wahrscheinlichkeit, es erneut zu nutzen, steigt signifikant.

Wie muss Bewegung sein, damit wir sie lieben?

Ein gutes Interface Design zeichnet sich unter anderem dadurch aus, dass verwendete Elemente funktional und nicht überflüssiger oder rein dekorativer Natur sind. Die Oberfläche wird möglichst einfach und übersichtlich gehalten, um eine hohe Usability zu sichern. Dieser Ansatz sollte in die Planung der verwendeten Animationen einfließen. Während diese hinsichtlich ihres Potenzials zur Steigerung der Nutzerfreundlichkeit oder Attraktivität des Produktes analysiert und hinterfragt werden, hilft es Folgendes zu beachten:

• Verfolgt die Animation einen klaren Zweck?
• Gibt es Nachteile, die durch die Animation entstehen?
• Überwiegen die Vorteile der Animation gegenüber möglichen Nachteilen? Am Ende sollten die Animationen das Sahnehäubchen auf der Torte und nicht das Haar in der Suppe sein.

Wie wird Bewegung funktional?

Um ein funktionsgetriebenes Animationskonzept zu erstellen, sollte das Produkt auf mögliche Probleme und Unsicherheiten untersucht werden, die durch Animationen zu lösen sind. Dies kann in jedem Teil des Designprozesses passieren bzw. eine Rolle spielen:

Nutzeranalyse

Wer sind potenzielle Nutzer:innen? Welcher Altersgruppe gehören sie an? Was für Vorlieben oder Gewohnheiten gibt es? Wie gut sind sie mit dem Umgang von modernen Interfaces vertraut? In welcher Umgebung werden sie das Produkt voraussichtlich verwenden? Können Animationen für diese Nutzer:innen gewinnbringend sein?

Konkurrenzanalyse

Gibt es ähnliche Produkte? Welche Stärken haben sie? Welche Schwächen haben sie? Lassen sich daraus Erkenntnisse über die Bedürfnisse und Probleme der Nutzer:innen ableiten? Ist es möglich, diese Probleme durch Animationen zu lösen?

Wireframing

In dieser Phase hat man die Möglichkeit, Interaktionen im Layout auf Logik und Konsistenz zu prüfen. Es entsteht ein erstes Gefühl für Look & Feel vom Produkt. Dadurch lassen sich Bereiche im Design identifizieren, die durch Animationen profitieren würden.

Pixelperfect Design

In dieser Designphase wird das Interface detailliert ausgearbeitet und das Endprodukt visuell erstmalig in vollendeter Form abgebildet. Hier eröffnet sich eine neue Betrachtungsebene, die es im Animationskonzept zu berücksichtigen gilt.

Prototypen und Testing

In seinen unterschiedlichsten Formen bietet das Prototyping ebenso verschiedene Möglichkeiten, die Interaktionen und Animationen im UI/UX-Design zu testen und Nutzer:innen-Feedback einzuholen. Auf Basis des gesammelten Feedbacks und der Tests können die Animationen optimiert und in ihrem Nutzen hinterfragt werden. Die Entscheidung für ein animiertes Element war richtig, wenn die Vorteile gegenüber den möglichen Nachteilen überwiegen, oder die Nutzer:innen dies als angenehm empfinden.

In jeder dieser Phasen können Animationen (sowie jedes andere Designelement auch) zur Lösung von Problemen oder Herausforderungen genutzt werden. Die Wahl liegt hier in erster Linie bei dem/der Designer:in, der/die das Ziel verfolgt die erkannten Probleme und Schwierigkeiten nutzerorientiert aufzulösen.

Welche Probleme können durch Animation gelöst werden?

Eine Vielzahl verschiedener Probleme im Interface Design können durch Animationen profitieren.
Im folgenden ein paar Beispiele, zusammen mit entsprechenden Animationen, die diese Probleme lösen können:

Nutzer:innen wissen nicht, wann eine Interaktion abgeschlossen ist.

Es ist unklar, ob ein Prozess im Gang ist oder nicht.

Es fehlen Anhaltspunkte, wie lange ein Prozess läuft, wie weit fortgeschritten dieser ist und wie lange er voraussichtlich dauern wird.

Der/die Nutzer:in legt den Fokus der Betrachtung erst spät auf die wichtigeren Bereiche, er/sie hat keinen klaren Überblick über das Interface.

Der/die Nutzer:in empfindet die Bedienung der Oberfläche als wenig intuitiv oder performant.

Die Oberfläche verhält sich nicht so, wie der/die Nutzer:in es erwartet. Dadurch fehlt dem/der Nutzer:in das Gefühl von Kontrolle.

Das Interface ist langweilig.

Was für Arten von Animation gibt es? Für welche Dinge werden Animationen eingesetzt?

• Mikro-Interaktionen
• Animationen, die Prozesse visualisieren
• Verdeutlichende und erläuternde Animationen
• Dekorative Animationen

Licht und Schatten?

Mögliche Vorteile von Animationen

• Bessere Usability
• Originelle und zeitgemäße Wirkung des Interface Design (dadurch ggf. Vorteil gegenüber der Konkurrenz)
• Angenehmere und einfachere Interaktion
• Beschleunigung (real oder gefühlt) von Abläufen und Prozessen
• Möglichkeit, Dinge gleichzeitig zu erledigen
• Erfüllen der Erwartungshaltung von Nutzer:innen an das Interface

Mögliche Nachteile von Animationen

• Höhere Ladezeiten durch zusätzlich erforderliche Ressourcen
• Überladene Screens durch schlecht durchdachtes oder inkonsequentes Animationskonzept
• Ablenkung der Nutzer:innen durch schlechtes Animationskonzept oder überflüssige, dysfunktionale Animationen.
• Animationen können sich negativ auf die Barrierefreiheit auswirken, oder in bestimmten Fällen (z.B. Flackern) sogar gefährlich werden. Entsprechende Maßnahmen sollte man immer im Blick haben.

Fazit

Animationen in Interfaces haben ein enormes Potenzial zur Lösung diverser Usability-Probleme. Um eine funktionelle und gewinnbringende Animation in ein Interface zu integrieren, sollten Sie unbedingt einen durchdachten Ansatz verfolgen. Grundsätzlich empfiehlt es sich, zusätzlich zu den Vorteilen auch die möglichen Nachteile einer Animation zu evaluieren. Das Hauptziel, die Benutzer:innen eines Interface in ihrer Interaktion zu unterstützen, sollte der/die Designer:in während des gesamten Prozesses im Blick behalten. Beachtet man all diese Aspekte, ist die Chance groß, dass Animationen das User Interface bereichern und die Usability und Look & Feel auf ein höheres Level bringen. Grundsätzlich gilt, wie fast immer im Design, „weniger ist mehr“ und „form follows function“.