Keine Netzwerkverbindung...
Zeige Offline-Version

Was sind Microinter­actions und warum sind sie wichtig?

Microinteractions definieren, wie die Interaktion zwischen Mensch und Maschine im Detail vonstatten geht. Im Unterschied zu Features, also den Hauptfunktionen eines Programms, die oft komplex, zeitaufwändig und geistig anspruchsvoll sind, sollten Microinteractions einfach, kurz und unkompliziert sein; beispielsweise ist ein Musik-Player ein Feature, die Lautstärkeregelung ist eine Microinteraction.[1]
In einigen Fällen kann eine Microinteraction (aus Nutzersicht) aber auch das komplette Produkt sein; ein einfacher Toaster erfüllt seinen Zweck mit Hilfe einer einzigen Interaktion: Brot wird hineingesteckt, der Hebel hinuntergedrückt und danach kommt der fertige Toast wieder zum Vorschein, sobald er fertig ist (Natürlich sind die meisten Toaster heute komplexer und haben zumindest eine Möglichkeit der Einstellung des gewünschten Röstgrades). In ähnlicher Weise können auch Programme auf Smartphones oder Computern aus einer Interaktion bestehen. Beispiele hierfür sind Taschenrechner- oder Wetter-Apps. Die Nutzung von Features kann meist heruntergebrochen werden, bis sie aus einem System von Microinteractions besteht.[2]

The Details are not Details
Charles & Ray Eames[3]

Dan Saffer schuf mit dem Buch ›Microinteractions - Designing with Details[4] die Grundlage für den Diskurs über Microinteractions. Die Unterteilung von Microinteractions in Bestandteile führt zu einer intensiven Auseinandersetzung mit jedem einzelnen Teilschritt. So ermöglicht sie Gestaltern ein tieferes Verständnis der Funktionsweise von Microinteractions.
Sie bestehen aus einem Auslöser, Regeln, Rückmeldung und Meta-Regeln. Dies gilt auch, wenn nicht jeder Bestandteil bewusst gestaltet wurde. Wann immer ein Nutzer mit einem Produkt jeglicher Art interagiert, kann die Interaktion auf diese Weise aufgeteilt werden. Der Fokus dieser Arbeit liegt jedoch auf digitalen Benutzerschnittstellen.

Microinteractions eignen sich nach Saffer beispielsweise gut für folgende Zwecke[5]:

  • Bewältigung einer einzigen Aufgabe
    Beispiel: Abschicken einer Kurznachricht
  • An- oder Ausschalten einer Funktion
    Beispiel: Ein-/Ausschalten einer Lampe
  • Änderung einer Einstellung
    Beispiel: Wahl des genutzten Bildformates einer Digitalkamera
  • Anzeigen oder Erstellen eines kurzen (Text-)Inhaltes
    Beispiel: Setzen einer Statusmeldung
  • Interaktion mit einem einzigen Datenelement
    Beispiel: Aktienpreis anzeigen oder Temperatur einstellen
  • Kontrolle eines laufenden Prozesses
    Beispiel: Wechseln eines Fernsehkanals
  • Verbinden von Geräten
    Beispiel: Auswahl des WLAN-Netzwerks

Im umkämpften Markt um die Aufmerksamkeit von Nutzern sind Microinteractions entscheidend. Wenn sich die Grundfunktionen der Wettbewerber prinzipiell auf demselben Niveau befinden, sind es Microinteractions, die einen großen Teil der Markenidentität ausmachen.
Mit konkurrierenden Betriebssystemen wie Windows und MacOS oder Android und iOS lassen sich meist die gleichen Ergebnisse erzielen. Zwar hat fast jeder Nutzer eine Präferenz, diese jedoch zu begründen, wird den meisten schwer fallen. Den Unterschied in der alltäglichen Nutzung machen die tief verinnerlichten Microinteractions. Dazu gehören zum Beispiel das ›Snapping‹ von Fenstern in Windows, die ›Spotlight‹-Suche in MacOS, die Gestensteuerung des iPhone X oder die ›zurück‹-Schaltfläche unter Android.
Die Microinteractions eines plattformübergreifenden Produktes können und sollten sich je nach Gerät und System zwar unterscheiden, um plattformspezifische Konventionen einzuhalten, können aber eine gewisse Konsistenz ermöglichen. Microinteractions bieten die Möglichkeit, ein Produkt plattformübergreifend markenbildend zu gestalten.
Die Gestaltung von Microinteractions besteht jedoch nicht daraus, jede Interaktion auf neue und aufregende Art zu lösen – im Gegenteil: es sollte so viel wie möglich auf Grundlagen und Standards zurückgegriffen werden.

The design of your product is only as good as it’s smallest part.
Dan Saffer[6]

Ein komplexes Problem in Einzelschritte zu unterteilen und damit lösbar zu machen ist eine der Hauptaufgaben von Designern. Ein Fokus auf Mikro-Interaktionen hilft dabei, sich auf das Wesentliche zu konzentrieren und ein Produkt nicht mit Funktionen zu überladen. Die Details eines Produktes machen die Wahrnehmung von Moment zu Moment aus. Nahtlose Übergänge dazwischen ermöglichen den Flow der Nutzung.
Selten gilt die Aufmerksamkeit des Designers – geschweige denn des Nutzers – diesen kleinen Bausteinen der Nutzererfahrung. Wenn sie doch Beachtung finden, liegt es daran, dass sie schlecht oder ungewohnt implementiert sind (z. B. Flugmodus in iOS 11.2[7]), jemand eine bessere Lösung für ein altes Problem gefunden hat (z. B. Drag&Drop[8]) oder eine neue Technologie aufkommt und ein Umdenken ermöglicht bzw. erfordert (z. B. Sprachassistenten und Conversational Interfaces[9]).
Microinteractions werden zumeist erst am Ende eines Produktentwicklungsprozesses Aufmerksamkeit geschenkt. Wenn dabei auf übliche Muster und Komponenten zurückgegriffen wird, mag das Ergebnis ein nutzbares Produkt sein. Wenn jedoch ein herausragendes digitales Interface geschaffen werden soll, führt kein Weg daran vorbei, viel Zeit und Arbeit in Microinteractions zu investieren. Werden die Details eines digitalen Produktes nicht ausreichend gut umgesetzt, kann daraus entstehende Frustration schnell die Nutzererfahrung stören. Negative Erfahrungen bleiben meist leichter im Gedächtnis als positive. Da sich schlechte Nachrichten leichter verbreiten als gute, würden sie nicht nur den Gesamteindruck des Produktes trüben, sondern auch die öffentliche Meinung beeinträchtigen.

Eine häufige Microinteraction mit Optimierungsbedarf: In fast jedem Untermenü dieser Art erscheinen Unterpunkte erst nach einer Verzögerung. (Zum Abspielen auf Bild klicken) Bildquelle
Ohne eine Verzögerung, welche Nutzern Zeit lässt, Unterpunkte zu erreichen, ist hier eine diagonale Cursorbewegung nicht möglich. Bildquelle
In dem Menü auf Amazon.com steckt sehr viel mehr Aufwand als es zunächst den Anschein hat: Hier ermöglicht ein von der Cursorposition ausgehendes Dreieck diese Bewegung ohne versehentliche Auswahl eines anderen Menüpunktes der ersten Ebene. Bildquelle

Das ›Paretoprinzip‹ (umgangssprachlich ›80-20-Regel‹) besagt, dass 80% der Ergebnisse mit 20% des Gesamtaufwandes erreicht werden können[10]. Da Microinteractions so vermeintlich klein sind, werden sie wohl oft den verbliebenen 20% zugeordnet (und so lange aufgeschoben, bis sie vergessen werden). Natürlich ist der Mensch anpassungsfähig und kann sich auch an ein misslungenes Interface gewöhnen – und dieses einem aktualisierten, möglicherweise besseren Interface aus reiner Gewohnheit vorziehen. Es kann auch vorkommen, dass ein Produkt erfolgreich ist, allein weil es neu und einzigartig ist. Menschen übersehen eine schlechte Benutzererfahrung gerne, wenn sie zu abgelenkt sind von neuartiger Technik. 80% des Ersteindrucks eines Nutzers sind je nach Art des Produktes vermutlich mit nur 20% des Aufwandes und ohne die bewusste Gestaltung von Microinteractions möglich. Je mehr Nutzung ein Produkt erfährt, desto wichtiger werden Microinteractions, da sie ständig in Aktion sind – die »Wichtigkeit« von Interaktionen sollte also nicht an deren Dauer oder Bildschirmanteil gemessen werden, sondern eher an der Häufigkeit der Nutzung. Der hohe Aufwand, perfekte Microinteractions zu implementieren, sollte in die 20% der grundlegenden Interface-Elemente investiert werden, mit denen 80% der Interaktionen stattfinden.

I consider details more important than a great draft. Nothing works without the details. Details are the essentials. The standard to measure quality by.
Dieter Rams[11]


  1. vgl. Saffer, Dan: Microinteractions - Designing with Details, O'Riley Media, 2013 ↩︎

  2. vgl. Saffer, Dan: Microinteractions - Designing with Details, O'Riley Media, 2013 ↩︎

  3. Vitra Quotes Posters: Details - Charles & Ray Eames, 1950 ↩︎

  4. Saffer, Dan: Microinteractions - Designing with Details, O'Riley Media, 2013 ↩︎

  5. vgl. Saffer, Dan: Microinteractions - Designing with Details, O'Riley Media, 2013 ↩︎

  6. Saffer, Dan: Microinteractions - Designing with Details, O'Riley Media, 2013 ↩︎

  7. Apples Flugmodus schaltet WLAN nicht immer ab - Golem.de, 11.12.2017 ↩︎

  8. 1982 Xerox Star User Interface - Gunnar Trossö / Youtube ↩︎

  9. Technical and Social Challenges of Conversational Design von Adrian Zumbrunnen / Frontend Conference Zurich / Vimeo ↩︎

  10. Wikipedia.de: Paretoprinzip ↩︎

  11. Microinteractions Quick Reference von Dan Saffer ↩︎