UX + Design

Durch UI-Animationen die Nutzererfahrung wirksam verbessern

Lesezeit: 3 min

Durch UI-Animationen die Nutzererfahrung wirksam verbessern:

Animation ist ein nicht zu unterschätzendes Designwerkzeug – sowohl für die User Experience als auch für Ihre Marke. Wie Typografie und Farbe ist Animation Teil dessen, was Sie einzigartig macht: Sie bildet Ihr Produkt und dessen Persönlichkeit ab.

Clever eingesetzt, können UI-Animationen einen großen Business Impact erzielen und den Nutzer dazu motivieren, Entscheidungen zu treffen. Wie visuelles Design auch, verleiht Animation der Benutzeroberfläche eine emotionale Qualität – sie kann unter anderem ruhig, respektvoll, verspielt, fließend oder sachlich wirken. Ein Interface, das nicht animiert ist, wirkt schnell hart, abweisend und leblos. Auf kleinen Displays von mobilen Endgeräten verliert der User schnell den Überblick. Besonders, wenn die Inhalte komplex sind. Schon eine simple Animation wie eine Überblendung zwischen zwei Seiten oder indem sich ein Element über ein anderes schiebt, statt direkt zu erscheinen, verbessert die emotionale Wirkung. Gleichzeitig erhöht die Anwendung den „Joy of use“. Sprich: Eine gute UI-Animation hilft dem Nutzer zu verstehen, wo er sich gerade befindet, wie Elemente sich aufeinander beziehen – und sie unterstützt den User dabei, Spaß bei der Auseinandersetzung mit dem Produkt zu haben. Das Vertrauen des Nutzers zum Produkt wird gestärkt.

Wie wichtig eine gute User Experience für Ihr Produkt ist, erklären wir in unserem Beitrag „Was ist UX? Der Hype um das Nutzererebnis“.

Die User Experience steht im Vordergrund

Animierte Interfaces haben das Ziel, die Nutzererfahrung zu verbessern. Dieser Anspruch soll kontinuierlich gewährleistet werden. Deshalb sollte eine Animation nie zum Selbstzweck oder ausschließlich als schmückendes Beiwerk eingesetzt werden.

Denn ein Paradigma ist die Erfüllung von Nutzererwartungen: Mit einem bestimmten Aussehen eines Elements auf einer Website ist eine gewisse Erwartung an seine Funktionalität verbunden. Die Diskrepanz zwischen Erwartung und tatsächlicher Erfahrung soll möglichst gering gehalten werden. Mit Animation lässt sich die Komplexität von Abläufen vereinfachen und das Navigieren erleichtern.

Hier eine Auswahl gängiger Animationsprinzipien:

Erfolg vermitteln: Optimistic UI vs. Nutzerfrustation

Zwingen Sie einen Benutzer nicht, mit dem Fortfahren zu warten – dies führt schnell zu Frustration.

Geben Sie dem Nutzer das Gefühl voranzukommen. Die Wahrnehmungvon Geschwindigkeit kann wie in diesem Beispiel visualisiert werden:

Verwenden Sie eine Belohnungsanimation, um den Fortschritt zu feiern, wenn der Nutzer eine Aufgabe abschließt oder etwas ausgefüllt hat.

Klare Verbindungen schaffen, Komplexes reduzieren

Echtzeit-Interaktion gibt dem Benutzer das Gefühl direkten Feedbacks. Die Reaktion der Webseite erfolgt nahezu gleichzeitig mit der Nutzeraktion. Geben Sie dem Nutzer das Gefühl, die Seite wirklich zu benutzen. In diesen Beispielen erfolgt unmittelbar ein Feedback auf Eingabe oder bei Aktivierung:

Animation, die zu Ihrer Marke passt

Identifizieren Sie ein reales Problem, das es zu lösen gilt und formulieren Sie dann ein einfaches Ziel: „Wir verwenden eine Bewegung, die klar und auf den Punkt ist, mit einfachen, leicht nachvollziehbaren Aktionen, die nicht von der primären Aufgabe ablenken.“ Übersetzen Sie Ihre Produktmerkmale in Animation. Lassen Sie sich dabei von Bewegungen aus der realen Welt inspirieren und sammeln Sie passende. Ein klarer Standpunkt, wie Sie Animationen in Ihrem Designsystem verwenden (oder nicht verwenden), hilft maßgeblich, dass Ihre Marke Animationsvorgaben konsistent und effektiv nutzt. Gleichzeitig hilft er Ihrem Team, durch die definierten Vorgaben schneller zu arbeiten. Die Beispiele von Audi und Design-System sind Beispiele für diese Guidelines.

Eine gelungene Animation unterstützt nicht nur die Persönlichkeit Ihrer Marke und hilft, die Botschaft Ihres Produktes zu vermitteln. Sie erleichtert auch die Orientierung im Interface und macht Interaktionen verständlicher und nachvollziehbarer. Animationen, die Ihre Botschaft natürlich und dezent transportieren und die der User als angenehm empfindet, haben das Potential, die User Experience zu verbessern. Achten Sie darauf, dass Ihre Animationen die Performance der Seite nicht allzu sehr beeinträchtigen – mittlerweile gibt es Techniken, die Sie dabei unterstützen.

Wie eingangs erwähnt, ist es am wichtigsten, dass die Animation dem Nutzer dient. In diesem Kontext empfiehlt sich die Arbeit mit einer Customer Journey Map, um herauszufinden, wie sich Nutzer auf Webseiten bewegen. Die positive Wirkung von Animationen zeigt sich jedoch nicht nur anhand von Interfaces, sondern auch sehr oft in Erklärvideos. Oder wussten Sie, dass ein gutes Storytelling bis zu 22-mal einprägsamer ist als die Auflistung bloßer Fakten?

Chanika Ronczka

Fragen, Input, Austausch?

Chanika Ronczka
Mediengestalterin der IW Medien

Ich mag singen, kann nicht pfeifen. Ich löte gerne Kreativzeug und liebe kreative Lösungen, die Kribbeln im Kopf erzeugen.

E-Mail schreiben