Microanimations
in User Interfaces

Am Anfang war das GIF

Seit Netscape Navigator 2.0 im September 1995 zum ersten Mal animierte GIFs darstellen konnte, haben Animationen einen festen Platz im Web. Anfangs wussten aber nur wenige die Möglichkeiten von Animationen richtig zu nutzen. Die kleinen GIFs eroberten vor allem private Webseiten und jeder war begeistert. Je mehr sich bewegte, desto besser.

Mit dem HTML-Tag <blink> konnten einzelne Elemente auf der Website, wie der Name schon verrät, zum Blinken gebracht werden – ganz ohne GIF-Animation oder JavaScript. Damit lenkte man die Aufmerksamkeit des Nutzers auf spezielle Elemente. Doch mit dem unkontrollierten Einsatz des <blink>-Tags war die Reizüberflutung schon vorprogrammiert. Bald konnte man sich vor blinkenden „buy this“, „click here“ und „read now“ nicht mehr retten und der <blink>-Tag wurde zum meistgehassten HTML-Tag der Geschichte. Schließlich wurde dieses Element aus dem W3C-Standard verbannt. Und mit den modernen Browsern war die „Las Vegas“-Ära des Internets endgültig vorüber.

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.

Microanimations

Microanimations sind erklärende Bestandteile einer Applikation. Sie geben dem Nutzer Klarheit über Veränderungen und Hierarchien. Sie erzeugen einen lebendigen Eindruck bei Interaktionen und weisen dem Nutzer den Weg zu möglichen weiteren Interaktionen. Mit Mikro-Animationen kann man, wie schon damals mit dem <blink>-Tag, Aufmerksamkeit und Interaktionsverhalten des Users lenken – nur sehr viel subtiler und smarter. Auch die Brand Experience lässt sich mit Microanimations schärfen und positiv beeinflussen.

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.

Fazit

Microanimations spielen eine wesentliche Rolle, um dem Nutzer Inhalte und Funktionsweise einer Applikation zu vermitteln. Sie führen den Nutzer in seinen Interaktionen durch die digitale Anwendung, machen diese für ihn erlebbarer und fördern sein Verständnis, da sie nicht nur das Endergebnis zeigen, sondern Vorgänge visualisieren. Viele Fragen, die sich ergeben könnten, werden durch die Animationen bereits beantwortet. Darum sind Microanimations ein wichtiges Element guter User Experience.

Icon des Chatbots Comankey der Web-Agentur coma in München