Microanimations
in User Interfaces
Seit einigen Jahren hat das Thema User Experience in der modernen Webentwicklung eine immer größere Bedeutung und der Fokus richtet sich verstärkt auf optimierte User Interfaces und den strukturierten Einsatz von Animationen. Diese lassen sich mit neuen Technologien wie CSS3 Transitions und Animations oder neuen HTML5 Features problemlos in Websites integrieren und werden damit zu einem wichtigen Bestandteil eines guten Interfaces.
Beim Thema Animation fallen einem zuerst die großen Pixar-Produktionen oder andere Trickfilme fürs Kino ein. Im Web denkt man eher an Banner- oder ausladende Header-Animationen, die sofort die volle Aufmerksamkeit des Nutzers auf sich ziehen. Doch das sind nicht die Animationen, die den Nutzer sinnvoll durch die Website führen und ihm ein komfortables Gefühl vermittelt. Es sind die Microanimations, also die kleinen Detailanimationen, die sich im User Interface verstecken und die erst auffallen, wenn sie nicht vorhanden sind. Sie sind ein entscheidender Faktor für ein positives Nutzererlebnis.
Klarheit und Verständnis
Für binäre Maschinen wie Computer sind Animationen eher „unnatürlich“. Elemente haben entweder den Wert 1 oder 0, d. h. sie sind da oder nicht. Doch für uns Menschen besteht das Leben nicht nur aus 1 oder 0, aus Schwarz oder Weiß. Es gibt eben auch Werte dazwischen, die für unser Verstehen von Vorgängen ganz wesentlich sind. Mit Animationen lassen sich diese Zwischenwerte und Übergänge darstellen, und Verhaltensmuster sowie Hintergründe visuell erlebbar machen. Auch wenn eine Animation rein technisch gesehen nur die schnelle Abfolge einzelner Bilder ist, so kann sie doch mehr vermitteln als das bloße Endergebnis einer Veränderung und zu einem besseren Verständnis beim User führen. Wie das aussehen kann, zeigt das folgende Beispiel:
Mit oder ohne Animation
Ohne Microanimation erscheint das Menü ganz plötzlich. Das ist für den menschlichen Verstand zunächst etwas verwirrend und das Auge muss sich erstmal orientieren.
Mit Microanimation wird der Blick des Nutzers geführt. Er versteht die ausgelöste Interaktion besser und bekommt zudem ein hierarchisches Verständnis, da die einzelnen Menüpunkte nacheinander erscheinen.
Auch wenn das Erscheinen des Menüs durch die Animation verzögert wird, kann sich der Nutzer deutlich schneller orientieren und versteht das durch die Interaktion ausgelöste Verhalten sofort. Während ein sofortiges Erscheinen des kompletten Menüs den Nutzer zwingt sich alle Elemente anzusehen, um die Hierarchie und Funktion zu verstehen.
Fokus
Um Interaktionselemente in einer Applikation deutlicher hervorzuheben, können Animationen hilfreich sein. Zum Beispiel kann durch kleine Effekte wie Zoom, Schatten oder Bewegung verdeutlicht werden, ob der Nutzer mit dem Element interagieren kann. Man kann die Animation sogar so weit treiben, dass sie schon eine Vorschau auf das anbietet, was den Nutzer nach der Interaktion erwartet. So können Microanimations auch den Fokus auf klickbare Elemente lenken.
Belohnung
Manche Prozesse im Web sind für den Nutzer oft mühsam und nervig. Hier können kleine Animationen Abhilfe schaffen, indem Sie den Nutzer für seine Mühen belohnen. Zum Beispiel bei längeren Ladevorgängen können nette Animationen dem User die Zeit vertreiben oder ihn anschließend für seine Wartezeit belohnen.
Ein gutes Beispiel für eine belohnende Microanimation kennt jeder, der einen Tweet auf Twitter geliked hat. Denn die freudigen Strahlen, die vom Herz-Icon ausgehen, sind die belohnende Microanimation für das Liken eines Beitrages.
Manipulation
Die Manipulation ist ein wesentlicher Bestandteil der UX (User Experience). Das hört sich zunächst eher negativ an. Doch eine direkte Manipulation kann durchaus sehr sinnvoll und wirksam sein – auch im Interesse des Nutzers. Gerade wenn dem Nutzer neue Bereiche oder Interaktionsmöglichkeiten präsentiert werden. Zum Beispiel bei Onboarding-Prozessen, die die Funktionsweise einer Applikation erklären. Oder falls der Nutzer längere Zeit nicht mit der Seite interagiert hat. Dann können aktive Animationen den Nutzer an die Hand nehmen und ihn wieder auf den aktuellen Stand bringen. Auch bei Formularen mit mehreren Schritten können Animationen helfen, dem Nutzer zu zeigen, dass er ein Feld übersehen hat, bzw. mit welcher Interaktion er weiterkommt.
Manipulationen aber, die offensichtlich aggressiv sind, weil das User Interface so ausgerichtet ist, dass der Nutzer bestimmte Aktionen ausführt, selbst wenn diese gegen seine eigentlichen Interessen und Absichten sind, nennt man Dark Pattern. Sie werden vom Nutzer negativ wahrgenommen und sind das Gegenteil von guter UX.
Brand Experience
Die Darstellungsformen von Microanimations sind extrem vielseitig und ihre Einsatzmöglichkeiten nahezu unbegrenzt. Sie können schlicht und elegant sein, aber auch verspielt und auffällig. Sie eignen sich deshalb ausgezeichnet, um das Image einer Marke zu visualisieren und erlebbar zu machen. Nicht nur die Optik, auch Bewegungen können eine klare Markenbotschaft senden. Will ein Unternehmen Seriosität ausstrahlen, sollten die Microanimations eher zurückhaltend als verspielt sein.
Viele Unternehmen haben daher begonnen, auch Animationen in digitale Styleguides aufzunehmen und Regeln für die Animationssprache zu definieren.