Warum Microinteractions für User Experience – und Marken – enorm wichtig sind

Microinteractions sind fallen kaum auf, können aber eine ganze Menge: Sie verbessern die Navigation einer Website, machen Interaktion einfacher, geben Feedback und Tipps – kurzum, sie machen das „Look & Feel“ und damit die ganze Interaktion mit einer Marke aus. Wir zeigen worauf es ankommt.

Warum Microinteractions für User Experience – und Marken – enorm wichtig sind

Jeder benutzt sie täglich, aber kaum einer nimmt sie bewusst wahr. Es sind kleine Buttons, die wir mit dem Smartphone oder am Desktop nutzen – oft begleitet von Sounds -, Sucheingabefelder oder Scrollleisten. Sie haben zum Beispiel den Zweck, ein Like abzugeben, etwas zu bestellen oder zu bestätigen. „Viele unserer täglichen Interaktionen mit Computersystemen fallen unter den großen Rahmen der Mikrointeraktionen. Sie geben dem Benutzer Feedback, oft über den Status des Systems oder helfen dem ihm, Fehler zu vermeiden“, heißt es etwas allgemein und wissenschaftlich bei der Nielsen Norman Group. Doch auch hier ein spannender HInweis: „Darüber hinaus können Mikrointeraktionen als Vehikel für das Branding genutzt werden.“

Design mit Details

Jede App ist voll mit Microinteractions. Ein simples Beispiel ist der Like-Daumen im Facebook-Messenger oder das Herz in Instagram auf einem Bild. Beide werden mit einer kleinen Animation verdeutlicht. Das Herz in Instagram erscheint - wenn man genau hinsieht - nicht einfach, sondern es wächst und wackelt leicht über dem Bild. Genau so poppt der Daumen im Messenger langsam hoch, wackelt und wird schließlich abgeschickt. Beide erfüllen laut uxdesign.cc wichtige Funktionen:

  1. Sie kommunizieren einen Status und geben Feedback
  2. Sie verstärken dein Eindruck direkter Manipulation
  3. Sie helfen dem Besucher das Ergebnis seiner Aktionen zu sehen

„Der Unterschied zwischen einem guten und einem großartigen Produkt liegt in den Details“, sagt Dan Saffer, UX-Designer und Autor des Buchs „Microinteractions: Full Color Edition: Designing with Details“. Laut Saffer sind es die kleinen Dinge, die den großen Unterschied bringen: Wie schaltet man sein Telefon auf Stumm? Wie wird man benachrichtigt, wenn eine neue E-Mail kommt? Wie kann man eine Einstellung verändern? All die kleinen Momente tauchen auf keiner Feature-Liste eines Smartphones auf, bestimmen aber später darüber ob der Besitzer das Gerät gerade so okay findet – oder es liebt. Es sind die kleinen Momente der Freude, die später eben nicht mehr „Micro“ sind.

Typische Microinteractions lassen sich laut Dan Saffer in vier Phasen zerlegen:

• Ein Trigger beginnt die Interaktion - sie können vom User oder vom System ausgehen. Ein Trigger kann ein Icon sein, dass den User motiviert zu scrollen, zu wischen oder zu tippen.

• Rules bestimmen was passiert, wenn eine Microinteraction getriggert wird. Sie sollten sich natürlich für den User anfühlen.

• Feedback sagt aus, was passiert. Alsoalles, was der User sieht, hört oder fühlt, während die Microinteraction passiert. Zum Beispiel, dass ein Ladebalken erscheint, ein Pop-Up eingeblendet wird oder sich ein Symbol mit Farbe füllt.

• Loops und Modes setzen die Regeln auf der Meta-Ebene fest: Wie lange dauert eine Interaktion oder wie oft muss der User etwas wiederholen , bis er zum nächsten Schritt gelangt.

Genau diese Regeln gelten nicht nur für Produkte, sondern auch für Software und jede digitale Interaktion. Mit Liebe zum Detail gestaltet, können Microinteractions den Spaß am Benutzen einer App ausmachen. Zum Beispiel unterscheidet sich der Facebook-Messenger deutlich durch seine subtilen Sounds von der Konkurrenz. Auch Reaktionen auf Facebook-Posts sind von solchen Sounds begleitet. Andererseits können übertrieben viele Sounds und Animationen auch schnell nervtötend werden.

**5 Tipps für gute Microinteractions

**

1. Keep it simple! Niemand möchte gern aufgehalten werden, wenn er etwas zu erledigen hat. Viele Micro-Interactions nutzt man täglich und oft. Deswegen sollten sie ohne Firlefanz wie schöne, aber zeitraubende Animationen oder Sounds die schnell lästig werden, auskommen.

2. Zielführend sein. Gute Microinteractions sind kein Selbstzweck, sondern sie kommunizieren mit dem User oder helfen ihm, eine Aufgabe zu erledigen.

3. Konsistent sein! Einmal gelernt wie ein Like geht? Dann sollte es das nächste mal genau so wieder funktionieren. Microinteractions müssen so intuitiv wie möglich sein.

4. Standards sind gut. Man muss das Rad nicht neu erfinden. AWenn es also schon drei allgemein gängige Schritte beim Checkout gibt, dann sollte man es im eigenen Shop am besten auch so machen. Alles andere wäre nicht innovativ, sondern verwirrend.

5. Testen, testen, testen. Interaktionen in einem Prototypen zu skizzieren, ist ein Ding. Wie gut sie funktionierten zeigen nur Tests. Mit echten Usern, die nicht im Designprozess dabei waren. Dabei tauchen Schwächen und Probleme auf. Dann heißt es verbessern und wieder testen. Und wieder. Und wieder.

Microinteractions müssen die bestmögliche User Experience liefern

Die winzigen Momente, die wir mit Animationen in Apps verbringen, können darüber entscheiden, ob ein User gern in einem Shop oder in einem anderen bestellt. Ob er gern die eine App oder eine Alternative benutzt. Das heißt: Microinteractions können den Unterschied zwischen einer gewöhnlichen und einer außergewöhnlichen Website oder App bedeuten. Deswegen müssen Web Entwickler und Designer diesen Details entsprechende Aufmerksamkeit schenken. Denn Hopp oder Top kann einer Brand viel Geld bringen oder kosten. Microinteractions im Check-out eines Onlineshops können über Bestellung und Abbruch, Umsatz oder Abwandern zur Konkurrenz entscheiden.

Aber sie entscheiden nicht nur über die Conversion-Rate und die Verweildauer: Gut designte Microinteractions sind ein wertvoller Kundenservice, ein Zeichen der Wertschätzung für Konsumenten und unterstützen Marken dabei stets zu wissen, was er gerade braucht. Wenn ein Kunde mit der Software seine Aufgabe - ein Hotelzimmer buchen, ein Produkt bestellen, einen Termin ausmachen - schnell und elegant erledigen kann, fühlt er sich verstanden. Im Idealfall bekommt er ein positives Nutzererlebnis, vielleicht liebt er sogar die App, die Website oder das digitale Produkt, wird gerne wiederkommen und es seinen Freunden weiterempfehlen.

Fazit: Microinteractions strahlen auf die gesamte Marke ab

Das gleiche Gefühl hat er aufgrund der Microinteractions aber nicht nur dem digitalen Produkt, sondern der ganzen Brand gegenüber. Wenn es ein schmerzhafter Prozess ist, einen Flug zu buchen, leidet der Gesamteindruck der Fluglinie. Dieser im Marketing bekannte Halo-Effekt - die Wahrnehmung einzelner Produkteigenschaften beeinflusst das ganze Produkt oder die Brand - kann zum Vorteil oder Nachteil werden. Gut gestaltete Microinteractions können ein Wettbewerbsvorteil und Umsatzmotor sein, weil damit die gesamte User Experience positiv gestaltet wird. „Attention to detail“ hat sich also noch nie so direkt ausgezahlt wie im digitalen Zeitalter.