Bessere Interfaces dank Animation

Kann Bewegung Benutzeroberflächen verbessern? Durchaus! Gerade bei Touch- und Gestensteuerung lässt sich die Usability dank Animation deutlich steigern.

Bei der Konzeption arbeiten wir viel mit statischen Dokumenten wie Beschreibungen oder Wireframes, daher wird Bewegung oft stiefmütterlich behandelt und – wenn überhaupt – erst sehr spät im Designprozess bedacht. Das ist schade, denn Animation kann nicht nur die Usability verbessern, sondern vor allem auch die positive Wahrnehmung der Anwendung beim Benutzer (Joy of Use).

Wenn man ein Gerät nur mit dem Finger, seiner Stimme oder mit einer Handbewegung steuert, dann funktionieren Mouse-Rollover z.B. nicht. Diese liefern bei klassischen Interfaces Zusatzinformationen oder sie deuten die Funktionalität eines Elements an. In solchen Fällen kann eine Animation z.B. zeigen, welche Elemente aktiv sind und möglicherweise als Nächstes gebraucht werden. Oder die Animation kann vorführen, welche Bewegung/Geste man machen muss.

Und auch für klassische Webanwendungen bieten Animationen viele Möglichkeiten, die User Experience zu verbessern – aber auch nicht wenige Stolperfallen.

Die wichtigste Regel für animierte Elemente in Benutzeroberflächen wie auch auf Webseiten ist: Die Animation muss immer durch eine Benutzerinteraktion ausgelöst werden und sie darf niemals unendlich sein.

Animation geht auf die Nerven

Bannerwerbung Spiegel Online

Heute versucht die Bannerwerbung eher durch einmalige, aber auffällige Animation Aufmerksamkeit zu bekommen. Die Tage der zappelnden Werbebildchen scheinen langsam vorbei zu sein (hier Spiegel Online).

Nichts stört die Konzentration mehr, als ein sich ewig drehendes Element am Rande des Sichtfeldes. Das ist mit ein Grund, warum Werbebanner auf Webseiten von Nutzern so gehasst werden.

Mit Schrecken erinnern viele von uns sich noch an die Briefumschläge, die sich öffnen, an die rotierenden “Neu”-Sternchen und an andere bewegte Icons auf Webseiten der 1990er Jahre.

Nützliche Animationen

Doch seit Aufkommen der grafischen Benutzeroberflächen (GUI – graphical user interfaces) vor Jahrzehnten wird Animation auch eingesetzt, um dem Nutzer wertvolles Feedback zu geben.

Das naheliegendste Beispiel ist das Scrollen: Schon die ersten GUIs, wie das des Apple Lisa 1983, bewegten den Inhalt eines Fensters, wenn der Nutzer auf die Scrollbalken an der Seite klickte.
Animation ist seitdem ganz tief verwurzelt im zentralen Bedienkonzept praktisch aller Computer, die wir heute nutzen.

Screenshot Scrollbalken

Scrollbalken gehören seit Jahrzehnten zu den Standardelementen praktisch jedes GUI.

Auch schon uralt sind Rollover-Effekte: Elemente ändern ihre Farbe, ihre Position o.Ä., wenn man die Maus über sie bewegt. Praktisch jeder Nutzer erkennt, dass er auf solche Elemente klicken kann.

Ebenso signalisieren Buttons durch eine Änderung ihrer Farbe und/oder Position, dass der Nutzer sie angeklickt hat.

Schließlich gibt es die Elemente, die dem Nutzer sagen, dass er aktuell auf das System warten muss: Die klassische Sanduhr von Windows (bzw. der alten Mac-OS-Versionen), der “Beachball” von OS X und all die anderen Lade-Indikatioren.

Deutlich verbessern lassen sich solche Elemente durch eine Fortschrittsanzeige. Dauert eine Aktion länger als drei Sekunden, sollte man dem Nutzer ein Gefühl dafür vermitteln, wie lange die Aktion noch dauert.

Geht es um ein paar Sekunden, genügt ein Balken oder ein Kreis, der sich langsam ausfüllt. Geht es um Minuten oder mehr, dann ist eine Angabe in Sekunden/Minuten/Stunden sinnvoll.

Ladebalken bei Vimeo.com

Der Ladebalken bei Vimeo. der hellgraue Bereich zeigt, wie weit das Video geladen ist, der blaue, wie weit es abgespielt ist.

Animation Kopiervorgang OSX

Die Kopier-Animation bei OS X aktualisiert die Angaben, sobald diese errechnet sind. Die erste Animation ist eine Notlösung, signalisiert aber, dass etwas passiert.

Animierte Lade-Symbole von Sonic

Animierte Lade-Symbole fürs Web (Sonic)

Tipps für Animationen mit guter UX

Sinnvoll eingesetzte Animation nehmen die Nutzer fast nie bewusst wahr – sie unterstützt die Nutzer unauffällig und kann dazu beitragen, dass diese die Anwendung als elegant, responsiv und modern empfinden.

Auch Motion Design sollte in erster Linie nützlich sein, und nur in zweiter Linie schön.

Dank HTML5 und Frameworks wie jQuery ist es im Web inzwischen sehr einfach, plattformübergreifend Animation einzusetzen, ohne PugIns wie Flash nutzen zu müssen.

Google hat das Thema Animation auf seiner Entwicklerkonferenz Google I/O vor einigen Wochen stärker in den Vordergrund gerückt.
Die Google Guidelines
Material Design
beschreiben sehr gut, wie ein modernes Interface aussehen sollte.

Es richtet sich in erster Linie an Android-App-Designer, aber jeder, der mit GUIs zu tun hat, wird dort hilfreiche Tipps und jede Menge Inspiration finden.

Das Dokument zeigt auch, dass Flat Design nicht heißt, dass alle Elemente gleichberechtigt und auf einer einzigen gedachten Ebene auf dem Screen liegen. Vielmehr ist es gerade für Flat Design nötig, sich viele Gedanken über die Tiefe und die Relationen der einzelnen Elemente zueinander Gedanken zu machen.

Im Folgenden einige Prinzipien aus den Google Guidelines, ergänzt mit Hintergrundinfos und Tipps.

Keine Animation ohne Zweck

Wie grafische Elemente sollte auch jede Animation einen Zweck haben. Dieser darf auch einfach nur sein, den Nutzer anzuregen, sich weiter mit dem UI zu beschäftigen.

Insbesondere bei Apps auf Mobilgeräten werden Animation oft genutzt, um neue Nutzer an die Bedienung der App heranzuführen und deren Möglichkeiten aufzuzeigen.

Solche Animationen dürfen den erfahrenen Nutzer aber keinesfalls behindern oder ablenken. Daher werden sie oft nur gezeigt, bis der Benutzer die betreffende Funktion das erste Mal verwendet hat.

Auch Animationen sollten logisch und erwartungskonform sein. Sie sollten unterstützen, keinesfalls ablenken.

Wichtig ist, im Hinterkopf zu haben, dass Bewegung auch bei Flat Design einen dreidimensionalen Raum schafft. Sobald ein Objekt größer oder kleiner wird oder sich ein Objekt über ein anderes bewegt, entsteht beim Benutzer der Eindruck, er habe es mit einem Raum zu tun.

Die Bewegungen in diesem Raum müssen ihm natürlich vorkommen und dürfen die Gesetze der Physik nicht verletzen. Andernfalls bewirkt die Bewegung, dass der Nutzer die Gesetze zu verstehen versucht, die den Bewegungen zugrunde legen – oder er hat einfach nur das Gefühl, dass etwas nicht stimmt.

Bewegungsgeschwindigkeit

Elemente, die unvermittelt anfangen, sich zu bewegen, wirken unrealistisch. Solche Animationen fühlen sich mechanisch und falsch an.
Daher: Am Anfang zügig beschleunigen, vor dem Ende abbremsen.

Das entspricht realen Objekten: Masse ist träge, deshalb dauert es einen Moment, bis man ein Objekt auf seine Zielgeschwindigkeit gebracht hat bzw. bis man es abgebremst hat.

Kommt dagegen etwas ins Bild, was sich aktuell schon bewegt, dann sollte es seine Endgeschwindigkeit bereits erreicht haben. Genauso wenn etwas das Bild verlässt: Es sollte mit seiner Endgeschwindigkeit aus dem Bild wandern und keinesfalls langsamer werden. Sonst fragt sich der Nutzer, was mit dem Objekt geschehen mag, ob es sich weiterbewegt hat oder ob es kurz danach stehen geblieben ist.

Screenshot Video Animation

Das interaktive Dokument von Google visualisiert die Animationsprinzipien sehr anschaulich mit kleinen Videos.

Größere und damit “schwerere” Dinge sollten langsamer beschleunigen bzw. abbremsen als kleinere Dinge auf dem Screen.
Damit spiegeln sie das Verhalten von realen Objekten wieder – je schwerer etwas ist, desto träger reagiert es.

Ort der Bewegung

Die Bewegung sollte generell vom Interaktionspunkt ausgehen: Tippt man z.B. auf ein Element, empfiehlt Google, die Hervorhebung dieses Elements vom Touchpunkt ausgehen zu lassen.

Das heißt, die Markierung breitet sich von dort aus radial aus.

Erstellt man z.B. ein neues Element, dann sollte dies aus dem Punkt heraus entstehen, den man angetippt hat – nicht etwa aus der Bildschirmmitte heraus.

Je weiter Elemente von der Interaktionsstelle entfernt sind, desto später sollten sie sich verändern. Google spricht vom “ripple of action” also von den konzentrischen Wellen der Aktion. Vergleichbar einem Stein, den man ins Wasser wirft: von der Stelle aus, an der der Stein ins Wasser gefallen ist, breiten sich die Wellen konzentrisch über den Teich aus.

Übergänge

Betrachtet man den Übergang von einem Zustand des UI zum anderen, dann gibt es drei Arten von Elementen:

  1. Neue Elemente
  2. Elemente, die verschwinden
  3. Elemente, die bleiben

Neue Elemente müssen so erscheinen, dass man versteht, dass sie neu sind. Idealerweise zeigt einem die Animation auch, woher sie kommen.
Beispiel: Ein neues Fenster im Mailprogramm, in dem man eine neue Mail schreiben kann.

Elemente, die verschwinden, sollten nicht plötzlich spurlos verschwinden. Besser bewegen sie sich aus dem Bild, gehen in einer stilisierten Wolke auf oder ziehen sich ins Nichts zusammen.
Beispiel: Eine E-Mail, das in der Liste der Nachrichten im Posteingang gelöscht wird.

Elemente, die weiterhin im Bild bleiben, sollten nachvollziehbar an ihre neue Position wandern.
Beispiel: Eine E-Mail in der Nachrichtenliste, die angetippt wird, um sie ganz zu lesen.

Wichtigkeit bestimmt Prominenz

Jede Animation sollte so auffällig sein, wie es der Wichtigkeit des bewegten Elements entspricht. Insbesondere wenn mehrere Dinge auf einmal passieren, ist es besser, eine Animation klar und deutlich zu machen und die anderen Elemente nicht oder nur sehr zurückhaltend zu animieren. Zu viel Bewegung bringt Verwirrung.

Auch die Reihenfolge der Animation ist wichtig: Elemente, die verschwinden, sollten sich bewegen, bevor die Elemente hinzu kommen, die neu auf der Bildfläche erscheinen.

Vorsicht auch, wenn sich mehrere Elemente gleichzeitig bewegen: Die Pfade der Bewegung sollten sich nicht kreuzen.

Visualisiert man die Bewegung aller Elemente durch Pfeile, sollte sich ein klares Bild ergeben. Ergibt das viele Linien, die in viele verschiedene Richtungen gehen, sollte man die Animation nochmal überdenken.

Diagramm Animationen

Zu viele Bewegungen gleichzeitig verwirren. Quelle: www.google.com/design/spec/animation/meaningful-transitions.html

Je wichtiger, desto weiter vorn

Ebenfalls achten muss man darauf, in welcher Tiefe (z-Achse) sich welches Element bewegt: Bewegt sich z.B. ein Bild vor dem Button oder dahinter?

Die wichtigsten Elemente sollten sich logischerweise ganz vorn bewegen.

Gleichzeitig = zusammengehörig

Denke an das Gestalt-Prinzip der Gleichzeitigkeit: Elemente, die sich gleichzeitig verändern, werden als zusammengehörig empfunden.

Verschwinden z.B. mehrere Elemente vom Bildschirm, sollten sie das gleichzeitig, gleich schnell und in der gleichen Richtung tun.

Allerdings kann die Animation deutlich eleganter wirken, wenn man die Elemente mit leichter Verzögerung von Sekundenbruchteilen animiert. Das wirkt meist natürlicher.

Ihr seht: Wie bei allen Design-Regeln muss man immer noch experimentieren, bis man die optimale Lösung gefunden hat und abwägen, was der Usability hilft, was der Ästhetik und wie man all das verbindet zur optimalen User Experience.

Was sind Eure Erfahrungen dabei? Welche UI-Animationen gefallen Euch besonders gut? Mit welchen habt Ihr vielleicht bei Nutzertests Probleme gefunden?

Portraitfoto: Jens Jacobsen

Jens Jacobsen

Inhaber

benutzerfreun.de

Bisher veröffentlichte Beiträge: 47

Ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.