Microinteractions – Kleine Ereignisse mit großer Wirkung

Ein Einfaches Nach-oben-Scrollen reicht, um den News Feed zu aktualisieren und gerade eingetroffene Neuigkeiten einzusehen. Eine kurze Fingerbewegung, die den meisten Smartphone-Nutzern geläufig ist und wahrhaft intuitiv von der Hand geht. Eine unscheinbare Interaktion, die kaum noch wahrgenommen wird, obwohl – oder gerade weil – sie in nahezu allen mobilen Anwendungen ihren Platz gefunden hat. Diese von Loren Brichter für die Applikation Tweetie entwickelte Touchscreen-Geste Pull-to-Refresh ist nur ein Beispiel dafür, wie sich durch die fortschreitende Technologisierung mitsamt immer ausgefeilteren Computersystemen die Art und Weise, wie der Mensch mit Maschinen interagieren kann, über den Lauf der Dekaden stetig weiterentwickelt und vielerlei Anpassungen erlebt hat.

Während die ersten Computer in den 50er Jahren noch mit Lochkarten gefüttert werden mussten, schwang sich in den 60ern die Kommandozeile zur dominanten Interaktionsform auf. Bis in die 80er Jahre hinein konnten Nutzer so über dieses textbasierte User Interface (UI) Befehle mithilfe einer Tastatur eingeben, um mit dem Computer zu kommunizieren, bevor mit der Erfindung des Xerox Alto, der erstmals mit einer Computermaus gesteuert werden konnte, die erste grafische Benutzeroberfläche zur visualisierten Darstellung von Programmen das Licht der Welt erblickte und den Weg in die Massentauglichkeit ebnete.

Heutzutage sorgen neben Touchscreens auch eine moderne Sensorik und künstliche Intelligenz dafür, dass die Bedienmöglichkeiten durch Gesten- oder Sprachsteuerung um ein Vielfaches erweitert wurden und scheinbar keine Grenzen kennen. Es ist schlichtweg zum Alltag geworden, dass intelligente Geräte miteinander vernetzt sind und nunmehr auf unterschiedlichsten Bildschirmgrößen auch mit den Fingern getippt, gescrollt oder gewischt werden kann. Für Designer stellt sich daher mehr denn je die Frage, wie sich ein User Interface darstellen muss, um die Interaktion der Nutzer mit dem System zum Wohle einer optimalen User Experience so intuitiv und selbsterklärend wie nur möglich zu gestalten? Eine Antwort hierauf verbirgt sich, wie so oft, im (kleinsten) Detail: minimale, meist nur unterbewusst wahrnehmbare Funktionen und Animationen, die den Nutzer leiten und unterstützen – sogenannte Microinteractions.

Jeder Moment zählt – Die Interaktion zwischen Mensch und Maschine

Die Interaktion mit Maschinen bestand bis in das 19. Jahrhundert hinein in erster Linie aus einer physischen Verbundenheit. Der Mensch war mehr oder minder Teil der Maschine, indem er sich in die Tretmühle begab oder Pumpen und Hebel unter körperlicher Anstrengung händisch betätigen musste. Durch die Einführung der Elektrizität veränderte sich dieses Verhältnis, da der Mensch fortan nicht mehr selbst als Eingabegerät herhalten musste, sondern maschinelle Funktionen via Schalter oder Knopfdruck auslösen konnte – in vielen Fällen sogar, ohne sich in der Nähe der Maschine zu befinden. Diese physische Entkopplung verlangte zwangsläufig nach einer neuen Verbindung zwischen Mensch und Maschine. Eine Schnittstelle, die dafür sorgte, dass die Maschine die Eingaben auch ohne direkten Kontakt durchführte und dem Menschen Rückmeldung über Status und Vorgang gibt.

Da digitale Devices im 21. Jahrhundert schlichtweg zum Alltag gehören und die Interaktionsmöglichkeiten stetig erweitert werden, ist dieses Feedback von der Maschine zum Menschen wichtiger denn je geworden und weitet sich immer weiter aus. Um dies zu adressieren, machte sich der Designer Dan Saffer in seinem 2013 erschienen Buch Microinteractions: Designing with Details daran, den Fokus beim Interaktionsdesign von der Makro- auf die Microebene zu lenken. Seiner Meinung nach kann eine gelungene Mensch-Maschine-Interaktion und somit auch ein optimales Nutzererlebnis nur dann gewährleistet werden, wenn den kleinsten Momenten die größte Aufmerksamkeit geschenkt wird.

Diese von Saffer Microinteractions getauften Momente drehen sich immer um einen einzelnen Anwendungsfall und folgen hierbei einer vierteiligen Struktur, bestehend aus Trigger, Rules, Feedback und Loops & Modes:

• Trigger: der initiale Auslöser und Startpunkt einer Microinteraction, der sowohl vom Nutzer als auch vom System initiiert werden kann. Der Nutzer drückt einen Knopf zum Versenden einer Nachricht versus dem Nutzer wird beim Empfang einer Nachricht ein Geräusch ausgespielt. 
• Rules: definierte Regeln und Parameter, denen die Microinteraction nach der Auslösung folgt und die den weiteren Einfluss des Nutzers inkludieren. Der Nutzer stellt seinen Wecker auf 7 Uhr und das System informiert den Nutzer via Alarmgeräusch, wenn die Zeitbedingung erfüllt ist. 
• Feedback: eine Rückmeldung darüber, was durch die Microinteraction passiert oder passieren wird. Der Nutzer muss bei der Registrierung ein neues Passwort anlegen und wird während der Eingabe über dessen Qualität (schwach/stark) informiert. 
• Loops & Modes: definieren die Metaregeln der Microinteraction. Loops bestimmen hierbei die Dauer und Veränderungen einer sich wiederholenden Interaktion. Der Nutzer ignoriert den Wecker, wodurch der Alarm nach einer bestimmten Zeit wiederkehrt. Modes sind hingegen Änderungen an der üblichen Funktionsweise. Der Nutzer stellt sein Smartphone in den Flugmodus. 

Die Microinteractions selbst sind dabei oftmals für die Nutzer genauso unscheinbar wie die ihnen innewohnenden Regeln. Genau das ist auch so gewollt, da die Interaktion so natürlich und intuitiv wie nur möglich ablaufen soll. Der Nutzer soll schließlich nicht während der Bedienung des Interfaces unterbrochen werden, sondern einen Flow entwickeln. Im Optimalfall liefern Microinteractions durch subtile Animationen visuelles Feedback in unmittelbarer Nähe zum Auslöser, um den Status sowie Veränderungen wiederzugeben oder Informationen zur Fehlerbehebung und -vermeidung zu präsentieren. Im Sinne einer gelungenen User Experience bedeutet dies zuvorderst, dass sie der Erwartungskonformität des Nutzers entsprechen – sowohl in ihrer Gestaltung als auch in ihrer Funktion. Doch wie stellen sich diese Microinteractions nun in der Praxis dar?

Best Practices – Wie Microinteractions wirken

Egal ob vom Nutzer selbst oder vom System getriggert, bei jeglicher Interaktion will der Nutzer auf dem Laufenden bleiben, um das Gefühl der Kontrolle zu wahren und nicht im Dunkeln zu tappen. Eine der gängigsten Microinteractions ist daher das Miteinbeziehen des Nutzers bei auftretenden Wartezeiten, die durch das System oder externe Faktoren wie eine langsame Internetverbindung verursacht werden können. Löst der Nutzer durch eine Aktion oder das System, z. B. wegen eines Updates, einen Ladevorgang aus, muss dies dem Nutzer auch in Form einer Fortschrittsanzeige oder einer Ladeanimation schnellstmöglich kommuniziert werden. Dadurch wird ihm versichert, dass die Aufgabe vom System erfasst wurde und im Hintergrund bearbeitet wird. Je nach Dauer kann sich der Nutzer somit beruhigt zurücklehnen oder zwischenzeitlich einer anderen Aufgabe widmen.

Ladevorgänge, bei denen der Nutzer seine Aufgabe ungewollt unterbrechen muss, gehören zusammen mit Pop-ups oder Notifications zu den auffälligsten Microinteractions. Wobei gerade Pushnachrichten im Gegensatz zu Wartezeiten natürlich von Nutzerseite gewollt sind. Wird eine Aufgabe abgeschlossen oder eine Nachricht über E-Mail oder Messenger erhalten, will der Nutzer schließlich ähnlich einem Telefonanruf direkt darüber informiert werden. Das gleiche gilt auch bei möglichen Systemfehlern. Kann eine Nachricht nicht versandt, ein Update nicht durchgeführt oder ein Programm nicht geöffnet werden, muss der Nutzer darüber in Kenntnis gesetzt werden und bestenfalls enthält die ihm von Systemseite getriggerte Information auch Vorgehensweisen zur Fehlerbehebung.

Microinteractions sind aber nicht nur dazu in der Lage, dem Nutzer aktuelle Statusreports oder Feedback auf bereits getriggerte Aktionen zu liefern, sie können und sollen dem Nutzer auch direkt vermitteln, welche Aktion sich hinter ihnen verbirgt. Grafische Interfaces nutzen hierfür zumeist bekannte Symbole und allgemeingültige UI-Patterns, die auf den ersten Blick decodiert werden können. Ein Haus-Icon führt zum Startscreen, ein Zahnrad zu den Einstellungen oder drei aufeinander liegende Striche zum (Burger-)Menü. Das alles sind angelernte Symbole, die sich mit den Erwartungen des Nutzers decken müssen und in ihrer Anordnung auf dem Bildschirm zudem für eine visuelle Hierarchie sorgen.

Auf dem Desktop hat sich dabei ebenfalls durchgesetzt, dass dem Nutzer mit dem sogenannten Hovereffekt Informationen über den zukünftigen Status oder die Interaktionsmöglichkeiten bereitstehen. Wenn der Nutzer mit dem Mauszeiger über einem Button schwebt, ändert dieser seine Gestalt, um die Möglichkeit einer Aktion anzuzeigen. Eine kleine Funktion wie der vielfach kopierte Like Button von Facebook zeigt so beim Darüberhovern weitere Symbole zur Auswahl an, für die sich der Nutzer entscheiden kann. In dieser Form können so, gerade bei noch unbekannten Icons, Tooltips angezeigt werden. Diese können eine kurze Erklärung hinsichtlich der Interaktionsmöglichkeit liefern oder das Element um zusätzliche Optionen erweitern.

Essenziell für die Nutzererfahrung von heute und morgen

Microinteractions sind ein essenzieller Teil von UX-/UI-Designs, da sie den User auf seiner Journey leiten und unterstützen, indem sie ihm klare Interaktionsmöglichkeiten aufzeigen, direktes Feedback liefern und notwendige Informationen effektiv vermitteln. Sie sind dabei nicht nur aus keinem Interface mehr wegzudenken, sondern können sich, wie im Falle des Like Buttons, auch als sogenannte Signature Moments etablieren. Winzige Momente, die das Unternehmen repräsentieren und sich in ihrem Alleinstellungsmerkmal von der Konkurrenz absetzen. Ein eingängiger Ton, eine ausgefeilte Ladeanimation oder eine individuelle Auslösesteuerung können so richtig eingesetzt zu einem höheren Wiedererkennungswert und nicht zuletzt zu einer Stärkung der Markentreue führen.

Wie in unserem Eingangsbeispiel Pull-zo-Refresh ersichtlich, können sich so auch über die Zeit Interaktionen verselbstständigen, die sich zu einem beinahe schon obligatorischen Bestandteil eines jeden Interfaces aufschwingen. Jedoch warnen einige Verhaltensforscher davor, dass zuvorderst junge Nutzer, die sich auf Social-Media-Plattformen tummeln, durch das mehr oder minder gedankenlose Aktualisieren in einen Sog aus Posts geraten, der eher einer Sucht denn einer spielerischen Bedienmöglichkeit gleicht. Sie sehen Pull-to-Refresh als einarmigen Banditen unter den Microinteractions, den selbst seine Erfinderin heutzutage als obsolet bezeichnet. Designer müssen sich deshalb bewusst machen, dass etablierte Microinteractions nicht einfach als allgemeingültiges Element eines Interface gesehen werden sollten, sondern immer wieder neugedacht und vor allem kritisch hinterfragt werden müssen – hinsichtlich ihrer Funktion, ihres Zusammenspiels mit dem gesamten Design und auch ihrer Auswirkungen auf die Nutzer.