Microinteractions – UX bewegt sich?

Leute, die sich mit User Experience beschäftigen, befassen sich im Allgemeinen mit der
Optimierung von technischen Interfaces für deren Nutzern. Initial befasste sich Usability
bislang mit Richtlinien wie Übersichtlichkeit oder Zugehörigkeit von Elementen.
Doch bestimmt ist auch einigen von euch schon aufgefallen, dass sich manche Interfaces
greifbarer und intuitiver anfühlen als andere. Auf den ersten Blick ist es schwer die
Ursache dafür herauszufinden – vor allem, wenn dir der Begriff „Microinteractions“ noch
nie über den Weg gelaufen ist.

Sicher hast du in deinem bisherigen Leben als Digital Native unzählige Geräte ein und
ausgeschalten, die Lautstärke deines Radios oder Walkmans angepasst oder hoffentlich
deinen Laptop ab und an eingeschalten. Als Studenten von Onlinemedien kennen wir
wohl allzu gut das Geräusch eines angehenden Macs oder Windows im Vorlesungsraum,
während der Dozent seinen bedeutungsschwangeren Satz beendet. Oft lacht der Kurs
nun, da es sich anhört, als ob das Geräusch den Worten des Dozenten eine höhere
Bedeutung gegeben hätte. Auch wenn wir es vielleicht, abgesehen von diesen
besonderen Momenten, noch nie bewusst wahrgenommen haben, genau das sind
Microinteractions.

Sie können quasi als ein Stilmittel der Usability verstanden werden, bei welcher ein
Nutzerszenario auf einen bestimmten Moment der Interaktion zwischen Nutzer und
Interface heruntergebrochen wird, damit genau dieser ausgearbeitet werden kann. Der
Fokus liegt dabei auf einer einzigen Interaktion, wie beispielsweise das Entsperren des
iPhones oder das Hochfahren des Laptops. Zudem sind diese genannten Momente eine
der wesentlichen Microinteractions, die ein Nutzer überhaupt mit dem Gerät tätigen wird.
Es ist nämlich die erste Interaktion zwischen dem Nutzer und dem Interface. So werden
jetzt vielleicht einige von euch an das Geräusch zurückdenken, mit welchem sich euer
iPhone entsperrt, oder dem leichten Zoomeffekt, mit welchem euer Homescreen danach
auftaucht (iOS 10, für alles andere ist mein Handy zu schlecht).

Genau solche Gesten lassen uns das Interagieren mit unserem Smartphone viel flüssiger
und effektiver erscheinen, auch wenn wir das bewusst vielleicht noch nie wahrgenommen
haben. Ein Microinteraction ruft dann positive Assoziationen bei uns hervor, wenn er
reizvoll, menschlich und effektiv ist. Solche Microinteractions sammeln und fließen in die
Gesamtwahrnehmung der Usability mit ein. Sie trennen somit ein gutes Produkt von
einem besonders gutem Produkt.

Microinteractions umgeben uns aber nicht nur bei der Interaktion zwischen Lautsprechern
oder Smartphones, sondern sollten uns idealerweise auch die Bedienung von Webseiten
„versüßen“. Denn Microinteractions können die Lücke zwischen Nutzer und Technologie
mithilfe von humaner und emotionaler Bindung schließen. Durch die intuitive und nahezu
unscheinbare Art begleiten uns Microinteractions durch den Webseitenfluss.
Um Micromoments selbst gestalten zu können, ist es wichtig ihren Aufbau zu verstehen.
Dieser setzt sich aus 4 Teilen zusammen:

Trigger

Eine Microinteraction muss zunächst ausgelöst werden. Im Idealfall soll der Trigger den
Nutzer zur Interaktion animieren. Die besten Trigger sind solche, die dem Nutzer dann zur
Verfügung stehen wenn er sie benötigt, ohne dass der Nutzer seine Bedürfnisse äußern
muss.

Rules

Die Regeln bestimmen, was bei einer Microinteraction passiert. Sie müssen sich natürlich
anfühlen und den Nutzer animieren und keinesfalls bei der Interaktion stören oder
ablenken.

Feedback

Ganz wichtig ist es dem Nutzer klar zu machen, was durch die Interaktion passiert ist. Ein
Mensch ist durch natürlich Konditionierung daran gewöhnt, dass auf eine Aktion eine
Reaktion folgt. So fühlt es sich für einen Nutzer störend und unnatürlich an, wenn auf eine
Aktion des Nutzers keine Reaktion des Systems folgt. Reaktionen können beispielsweise
eine Live-Validierung von Nutzerdaten oder Ladeanimationen, die dem Nutzer klar
machen, dass seine Aktion eine Reaktion hervorgerufen hat, er sich aber noch einen
Augenblick gedulden muss, sein.

Schleifen und Varianten

Wenn eine Microinteraction mehrfach benutzt wird, sollte sie sich im besten Fall
anpassen. Ein Unterschied sollte spätestens zwischen der ersten und der siebten Microinteraction
sichtbar sein, idealerweise sollte sie sich an dem Nutzerverhalten orientieren.

Dieses Prinzip der Microinetractions spielte bei der Neugestaltung des Microsoft
Designs, welches im Mai 2017 erstmals vorgestellt wurde, eine bedeutende Rolle. Wie es
auf der Seite von Microsoft heißt:
„These are our foundational elements — the moments that will make our designs perform
beautifully across devices, inputs, and dimensions. This is how we build the next era
of Windows.“

Hier wird von Momenten gesprochen, welche das Design geräteübergreifend schöner
darstellen soll. Insgesamt setzt sich Fluent Design aus 5 Elementen zusammen. Licht,
Tiefe, Bewegung, Material und Skalierung.

Dabei spielen Microinteractions im Fluent Design vor allem bei Licht und Bewegung eine
große Rolle. Der Reveal Effekt, welcher größtenteils die Komponente Licht darstellt,
wurde im Rahmen des Creator Updates ausgerollt. Dieser Effekt beleuchtet die Stelle,
über die die Maus gerade fährt. Wenn mit der Maus geklickt wird erscheint ein Lichtkreis.
Die Interaktion stellt hier die Bewegung der Maus dar. Das Feedback, welches der Nutzer
erhält, sind die Lichtreflexe.

Die zweite relevante Komponente Bewegung, soll laut Microsoft nahtlose Übergänge
zwischen Interaktionen bewirken und so dem Nutzer helfen sich zu fokussieren.
Nicht nur Microsoft, sondern auch Apple oder andere Designer und Designguidelines
verwenden schon seit geraumer Zeit Microinteractions. John Pavlus, der zu diesem
Thema ein Kommentar zu Dan Saffers Buch verfasst hat, behauptet sogar, dass jeder
gute Designer Microinteractions genutzt hat. Letztendlich besitzen wir nun allerdings
durch die fortgeschrittenen Fähigkeiten von Webseiten und Endgeräten die Möglichkeit,
Micromoments besser zu entwerfen und umzusetzen. Diese Möglichkeit sollten wir alle in
der Zukunft nutzen, um unseren Nutzern die beste UX zu bieten.

Quellen

https://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details
http://microinteractions.com/
http://microinteractions.com/what-is-a-microinteraction/
http://t3n.de/news/ux-designtrend-478358/
https://blog.proto.io/secret-killer-ux-design-microinteractions/