Microinteractions - Wie kleine Momente eine großartige UX schaffen

Was genau sind Microinteractions?

Microinteractions zeichnen sich durch kleine Sets von Handlungen aus, die erfolgen bzw. erfolgen müssen, um ein bestimmtes Ziel zu erreichen. Dies kann schon das Favorisieren eines Tweets sein oder auch ein einfacher Kalendereintrag. Werden diese Interaktionen mit besonderer Aufmerksamkeit behandelt, können langweilige, mühselige und anstrengende Abläufe zu einem wahren Vergnügen werden.

Wenn bei der Entwicklung einer Anwendung neben dem Design auch ein Augenmerk auf die User Experience gelegt wird, trägt dies maßgeblich dazu bei, ob ein Erfolg oder Misserfolg mit einem Produkt erlebt wird. Ziel einer jeden Anwendung sollte es sein, Nutzer mit einem positiven Gefühl zurückzulassen. Hier kommen unter anderem Microinteractions ins Spiel, die der Interaction Designer Dan Saffer in seinem Buch „Microinteractions - Design with Details“ wie folgt beschreibt:

„ Microinteractions sind die kleinen Teile der Funktionalität, die uns umgeben. Wenn Sie sich auf diese konzentrieren, können Sie eine überlegene Benutzererfahrung erzielen.“

Um eine positive User Experience zu bieten, muss die Kommunikation zwischen Mensch und Maschine simpel gehalten werden, eindeutig sein und rasch funktionieren. Diese Kommunikation wird größtenteils mittels Microinteractions realisiert. Sie bilden im übertragenen Sinne die Schnittstelle zwischen den beiden Kommunikationspartnern Mensch und Maschine.

Der Gebrauch und die Umsetzung von Microinteractions ist für uns als Softwaredienstleister ein wichtiger Bestandteil des Entwicklungsprozesses. Sie stehen im unmittelbaren Zusammenhang mit dem „Joy of Use“ oder auch der User Experience und machen ein Produkt oder eine Anwendung oft erst einzigartig.

Vier Phasen nach Dan Saffer

Der Designer Dan Saffer unterteilt Microinteractions in vier Phasen oder auch Komponenten. Die erste Phase besteht aus einem Auslöser oder auch Trigger genannt, der eine Microinteraction initiiert. Die greifenden Regeln bestimmen die Funktionsweise. Die Rückmeldung, also das Feedback, ist für die Kommunikation zwischen Mensch und Maschine notwendig. Modi werden angewendet, wenn eine seltene Aktion vorliegt, die eine Microinteraction überladen könnte. Schleifen oder auch Loops legen die Dauer einer Microinteraction fest und können z.B eine Animation verlängern oder wiederholen.

Orientiert sich ein Designer an diesem Aufbau, können bereits viele Fehler vermieden werden.

Zur Verdeutlichung haben wir hier ein einfaches Beispiel eines Logins erstellt

Das Monster unterstützt spielerisch die Eingabe. Seriosität und Nutzen müssen natürlich immer im Kontext betrachtet werden. Eine solch verspielte Animation wäre für den Login einer Banking-App beispielsweise eher abschreckend.

Betrachten wir nun in dem Beispiel des Logins die Trigger, Regeln, das Feedback und die Schleifen sowie Modi.

Der Nutzer initiiert den Start der Animation durch das Antippen des Eingabefeldes. Die Regeln legen fest, wie sich die Animation bei den verschiedenen Interaktionen des Nutzers verhält. Stoppt dieser beispielsweise die Eingabe, darf die Animation nicht weiter laufen, bzw. das Monster nicht weiter nach rechts schielen. Bei jedem weiteren Buchstaben verfolgen die Blicke des Monsters die Eingabe weiter. Wird die Eingabe auf das Passwortfeld gelenkt, schaut das Monster weg. Dieses Feedback unterstreicht die Tatsache, dass hier ein Passwort eingegeben wird und erklärt spielerisch den aktuellen Prozess.

Schleifen und Modi kommen an dieser Stelle nicht wirklich zum Einsatz.

Ein langweiliger oder auch lästiger Prozess wird in unserem Beispiel zu einem unterhaltsamen Erlebnis.

Fazit

Bei der Frage, zu welchem Zeitpunkt der Entwicklung Microinteractions Beachtung geschenkt werden sollte, spielen mehrere Faktoren eine Rolle. Einige Microinteractions können bereits in der Struktur der Anwendung eine große Rolle spielen, andere müssen erst nach der ersten Implementierung beleuchtet werden. Wichtig ist es auch, immer im Fokus zu behalten was erreicht werden soll. Animationen rauben die Aufmerksamkeit des Nutzers und sollten sparsam und zielführend eingesetzt werden.

Quelle: "Microinteractions - Design with Details" von Dan Saffer (2013)