Grundregeln für Webanimationen

Animationen können eine Website hervorheben. Oder sie können das Erlebnis genauso leicht zerstören. Bei der Arbeit mit Webanimationen können einige Dinge schiefgehen, wie z. B. das Hinzufügen von Animationen, die keinen Zweck erfüllen, das Einstellen von zu langen oder zu kurzen Dauern oder die Verwendung des falschen Animationstyps. Selbst wenn all diese Dinge korrekt ausgeführt werden, kann sich ein Animationsstil nicht gut anfühlen, insbesondere wenn er nicht mit anderen Animationen synchronisiert ist oder nicht zur Gesamtpersönlichkeit der Website passt.

Eine weitere wichtige Sache, die man beachten sollte, ist, dass nicht alle digitalen Erlebnisse genau die gleichen Animationen teilen sollten. Eine Marketing-Website benötigt möglicherweise andere Animationen als eine Produkt-Website oder eine mobile App. Obwohl die gleichen grundlegenden Bewegungsprinzipien für alle gelten, gibt es einige Nuancen, die vom Inhaltstyp und der Bildschirmgröße abhängen. 

Nehmen wir zum Beispiel an, Sie möchten ein langweiliges Formular spannender gestalten. Sie fügen in jedem Schritt entzückende Animationen hinzu, aber ist das eine gute Idee für ein Formular, das ein Benutzer häufig besuchen und ausfüllen muss? Dieselben Animationen immer wieder zu sehen, könnte in diesem Fall ärgerlich werden.

Offensichtlich gibt es Bedingungen und Überlegungen, die Animationen gut nutzen lassen. In diesem Artikel besprechen wir das Hinzufügen von Animationen zu Produktwebsites. Lassen Sie uns das ein wenig vertiefen und einige Grundregeln für die Arbeit damit festlegen. Nicht so sehr ein Manifest, sondern eher eine Basislinie, auf die wir uns beziehen und mit der wir uns irgendwie mobilisieren können.

Zuerst einmal: Wann ist eine Animation sinnvoll?

Wenn eine Animation gut eingesetzt wird, ist sie fast wie Inhalt – sie liefert Kontext und hat eine Bedeutung, die dem Benutzer hilft zu verstehen, dass etwas passiert ist und sogar, was als nächstes zu erwarten ist. Hier sind einige gute Situationen, in denen Animation genau das leisten kann.

Übergänge von UI-Blöcken

Dies ist möglicherweise der häufigste Anwendungsfall für Animationen. Wenn ein UI-Block von seiner ursprünglichen Position bewegt oder aus dem DOM hinzugefügt oder entfernt wird, ist es eine gute Idee, den Benutzern dies anzeigen zu lassen.

Laden von Inhalten

Eine Ladeanimation ist etwas, das wir alle schon einmal gesehen und erlebt haben! Wenn nicht, zeigt ein kurzer Besuch bei CodePen, wie beliebt Ladeanimationen sind. Sie sind ideal als Platzhalter für Inhalte, bei denen den Benutzern nicht nur ein Hinweis darauf gegeben wird, was beim Laden des Inhalts zu erwarten ist, sondern auch die Gewissheit, dass überhaupt etwas geladen wird.

Sie lassen die Website nicht nur schneller wirken, sondern vermeiden auch ruckartige Neuberechnungen des Layouts, die sehr desorientierend sein können, wenn Elemente zu unterschiedlichen Zeiten gerendert werden.

Client-seitiges Rendering ist so interessant. Sehen Sie sich diese ruckartige Ladeerfahrung an. Die Seite selbst ist nicht besonders langsam, aber sie lädt sehr umständlich. Ein ganzes Thema, mit dem Frontend-Entwickler gut umgehen müssen. pic.twitter.com/sMcD4nsL98

— Chris Coyier (@chriscoyier) 30. Oktober 2018

Ladeplatzhalter sind natürlich am besten, wenn Sie die Höhe der Inhaltsblöcke im Voraus kennen.

Hinweisgebung

Dies ist im Allgemeinen eine einmalige Animation, bei der es darum geht, den Benutzern einen Hinweis zu geben, wo sie suchen oder was sie als Nächstes tun sollen. Einige Benutzeroberflächen sind von Natur aus komplex. Ein leichtes Leuchten oder eine Welle kann den Benutzer bei der Erledigung einer Aufgabe oder beim Hervorheben einer bestimmten Funktion unterstützen.

Es muss nicht alles aufdringlich sein. Stattdessen genügt ein kleiner visueller Hinweis, der informiert, ohne das gesamte Erlebnis zu dominieren.

Mikrointeraktionen

Mikrointeraktionen, die im Allgemeinen an einzelnen Elementen verwendet werden, geben dem Benutzer sofortiges visuelles Feedback nach einer Aktion. Sie vermitteln die Gewissheit, dass eine ausgeführte Aktion stattgefunden hat und dass infolgedessen etwas passiert ist – und das alles unter gleichzeitiger Hinzufügung eines kleinen Vergnügens. 

Diese müssen nicht ausgefallen sein, wie das Herz-Animations-Feature von Twitter, aber sie sollten auf jeden Fall eine Art Feedback oder Reaktion auf die Aktion des Benutzers anzeigen. Schauen Sie sich einfach an, wie subtil – und doch entzückend – das ist, wenn ein Benutzer etwas so Kleines tut, wie einen Artikel von einer Zeile in eine andere zu verschieben.

OK, wann sollten wir Animationen *vermeiden*?

Wir haben gerade eine Handvoll Situationen gesehen, in denen Animationen viel Sinn ergeben. Lassen Sie uns die entgegengesetzten Bedingungen darlegen, unter denen Animationen im Allgemeinen sehr wenig oder gar nichts zum Benutzererlebnis beitragen. Mit anderen Worten, sie werden aus schlechten Gründen wahrgenommen und sind wahrscheinlich am besten aus dem Spiel zu lassen.

Routenübergänge

Ja, wir sehen diese Art von Animationen normalerweise nicht auf Produktwebsites, aber es lohnt sich, sie zu erwähnen, um zu verstehen, warum sie keinen Sinn ergeben. Diese Übergänge funktionieren auf mobilen Apps besser, da der Bildschirmbereich klein ist. Auf Desktop-Bildschirmen gibt es viel mehr Platz zum Animieren. Um den gesamten Inhalt reibungslos zu animieren, benötigen Sie mehr Dauer als auf einem mobilen Bildschirm. Dies wird die Benutzer einfach verärgern, da sie warten müssen, um den Inhalt zu sehen, da sie bereits daran gewöhnt sind, sofortige Sichtbarkeit des Inhalts im Web zu sehen. Und im schlimmsten Fall können Routenübergänge nicht nur ablenkend sein, sondern auch ein ernsthaftes Barrierefreiheitsproblem darstellen, wenn es um Bewegungsempfindlichkeit geht.

• 

Beim initialen Laden von Seiteninhalten

Sie können dies auf Marketing-Websites tun, wenn Sie Benutzer aufklären oder ihren Fokus auf einen bestimmten Block lenken möchten. Für Produktwebsites ist es wieder ärgerlich, jedes Mal dieselbe Animation zu sehen, wenn Benutzer zwischen den Seiten navigieren.

Wenn es unerwartet ist

Es ist eine gute Idee, den Gemütszustand eines Benutzers zu berücksichtigen, während er ein bestimmtes Feature nutzt. Ist visuelles Feedback dort zu erwarten, wo die Animation verwendet wird? Wenn nicht, kann es mehr verwirren, als es hilft.

Betrachten Sie zum Beispiel diese Taschenrechner-App. Es gibt nichts Neues im UI-Muster, wenn Zahlen eingegeben und Berechnungen ausgeführt werden. Benutzer wissen bereits, worauf sie sich konzentrieren müssen. Es gibt keinen Grund, Benutzer warten zu lassen, bevor sie Ergebnisse sehen, oder sie mit etwas zu überraschen, das keinen zusätzlichen Nutzen oder Vorteil bringt.

Wenn Sie sich nicht sicher sind, wie gut sie performt

Es ist erwähnenswert, dass nicht alle Geräte, Internetverbindungen und Browser in Bezug auf Animationen gleich sind. Eric Bailey fasst dies schön zusammen in seiner tiefgehenden Betrachtung der `prefers-reduced-motion`-Medienabfrage.

Wir müssen auch anerkennen, dass nicht jedes Gerät, das auf das Web zugreifen kann, auch Animationen rendern kann oder Animationen reibungslos rendern kann. Wenn Animationen auf einem leistungsschwachen oder minderwertigen Gerät verwendet werden, das sie „technisch“ unterstützt, leidet die allgemeine Benutzererfahrung. Manche Leute suchen diese Erfahrung sogar absichtlich als Feature.

Die Überschrift über diesem Zitat ist eine weise Erinnerung: **Animation ist progressive Verbesserung.** Wenn wir planen, eine Animation zu verwenden – insbesondere eine, die droht, das Erlebnis zu dominieren –, müssen wir zumindest eine Möglichkeit in Betracht ziehen, sie zu deaktivieren und ob das Erlebnis auch ohne die Animation funktioniert. `prefers-reduced-motion` ist der beste Ausgangspunkt.

Wenn der Zweck nicht klar ist

Schließlich würde ich sagen, fügen Sie keine Animationen hinzu, wenn Sie sich über den Zweck, den sie erfüllen, nicht absolut sicher sind. Überflüssige Animationen können ablenken und mehr schaden als nutzen. Dieser Tweet aus dem Jahr 2018 ist immer noch sehr wahr

Wie lange sollte eine Animation dauern?

Die Länge einer Animation ist genauso wichtig wie die Art der verwendeten Animation. Warten Sie zu lange, und die Animation kann sich hinziehen. Gehen Sie zu schnell vor, und die schönen Details der Animation können verloren gehen (im besten Fall) oder den Benutzer völlig desorientieren (im schlimmsten Fall).

Also, wie lange sollten wir die Dauer einer Animation einstellen? Ich gebe Ihnen eine klassische Antwort: *Es kommt darauf an*.

Je größer die Distanz, desto länger die Dauer im Allgemeinen

Animationen (wie die, die wir uns früher angesehen haben) können auf eine kurze Dauer beschränkt sein. Aber wenn wir über einen riesigen Übergang sprechen, bei dem sich ein Objekt über eine lange Distanz bewegt, spüren wir vielleicht, dass es etwas länger dauern muss, um sicherzustellen, dass sich die Dinge nicht zu schnell bewegen. Vermeiden Sie jedoch eine Dauer von mehr als 400 ms.

Schauen Sie sich dieses Beispiel an. Beachten Sie, wie der Inhalt etwas länger zum Übergang braucht, weil er eine größere Distanz zurücklegen muss. Aber beachten Sie auch, dass es nicht *zu* lange dauern muss, weil das Objekt, das weggeht, in das Objekt verblasst, das hineinkommt, und das Objekt, das hineinkommt, eine kürzere Distanz zurücklegt, anstatt es über den gesamten Bildschirm wandern zu lassen.

Es zeigt, dass selbst große Animationen auf eine Weise optimiert werden können, die sie kürzer erscheinen lässt, ohne in der Masse unterzugehen.

Verwenden Sie eine kürzere Dauer, wenn der Benutzer die Aktion auslöst

Dies ist wichtig und ein häufiger Fehler. Wenn der Benutzer bereits etwas erwartet – und der Fokus bereits klar auf dem liegt, was er tun soll – dann gibt es keinen Grund, den Benutzer Sekunden warten zu lassen, um das zu beenden, was er bereits erwartet.

Wenn die Änderung andererseits automatisch vom System ausgelöst wird, ist eine längere Dauer sinnvoll, da sie dem Benutzer erlaubt, sich mit der stattfindenden Änderung vertraut zu machen. Denken Sie an Tooltips oder Modals, die nicht vom Benutzer ausgelöst werden und keine sofortige Aufmerksamkeit erfordern.

Ein- und Ausblendanimationen können unterschiedliche Dauern haben

Manchmal ist es sinnvoll, die Animation für ein Objekt, das ins Bild kommt, etwas schneller zu halten als eine Animation für ein Objekt, das aus dem Bild verschwindet, insbesondere wenn der Benutzer erwartet, diese Inhaltsänderung zu sehen.

Nehmen Sie das vorherige Beispiel eines Dropdown-Menüs. Wenn ein Benutzer darauf klickt, möchte er die Menüpunkte sofort sehen – zumindest würde ich nicht warten wollen, um Menüpunkte zu sehen. Wenn der Benutzer klickt, lassen Sie das Untermenü schnell einblenden und dann beim Ausblenden sanft verschwinden, damit es den Benutzer auf dem Weg nach draußen nicht ablenkt, wenn es nicht mehr benötigt wird.

Dies gilt jedoch nicht für große UI-Blöcke. Bei größeren Blöcken ist in den meisten Fällen eine Dauer von mehr als 200 ms erforderlich. In solchen Fällen ist es erforderlich, die Dauern umzukehren und einen Block schneller ausblenden zu lassen, als er eingeblendet wurde, um sicherzustellen, dass er die bestehende Seitenansicht nicht blockiert.

Die Animationsdauer im gesamten Produkt sollte synchronisiert sein und zur Markenpersönlichkeit passen

Ich bin auf viele Produkte gestoßen, bei denen eine Funktion wirklich schöne Animationen hat und eine andere einfach zu schnell, langsam ist oder gar keine Animation hat. 

Noch schlimmer ist es, wenn Animationen innerhalb derselben Funktion nicht synchronisiert sind.

Daher kann ein Styleguide mit durchdachten Animationsrichtlinien, die konsistent für die gesamte Benutzererfahrung verwendet werden können, eine große Hilfe sein.

Wie einfach ist zu einfach? Oder wie komplex ist zu komplex?

Die Komplexität einer Animation sollte, neben den anderen bisher betrachteten Faktoren, davon abhängen, wie häufig Benutzer sie voraussichtlich sehen werden. Je öfter Benutzer sie sehen, desto einfacher sollte die Animation sein. Dies sollte die vorherigen Regeln für die Dauer überschreiben, wo nötig.

Zum Beispiel würde die untenstehende Animation in einem Hauptmenü funktionieren, aber die gleiche Staffelung in Dropdown-Menüs im gesamten Produkt ist einfach zu viel, um sie aufzunehmen. Es gibt in der Tat einen Punkt sinkender Erträge bei Animationen, genauso wie in der Wirtschaft.

Aber hey, wenn diese Art von komplexer Animation sparsam und gezielt eingesetzt wird, kann sie unglaublich entzückend sein!

Aber ja, Sie können kreativ mit den Animationen sein, wenn eine Entscheidung vom Benutzer ansteht oder während der Verarbeitung von Daten. Dies macht Wartezeiten spannender, z. B. bei Netzwerkunterbrechungen oder der Eingabe einer falschen PIN.

Welche Easing-Funktion sollten Sie verwenden?

Ease? Ease in? Ease out? Ease in and out? Eine kubische Bézier-Kurve?

Das richtige Easing folgt den Gesetzen der Physik. Die Prinzipien der Animation von Disney sind der Goldstandard, wenn es darum geht.

Für *Einblend*-Animationen verwenden Sie einen Bouncing-Effekt, wenn Sie sofortige Aufmerksamkeit des Benutzers wünschen, ansonsten verwenden Sie eine sanfte Beschleunigung (und Abbremsung, um genau zu sein), die eher inkrementell als linear ist. Bouncing sollte die Schwerkraft widerspiegeln. Branden Gregorys Beitrag über natürlich wirkende Animationen liefert alle Arten von Beispielen, die mit den Gesetzen der Physik übereinstimmen.

Sie können sich auf dieses Gist von Adam Argyle zum Definieren von Easings in CSS beziehen.

Licht, Kamera und… gezielte Aktion!

Detailgenauigkeit ist das, was herausragende Animationen von gewöhnlichen (oder gar komplett kaputten) trennt. Wenn Sie gerade lernen, Webanimationen zu erstellen, oder an einem Projekt arbeiten, das sie erfordert, hoffe ich, dass dieser Beitrag als eine Reihe nützlicher Grundregeln dienen kann, um das Beste aus Ihrer Arbeit herauszuholen.

Abgesehen von den Regeln möchte ich auch erwähnen, dass gute Animationen Zeit und Übung erfordern. Sicher, ein Großteil dessen, was ich hier behandelt habe, ist eher anekdotisch und basiert auf persönlicher Erfahrung, aber das ist das Ergebnis jahrelanger Arbeit mit Animationen und der Entwicklung eines guten Blick dafür. Lernen Sie, probieren Sie aus, verbessern Sie sich und lernen Sie weiter. Andernfalls erhalten Sie möglicherweise eine Sammlung von Animationen, die schlechte Benutzererlebnisse bieten und sogar die Barrierefreiheit Ihrer Website beeinträchtigen.