Menü von 247GRAD

04.06.2018 . Design & Development . Thomas Christian Busenkell

6 Animations-Guidelines für perfektes UX Design

Animationen können richtig Spaß machen. Aber auch beim UX Design gilt es, vom Nutzer aus zu denken. Diese 6 Guidelines helfen euch dabei!

Auf Facebook teilen
Auf Twitter teilen
Per WhatsApp versenden
Auf Reddit teilen
Per E-Mail teilen

Wenn ihr meinen letzten Beitrag gelesen habt, ist euch sicher aufgefallen: Ich bin ein großer Fan von Animation (aka Motion Design). Ein sich bewegendes Objekt haucht nicht nur einem statischen Bild Leben ein, sondern hilft gleichzeitig dabei, eine Geschichte effektiv und spannend zu erzählen. Die Millionen Fans von Cartoons und Animes (mich eingeschlossen) können schließlich nicht falsch liegen, oder? Wie auch immer, das ist bei weitem nicht alles, was Animation zu bieten hat – und genau das ist Thema dieses Beitrags: Ich stelle euch 6 Animations-Guidelines für perfektes UX Design vor.

Let’s go back in time to 2003, als ich gerade meine ersten Schritte im Grafikdesign machte und noch überhaupt kein Vorwissen hatte. Ich erinnere mich, dass Macromedia Freehand das erste Tool war, mit dem ich angefangen habe, Pixel über den Bildschirm zu schubsen. Es war überwältigend. Die Möglichkeiten waren endlos! Farbverläufe, Schlagschatten, Comic Sans – und alles, was das Programm noch zu bieten hatte. Das Ergebnis? Das pure Chaos, wie ihr euch sicher vorstellen könnt. Aber geht nicht zu hart mit meinem jungen Ich ins Gericht. Ich war ein unbeaufsichtigtes Kind in einem Süßwarenladen, also aß ich all die Süßigkeiten, die ich wollte, und endete mit fürchterlichen Bauchschmerzen.

Zurück in die Gegenwart. Ihr fragt euch wahrscheinlich: Was hat das mit Animationen zu tun? Ich denke: alles! Entwickler und Designer sind das junge Ich in dieser Geschichte. Und in vielen Apps und Websites verwenden sie rücksichtslos Animationen und vergessen dabei oft, wie sie die User Experience steigern könnten.

Nun könnte ich eine Reihe von Beispielen zeigen und darauf hinweisen, was falsch gemacht wurde. Aber ehrlich gesagt klingt das irgendwie langweilig. Stattdessen dachte ich, dass es wesentlich nützlicher ist, wenn ich aufzeige, wie (meiner bescheidenen Meinung nach) Animationen integriert werden, die nicht überflüssig sind, sondern eben einen wesentlichen Teil einer guten User Experience darstellen.

Starten wir mit dem Offensichtlichen.

 

1. Animationen sind kein nachträglicher Einfall

Ihr habt den letzen Pixel in eurem Design gesetzt, aber irgendetwas fehlt und ihr denkt: „Jetzt ist die Zeit, Bewegung in das statische Layout zu bringen.“ Vorsicht: Großer Fehler und oft einer der Gründe, warum Animationen vom User falsch interpretiert werden.

Stellt euch User Experience als einen Kuchen vor. In den meisten Fällen wird die Transition im User Interface als Kirsche auf der Sahnetorte betrachtet, aber ich stimme diesem Ansatz nicht zu. Ich denke, Animation sollte eine weitere Zutat sein, die Ihr während der Vorbereitung in den Kuchenteig mischen müsst.

Darstellung: Wireframing im UX Design

Wie und wann sich welche Elemente bewegen, sollte in eurem Kopf bereits klar definiert sein, wenn ihr Wireframes skizziert. Das kann einfach dargestellt sein: Wie ein Pfeil, der anzeigt, wohin sich ein bestimmtes Objekt nach dem Drücken einer Taste bewegen wird. Oftmals reicht sogar eine simple Notiz. Dieses Vorgehen hilft erheblich, Bewegungen zu konzipieren, die einem bestimmten Effekt dienen. Oder eben die Frage beantworten, wann überhaupt eine Animation notwendig ist. Denn, so viel sei schon einmal gesagt, Animationen sind kein Allheilmittel für schlechte User Experience. Unnötige Bewegungen gehören sofort verworfen, denn sie stellen nur ein Hindernis für den Endbenutzer dar.

Dies führt uns direkt zum nächsten Aspekt meiner Guideline.

2. Animationen erfüllen im UX Design einen Zweck

Animationen ohne semantische Bedeutung kosten nur die wertvolle Zeit eures Benutzers und nach der ersten Freude wird dieser sie satt haben. Deshalb muss die Animation funktional sein. Wenn ihr euch fragt, welche Stile dabei hilfreich sind, hier einige Beispiele:

Harte Schnitte vermeiden

Darstellung: UX Design mit weichen Übergängen

Keine Transition vs Horizontal Sliding

Designer oder nicht, wir alle kennen das: Ihr befindet euch auf Bildschirm A, ihr drückt eine Taste und BAM! Ein völlig neuer Bildschirm (B) erscheint plötzlich und ihr fragt euch: „Woher kommst du? Habe ich den richtigen Button gedrückt? Was ist passiert?“ Und was ist wenn „B“ visuell sogar „A“ ähnelt? Der Benutzer könnte denken, dass gar nichts passiert ist. Dieses Szenario zeigt einen der am besten geeigneten Kandidaten für Animation: Momente der Veränderung. Berücksichtigt bei der Gestaltung von Übergängen immer die Zeit dieser „Reise“. Welche Objekte verändern sich und welche nicht? Und: Zeigt eurem Benutzer den Weg auf und nicht nur das Ziel. Aber übertreibt es nicht, denn wie ihr später lesen werdet: Animation werden „unsichtbar“ serviert.

Direktes Feedback

Habt ihr euch jemals gefragt: „Habe ich diesen Button jetzt aktiviert? Ist irgendetwas passiert? Sollte ich nochmal drücken?“ Die Antwort ist vermutlich ja, und nur um sicher zu gehen, habt ihr diesen Button erneut gedrückt. Deshalb ist es wichtig, dem User ein sofortiges Feedback zu geben, auch wenn die App nicht unmittelbar antwortet.

In einer Welt, in der euer Finger oft den eigentlichen Button beim Aktivieren verdeckt, spielt die Animation eine große Rolle, da sie dem Benutzer die Sicherheit gibt, die er benötigt.

Direktes Feedback: Probiert es gerne hier einmal aus

In manchen Fällen könnt ihr sogar einen Schritt weiter gehen und das User Interface aufpeppen. Nehmen wir an, ihr habt eine „Like-Funktion“ in eurer App. Genau hier können spielerische Bewegungen den Nutzer begeistern. Der Nutzer wird es euch danken, denn erheiternde Animationen möchten gerne wiedergesehen (wiederholt) werden.

Bewegungen im Kontext

Ein Besuch auf einer unbekannten Website kann manchmal genauso gut sein wie ein Blinddate. In beiden Situationen kann es vorkommen, dass man gar nicht so recht weiß, wie man interagieren soll. Wie ihr euer Blinddate rettet, kann ich euch an dieser Stelle zwar nicht verraten – dafür aber, wie ihr die Orientation im User Interface optimiert. Ein guter Weg, dem User mithilfe von Animationen einen Kompass für eure Benutzeroberfläche an die Hand zu geben, ist es, einen Hinweis auf die Eigenschaften bestimmter Objekte zu geben. Klingt kompliziert, sieht aber so einfach aus:

UX Design mit konsistenten Bewegungnen

Keine Transition vs Slide-In Bottom

Wenn ihr z. B. eine Liste von Beiträgen integriert, kann mit einer simplen Slide-In Bewegung dem Benutzer suggeriert werden, dass er scrollen kann, um weitere Elemente aus dieser Liste zu sehen. Diesen Gedanken kann man sogar eine Ebene weiter denken: Indem das Erscheinungsbild und die Bewegung einzelner Elemente nacheinander erfolgt, verdeutlichen wir, dass diese Objekte getrennt voneinander zu betrachten sind und mit jedem einzelnen interagiert werden kann.

Konsequente Wege gehen

Betrachten wir das User Interface als physische Umgebung mit Räumen, Fluren und Türen. Solange ihr nicht Teil der Avengers seid, könnt ihr leider nicht durch Wände gehen und braucht Orientierungshilfen, um euch nicht zu verlaufen. Das Gleiche gilt für den Benutzer des User Interfaces, weshalb es wichtig ist, dem Benutzer ein Gefühl räumlicher Orientierung zu geben. Ihr könnt dies erreichen, indem ihr mit den Animationen konsequent seid, damit die App-Struktur einfach zu verstehen ist.

Konsequente Navigation im UX Design

Content erscheint vom unterem Bildschirmrand vs Content erscheint von rechts (wo sich das Kontrollelement befinden)

Betrachtet man ein Objekt, das sich beim Aktivieren auf dem Bildschirm nach links bewegt, ist es nur logisch, dass es von dort wieder erscheint. Das konsequente Gehen von logischen Wegen wird euren Benutzern helfen, die App-Physiognomie zu verstehen und sie werden sich dadurch in der Interaktion mit der App wohler fühlen.

Storytelling im UX Design

Bei fast jedem UX Design müssen wir erklären können, wenn etwas schief gelaufen ist, oder ein neues Feature eingeführt wurde. Illustrationen spielen hier eine große Rolle und bieten eine visuelle und unmittelbare Möglichkeit, ein Problem zu verstehen und zu beheben. Ihr wisst ja, dass ein Bild mehr sagt als tausend Worte. Nun stellt euch vor: Eine Animation sind 30 Bilder pro Sekunde!
Darstellung: Storytelling im UX Design

Mit spielenden Bewegungen Frustation beim User vermeiden

Diese Art von UX Design ist die perfekte Zeit und der perfekte Ort, an dem eure Animationen glänzen können, einprägsam wirken und ein Lächeln auf das Gesicht des Benutzers zaubern. Besonders, wenn etwas schief gelaufen ist, verhindern einfache und charmante Bewegungen die Frustration des Users.

Nun, da ihr wisst, wann und wo Animationen verwendet werden können, müssen wir mit dem „Wie“ weitermachen.

3. Animationen reflektieren im UX Design die Marke

Betrachten wir eine einfache Bewegung eines Objekts von links nach rechts, gibt es praktisch endlos viele Möglichkeiten, um diese Bewegung zu inszenieren. Allein mit der Geschwindigkeit einer Bewegung kann man einer Animation eine Persönlichkeit hinzufügen. Im folgenden Beispiel seht ihr die gleiche Animation und das gleiche Timing. Der einzige Unterschied ist die Beschleunigungskurve.

Die Möglichkeiten sind endlos, aber bevor ihr verrückt werdet und alle Übergänge wie Wackelpudding aufprallen lasst, denkt an die Marke, an den Benutzer und die Visual Language, die ihr in eurem User Interface benutzt. Wenn die Animation nicht dem Ton entspricht, fühlen sich eure Benutzer möglicherweise fehl am Platz und verlieren ihr Vertrauen in die Marke. Stellt euch vor, eure Banking-App hätte den gleichen animierten Stil wie in einem Mobile Game. Würdet ihr dieser App euer Geld anvertrauen?

Es ist wichtig, dass die Animation die Marke widerspiegelt.

4. Bewegung ist nicht der Hauptdarsteller

Animation rettet das UX Design! Aber nicht wie ein alleinstehender Held, sondern mehr wie die Ninja Turtles, die gewinnen, wenn das Team auf den Stärken des Anderen aufbaut. Wenn eure Animation im Vordergrund steht, stellt sie kein Erlebnis für den User dar, sondern zwingt ihn lediglich dazu, einen Film anzusehen.

Darstellung: Bewegung ist nicht der Hauptdarsteller

Abgefahren vs Konsistent

Animation ist ein Teil des gesamten UX Designs. Beim Gestalten eines User Interfaces besteht eure Aufgabe nicht darin, den Benutzer zu unterhalten, sondern ihm dabei zu helfen, auf die einfachste und intuitivste Weise zu den für ihn relevanten Informationen zu gelangen. Die folgende Guideline trägt genauso dazu bei.

5. Animationen fühlen sich natürlich an

Ich weiß, das Wort „fühlen“ ist vielleicht zweideutig, aber lasst mich das kurz erläutern: Da der Benutzer direkt mit der Benutzeroberfläche interagiert, besteht eine Erwartung, dass die Benutzeroberfläche bis zu einem gewissen Grad den Regeln der Physik folgt. Eine Liste, die auf die Geschwindigkeit reagiert, mit der der User interagiert hat, ist ein perfektes Beispiel. Das Gleiche gilt jedoch auch für andere Objekte.

Das bedeutet jedoch nicht, dass alle Apps auf die gleiche Weise reagieren sollten. Wenn ihr in der realen Welt gegen einen Ball tretet, fliegt der ja auch nicht immer auf dieselbe Art und Weise. Ein Fußball wird seinen Weg nehmen, aber eine Bowlingkugel wird wahrscheinlich nur euren Fuß verletzen. Wie ich in der vorherigen Richtlinie erwähnt habe, geht es um den Ton und das Gewicht, mit denen eure Marke auftritt.

UX Design - Natürliche Bewegung

Mit minimalen Unterscheiden in der Beschleunigung fühlen sich Bewegungen natürlich an

Ihr müsst das „Material“ und das „Gewicht“ eures UX Design definieren, um das Verhalten bei Interaktionen festzulegen. Aber denkt daran, es bei Bedarf immer anzupassen, damit es nicht gegen die nächste Richtlinie verstößt.

6. Verschwende keine Zeit

Animation kann verwendet werden, um die Wahrnehmung des Benutzers von Zeit mittels UX Design zu optimieren, also nutzt dies zu euren Gunsten. Für das menschliche Gehirn scheint alles unter 0,1 Sekunden augenblicklich. Wenn ihr also einen Prozess darstellt, der beispielsweise sechs Sekunden dauert, könnt ihr diesen in separate Animationen aufteilen. Dieser Trick sollte dazu führen, dass sich der Prozess viel schneller anfühlt und der Nutzer sich nicht langweilt.

Je länger du zuschaust, desto mehr Zeit verschwendest du hier.

Animationen können so auch dabei helfen, unmittelbare Ereignisse zu simulieren, die im Hintergrund gleichzeitig noch vorgeladen werden müssen. Dadurch wirkt die Website oder Mobile App reaktionsschneller, obwohl der Prozess immer noch länger dauert als das, was der Benutzer sieht.

Ok, wenn ihr bis zu diesem Punkt durchgehalten habt, seid ihr auf einem guten Weg, mit diesen Animations-Guidelines das UX Design nicht nur optisch zu optimieren, sondern auf der Benutzeroberfläche gleichzeitig einzigartiges UX Design zu installieren. Ich hoffe wirklich, dass ihr diesen Artikel nützlich findet. Ich weiß, dass ich nicht der erste bin (oder der letzte sein werde), der über Animation in der Benutzeroberfläche spricht, aber ich habe versucht, einen etwas anderen Ansatz zu nehmen, der den Fokus auf den Endnutzer legt.

Wenn ihr für UX Design brennt und und tiefer in das Thema eintauchen möchtet, kann ich euch ein paar weitere Artikel und Autoren empfehlen, die mich dazu inspiriert haben, dies zu so aufzuschreiben:

Transitional Interfaces von Pasquale D’Silva
UI Animation and UX: A Not-So-Secret Friendship von Val Head
Invisible animation von Steven Fabre
Creating Usability with Motion: The UX in Motion Manifesto von Issara Willenskomer

Ich lade euch herzlich ein, an den Diskussionen in den Kommentaren teilzunehmen. Ich bin immer daran interessiert, eure Gedanken zu hören und freue mich, alle Fragen zu beantworten, falls es welche gibt.

P.S. Nur noch mal als Erinnerung zum Schluss: Hier geht zu meinem letzten Beitrag, der euch vielleicht auch interessiert…. The Illusion of Life: 12 Animationsprinzipien

Autor

Thomas Christian Busenkell

Thomas Christian Busenkell
Art Director

Thomas hat nicht nur in Sachen Design jederzeit den richtigen Geistesblitz. Nach der Arbeit nutzt er diese Fähigkeit, um Gotham City zu befreien.

Kommentare

Keine Kommentare vorhanden

Kommentieren

Vielen Dank, {{inputName}}!

Wir prüfen deinen Kommentar und veröffentlichen ihn in Kürze hier im Blog.

247GRAD

Kommunikation braucht Dialog.
Schreiben Sie uns!