Microinteractions - All the small things

Es sind meist die kleinen feinen Dinge, die es ausmachen, ob wir etwas lieben oder nicht. Was einst Tom DeLonge von Blink 182 im Song „All the small things“ – eine schnuckelige Liebeserklärung an seine damalige Freundin und heutige Frau – besang, ist heute von äußerst hoher Bedeutung für uns Designer und Developer und meist ein entscheidender Faktor, wenn es um die User Experience unserer Produkte geht. Denn gerade heute – wo wir eine Überflutung durch Webseiten, Apps und digitale Geräte erleben – ist es umso wichtiger, mit scharfem Auge für das Minimale und mit großer Liebe zum Detail, Nutzer mit Liebeserklärungen für unser Produkt zu gewinnen.

Bild

Die Magie liegt in den Details

Fitness-Apps, Todo-Lists, Portfolio-Websites, Online-Shops, Smartphones, Tablets, Mp3-Player – digitale Produkte gibt es heute wie Sand am Meer und der Großteil davon tut das, wofür sie gemacht wurden, auch wirklich gut. Wie soll also das eigene Produkt aus dieser Masse herausstechen? Wie bringen wir die Nutzer dazu, sich für unser Produkt zu entscheiden und auch bei diesem zu bleiben? Eine Antwort liegt in der Liebe zum Detail, in fein durchdachten und raffiniert umgesetzten Microinteractions, mit denen wir unsere Produkte versehen und den Usern damit im besten Fall Glücksgefühle bescheren.

Microinteractions, was ist das?

Microinteractions sind im Konkreten einzelne, äußerst simple Interaktionen mit einem Produkt, die sich einzig und allein um genau einen Anwendungsfall drehen. Dazu zählen beispielsweise das Entsperren des Tablets, das Hochfahren des Betriebssystems, das Versenden einer Mail, das Stummschalten des Telefons oder das Refreshen von Daten. Microinteractions gibt es nicht nur in unseren Computern und Smartphones, die wir täglich benutzen. Wir finden sie in sämtlichen Geräten, die wir bei uns tragen, in unseren Wohnräumen und Einrichtungsgegenständen (Ein/Ausschalten einer Lampe bspw.). Sie sind überall integriert, in der Umgebung in der wir leben und arbeiten. Es sind meist Dinge, die für uns selbstverständlich sind und gar nicht wahrgenommen werden. Genau hier besteht die Kunst, solche Use Cases zu identifizieren und gekonnt in Szene zu setzen.

Microinteractions können beispielsweise folgende Aktionen auslösen:

• Ein/Ausschalten von Geräten
• Öffnen/Schließen von Programmen
• Steuern von laufenden Prozessen, zb. das switchen auf den nächsten Musik-Track
• Konfiguration von Einstellungen
• Erledigen eines konkreten Tasks
• Verbinden von Geräten
• Interaktion mit einzelnen Informationen

Folgende Beispiele zeigen, was alles in den Bereich Microinteractions fällt, damit ihr ein genauere Vorstellung davon bekommt:

https://vine.co/v/bEblaqQrxm0
https://vine.co/v/bErUwzMJZPH
https://vine.co/v/bEgwDAZ3Jeh
https://vine.co/v/b9QQtwQhqFj

(Bilder sind von http://microinteractions.com/what-is-a-microinteraction/)

Und hier ein paar Beispiele für wirklich toll gemachte Microinteractions:

Reload Animation der Yelp-App:

https://youtu.be/K5kgjHvMIGA
Upload Animation:

Bild

Float Button Animation:

Bild

Animation für Pull & Refresh:

Bild

Beispiel für eine Download Animation:

Bild

Das Microinteractions Model

Um effektive und nützliche Microinteractions zu designen, hat uns der bedeutende Interaktionsdesigner Dan Saffer in seinem Buch zu dieser Thematik ein Model beschrieben, nach welchem jede Microinteraction aufgebaut sein sollte.

Microinteractions bestehen demnach aus 4 Teilen.

Trigger: Trigger starten die Microinteraction. Ein Trigger kann User (Klick)- und Systemgesteuert (Eingang einer Textmessage) sein.

Rules: Unter Rules versteht man eine Sequenz von Vorgängen, die definiert, was in der Interaktion passiert. Rules sind die Logik hinter der Microinteraction.

Feedback: Das Feedback ist das Resultat der Interaktion, sprich was der Nutzer am Ende der Interaktion wahrnimmt, das „Feel“ im „Look and Feel“.

Loops and Modes: Loops beschreiben wie lange eine Interaction anhält. Wann endet sie oder wiederholt sie sich? Modes definieren einen alternativen Weg der Microinteraction bspw. der „Passwort vergessen“-Modus in Login Forms.

Guidelines für das Design von Microinteractions

Zusätzlich zum 4-teiligen Model gibt uns Dan Suffer auch einige Design-Prinzipien mit auf den Weg, die wir beim Entwerfen von Microinteractions im Hinterkopf haben sollten.

Nicht von Null starten: In den meisten Fällen wissen wir immer etwas über die Nutzer unserer Produkte und in welchem Kontext sie verwendet werden. Dieses Wissen gilt es zu analysieren um daraus entsprechende Möglichkeiten für Microinteractions abzuleiten.

Information on the Top: Wenn möglich sollten wir Informationen, die in unseren Produkten stecken und die Nutzer am meisten interessieren, nach außen kehren. Das App-Icon einer Wetter-app ist hier ein typisches Beispiel.

Verhindere Fehler durch die Nutzer: Es darf nicht passieren, dass eine Microinteraction fehlerhaft ausgeführt wird. Alle Anwendungsfälle durch die Nutzer müssen genau durchdacht und Fehlausführungen abgefangen werden.

Verwende das Übersehene: Um Feedback zu geben, sollen wir jene Interface Elemente nutzen, die bereits vorhanden sind, Cursor, Scrollbar, Button States, Vibration etc. Wir sollten nur neue Elemente hinzufügen, wenn es unbedingt notwendig ist.

Sprich wie ein Mensch: Texte sollten immer so konzipiert sein, dass sie sich lesen lassen, als würde ein Mensch mit einem sprechen. Einfach und direkt lautet die Devise.

Lange Loops: Wir sollten auch daran denken was passieren soll, wenn die Microinteractions ein zweites Mal ausgeführt wird, das zehnte mal usw.

Conclusio

Um exzellente Microinteractions zu entwickeln bedarf es ein ausgereiftes Einfühlungsvermögen in die Nutzer der eigenen Produkte. Man muss verstehen was sie versuchen mit dem Produkt zu erreichen, wie sie es anwenden, wie und in welchem Kontext die Interaktion zu Stande kommt. Es ist notwendig Empathie zu entwickeln, sich vorzustellen welche Ansprüche der User an das Produkt und seine Bedienung hat um daraus sinnvolle, einzelne Microinteractions abzuleiten, die den Nutzer in seinem Vorhaben unterstützen und gleichzeitig Vergnügen bereiten.

Mit sinnvoll eingesetzten Microinteractions verleihen wir unseren Produkten Persönlichkeit, Charme und Sympathie, heben uns ab von der Masse und geben den Nutzern die Möglichkeit sich in unsere Produkte zu verlieben.

Wer sich noch tiefer in die Materie Microinteractions einlesen möchte, dem möchte ich das bereits angesprochene Buch „Microinteractions – Designing with Details“ von Dan Saffer ans Herz legen.