14. Juli 2020
Man kann sie leicht übersehen und unterschätzen, aber Microinteractions sind essentielle Bausteine des UI Design. Beinahe jeder nutzt sie regelmäßig, aber eben oftmals unbewusst. In digitalen Anwendungen und Systemen inzwischen überall zu finden und unverzichtbar, funktionieren sie gerade dann am besten, wenn sie sich nahtlos einfügen und unangestrengt genau das tun, was sie sollen: sie geben dem Benutzer Feedback und machen die Kommunikation zwischen ihm und der Anwendung so natürlich und angenehm wie möglich. Wenn das Benutzen einer App also intuitiv ist und sich gut anfühlt, bewirken nicht zuletzt auch die Microinteractions genau das. Gut gemacht sorgen sie auf subtile Art und Weise für eine angenehme und reibungslose Usability, indem sie es schaffen, eine einzelne Interaktion mit einer App zu visualisieren und ein kleines Belohnungserlebnis zu generieren. Nicht zuletzt beeinflussen sie damit stark, wie ein Produkt insgesamt wahrgenommen wird; Microinteractions können genau den feinen Unterschied machen - ist eine App gut, oder ist sie großartig? Was genau versteht man also unter Microinteractions? „Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible.“ In diesem Zitat fasst Dan Saffer, Designer und Autor („Microinteractions“, 2013) die Anforderung an Microinteractions perfekt zusammen. Wenn man das Ganze noch näher betrachtet, sollten sie die folgenden drei Funktionen beinhalten - User Interaction fördern - direktes Feedback geben - die UX zu einem angenehmen und gelungenen Erlebnis zu machen, ohne von der eigentlichen Aufgabe abzulenken Ein Beispiel hierfür ist der Facebook-Daumen, der all das vereint: er gibt direktes Feedback, schafft es, dem Nutzer das Gefühl zu geben, die Kontrolle zu haben, und sorgt gleichzeitig für eine gute und angenehme Experience. Gute Microinteractions sorgen außerdem dafür, dass sich die Kommunikation zwischen Mensch und App natürlicher und menschlicher anfühlt. So weit, so gut, aber sind Microinteractions wirklich so wichtig? Ja! - Wirklich durchdachte Microinteractions sind die Grundlage dafür, dass ein Benutzer eine App gern verwendet, denn sie schaffen es, ein Gefühl zu vermitteln und eine Connection zwischen Mensch und System herzustellen. Sie schaffen die unaufgeregte, essentielle Basis für eine herausragende User Experience. Hinzu kommt, dass intelligente Microinteractions es schaffen, den User zum Mitmachen zu animieren, ihn sozusagen “bei der Stange” zu halten, während sie ihn gleichzeitig durch das Produkt leiten und für Belohnungsmomente sorgen. Im besten Fall begeistert das den User so sehr, dass er das Produkt immer wieder gern und oft nutzt und sich im besten Fall fragt, warum er vorher so lange ohne es auskam. Unterteilt man eine Microinteraction nun in Action, Reaction und Feedback, kann man schnell feststellen, wie gut diese Schritte es schaffen, einen Nutzer in eine App einzubinden - so schafft man auch eine gute Grundlage, um zu untersuchen, wie sich ein Produkt optimieren ließe. Am besten gleicht man in diesem Zusammenhang ab, ob die verwendeten oder angedachten Microinteractions auch zur Zielgruppe passen, ob sie themen- und inhaltsrelevant sind und zusätzlich selbsterklärend, intuitiv und subtil einen Mehrwert schaffen, damit sie begeistern und das Potential haben, loyale Nutzer oder sogar Fans zu gewinnen. Bestandteile der Microinteractions Eine App, die begeistert, sollte selbstverständlich zielgruppenrelevante Designtrends aufgreifen, damit sie den Nerv der Nutzer trifft; gerade aber für die Gestaltung der Microinteractions bedeutet das, dass man sich wirklich ausreichend mit der Welt der User beschäftigt hat, um diese auf den Punkt zu bringen. Um Microinteractions noch besser zu verstehen, lassen sie sich nach Dan Saffer in vier Komponenten unterteilen: 1. Trigger Trigger sind meist der Startpunkt der Microinteraction. Sie zeigen an, wenn eine App startet oder ein Gerät eingeschaltet wird. Beispiele sind der Refresh Button, der An/Aus Button und andere GUI Elemente (Tap, Click, etc.). Triggers können sowohl benutzerinitiiert oder systeminitiiert sein. 2. Rules Rules bestimmen, was nach der Ausführung eines Trigger geschehen soll. 3. Feedback Der Nutzer bekommt hier eine direkte Rückmeldung und bezieht ihn so weiter mit ein und zeigt ihm, das etwas geschehen ist, geschieht und in manchen Fällen auch, was gerade passiert. Beispiele sind Ladebalken, Pop-Ups, farbliche Veränderungen und andere animierte Elemente. 4. Loops and Modes Loops bestimmen die Länge der Microinteraction und ob diese wiederholt werden oder sich ändern (Beispiel: der aktivierte Wecker). Modes erfordern keine Wiederholung und können daher leicht zum Ende einer Interaktion führen. Dan Saffer empfiehlt daher, Modes lieber nur spärlich einzusetzen. Beispiele für Microinteractions im App Design Wir wissen, das die Hauptaufgabe einer Microinteraction darin besteht, den Nutzer subtil in den Prozess einzubinden, ihn mit Feedback zu versorgen und das so angenehm wie möglich zu gestalten, während er im besten Fall intuitiv interagiert, ohne jemals über eine Microinteraction “stolpern” zu müssen. Ein Trigger initiiert eine Aktion, darauf gibt es eine Antwort, die darin mündet, den User zu belohnen. Einige Beispiele für gelungene Microinteractions: 1. Swipe Elegante Alternative zu Tap. Stark verbreitet, akzeptiert und beliebt, macht es eine Spaß und sorgt gleichzeitig für ein abhängig-machendes Erlebnis. 2. Data Input Wichtiger Bereich, um mit durchdachten Microinteractions dafür zu sorgen, den User bei Laune zu halten. Kaum jemand füllt gern Formulare aus, um beispielsweise einen Account zu kreieren oder ein Passwort zu erstellen. Um zu verhindern, das der Nutzer den Prozess abbricht, braucht man gelungene, interaktive Microinteractions. 3. Call to Action Um den Benutzer dazu zu bringen, mit der App zu interagieren, sind Call to action Microinteractions geeignet. Sie sorgen für ein gutes, befriedigendes Gefühl beim Nutzer und helfen so, ein Belohnungsmoment zu kreieren und den User zusätzlich zu binden. 4. Animations Animationen sind ein Microinteraction Key Element, um ein Produkt spannend, bereichernd und fesselnd zu gestalten und den Nutzer an das Produkt zu binden und für das Produkt zu begeistern. (Warte-)zeit wird hier im besten Fall visualisiert und verkürzt. 5. Current System Status Um zu verhindern, dass ein User sich von einer App abwendet, weil er nicht versteht, was genau vor sich geht und er den Eindruck hat, keine Kontrolle über bestimmte Aktionen und Funktionen zu haben, sollte man passende Microinteractions integrieren. So hat der Nutzer im besten Fall niemals das Gefühl, den Überblick über den Systemstatus oder vor sich gehende Aktivitäten zu verlieren. 6. Tutorials Das Beispiel der In-App Tutorials zeigt, wie stark Microinteractions die gesamte Wahrnehmung und UI einer App beeinflussen können. Wenn nicht wirklich klar wird, wie ein Produkt funktioniert, wendet sich ein Nutzer schnell ab. Microinteractions tragen also einen großen Teil dazu bei, ob eine Produkt ein Erfolg wird oder nicht. Links dazu: http://microinteractions.com/ (+ Buch von Dan Saffer https://microinteractions.com/about-the-book/ https://www.nngroup.com/articles/microinteractions/