Zum Inhalt springen

Microinteraction

oder auch Mikrointeraktion

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 24.09.2026

Eine Microinteraction ist eine kleine, in sich abgeschlossene Rückmeldung eines Interfaces auf eine einzelne Handlung, etwa das Umlegen eines Schalters. Sie hat einen klaren Auslöser, dauert Millisekunden und betrifft genau ein Element. Bewegung ist dabei nur eines der Mittel: Eine Farbänderung oder eine kurze Vibration erfüllt denselben Zweck. Damit grenzt sie sich von Animation und Motion Design ab, die Bewegung als Gestaltungsmittel über die ganze Oberfläche hinweg behandeln.

Microinteraction

Kleine, in sich abgeschlossene Rückmeldung eines Interfaces auf eine einzelne Handlung, etwa das Umlegen eines Schalters.
Beispiel: „Die Microinteraction beim Speichern ist ein Häkchen, das den Ladekreis ersetzt.“

Auch: Mikrointeraktion. Der Begriff geht auf das Buch „Microinteractions“ von Dan Saffer aus dem Jahr 2013 zurück, das den Aufbau aus Auslöser, Regel und Rückmeldung beschreibt.

Abgrenzung: Eine Animation kann Teil einer Microinteraction sein, muss es aber nicht. Eine Bildergalerie, die beim Scrollen aufzieht, ist eine Animation ohne Microinteraction, weil ihr die Handlung fehlt, auf die sie antwortet.

Woraus eine Microinteraction besteht

Am Anfang steht der Auslöser, etwa ein Klick oder ein Wisch. Darauf folgt die Regel, also die Festlegung, was in diesem Fall passieren darf. Und zuletzt die Rückmeldung, die mitteilt, welche Regel gegriffen hat. Der Herz-Button unter einem Beitrag zeigt alle drei Teile in einem Vorgang: Tippen, Zustand umschalten, gefülltes Herz.

Wichtig ist die Grenze nach oben: Sobald mehrere Schritte nötig sind oder die Ansicht wechselt, handelt es sich um einen Ablauf.

Wo sie den größten Unterschied macht

Am stärksten wirkt sie dort, wo eine Handlung sonst ins Leere läuft. Ein Button, der nach dem Klick nichts tut, während im Hintergrund gespeichert wird, führt zum zweiten Klick und damit häufig zur doppelten Bestellung. Eine kurze Zustandsänderung am Button selbst löst das ohne weiteren Text.

Ein Eintrag, der beim Löschen kurz zusammenfährt, macht sichtbar, dass er verschwindet, und wer das sieht, versteht die Liste danach ohne Nachzählen.

Wann sie im Weg steht

Was einmal nett ist, kann bei täglicher Benutzung zur Bremse werden. Eine Microinteraction über 600 Millisekunden verzögert eine Aufgabe, die jemand vierzig Mal am Tag ausführt, um Minuten in der Woche. Für wiederkehrende Handlungen gilt deshalb die kürzeste Fassung, die noch wahrnehmbar ist.

Dazu gehört die Rücksicht auf Bewegungsempfindlichkeit. Wer im System weniger Bewegung eingestellt hat, gibt das über die Medienabfrage prefers-reduced-motion weiter. Die Rückmeldung bleibt bestehen und kommt ohne Bewegung: eine Farbänderung oder ein Symbol statt einer Verschiebung. Wo eine Handlung keine Folge hat, braucht es auch keine Quittung.

Siehe auch:

Feedback Loop (UX)

Der Kreis aus Handlung, Rückmeldung und nächster Handlung, über den jemand lernt, wie eine Oberfläche auf ihn reagiert.

#Benutzererfahrung (UX)

Animation im Webdesign

Die Bewegung von Elementen einer Website, ausgelöst durch Bedienung, Scrollen, Ladevorgänge oder Zeitablauf.

#Webdesign-Grundlagen

Motion Design im Web

Die Gestaltung von Bewegung in digitalen Oberflächen, einschließlich Dauer, Beschleunigung und Bedeutung der Übergänge.

#Webdesign-Grundlagen

Zustände von Bedienelementen (Default, Hover, Active, Disabled)

Die verschiedenen Darstellungen, die ein Bedienelement je nach Situation annimmt, um seinen Status erkennbar zu machen.

#Webdesign-Grundlagen