So gelingen Dir gute Animationen im User Interface

Von Christopher Brook |

Animationen sind ein mächtiges Werkzeug von User Experience Engineers und Designern. Mit Konzept und Bedacht eingesetzt, steigern gezielte Effekte die User Experience der Software spürbar. Aber nur ein einzelnes überflüssiges Element kann das gesamte Design instabil wirken lassen, manchmal reichen zwei Millisekunden, um die höchstperformante Anwendung zur Bremse zu machen. Bis zu dieser Erkenntnis war es ein langer Weg und vielleicht nur dank Disney möglich.

In den ersten Tagen des Webdesigns sah die Idee von gelungener Animation längst nicht so rosig wie heute aus. Screen-Designer haben sich an den Tools bedient, die ihnen zur Verfügung standen: Anfangs war es das gute HTML <BLINK>-Tag welches den Blick des Benutzer auf sich ziehen sollte. Last but not least wurde das GIF-Format dazu verwendet um Bereiche auf einer Website mit Hilfe von sich wiederholenden Animationen zu betonen.

Dem Einen oder Anderen dürften Webseiten über den Weg gelaufen sein, die es mit GIF-Animationen  auf Ihrer Internetpräsenz ein wenig übertrieben haben. Eine der letzten seiner Art ist www.cameronsworld.net.

Dann begann die Ära der Flash-Animationen: Wer wurde beim Surfen nie durch auffällig-nervige Flash-Werbebanner abgelenkt?! Eine Zeit lang schien es, als ob eine Website nicht ohne eine lange animierte Intro-Sequenz auskommen würde – dabei waren viele ohne Mehrwert, einige waren nicht einmal sonderlich beeindruckend. Zudem war Flash bedingt durch zahlreiche Inkompabilitäten und Plugin-Zwang einfach unhandlich zu nutzen.

Seit Native Applications/Apps im Mobile-Sektor etabliert sind, sind heutzutage Animationen in Software nicht mehr wegzudenken: Dank des erweiterten Browser Supports, CSS-Animation-Classes und starker Motion Frameworks wie jQuery stehen Designern viele Möglichkeiten zur Verfügung.

„Animieren bedeutet, etwas mit Leben zu füllen“ – Disneys Principle Of Animation

Die Disney Animatoren Ollie Johnston und Frank Thomas beschrieben in Ihrem Buch von 1981 „The Illusion of Life: Disney“ zwölf Prinzipien für realistischere Animationstechniken.

Diese Techniken beschreiben den Unterschied zwischen mechanischen Animationen und denen, die auf den Betrachter authentisch wirken.

 

Diese Theorien sind eigentlich für Animationsfilme gedacht, lassen sich aber auch auf Animationen für Digitale Produkte anwenden. Es ist grob festzuhalten: „Die Objekte müssen den Gesetzen der Physik folgen“

  • Massenträgheit
  • Geschwindigkeit
  • Bounce
  • Lineare Geschwindigkeit

Aber warum brauchen wir überhaupt Animationen in unseren User Interface?

Dieses vorweg: Es lässt sich sagen, dass mittels zielgerichteter Animationen die User Experience bei der Benutzung eines Software deutlich gesteigert werden kann. Aber wie funktioniert das genau?

  • Den Benutzer lenken
    Mittels zielgerichteter Animationen ist es uns möglich, den Benutzer durch einen Workflow zu leiten. Elemente, die sich vergrößern oder in den Vordergrund drängen, leiten den Benutzer jederzeit zu seiner nächsten Interaktionsmöglichkeit. So ist es zum Beispiel auch denkbar, einem User ohne Schulungsaufwand auf ein neues Software-Produkt „loszulassen“.
  • Aufmerksamkeitsmanagement
    Eine der Stärken von hilfreichen Software-Produkten ist es, auf Peaks, wie überschrittene Richtwerte in Datenbestände, hinzuweisen. UX-Designer müssen im Entstehungsprozess darauf achten, dass dem Benutzer in seinem täglichen Arbeitsablauf solche Notifications/Warnings auch auffallen. Es bietet sich also an, mittels Animationen auf eine kritische Veränderung innerhalb des Workflows hinzuweisen. So lassen sich zum Beispiel Statusveränderungen mittels Toastnotifications oder Visual Hints an dem betroffenen Item direkt in den Focus des Benutzers schieben.
  • Nachvollziehbarkeit
    Eine positive User Experience ist durchaus in Gefahr, wenn die Software nicht nachvollziehbar ist. Der Benutzer will nachvollziehen können, welche Schritte er getätigt hat oder was passiert, wenn er – wohlmögliche kritische – Aktionen auslöst. Auch hier sorgen nachvollziehbare Animationen für Abhilfe. Beispiel: Nachdem der Nutzer eines Webshops auf den „KAUFEN“-Button klickt, schiebt sich das Item sichtbar in den Einkaufskorb.
  • Affordance
    Ein Wort, welches im Bereich UI/UX Design von zentraler Wichtigkeit ist. So auch bei der Verwendung von Animationen:

„Angebotscharakter (auch Aufforderungscharakter, Anbietung, oder Affordanz, vom Englischen: affordance) ist die von einem Gegenstand — offensichtlich vorhandene oder tatsächlich gegebene — angebotene Gebrauchseigenschaft für Subjekte (Mensch oder Tier).”

Affordance bescheibt also eine Situation, die dem Benutzer suggeriert, wie er ein Element zu benutzen hat. Dadurch wird die Funktion beziehungsweise die Benutzung für den User klarer. Beispiel: Ein Grabber deutet dem Benutzer an, dass er das Element draggen kann.

Diese Gefahren bieten Animationen im User-Experience-Design

Schlecht gemachte Animationen können die User Experience  deutlich schmälern. Das Timing ist unter anderem auschlaggebend. Mitunter können schon zwei bis vier Millisekunden eine Animation behäbig wirken lassen. Hier müssen User Experience Engineers Fingerspitzengefühl zeigen.

Weniger ist mehr: Übertrieben viele Effekte und Mikroanimationen innerhalb einer View lassen das Design instabil wirken und können den Benutzer nerven. Des weiteren besteht die Gefahr, dass zu viele Animationen die Workflow-Performance ausbremsen. Dann ist die Produktivität in Gefahr.

Deshalb müssen sich User Experience Professionals fragen, ob die Animation wirklich einen UX-Mehrwert bietet oder nur schmückendes Beiwerk ist.

Dabei spielen auch Gewöhnung und Nutzungsdauer einer Software wichtige Rollen: Eine Animation die anfangs noch ein positives Gefühl beim Benutzer ausgelöst hat, könnte bei der 100. Darstellung nur noch nervig und damit unnötig sein.

Functional Animations

Designer haben es mittlerweile verstanden: Gute Animationen sind wichtige Bestandteile eines guten Interaktions-Konzeptes, die die User Experience positiv beeinflussen.

Im UX-Design haben sich die Ideen des „Functional Animations“ etabliert – diese beschreiben die Verwendung von Animations-Bausteinen, die in Ihrer Verwendung jederzeit logisch begründet werden können. Diese sind als Baukasten-System zu verstehen:

  • 01

    Orientation

    – Richtung erläutern/beleuchtet die Struktur
    – Lässt den User die Veränderung am System verstehen
    Beispiel: Button der ein Pannel triggert

  • 02

    Same Location / New Action

    – Wird verwendet, wenn der Platz im UI begrenzt ist
    Beispiel: Actionbuttons die den Zustand verändern

  • 03

    Zoom In

    – Findet Verwendung bei Cards oder Image Galleries
    – Nach Selektion des Items wird direkt in die Detail Darstellung
    gewechselt

  • 04

    Visual Hints

    – Unterstützt den User mit Hinweisen wie er das System optimal benutzt.

  • 05

    Highlight

    – Hilft bei überfrachteten UIs einzelne Aktionen zu verstehen

  • 06

    Simulation

    – Maßgeschneiderte Animation beschreibt Sachverhalt

  • 07

    Visual Feedback

    – In der Realität reagieren Elemente ebenfalls wenn man sie berührt.
    – Subtile Verwendung empfohlen

  • 08

    System Status

    – Kontrolle für den User über den aktuellen Status des Systems
    Beispiel: Spinner wheel oder „pull down to refresh“

  • 09

    Marketing

    – Lustige Animationen die das Branding oder die Kernaussage des Produktes unterstützen

Fazit

  • Animation sollte ein natürlicher Teil des Design Prozesses für Digitale Produkte sein und das Konzept der „Functional Animations“ bringt hierfür das benötigte Tooling an die Hand.
  • Gut gemachte Animationen, deren Verwendung auf einer logischen Grundlage beruht, werden immer ein Interaktionskonzept aufwerten.
  • Wer sich mit Bewegung in UX-Konzepten auseinandersetzt, muss sich seine Inspiration auch bei Disney holen.
  • Jede Animation muss auf seine Sinnhaftigkeit hinterfragt werden.
  • Jede Animation muss zur Situation passen.

Screendesigner

Christopher Brook

Christopher Brook ist seit 2008 bei MAXIMAGO. Der gelernte Mediengestalter ist als Screendesigner fest im UX-Team verankert und kümmert sich um die passenden Designs und Animationen für eine präzise Interaktion zwischen Mensch und Maschine. Zu seinen Interessen gehören Fotografie, Zeichnen und Sport.

Mehr zu Christopher Brook