Eine Micro-Interaction ist eine kurze Rückmeldung der Oberfläche: ein Knopf, der den Druck quittiert, ein Feld, das den Fehler markiert, ein Übergang, der die Orientierung hält. Brauchbare Dauern liegen zwischen 120 und 300 Millisekunden. Alles Längere wirkt zäh, Dauerbewegung stört, und prefers-reduced-motion ist zu respektieren.
Was leistet eine Micro-Interaction überhaupt?
Sie beantwortet eine stumme Frage des Benutzers. Habe ich das ausgelöst? Ist etwas passiert? Wo bin ich jetzt? Ohne Antwort füllt der Kopf die Lücke mit Zweifel, und der Zweifel führt zum zweiten Klick auf denselben Knopf.
- Zustand zeigen: Ein Schalter, dessen Griff sichtbar wandert, kommuniziert an und aus besser als eine Farbänderung allein.
- Erfolg bestätigen: Ein kurz eingeblendetes Häkchen nach dem Speichern erspart die Frage, ob der Vorgang durchging.
- Wartezeit überbrücken: Eine Rückmeldung innerhalb von 100 Millisekunden lässt einen anschließenden Ladevorgang kürzer wirken, als er ist.
- Orientierung halten: Ein Panel, das aus der Richtung hereinfährt, in die der Klick zeigte, macht die räumliche Beziehung sichtbar.
Der Nutzen ist am größten dort, wo etwas Unsichtbares geschieht. In einem Kundenportal eines Softwareanbieters wandert eine Freigabe durch mehrere Systeme; der Benutzer sieht davon nichts. Eine Zeile, die nach dem Klick sofort ihren Status ändert, ersetzt eine ganze Erklärseite.
Die Grenze zur Dekoration verläuft an einer Frage: Beantwortet die Bewegung etwas, das der Benutzer gerade wissen will? Ein Knopf, der beim Drücken um zwei Pixel einsinkt, tut das. Ein Symbol, das beim Laden der Seite hereinschwebt, nicht.
Wie lange darf eine Bewegung dauern und welche Kurve passt?
Zeit ist der wichtigste Parameter, und die brauchbaren Bereiche sind eng. Zustandswechsel an kleinen Elementen — Hover, Fokus, Umschalter — liegen bei 120 bis 180 Millisekunden. Ein- und ausfahrende Flächen wie Dialoge oder Schubladen vertragen 200 bis 300. Alles über 400 Millisekunden nimmt der Benutzer als Verzögerung wahr, nicht als Gestaltung.
Die Beschleunigungskurve entscheidet über die Anmutung. Eine lineare Bewegung wirkt mechanisch. Für Elemente, die erscheinen, passt ease-out: schneller Start, weiches Ende. Für Elemente, die verschwinden, ease-in: langsamer Beginn, zügiges Ende. Symmetrische Kurven wie ease-in-out gehören zu Bewegungen, die von A nach B laufen und an beiden Enden verankert sind.
Ein zweiter Griff, der viel bringt: Machen Sie das Verschwinden kürzer als das Erscheinen, etwa im Verhältnis zwei zu drei. Das Öffnen darf man wahrnehmen, das Schließen soll aus dem Weg gehen.
Halten Sie diese Werte an einer Stelle fest, nicht verstreut im Stylesheet. Drei bis vier benannte Dauern und zwei bis drei Kurven als CSS-Variablen reichen für ein ganzes Projekt und sorgen dafür, dass sich die Oberfläche einheitlich anfühlt, auch wenn mehrere Personen daran arbeiten.
Was passiert mit Hover-Effekten auf dem Touchscreen?
Ein Finger schwebt nicht. Auf Touchgeräten gibt es keinen Zustand zwischen nichts und Berührung, und Browser lösen Hover-Regeln beim Antippen häufig trotzdem aus — mit dem Ergebnis, dass ein Effekt nach dem Tippen hängen bleibt, bis woanders hingetippt wird.
Kapseln Sie Hover-Regeln deshalb in eine Medienabfrage für Geräte mit Zeiger, etwa über hover: hover und pointer: fine. Alles, was auf Touch funktionieren muss, braucht eine eigene Rückmeldung beim Berühren: eine kurze Zustandsänderung während der Berührung, keine Bewegung, die erst danach beginnt.
Vor allem: Verstecken Sie keine Funktion hinter Hover. Ein Löschsymbol, das erst beim Überfahren einer Tabellenzeile erscheint, existiert auf dem Tablet des Bauleiters schlicht nicht. Zeigen Sie es dauerhaft oder verlagern Sie es in ein erreichbares Menü.
Achten Sie zusätzlich auf die Trefferfläche. Was am Zeiger als kleines Symbol funktioniert, braucht auf Touch mindestens 44 mal 44 Pixel — notfalls unsichtbar vergrößert, ohne das sichtbare Element zu verändern.
Wie sichtbar muss der Fokusring für die Tastaturbedienung sein?
Sehr sichtbar. Wer sich mit der Tabulatortaste durch ein Formular bewegt, hat nur diesen Rahmen als Ortsangabe. Die Voreinstellung des Browsers zu entfernen, ohne etwas Gleichwertiges zu setzen, macht die Seite für Tastaturbenutzer unbedienbar — und verstößt gegen die Anforderungen der WCAG an eine sichtbare Fokusanzeige.
Gestalten Sie den Ring bewusst: mindestens zwei Pixel stark, mit einem kleinen Abstand zum Element über outline-offset, und in einer Farbe, die sich sowohl vom Element als auch vom Hintergrund abhebt. Der geforderte Kontrast von 4.5:1 für Text gilt für den Ring zwar nicht wörtlich, ist aber ein brauchbarer Zielwert.
Nutzen Sie focus-visible statt focus. Damit erscheint der Ring bei Tastaturbedienung, aber nicht bei jedem Mausklick — der übliche Grund, aus dem Gestalter ihn überhaupt entfernen wollen, entfällt damit.
Gehen Sie den Weg des Fokus einmal komplett mit der Tastatur ab, von der ersten Zeile bis zum Absenden. Häufigster Fund: ein Dialog, der öffnet, ohne den Fokus mitzunehmen, sodass die Tabulatortaste hinter dem Dialog weiterläuft. Die Animation ist dann korrekt und die Bedienung trotzdem kaputt.
Eine Animation, die der Benutzer bemerkt, hat meistens schon zu lange gedauert.
Skelett oder Kreisel — womit überbrücken Sie Wartezeit?
Ein rotierender Kreisel sagt nur, dass etwas läuft. Ein Skelett — graue Platzhalterflächen in der Form des kommenden Inhalts — sagt zusätzlich, was kommt und wie viel. Bei Listen, Karten und Tabellen ist das Skelett fast immer die bessere Wahl, weil das Layout schon steht, wenn die Daten eintreffen.
Der Kreisel behält seine Berechtigung bei kurzen, punktuellen Vorgängen ohne bekannte Struktur: ein Knopf, der gerade absendet, ein Feld, das eine Adresse prüft. Zeigen Sie ihn nicht sofort, sondern erst nach etwa 300 Millisekunden — sonst blitzt er bei schnellen Antworten kurz auf und erzeugt Unruhe.
Halten Sie das Skelett schlicht. Graue Flächen mit weichen Ecken und einem sehr langsamen Helligkeitswechsel genügen; ein schnell durchlaufender Glanzstreifen zieht mehr Aufmerksamkeit auf sich als der Inhalt, der ihn ablösen soll.
Optimistische Rückmeldung: erst zeigen, dann bestätigen
Bei Aktionen, die fast immer gelingen — ein Häkchen setzen, einen Eintrag als erledigt markieren — können Sie das Ergebnis sofort darstellen und die Bestätigung des Servers im Hintergrund abwarten. Das fühlt sich verzögerungsfrei an. Voraussetzung ist ein sauberer Rückweg: Schlägt der Vorgang fehl, muss die Oberfläche den alten Zustand wiederherstellen und das verständlich melden.
Ungeeignet ist die optimistische Variante überall dort, wo ein Fehlschlag teuer wird: eine Bestellung, eine Freigabe mit Rechtsfolge, eine Zahlung. Dort warten Sie die Bestätigung ab und zeigen währenddessen ehrlich an, dass der Vorgang läuft.
Wann schadet Animation mehr, als sie nützt?
Dauerbewegung ist der häufigste Fehler. Ein pulsierender Knopf, ein endlos laufender Logostreifen, ein Symbol, das alle drei Sekunden wackelt: Solche Elemente ziehen Aufmerksamkeit ab, ohne je etwas mitzuteilen, und sie erschweren das Lesen für Menschen mit Aufmerksamkeitsstörungen erheblich.
- Parallax-Effekte über mehrere Ebenen erzeugen bei manchen Menschen Schwindel und kosten auf schwächeren Geräten spürbar Rechenzeit.
- Scroll-Hijacking — das Umdeuten des Scrollens in eine Folienschaltung — nimmt die Kontrolle über eine der grundlegendsten Gesten weg.
- Einblendungen beim Hineinscrollen verzögern das Lesen und lassen Inhalte auf schnellen Geräten flackern.
- Bewegungen über große Distanzen wirken bei gleicher Dauer langsamer als kurze; skalieren Sie die Zeit mit dem Weg.
Für alles gilt die Systemeinstellung. Wer im Betriebssystem reduzierte Bewegung aktiviert hat, teilt eine klare Präferenz mit. Werten Sie prefers-reduced-motion aus, ersetzen Sie Bewegungen dann durch weiche Farb- oder Deckkraftwechsel und schalten Sie automatisch laufende Sequenzen ganz ab. Ein eigener Schalter auf der Seite ist dafür selten nötig.
Ein praktischer Prüfschritt vor der Freigabe: Schalten Sie im Betriebssystem die reduzierte Bewegung ein und gehen Sie die wichtigsten Abläufe durch. Bleibt alles bedienbar und verständlich, war keine der Bewegungen tragend — genau so soll es sein.
Braucht man dafür eine Animationsbibliothek?
Für den überwiegenden Teil dessen, was auf einer Unternehmensseite oder in einem Fachportal gebraucht wird, nicht. transition und animation im Stylesheet decken Zustandswechsel, Ein- und Ausblendungen und Ladeanzeigen vollständig ab — ohne zusätzliches Skript, das erst geladen und ausgeführt werden muss.
Bleiben Sie dabei bei transform und opacity. Diese beiden Eigenschaften lassen sich von der Grafikeinheit berechnen, ohne dass der Browser das Layout neu aufbauen muss. Animierte Werte für width, height, top oder margin erzwingen dagegen bei jedem Einzelbild eine Neuberechnung und ruckeln auf schwächeren Geräten.
Ein Zwischenweg sind die eingebauten Übergänge des Browsers für Ansichtswechsel. Sie kosten kein zusätzliches Skript und lassen sich mit denselben Dauern und Kurven steuern, die Sie ohnehin definiert haben.
Eine Bibliothek rechnet sich erst bei aufeinander abgestimmten Abläufen über viele Elemente, bei Bewegungen entlang von Pfaden oder bei Übergängen zwischen ganzen Ansichten. Für einen Handwerksbetrieb mit Terminformular und Leistungsübersicht ist das ein Kilobyte-Aufschlag ohne Gegenwert.