--- title: "Microinteractions" url: "https://www.insideuxdesign.com/de/glossar/microinteractions" language: "de" description: "Was sind Microinteractions? Die vier Bausteine nach Dan Saffer einfach erklärt, mit Beispiel und Praxistipps. Lies, wie kleine Details Vertrauen schaffen." published: "2026-10-14T15:20:11+02:00" updated: "2026-10-14T15:20:11+02:00" --- # Microinteractions Microinteractions sind kleine, abgeschlossene Momente in einem Produkt, die genau eine Aufgabe erledigen, etwa ein Like oder ein Schalter, und dir sofort zeigen, was passiert ist. - **Buchstabe:** M - **Englischer Begriff:** Microinteractions UX-Glossar · engl. Microinteractions # Microinteractions Microinteractions sind kleine, abgeschlossene Momente in einem Produkt, die genau eine Aufgabe erledigen, etwa ein Like oder ein Schalter, und dir sofort zeigen, was passiert ist. Stell dir vor, du tippst in einer App auf das Herz unter einem Foto. Es füllt sich rot, hüpft kurz, und die Zahl daneben springt um eins nach oben. Das dauert keine Sekunde, aber du weißt sofort: Hat geklappt. Bliebe das Herz einfach grau, würdest du vermutlich noch zweimal tippen und dich fragen, ob die App hängt. Solche kleinen Momente heißen Microinteractions. ## Einfach erklärt Microinteractions sind kleine, abgeschlossene Interaktionen, die genau eine Aufgabe erledigen: einen Schalter umlegen, eine Nachricht als gelesen markieren, einen Wecker stellen, ein Passwort eingeben und sehen, ob es den Regeln entspricht. Ein Vergleich aus dem Alltag: Der Lichtschalter, der leise klickt, oder die Ampeltaste, die nach dem Drücken „Signal kommt“ anzeigt. Beides sind Kleinigkeiten, aber ohne sie bist du unsicher, ob etwas passiert ist. Bekannt gemacht hat den Begriff der Interaktionsdesigner Dan Saffer mit seinem Buch „Microinteractions“, das 2013 bei O’Reilly erschien. Saffers Grundgedanke: Ein Produkt wird nicht nur durch seine großen Funktionen gut oder schlecht, sondern auch durch die vielen Details dazwischen. ## Die vier Bausteine Saffer zerlegt jede Microinteraction in vier Teile: - **Auslöser (Trigger):** Was startet die Interaktion? Das kann eine Aktion der Person sein, etwa ein Tippen, oder ein Ereignis im System, etwa eine neue Nachricht. - **Regeln:** Was passiert danach, und was ist erlaubt? Zum Beispiel: Ein Like lässt sich mit einem zweiten Tippen zurücknehmen. - **Feedback:** Wie zeigt das System, was gerade passiert? Über Farbe, Bewegung, Ton oder Vibration. - **Schleifen und Modi:** Was passiert bei Wiederholung oder über längere Zeit, und gibt es Einstellungen, die das Verhalten ändern? Etwa ein Wecker, der sich jeden Werktag wiederholt. Am wichtigsten für die [Usability](https://www.insideuxdesign.com/de/glossar/usability) ist meist das Feedback. Es beantwortet die Frage, die sich Menschen nach jeder Aktion stellen: Hat das funktioniert? Mehr dazu im Artikel [Was sind Microinteractions und wie kann man diese einsetzen?](https://www.insideuxdesign.com/de/blog/was-sind-microinteractions-und-wie-kann-man-diese-einsetzen). ## Ein Beispiel Ein Beispiel: Bei einer Registrierung tippen Menschen ein Passwort ein, schicken das Formular ab und erfahren erst danach, dass ein Sonderzeichen fehlt. Viele ärgern sich, manche brechen ab. In der überarbeiteten Fassung stehen die Regeln direkt unter dem Feld. Während des Tippens wird jede erfüllte Regel mit einem Häkchen markiert. Die Aufgabe ist dieselbe, aber die Microinteraction nimmt die Unsicherheit heraus, bevor ein Fehler entsteht. ## Häufige Missverständnisse Microinteractions sind keine Dekoration. Eine Animation, die nur hübsch aussieht und jede Aktion um eine Sekunde verzögert, nervt spätestens beim zehnten Mal. Gute Microinteractions sind schnell, unaufdringlich und erklären etwas. Und sie sind nicht immer sichtbar: Auch eine kurze Vibration oder ein Ton kann eine Microinteraction sein. ## In der Praxis - **Gib auf jede Aktion eine Antwort.** Prüfe Buttons, Schalter und Formulare darauf, ob sie sichtbar reagieren. Ein Ladezustand ist besser als Stille. - **Halte Animationen kurz.** Bewegung soll Orientierung geben, nicht aufhalten. Respektiere außerdem die Systemeinstellung für reduzierte Bewegung. - **Nutze den Text mit.** Oft ist die beste Rückmeldung ein klarer Satz. Gute [Microcopy](https://www.insideuxdesign.com/de/glossar/microcopy) und eine passende Bewegung ergänzen sich. ## Verwandte Begriffe [Microcopy](https://www.insideuxdesign.com/de/glossar/microcopy), [Affordance](https://www.insideuxdesign.com/de/glossar/affordance), [Usability](https://www.insideuxdesign.com/de/glossar/usability), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [Dan Saffer: Microinteractions: Designing with Details. O’Reilly Media, 2013](https://www.oreilly.com/library/view/microinteractions/9781449342760/) - [Alita Kendrick: Microinteractions in User Experience. Nielsen Norman Group, 2018](https://www.nngroup.com/articles/microinteractions/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)