Animationen mit Zweck

 (emilkowal.ski)
4 Punkte von GN⁺ 2025-09-06 | 1 Kommentare | Auf WhatsApp teilen
  • Animationen können, wenn sie richtig eingesetzt werden, die Vorhersehbarkeit, Geschwindigkeit und Freude einer Benutzeroberfläche erhöhen
  • Unüberlegt eingesetzte Animationen können jedoch Unvorhersehbarkeit und Verzögerung verursachen und sogar das Vertrauen der Nutzer mindern
  • Ein wichtiger erster Schritt ist es, einen klaren Zweck für die Animation festzulegen
  • Je häufiger Animationen eingesetzt werden, desto eher kann eine Erfahrung ohne Animationen vorzuziehen sein
  • Auch die Geschwindigkeit von Animationen ist entscheidend für die kognitive Leistung und die Zufriedenheit der Nutzer

Der Zweck von Animationen

  • Der richtige Einsatz von Animationen verbessert die Vorhersehbarkeit der Benutzeroberfläche, die wahrgenommene Geschwindigkeit und die Freude an der Nutzung
  • Schlechte Animationen machen eine Benutzeroberfläche langsam, verwirrend und unangenehm und wirken sich negativ auf das Vertrauen der Nutzer in das Produkt aus

Die Bedeutung von Intention

  • Bevor man Animationen einsetzt, sollte man sich fragen: „Welchen Zweck hat diese Animation?“
  • Als Beispiel zeigt die Marketing-Animation von Linears Product Intelligence statt eines statischen Bildes direkt wie die Funktion arbeitet und hilft so den Nutzern beim Verständnis
  • Ein subtiler Scale-down-Effekt beim Drücken eines Buttons lässt die Benutzeroberfläche lebendiger und reaktionsfreudiger wirken
  • Die Toast-Einblendungsanimation von Sonner erfüllt die folgenden zwei Zwecke
    • Sie erscheint nicht abrupt, sondern auf natürliche Weise und vermeidet so Fremdheit
    • Sie erscheint und verschwindet in dieselbe Richtung, bewahrt räumliche Konsistenz und erhöht die Intuitivität der Swipe-down-Geste
  • Manchmal kann auch „Freude“ selbst der Zweck einer Animation sein und bei seltenen Interaktionen Abwechslung sowie ein einprägsames Erlebnis bieten
  • Wenn die Nutzungshäufigkeit steigt, kann die anfängliche Freude jedoch schnell in Frust und Verzögerung umschlagen

Nutzungshäufigkeit und Animationen

  • Je öfter Nutzer Animationen sehen, desto größer können Ermüdung und Arbeitsverzögerung werden
  • In Situationen, in denen Raycast wiederholt verwendet wird, werden unnötige Animationen zum großen Störfaktor
  • Bei wiederholt genutzten Menüs, Listen und per Tastatur gesteuerten Abläufen ist es sinnvoll, Animationen ganz wegzulassen
  • Tatsächlich wird ein Beispiel vorgestellt, in dem Animationen bei Tastaturnutzung die Reaktionsgeschwindigkeit sogar verringern
  • Eine Erfahrung ohne Animationen kann in bestimmten Szenarien wie Wiederholungen oder Massenarbeit die optimale Wahl sein

Geschwindigkeitswahrnehmung und Reaktionsfähigkeit

  • Abgesehen von Marketing-Websites sollten alle UI-Animationen schnell ablaufen, um die wahrgenommene Leistung und Reaktionsfähigkeit zu verbessern
  • Ein schnell rotierender Loading-Spinner lässt dieselbe Ladezeit schneller wirken
  • Eine Dropdown-Animation von 180 ms fühlt sich deutlich reaktionsfreudiger an als eine mit 400 ms
  • Für UI-Animationen sind in der Regel weniger als 300 ms angemessen
  • Tooltips profitieren beim ersten Erscheinen von einer leichten Verzögerung, sollten aber nach dem Öffnen ohne zusätzliche Animationen sofort reagieren, um das beste Erlebnis zu bieten (siehe Radix UI, Base UI)
  • Ein verzögerungsfreier Wechsel zwischen Tooltips verbessert die Benutzererfahrung, ohne den Zweck zu beeinträchtigen

Eine hervorragende Benutzeroberfläche bauen

  • Nicht die Animation selbst ist das Ziel, sondern letztlich der Aufbau einer hervorragenden Benutzeroberfläche
  • Wichtig ist es, eine Erfahrung zu schaffen, die Nutzer im Alltag gerne verwenden
  • Manchmal sind Animationen nötig, aber je nach Situation kann „keine Animation“ die beste Wahl sein
  • Zu wissen, wann und wie Animationen eingesetzt werden sollten, ist eine wichtige Fähigkeit im UI/UX-Design

Fazit

  • Um eine herausragende Benutzeroberfläche zu schaffen, ist ein tiefes Verständnis für den Einsatz von Animationen nötig
  • Weiterführende Theorie- und Praxisressourcen finden sich in „Animations on the Web“

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-09-06
Hacker-News-Kommentare

  • Jedes Mal, wenn Designer über Animationen sprechen, benutzen sie Wörter wie „Polish“ oder „Freude“ und neigen dazu, diese Elemente gegen wahrgenommene Latenz abzuwägen; ganz falsch ist das nicht, aber ein paar Dinge bleiben dabei auf der Strecke

    1. Ich denke, der Teil mit der Freude (delight) wird übertrieben; die Leute, die von auffälligen Animationen wirklich begeistert sind, sind meistens andere Designer
    2. Vor allem ist es nützlich, sich bei der Entscheidung, wann man Animationen einsetzt, auf den „State“ zu konzentrieren; wenn das Risiko besteht, dass der Nutzer eine Zustandsänderung nicht gut wahrnimmt, sollte man diese dann mit Animationen visuell unterstützen. Ich denke, das ist der Hauptzweck von Animationen, alles andere ist Eitelkeit

    • Zur Meinung, dass „Freude übertrieben wird“: Wenn sie angemessen eingesetzt wird und nicht stört, hat sinnvolle Animation in Software definitiv einen positiven Effekt auf Nutzer, auch wenn dieser Effekt etwas anders sein kann, als viele erwarten würden
      Gut gestaltete Animation ist Teil der letzten 20 %, die „gut“ von „großartig“ unterscheiden. Sie ist nicht zwingend notwendig, kann aber im Vergleich zur Konkurrenz ein differenzierender Faktor sein
      Ein realistischer Grund, warum Animation wertvoll sein kann, ist ähnlich dem Phänomen, dass Menschen bei physischen Produkten Gewicht oder Haltbarkeit als Merkmal hochwertiger Produkte ansehen
      In den letzten zehn Jahren hat sich UI-Design jedoch zu stark auf „Stimmung“, „starke Inszenierung“ und „Branding“ konzentriert, während echte Forschung und praktische Anwendbarkeit effektiver Animation vernachlässigt wurden
      Meiner Meinung nach sollte UI-Design jetzt wieder zu praktischer Usability zurückkehren

    • Es überrascht mich, dass der subtile Scale-down-Effekt beim Klicken auf einen Button als eine Art Animation betrachtet wird; das ist doch sehr grundlegendes visuelles Feedback, das Klickbarkeit signalisiert und bestätigt, dass der Klick registriert wurde

    • Die Haltung, im Software-Design delight selbst besonders wichtig zu nehmen, sieht man häufig bei (ehemaligen) Apple-Fans, zum Beispiel in der Enttäuschung darüber, dass Apple nach Jobs an Verspieltheit verloren hat
      Ich kenne keinen repräsentativen Text, der das Thema umfassend zusammenfasst, aber dieser kurze Beitrag erwähnt es
      Diese Vorliebe für solche Details ist nicht bloß Geschmack einzelner Designer oder ein Randphänomen, sondern eines der Kernmerkmale des Apple-Fandoms

    • Ich erlebe oft, dass Designer, die im B2B-Umfeld arbeiten, mit einem B2C-Gefühl gestalten
      In B2B (vor allem im Enterprise-Bereich) ist die Software einfach ein Werkzeug für die tägliche Arbeit der Nutzer, daher helfen auffällige Animationen, bunte Verläufe (heutzutage manchmal auch ein Synonym für AI) usw. bei der eigentlichen Arbeit nicht und wirken eher ablenkend
      Solche dekorativen Elemente stören Nutzer nur dabei, textlastige Dashboards effizient zu erfassen
      Wenn man eine „schöne und angenehme“ Erfahrung schaffen will, sind Workflow-Unternehmen wie CRM/ERP-Anbieter ohnehin nicht der richtige Ort; sinnvoll ist das eher in Unternehmen, bei denen die emotionale Zufriedenheit der Nutzer direkt mit dem Geschäftswert verbunden ist

    • Ich kann der Aussage nicht zustimmen, dass delight übertrieben wird
      Wenn man zum Beispiel Apple-/iPhone-Nutzer eine Woche lang Android verwenden lässt, würden sie sagen, dass sich etwas „unnatürlich und störend“ anfühlt
      Das liegt daran, dass iOS im gesamten Interaktionsverlauf mit sorgfältig gestalteten Animationen arbeitet
      Auch wenn normale Konsumenten ihre Erfahrung nicht mit dem Begriff delight beschreiben würden, merken sie sehr wohl, wenn ihre Erfahrung schlechter ist als zuvor

  • Ich denke, Apple könnte in diesem Punkt einiges lernen; man verschwendet oft Zeit damit, auf unnötige Animationen zu warten
    Wenn man zum Beispiel ganz nach unten scrollt und dann einen Button antippt, reagiert er oft erst nach mehreren Versuchen, bevor die Bouncing-Animation beendet ist
    Die meisten gestenbasierten Aktionen wie zwischen Apps wischen, Benachrichtigungen schließen oder Dock bzw. Drawer öffnen laufen viel zu langsam ab
    Animationen werden hintereinander abgespielt: Erst wenn eine fertig ist, kommt die nächste, und erst dann ist wieder Interaktion möglich
    Dass man solche Animationen erst über die Accessibility-Einstellungen deaktivieren muss, um das Gerät angenehmer nutzen zu können, ist schon paradox

    • Wenn sich Apple Wallet mit dem Telefon verbindet, läuft eine völlig nutzlose Vollbildanimation ab, und in dieser Zeit kann man nichts tun, was extrem nervig ist
      Eigentlich würde ein kleines haptisches Signal nach dem Verbinden völlig ausreichen

    • Die iOS-Navigationsanimationen sind alle so gestaltet, dass man sie in der Mitte unterbrechen und etwas anderes tun kann; man muss nicht zwangsläufig bis zum Ende warten

    • Unter MacOS ist es extrem frustrierend, dass beim Wechseln von Desktop/Space alle Eingaben bis zum Ende der Animation noch im vorherigen Space landen
      Apple kümmert sich aktuell nicht wirklich um UI/UX; in so einer riesigen Organisation ist es ohne einen starken Entscheider wie Steve Jobs schwer, gute User Experience zu schaffen
      Und Designer merken oft nicht, dass der „Durchschnittsnutzer“ weder sie noch ihr Produkt bewundert, sondern einfach nur grundlegende Funktionalität und Konsistenz will
      Immer wenn man etwas ändern will, sollte man es erst der Großmutter zeigen und nur dann ändern, wenn sie sagt: „Wow, das ist wirklich viel besser“

  • Ich würde Animationsgeschwindigkeiten eher noch weiter erhöhen
    300 ms sind für mich zu langsam
    Ich bevorzuge Animationen, die so kurz sind, dass man sie fast nicht wahrnimmt
    Eigentlich merkt man ihre Existenz womöglich erst, wenn man sie entfernt
    Alles darüber hinaus fühlt sich für mich zu langsam an

    • Ich habe früher auch etwa 250 ms verwendet, bin in letzter Zeit aber auf 200 ms runtergegangen
      200 ms sind die ideale Geschwindigkeit für UI-Übergänge, um zu erfassen, was sich wie und warum verändert
      Wenn ein Übergang dieses Kriterium nicht erfüllt, sollte man ihn besser ganz weglassen
      200 ms sind auch praktisch, weil man sie in CSS einfach als .2s schreiben kann
      Unter 150 ms kann es wie ein Rendering-Glitch wirken; wenn es zu kurz wird, verliert die Animation ihren eigentlichen Vorteil

    • Wenn ich ein Android-Handy zum ersten Mal benutze, ist das Erste, was ich tue, in den Entwickleroptionen die Animationsgeschwindigkeit auf doppelte Geschwindigkeit zu stellen
      Wenn ich sehe, wie es mit der Standardgeschwindigkeit läuft, ist das einfach zu zäh

  • Animation im Webdesign unterscheidet sich in der Praxis kaum von PowerPoint-Effekten
    In den meisten Fällen reichen ein oder zwei schnelle Cross-Fades, um ein sauberes, aufgeräumtes UI zu bauen; mehr wird nur selten gebraucht

  • Ich denke, Animationen sind nur dann sinnvoll, wenn sie etwas bestätigen, das der Nutzer ohnehin schon weiß; die Animation selbst sollte kein Informationsträger sein
    Mit anderen Worten: Auch wenn Animationen deaktiviert sind, sollte man dieselbe Arbeit im selben Tempo erledigen und den Flow genauso verstehen können
    Der Zweck von Animation ist es, die UX-Reise weich zu verbinden und ein kleines Signal zu geben, dass der State wie erwartet ist
    Wenn zum Beispiel beim Mouse-Hover schnell ein Highlight erscheint, muss ich nicht zusätzlich darauf achten, ob mein Mauszeiger wirklich über dem Control ist
    Wenn ein Tooltip-Popup nach dem ersten Anzeigen später mit 0 ms sofort erscheint, fühlt sich das wie ein Zeichen dafür an, dass man den UX-Flow des Nutzers wirklich verstanden hat
    Das ist ein typisches Beispiel für Animationen, die die UX-Reise gut verstehen

  • Mein Grundsatz ist: Wenn der Nutzer warten muss, bis eine Animation endet, bevor er weiter interagieren kann, dann sollte diese Animation gelöscht werden
    Und ich denke, es sollte unbedingt eine Accessibility-Option geben, mit der sich alle Animationen deaktivieren lassen

  • Bei der Einführungsanimation zu Linears Product-Intelligence-Funktion verstehe ich zwar die Absicht der Designer, aber beim tatsächlichen Ansehen hilft sie überhaupt nicht beim Verständnis
    Die Animation aus seltsamen 3D-Winkeln wirkt nicht so, als hätte sie etwas mit der eigentlichen UI zu tun
    Dieser 3D-Effekt deutet zwar an, dass die bestimmte Box auf dem Bildschirm, also das Produkt, nicht die Seite ist, die ich gerade lese, aber beim Verständnis der Funktion selbst hilft das trotzdem kaum
    Durch den Fade-in nimmt man den Bereich zwar wahr, zur eigentlichen Inhaltsvermittlung trägt er aber nur wenig bei

  • Animationen, die „Freude bereiten“ sollen, sehen auf meinem Bildschirm (z. B. M1 MacBook Pro) okay aus, auf anderen Displays (z. B. einem IBM ThinkVision mit niedriger Auflösung) aber sehr unbeholfen und langsam
    MacBook-Demovideo
    Demovideo auf einem minderwertigen Monitor
    Je nachdem, auf welchem Monitor man es betrachtet, kann es sich völlig anders anfühlen

    • Mich würde interessieren, ob du diesen IBM-Monitor in seiner nativen Auflösung benutzt

  • Zur Aussage „Ein schnell rotierender Spinner vermittelt das Gefühl, dass schneller geladen wird“: Ich habe eher so viele schlechte Designs erlebt, die schnelle Spinner missbrauchen, obwohl in Wirklichkeit gar nichts passiert, dass sich langsame Spinner für mich vertrauenswürdiger anfühlen

    • Ich vertraue nur Ladebalken, die Fortschritt nichtlinear anzeigen; in solchen Fällen kann man klar erkennen, dass in einzelnen Schritten tatsächlich etwas vorangeht

    • Ein langsamer Spinner wirkt auf mich sogar glaubwürdiger, weil er eher das Gefühl vermittelt, dass gerade eine schwere Aufgabe abgearbeitet wird und das System deshalb stockt

  • Ein sofortiger Weg, mir den Tag zu ruinieren, sind inkonsistente States während laufender Animationen
    Wenn unter Windows zum Beispiel ein Benachrichtigungs-Popup einer App erscheint und man vor Ende der Animation auf das X klickt, um es zu schließen, öffnet man stattdessen die Benachrichtigung
    Beim Wechseln des Desktops auf dem Mac sieht man manchmal kurz eine App aufblitzen, bevor plötzlich eine andere erscheint; weil die Animation langsam ist, denkt man, sie sei schon fertig, interagiert und ist dann verwirrt
    So etwas passiert sogar manchmal zufällig
    An Designer: Wenn ihr unbedingt Animationen einbauen wollt, dann müsst ihr sie absolut robust machen, sonst verliert man sofort das Vertrauen in genau diese App