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“.

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:

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?