Mikrointeraktionen gestalten
Mikrointeraktionen zeigen Nutzern mit kleinen Rückmeldungen und Übergängen, was auf der Oberfläche gerade passiert.
Ausgangslage
Ein Button bestätigt den Klick, ein Formularfeld zeigt eine gültige Eingabe. Solche Rückmeldungen verringern Fehleingaben, doppelte Klicks und Supportanfragen.
Typische Einsatzorte
Zustände von Buttons und Links: Hover, Fokus, gedrückt, lädt
Rückmeldung bei gültiger oder fehlerhafter Eingabe
Ladezustände und Fortschrittsanzeigen
Übergänge bei Menüs, Dialogen und Akkordeons
Bestätigungen nach Speichern, Senden oder Hinzufügen
Gestaltungsregeln
Jede Animation zeigt eine Veränderung oder bestätigt eine Handlung. Was nur schmückt, lenkt ab. Dauer und Bewegungskurven sind im Design-System festgelegt. Wer reduzierte Bewegung eingestellt hat, sieht eine ruhige Variante. Das schützt auch Menschen mit Gleichgewichtsstörungen.
Technik
Wir nutzen CSS-Transitions und die Web Animations API. Animiert werden nur die Eigenschaften transform und opacity, die der Browser mit wenig Rechenaufwand verarbeitet. Das hält die Oberfläche flüssig und schont die Core Web Vitals.
Vorgehen
Die Interaktionen entstehen im Figma-Prototyp, werden früh mit der Entwicklung abgestimmt und im Design-System dokumentiert.