Wie man durch Motion-Design die User Experience verbessert

Bewegung erzählt Geschichten. Sie verdeutlicht, wie eine App organisiert ist und was sie tun kann. Bewegung treibt das gesamte UI – es definiert Navigation und erzeugt eine natürlichere Erfahrung, in dem es dem Interaktionsdesign eine tiefere Ebene hinzufügt.

Über Motion-based Design

Die Möglichkeiten für Animationen im Netz haben sich durch CSS Transitions, Hardwarebeschleunigte Transformationen und kommenden Standards wie JS Web-Animationen dramatisch verbessert. Dazu kommt, dass heutige Multi-Core Endgeräte immer komfortabler und einfacher animierte User-Interfaces ausspielen können.

Den aktuellen Stand des Motion-Designs kann man mit der Schlagschatten-Ära in der visuellen Gestaltung vergleichen. Alle probieren es aus. Viele Anwendungen der Technik sind überflüssig, manche unsachgemäß und manche genial. Mit der Zeit haben sich bereits einige Patterns und Best Practices ergeben, auf welche ich im Lauf des Artikels eingehen werde.

Für jede geklickte Schaltfläche und jeden Bildschirmübergang gibt es eine Geschichte. Bewegung kann helfen diese zu erzählen.

Warum spielt Bewegung überhaupt eine Rolle?

Wenn Nutzer mit einem Produkt interagieren, stellen sie sich (unter Anderem) folgende Fragen:

“Was ist hier wichtig?”
“Woher weiss ich, was ich als nächstes tun kann?”
“Woher weiss ich, dass ich mein Ziel erreicht habe?”

Fragen wie diese bieten Ansatzpunkte Motion zu nutzen, um die User Experience zu verbessern. Bewegungsbasierte Designelemente können in einer Vielzahl von Formen erscheinen, z.B. Übergänge, Animationen und sogar auf Texturen um 3D Tiefe zu imitieren.

Die Aufmerksamkeit der User führen

Bewegung treibt die Aufmerksamkeit des Users und gibt Hinweise auf das, was passiert, wenn ein Klick oder eine Geste abgeschlossen ist. Animationen beeinflussen die Augen des Users und man kann (clever eingesetzt) kontrollieren, worauf er sich konzentrieren sollen. Das ist großartig, solange die Augen auf der richtigen Sache landen. Wenn Animation an der falschen Stelle oder in der falschen Geschwindigkeit angewendet werden, kommt es zu einer Ablenkung von den Inhalten. Visuals, die durch Bewegung auf dem Bildschirm erscheinen, ziehen unterschiedliche Mengen an Aufmerksamkeit, aufgrund ihrer Geschwindigkeit und Position auf der Seite, auf sich.

Ein gutes Beispiel ist die „Back to Top“-Schaltfläche. Sie erlaubt dem User bis zum Hauptmenü zurück zu springen und kann, je nach verwendeter Bewegung entweder eine subtile Funktionalität – oder eine vollständige Ablenkung vom Inhalt sein.

Durch das klicken eines Links landet man nicht immer auf einer neuen Seite. Manchmal springt man auch nur auf eine neue Position auf der gleichen Seite. Wenn es keinen Übergang gibt, dann ist dies oft verwirrend, und es ist nicht klar, dass die Seite automatisch nach unten gescrollt wurde.

Gutes Motion-Design macht UI vorhersehbarer und leichter zu navigieren. Es hilft dem Auge des Users zu sehen, woher ein neues Objekt entstammt oder wo ein bestehendes Objekt hingeht.

Ein weiteres gutes Beispiel für eine gelungene Animation (die fast jeder kennt): wenn man ein Fenster auf dem Desktop minimiert. Das Fenster schrumpft und bewegt sich in Richtung Dock oder Taskleiste. Diese Animation verdeutlicht mühelos die Aktion, die man gerade vollzogen haben: die Anwendung in einem Symbol am unteren Rand des Bildschirms zwischenzulagern.

Wenn das Fenster einfach verschwinden würde, gäbe es keine Möglichkeit, den Unterschied zu erkennen zwischen einer „Minimieren-Aktion“ und einer „Schließen-Funktion“. Wenn man nicht genau wüsste wohin es verschwunden ist, wüsste man wahrscheinlich auch nicht genau, wie man es wieder aufrufen kann.

Viele mobile Anwendungen benutzen Übergänge zwischen den verschiedenen Ansichten innerhalb einer Anwendung. In dem Beispiel unten, was sich nach den Google Material Design Guidelines richtet, sieht man wie die Animation hierarchische und räumliche Beziehungen zwischen den Seiten vermittelt.

Warum wird der gleiche Ansatz nicht öfter innerhalb von Webseiten verwendet? Warum geben wir uns damit zufrieden, dass der User das Gefühl hat, jedes Mal teleportiert zu werden, wenn sich die Seite verändert?

Es gibt visuelles Feedback

Animation kann visuelles Feedback geben und dem User zeigen, dass die Website einwandfrei funktioniert. Oder wie Katie Sherwin von der Nielsen Norman Group sagt: “inform users of the current working state and make the process more tolerable to the user by reducing uncertainty.”

Den User daran hindern, zu früh abzuspringen

Beim betreten einer Seite, halten Animationen die Benutzer bei Laune und beschäftigen sie, bis die Website vollständig geladen ist.

Bewegung bringt Freude

Abgesehen davon ergänzt bewegungsbasiertes Design eine andere wichtige Sache in der User Experience: Freude. Deshalb sollten Designer und Entwickler herumexperimentieren um Lösungen zu finden, die sich natürlich anfühlen und eine emotionale Verbindung hervorrufen.

Wie funktioniert’s?

Keine Angst, um Bewegung in seine Seite zu bringen, braucht man sie in der Regel nicht gleich komplett überarbeiten. Durch so genannte Bibliotheken lassen sich heutzutage Animationen leicht in bestehende Auftritte einbinden. CSS3 hat eine gesamte Bibliothek von Animationsfunktionen, die an jedem Element der Seite verwendet werden können.

Einige Animations-Bibliotheken zur freien Verwendung

Die hier aufgeführten Bibliotheken sind getestet und besitzen eine gute Kombination aus Eleganz und Stabilität.

Animate.css
Animate.css ist eine der schlankeren und am einfachsten zu bedienenden CSS-Animation-Bibliotheken. Zur Anwendung der Bibliothek, werden einfach die erforderlichen CSS-Klassen in die bestehenden HTML-Elemente hinzugefügt. Man kann auch jQuery verwenden, um die Animationen für ein bestimmtes Event aufzurufen.

Bounce.js
Bounce.js ist eine Javascript-Bibliothek, die sich auf die Bereitstellung einer Auswahl an quietschvergnügten CSS-Animationen konzentriert.

Magic Animations
Magic Animations ist eine der eindrucksvolleren Bibliotheken. Es gibt viele verschiedene Animationen, von denen viele in dieser Bibliothek einzigartig sind. Wie bei Animate.css, kann man Magic Animations durch einfaches Importieren der CSS-Datei implementieren.

Hover.css
Hover.css ist eine CSS-Bibliothek die speziell für den Einsatz auf Buttons und anderen UI-Elementen gemacht wurde. Es gibt wirklich schöne 2D-Übergänge, zusammen mit vielen anderen gut gemachten Animationen.

Es gibt noch viel mehr Animations-Bibliotheken da draußen, die nur darauf warten in einem schönen Projekt benutzt zu werden.

Nicht übertreiben!

Obwohl die Verwendung einer Animations-Bibliothek in einer Web-Anwendung sicherlich die Interaktivität verbessern kann, versucht man es besser nicht zu übertreiben. Verwendet man Animationen nicht umsichtig genug, verfehlt man ganz schnell den Zweck und verwirrt den User.

Schlechte User Interfaces sind eine Sache. Aber es gibt noch eine besondere Art von schlechtem Interface. Und zwar ein schlechtes Interface mit langsamen Animationen. Als Anwender ist es einfach, diese Art von lästigen Animation zu erkennen. Es ist die Art von Animation, die einem in den Weg kommt. Die Art von Animation, die Frustrationsfalten auf der Stirn erscheinen lässt, weil sie zwischen einem selbst und dem beabsichtigten Ziel steht.

Was haben wir gelernt?

• Wenn die Animation nicht einem funktionalen Zweck dient und dem User in irgendeiner Form unterstützt, sollte man sie entfernen. Das beste Design ist das einfachste und man sollte stets in der Lage sein und den Nutzen für die User in Frage zu stellen. „Es sieht geil aus“ ist keine qualifizierte Rechtfertigung.

• Die Seite performant halten. Wenn eine Animation an eine Aktion geknüpft ist, welche ein User mehr als einmal tun wird, sollte die Animationsbewegung möglichst kurz gehalten werden.Im Idealfall ist sie nach etwa 250 bis 500ms abgeschlossen.

• Laden muss nicht langweilig sein. So gut wie jeder Ort einer Website wo laden notwendig ist, kann eine subtile Animation verwenden um den User davon abzuhalten wegzuklicken.

• Animation sollten führen und nicht von den wichtigen Inhalten ablenken.

• Verwenden Sie animierte Übergänge um sich von einem einem anderen Teil der Seite zu bewegen oder einen neuen Teil der Website zu offenbaren.

• Man kann Animation einsetzen um Klicks, Käufe oder Anmeldungen der User zu bestätigen. Es verdeutlicht, dass die Aktionen erfolgreich waren und die Seite nicht eingefroren ist.

Viel Spaß beim Ausprobieren!