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 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?.
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 und eine passende Bewegung ergänzen sich.
Verwandte Begriffe
Microcopy, Affordance, Usability, Design System