Microinteractions – Kleine Wunderwaffen für die User-Experience

In unserem digitalen Leben sind wir fast immer von ihnen umgeben. Vom Handywecker über Payment-Apps und Instant-Messenger bis Onlineshopping werden Microinteractions eingesetzt, um unser Nutzererlebnis zu verbessern. Doch was sind diese kleinen Interaktionen zwischen Mensch und Maschine eigentlich? Und wie werden sie effektiv eingesetzt?

Microinteractions: Schlüssel zu erfolgreichem UXD?

Als Microtransactions werden kleine Animationen bezeichnet, die bei verschiedenen Ereignissen aktiviert werden und mit dem Nutzer interagieren. Zugegeben, unter dieser Definition wird sich nicht jeder direkt etwas vorstellen können, daher haben wir hier einige Beispiele für Microinteractions für euch vorbereitet:

Ladescreen

Quelle: Dribble

Suchleiste

Quelle: YouTube

Richtig eingesetzt, verbessern die Miniinteraktionen die User-Experience und tragen so dazu bei, dass User das Produkt gerne und oft benutzen. Außerdem lassen sich Abläufe, wie der Einkaufsprozess mithilfe einer klaren Kommunikation effizienter gestalten. Doch Achtung! Falsch angewendet werden Microinteractions zu echten UX-Killern.

Microinteractions: Vier Schritte zum UX-Erfolg

Wenn ihr die Kraft der Microinteractions für euer Projekt nutzen wollt, solltet ihr die Schritte einer Microinteraktion genau kennen:

1.) Trigger

Am Anfang einer Microinteraction steht immer ein Trigger. Ein Trigger ist ein Objekt oder Auslöser, der die Animation in Gang setzt. Man unterscheidet zwischen nutzerseitigen Triggern, wie dem Klick auf einen Kaufbutton, oder systemseitige Auslöser, wie Push-Notifications.

2.) Regeln

Nach dem Aktivieren des Triggers werden vorher festgelegte Regeln befolgt, die beschreiben, wie die Animation aussieht und sich verhält.

3.) Feedback

Als Feedback wird die Animation an sich bezeichnet, die dem Nutzer ausgespielt wird.

4.) Loops & Modes

Loops und Modes treten in Kraft, sobald sich die Bedingungen für die Animation ändert.

Microinteractions: Was macht gute Microinteractions aus?

Wenn ihr Microinteractions gewinnbringend einsetzen wollt, gibt es einige Regeln, auf die ihr achten solltet:

• Microinteractions dürfen nicht vom eigentlichen Ziel eurer Website ablenken
• Microinteractions sollten immer deutlich kommunizieren, was abläuft
• Microinteractions müssen simpel und unauffällig sein
• Microinteractionsbei der Anzeige von Produktdetailsverwenden
• Animationen kurzhalten, um den Nutzer nicht zu nerven
• Microinteractions sollten verankerten Mustern folgen,z.B. Rot = falsch, Grün = richtig

Microinteractions: Nicht nur digital im Einsatz

Microinteractions sind ein mächtiges Tool, um das Nutzererlebnis drastisch zu steigern. In der heutigen Welt sind sie für gutes UX fast unumgänglich und sollten auf jeder Website und in jeder App Verwendung finden. Doch nicht nur in der digitalen Welt finden die kleinen Nutzerinteraktionen Einsatz. Auch bei physischen Produkten lassen sie sich finden. So zum Beispiel bei den Smart Home-Assistenten aus dem Hause Amazon und Google, die via LED anzeigen, ob sie dem Nutzer gerade zuhören oder im Standby-Modus sind.

Den Einsatz von Mikrointeraktionen solltest du gut planen und an dein Interface anpassen. Hier sind einige Beispiele, wie gute Microinteractions das User-Interface ergänzen:

Warenkorb Animation

Abbonieren Animation

Benachrichtigung Animation

Noch mehr Wunderwaffen für optimale Kundenerlebnisse – Best Practices UX Design jetzt kostenfrei herunterladen!

Microinteractions sind längst nicht die einzige Möglichkeit, um die User Experience über all eure Touchpoints hinweg zu optimieren. Je nach Anwendungsbereich bietet User Experience Design verschiedene Methoden und Maßnahmen, mit denen ihr eure Zielgruppe besser versteht und euer Design entsprechend optimiert. In den Best Practices »User Experience Design« findet ihr spannende Use Cases vom Relaunch eines Webdesigns, über eine Markeneinführung bis hin zur Anpassung individueller Serviceprozesse.

Füllt jetzt das Formular aus und erhaltet in eurem kostenfreien Exemplar Inspiration für euer Business!