User Experience durch Animationen verbessern Animationen im Webdesign

Animationen im Webdesign waren lange Zeit negativ besetzt, als die Nutzer bei zahlreichen Websites zunächst auf „Skip Intro“-Links klicken mussten. Heute sind bewegte Elemente jedoch fester Bestandteil von nutzerfreundlichem Webdesign. Wer sich über die Animationen ein wenig Gedanken macht, bekommt nicht nur ein wirkungsvolles Gestaltungsmittel, sondern verbessert die User Experience seiner Nutzer.

Digitale Produkte wie Websites und Apps leben von ihrem Design: Es ist die grafische Benutzeroberfläche, die sämtliche Funktionen erreichbar macht. Design ist daher nicht nur die Verpackung, sondern ein zentraler Teil der User Experience.

Design is not just what it looks like and feels like. Design is how it works.“
Steve Jobs

Die breite Browser-Unterstützung von CSS3 bietet mittlerweile zahlreiche Möglichkeiten, im Webdesign mit bewegten Elementen zu arbeiten ohne auf JavaScript oder Plugins wie Flash angewiesen zu sein. Damit wird es auch für Webdesigner immer wichtiger, sich damit zu beschäftigen, wie eine Gestaltung auf die Aktionen der Nutzer reagiert – und was diese davon halten.

Transitionen und Animationen

Mit CSS3 gibt es prinzipiell zwei Verfahren, um Bewegung in Ihr Layout zu bringen: Transitionen und Animationen.

Transitionen: CSS-Transitionen sind weiche Übergänge zwischen verschiedenen Zuständen von Elementen. Dabei wird mit der CSS-Eigenschaft „transition“ festgelegt, welche Eigenschaft verwendet werden (alternativ steht das Schlüsselwort „all“ für alle Angaben) und wie lange der Übergang dauern soll. Zudem lässt sich ein zeitlicher Verlauf festlegen sowie eine Verzögerung setzen. Der zeitliche Verlauf bestimmt Charakter und Ablauf der Transition. Damit definieren Sie, wie natürlich sich die Transition anfühlt. Es stehen zur Auswahl:

• ease = langsamer Beginn, dann schnell, zum Ende hin wieder langsam
• linear = konstante Geschwindigkeit während der gesamten Transition
• ease-in = langsamer Beginn, dann schnell
• ease-out = schneller Ablauf, langsames Ende
• cubic-bezier = Definition einer eigenen Verlaufskurve

Mit dem folgenden Snippet verwandeln Sie beispielsweise die Hintergrundfarbe eines Buttons sanft in einen anderen Farbton, während ein Nutzer mit der Maus darüberfährt oder den Button mit der Tastatur fokussiert. Solche Transitionen können natürlicher und angenehmer wirken als plötzliche Farbwechsel.

a.button { 
  background-color: #93be27; 
  transition: background-color 0.25s ease-out; 
}

a.button:hover, 
a.button:focus { 
  background-color: #6a891c; 
}

Animationen: Etwas komplexer sind CSS-Animationen, bei denen Sie die Veränderungen mittels Keyframes definieren und anschließend aufrufen (wieder mit Angabe der Dauer). Auf Wunsch lassen sich auch hier Verzögerung und Verlauf der Animation definieren. Hinzu kommen Möglichkeiten zur Steuerung der Richtung und zur Anzahl der Durchläufe. Eine gute Einführung in die Möglichkeiten von CSS-Animationen bietet Ihnen das Mozilla Developer Network. Wenn Sie Ihre Animationen nicht selbst entwickeln möchten, finden Sie beispielsweise in animate.css aus der Feder von Daniel Eden ein praktisches Hilfsmittel. Es bietet eine Vielzahl fertiger Animationen und lässt sich mittels Grunt auf die für das jeweilige Projekt benötigten Klassen begrenzen. Auf diese Weise schrumpfen Sie die 58kb große Datei (min-Version) weiter zusammen.

Das folgende Code-Beispiel zeigt die grundlegende Arbeitsweise mit CSS3-Animationen. Es ist Teil von animate.css und bewirkt einen pulsierenden Effekt, bei dem die animierten Elemente kurzzeitig vergrößert werden. Dazu definiert es eine Animation namens „pulse“ mit drei Keyframes am Anfang (0%), in der Mitte (50%) und am Ende (100%) der Animation. Die CSS-Eigenschaft transform: scale3d() vergrößert das angesprochene Element und nutzt dabei unter modernen Browsern die GPU des Rechners, um die Performance zu verbessern. Die Animation wird anschließend an eine Klasse gebunden, so dass alle Elemente, die mit dieser Klasse versehen werden, den pulsierenden Effekt verwenden können. Aus Gründen der besseren Lesbarkeit enthält es nur die CSS-Eigenschaften ohne Vendor-Prefixes.

@keyframes pulse { 
  0% { transform: scale3d(1, 1, 1); } 
  50% { transform: scale3d(1.05, 1.05, 1.05); } 
  100% { transform: scale3d(1, 1, 1); }
} 

.pulse {
 animation-name: pulse; 
}

Transitionen und Animationen verfügen bereits über eine breite Browser-Unterstützung von über 80%, verlangen jedoch teilweise noch nach Vendor-Prefixes. Ältere Browser wie der Internet Explorer 8 ignorieren die Angaben. Hier sollten Sie auf statische Hover- und Focus-Effekte zurückgreifen, damit die Zustandsänderungen auch in diesen Browsern offensichtlich bleiben.

Bessere User Experience durch Animationen

Wenn die Nutzer eine Website aufrufen, sind sie dabei nicht untätig: Sie klicken Links, öffnen Akkordeon-Felder oder orientieren sich in einem Menü, indem sie die Untermenüs öffnen. Bei ihren Interaktionen erwarten sie eine passende Rückmeldung. Transitionen und Animationen spielen dabei eine wichtige Rolle: Sie verdeutlichen, dass das System auf die Aktion eines Nutzers reagieren wird, überbrücken Ladephasen und verdeutlichen die Zusammenhänge zwischen den Inhalten.

Ein gutes Beispiel ist die Website von Mail First, bei der Transitionen die Orientierung erleichtern. Der One-Pager setzt auf eine Anker-Navigation, damit die Nutzer direkt zu den Sektionen springen können, und verwendet Animationen auf Basis von jQuery, um den Weg dorthin nachvollziehbar zu machen. Auf diese Weise wird es einfacher, den Zusammenhang und den Kontext der Inhalte zu verstehen. Transitionen wie diese stellen den Zusammenhang zwischen einer Aktion des Nutzers (z. B. Klicken oder Tippen) und der Reaktion des Systems her. Das ist besonders wichtig, wenn auf eine Aktion hin neue Inhalte geladen werden müssen: Gibt das Interface keine Rückmeldung, werden Nutzer schnell unsicher, ob ihr Klick richtig erkannt wurde. Eine kleine Animation kann das Vertrauen des Nutzers stärken, dass nun etwas geschehen wird. Dazu bietet sich beispielsweise an, die oft vernachlässigte Pseudoklasse :active mit veränderten CSS-Eigenschaften zu versehen – sie wird bei der Aktivierung eines Links aktiviert.

a.button { 
  box-shadow: 0 5px 0 #5c7220; 
  transition: all 0.25s ease-out; 
}

a.button:active { 
  box-shadow: 0 2px 0 #5c7220; 
  transform: translateY(3px); 
}

Zu einer guten User Experience gehört auch, das Interface so reduziert wie möglich zu halten. Verändert sich die Funktion eines Buttons, können Sie dies mit einer Transition verdeutlichen. Eine Möglichkeit dazu ist es, nur die Aktionen anzuzeigen, die im aktuellen Kontext sinnvoll sind. Ein gutes Beispiel bringt Adrian Zumbrunnen mit „Smart Transitions“: Ein Button mit einem Plus-Zeichen („Hinzufügen“) kann per Transitionen zu einem „x“ („Schließen bzw. Löschen“) verändert werden, wenn die Nutzer es sich anders überlegen und ein hinzugefügtes Element wieder entfernen möchten. Ein ähnliches Interface, allerdings ohne Animationen, verwendet beispielsweise Spotify in seinem Webplayer, um Songs in seiner Merkliste zu speichern.

Bei der Arbeit mit Animationen zur Verbesserung der User Experience sollten Sie immer ein Auge auf aktuelle Rezeptionsstudien halten. Viele dieser Studien zeigen: Bereits kleine Maßnahmen können eine große Wirkung haben. Ein Beispiel sind Ladebalken: In mehreren Studien konnten Chris Harrison und seine Kollegen zeigen, dass die Verwendung pulsierender Farben oder sich bewegender Schraffuren bewirken, dass der Ladevorgang subjektiv schneller wahrgenommen wird. Die Ladephase wirkt daher weniger störend.

Animationen als Gestaltungsmittel

Natürlich lassen sich Transitionen und Animationen auch als Gestaltungsmittel verwenden. Sie bieten sich beispielsweise dafür an, die Aufmerksamkeit von Nutzern zu steuern: Dort, wo etwas erscheint oder sich eine Bewegung verändert, werden unsere Blicke hingezogen. Fifty Three verwendet dieses Verhalten, um Aufmerksamkeit auf die Konstruktion ihres Produkts Pencil zu legen: Während die Nutzer nach unten scrollen, löst sich der Stift langsam in seine Bestandteile auf, während animierte Texte die Funktion erläutern.

Interessant werden Animationen auch bei der Arbeit mit verschiedenen Ebenen. Beim Parallax Scrolling beispielsweise bewegen sich Elemente auf den einzelnen Ebenen beim Scrollen unterschiedlich schnell. Geschickt eingesetzt lassen sich auf diese Weise interessante Effekte erzielen, wie es beispielsweise die Hochzeitswebsite des Designerpaares Jess and Russ vormacht. Scrollend erzählen sie ihre persönliche Geschichte, und dank Parallax Scrolling verwandelt sich ein Buchstabensalat schließlich in den Hinweis, dass sie sich im Internet kennengelernt haben.

Bei der praktischen Arbeit mit Parallax Scrolling helfen Technologien wie das JavaScript-Plugin Skrollr von Alexander Prinzhorn. Es erlaubt Animationen basierend auf der Scrollposition und lässt sich umfangreich konfigurieren. Verwendung findet es beispielsweise beim One-Pager „A History of Interior Design“. Die Leser erfahren hier Details zu unterschiedlichen Stilepochen. Die Übergänge zwischen diesen Epochen werden mit einer kreisförmigen Blende animiert. Diese Blenden passen gut zum illustrativen Stil der Website und machen ihren Reiz aus. Aaron Dicks, der Designer hinter dem Projekt, schreibt dazu:

Unserer Meinung nach sind es diese Animationen, die Nutzer zum Scrollen anregen. Die Statistiken sprechen für sich selbst. Von den 50.000 Page-Views in den drei Wochen seit dem Launch hat die Seite eine durchschnittliche Besuchsdauer von 3:46 Minuten.
Aaron Dicks

Die gestalterische Arbeit mit animierten Ebenen muss jedoch kein reines Stilmittel bleiben, sondern sagt auch etwas über die Wichtigkeit eines Elements aus: Je näher ein Objekt liegt, desto bedeutsamer erscheint es. Google macht in seinem „Material Design“, der Designsprache hinter der nächsten Version von Android, ausgiebig Gebrauch davon: Neben gewöhnlichen, „flachen“ Buttons (z.B. in Dialogfeldern) gibt es weitere Buttons, die über dem Design schweben. Aktiviert man sie, heben sie sich weiter nach oben – auf diese Weise lenkt man als Designer die Aufmerksamkeit der Nutzer auf die wichtigen Aktionen. Die Gestalter hinter Material Design haben sich auch Gedanken darüber gemacht, von wo und in welche Richtung sich neue Interfaces öffnen sollten – hier lohnt sich ein Blick in Googles Design-Dokument.

Sie können die Aufmerksamkeit auch auf wichtige Elementen lenken, indem Sie sie mit einer kurzen Verzögerung auf der Website einblenden. Dieses Vorgehen unterstützt außerdem die Persönlichkeit einer Gestaltung – und der Effekt sollte demnach auch zur Designsprache einer Website passen. Die Designerin Val Head bringt dazu folgendes Beispiel: Rufen Sie eine Rubrik auf der damaligen Website von Apple auf, springt nach einer Weile ein Submenü mit den Produkten auf. Apple setzt dabei auf eine federnde, spielerisch wirkende Transition – aber passt das zu den geradlinigen Produkten und zu Apples Marke? Die Meinungen dazu gehen sicherlich auseinander (mittlerweile verwendet Apple eine andere Transition).

Keine Barrieren bauen

Als verantwortungsbewusster Webdesigner spielt bei der Verwendung von Animationen natürlich auch die Barrierefreiheit (Accessibility) eine wichtige Rolle. Animationen sollen die Nutzer unterstützen, ihnen aber keine Steine in den Weg legen. Einige Empfehlungen aus den Web Content Accessibility Guidelines (WCAG 2.0) beziehen sich explizit auf bewegte Elemente. Diese Richtlinien sollten Sie für weitgehend barrierefreie Websites berücksichtigen.

Alternativen in Textform anbieten: Alle Inhalte und Funktionen einer Website müssen als Texte vorliegen, damit sie auch für Screenreader erreichbar sind. Das ist besonders wichtig bei Animationen, die Bedeutung tragen. Tippen Sie beispielsweise bei Apples iCloud ein falsches Passwort ein, schüttelt sich das Anmeldefenster – ein interessanter Effekt, der aber nicht für alle Anwender verständlich sein muss. Apple setzt daher auf einen zusätzlichen Hinweistext, der bei der dritten fehlerhaften Eingabe erscheint.

Blinken vermeiden: Starkes Blinken von Inhalten sollte vermieden werden – diese Effekte können epileptische Reaktionen hervorrufen und haben ein großes Nerv-Potenzial.

Auf ausreichende Kontraste achten: Die unterschiedlichen Zustände von UI-Elementen sollten sich ausreichend voneinander unterscheiden. Das gilt beispielsweise bei Buttons, deren Farbe beim Fokussieren mit der Tastatur oder der Maus verändert werden soll. Zu ähnliche Farben wirken schnell zufällig und sind besonders für Menschen mit Farbfehlsichtigkeiten nicht einfach zu unterscheiden.

Nutzern ausreichend Zeit lassen: Besonders bei animierten Texten ist es wichtig, dass die Nutzer ausreichend Zeit zum Lesen haben.

Kontrolle bei den Nutzern lassen: Nutzer möchten die Kontrolle über ihre Browser behalten. Animationen sollten daher grundsätzlich nicht zu lang sein, damit sich die Nutzer nicht wie in einem Film vorkommen, den sie nicht anhalten können. Die WCAG 2.0 empfehlen eine explizite Kontrollmöglichkeit (Start, Pause, Stop) für alle Animationen, die

• automatisch starten,
• länger als 5 Sekunden dauern und
• zeitgleich mit anderen Inhalten angezeigt werden.

Sinnvoll kann es außerdem sein, den Nutzern die Möglichkeit zu geben, die Animationen ganz auszuschalten. Auf diese Weise behalten die Nutzer die Kontrolle. Greg Tarnoff empfiehlt, zunächst den Endzustand aller Bewegungen zu definieren anschließend alle Animationen an eine eigene CSS-Klasse zu koppeln (z. B. „.animate“), die man einem Elternelement (z. B. „body“) mitgibt. Diese Klasse lässt sich anschließend mit einem Button im Seitenkopf und ein wenig jQuery deaktivieren.

<a href="#" id="animationOff">Animation deaktivieren</a>

$('# animationOff).on('click', function(e) { 
  e.preventDefault(); 
  $('body').toggleClass('animate'); 
} 

Hinweis: Dieser Artikel ist zuerst in Screenguide 24 (10-11/2014) erschienen.