UX ist entscheidend dafür, wie Nutzer mit unseren Marken interagieren und sie wahrnehmen. Je mehr wir über unsere Nutzer verstehen, desto besser können wir ihnen das geben, was sie brauchen, und zwar auf die Art und Weise, die sie sich wünschen und von der sie erwarten, dass sie geschieht. Im Zuge des technologischen Fortschritts wird von den Anbietern erwartet, dass sie die Customer Journey in jeder Phase einfacher und angenehmer gestalten. Oftmals sind es diese kleinen Interaktionsdetails, die für den Nutzer den Unterschied zwischen einem akzeptablen oder funktionalen und einem großartigen Produkt ausmachen, ohne dass er es weiß.
Was sind Mikrointeraktionen?
Nach Angaben der Nielsen Norman Group,
Mikrointeraktionen sind Auslöser-Rückmeldungs-Paare, bei denen (1) der Auslöser eine Benutzeraktion oder eine Änderung des Systemzustands sein kann; (2) die Rückmeldung ist eine gezielte Reaktion auf den Auslöser und wird durch kleine, stark kontextbezogene (meist visuelle) Änderungen der Benutzeroberfläche vermittelt.
Mikrointeraktionen sind (im Allgemeinen) kleine, subtile Animationen, die digitale Anwendungen interessanter, intuitiver, ansprechender und effizienter machen. Sie erhöhen die Qualität des Nutzererlebnisses, indem sie Handlungen validieren und oft mit Unterhaltung verbunden sind, die die Markenstärke erhöht.
Dabei handelt es sich nicht immer um visuelle Animationen, sondern auch um haptische oder akustische. Ihre Sportuhr kann summen, wenn Sie sich einer Kurve nähern oder in einen anderen Herzfrequenzbereich eintreten, oder Ihre Benachrichtigungen spielen wiedererkennbare Töne ab, die Sie mit bestimmten Messaging-Apps, E-Mail-Konten oder Errungenschaften in Verbindung bringen.
Vorteile von Mikrointeraktionen
Auch wenn sie wie winzige Details aussehen, mit denen der Schöpfer ein wenig "angeben" kann, sind die Vorteile zahlreich und von echtem Wert. Wir erleben Hunderte dieser netten kleinen Details in unserem täglichen Leben, meist ohne sie zu bemerken.
- Ermutigung zum Engagement
- Erhöhung der Nutzerzufriedenheit
- Abbau von Frustration
- Feedback zum System geben
- Nutzer in Echtzeit auf dem Laufenden halten
- Anzeige des System- oder Prozessstatus
- Verbesserung der Benutzerfreundlichkeit
- Produkte intuitiver und interaktiver gestalten
- Verringerung der Mängel bei der Benutzerfreundlichkeit
- Einführung flüssigerer UI-Interaktionen
- Beschleunigen Sie die Customer Journey
- Verhinderung von Benutzerfehlern
- Vereinfachen Sie komplexe Aufgaben
- Prozesse spielerisch gestalten, so dass sie mehr Spaß machen und interessanter sind, was die Mitarbeiterbindung erhöht
- Durchsetzung des Markenthemas, der Stimme und des Tons
Bewährte Praktiken für Mikrointeraktionsdesign
Das Problem des Benutzers identifizieren und verstehen
Jedes gute Produkt, Erlebnis oder jede Dienstleistung ist darauf ausgerichtet, ein Problem zu lösen. Bei der Entwicklung von Mikrointeraktionen mag die Definition dieser Probleme und die Frage, wie sie zu lösen sind, auf der Hand liegen, aber sie werden eher während der Nutzerforschung aufgedeckt.
Mikrointeraktionen natürlich halten
Designer sollten seltsame Animationen vermeiden, die den Prozess verkomplizieren oder verwirren. Mikrointeraktionen sind natürlich und fließend, geben einfaches visuelles Feedback und erhöhen den Wert des Prozesses. Sie sollten niemals übermäßig kompliziert sein, vom eigentlichen Fokus ablenken oder unnötige Details enthalten. Am wichtigsten ist, dass sie sich auf eine einzige Aufgabe konzentrieren.
Test und Iteration der Ergebnisse aus der Benutzerforschung
Die Phase der Nutzerforschung bietet eine ideale Gelegenheit, Probleme und Möglichkeiten zu ermitteln und die besten Ergebnisse zu erzielen. Als UX-Forschungsspezialisten können wir nicht genug betonen, wie wichtig dieser Teil des UX-Prozesses ist.
Dekonstruktion des Mikrointeraktionsdesigns
Struktur der Mikrointeraktion
Obwohl unsere frühere Definition der Nielsen Norman Group besagt, dass Mikrointeraktionen ein zweistufiges System sind, hat jede Interaktion vier entscheidende Teile.
- Auslöser ? Unabhängig davon, ob er vom Benutzer oder vom System ausgelöst wird, ist er der erste Teil des Prozesses, der den Benutzer auf ein wichtiges Werkzeug, eine Aktion oder eine Information aufmerksam macht. A benutzerinduzierter Auslöser wird, wie angedeutet, durch eine Benutzeranforderung durch Klicken, Streichen oder Ähnliches ausgelöst. A Systemauslöser wird ausgelöst, wenn die Software feststellt, dass bestimmte Voraussetzungen erfüllt sind.
- Regeln ? Die Regel bestimmt, was nach dem ersten Auslöser passiert. Wenn der Nutzer klickt, wischt, tippt oder spricht, wird eine Animation abgespielt, ein hilfreicher Prozess gestartet, eine Erinnerung gesetzt oder ein Artikel in den Warenkorb gelegt?
- Rückmeldung ? Wenn die Nutzer informiert werden, fühlen sie sich sicher und ihre Anfrage wird bearbeitet. Validierung und Sicherheit sind wichtige psychologische Faktoren für das Nutzererlebnis. Wenn Sie also jeden in jeder Phase informieren, erhalten Sie ein Update über den Systemstatus und den kleinen Dopaminschub, der die Nutzer glücklich macht.
- Schleifen und Modi ? Die letzte Stufe bestimmt, ob die Handlung wiederholbar oder eine einmalige Transaktion ist. Schleifen und Modi bestimmen die Metaregeln jeder Mircro-Interaktion: Ein Wischen, um eine Seite neu zu laden, oder die Bitte an Siri, Ihre Fragen zu beantworten, kann so oft wie nötig ausgeführt werden (Schleifen), während das Hinzufügen eines Artikels zu einem Warenkorb nur einmal geschieht (es sei denn, Sie fügen eine Option hinzu, um "ein weiteres Produkt zu kaufen" oder "Kaufdetails zu bearbeiten").
Beispiele für Mikrointeraktionen
Unsere Auswahl an Beispielen ist keineswegs erschöpfend; es handelt sich lediglich um eine Auswahl gängiger Anwendungen. Es handelt sich lediglich um einige der digitalen Elemente, mit denen Sie jeden Tag konfrontiert werden und die einen Mehrwert für Ihr Online-Erlebnis darstellen, die aber oft als selbstverständlich angesehen werden.
Bildlaufleiste
In den Anfangsjahren des Internets hatte eine Bildlaufleiste eine physische Funktion: Sie musste angefasst und bewegt werden, um durch die Seite zu navigieren. Heute sind sie eine animierte Funktion, die uns zeigt, wo auf der Seite wir uns befinden und wie viel Inhalt die Seite noch enthält.
Ziehen zum Aktualisieren der Animation
Die auf Smartphones weit verbreitete Mikrointeraktion "Pull-to-Refresh" kann eine Seite neu laden, neue E-Mails abrufen, die Wettervorhersage aktualisieren und vieles mehr. Ein sich drehendes Rad, ein gebrandetes Gif oder ein Fortschrittsbalken lässt uns wissen, dass unsere Anfrage erkannt und verarbeitet wurde.
Wisch-Animation
Was wären die Dating-Apps ohne ihren berüchtigten "Swipe"? Die Animation eines Kreuzes, eines Häkchens oder eines Herzflatterns gibt uns in Echtzeit Feedback zu unseren Entscheidungen.
Digitaler Alarm
Ein Beispiel für eine auditive Reaktion auf einen systembedingten Auslöser: Zu einer bestimmten Zeit ertönt Ihr Alarm. Auf Ihrem Smartphone, Tablet oder Computer wird er jedoch durch eine visuelle Rückmeldung unterstützt, die eine Reaktion auf die Erledigung der Aufgabe fordert.
Benachrichtigung
Das Gleiche gilt für Benachrichtigungen. Akustisches und visuelles Feedback liefert Aktualisierungen und Warnungen zu angeforderten Ereignissen, Optionen oder Werbeaktionen (und oft auch zu solchen, von denen Sie gar nicht dachten, dass Sie sich dafür angemeldet haben), um einen uninteressierten Nutzer zurückzuholen.
Passwort-Fehler
Anstatt eine neue Fehlerseite aufzurufen, auf der Sie Eingabefelder wiederholt ausfüllen müssen, spart die Inline-Validierung Zeit und Frustration. Auch die Einrichtung neuer Konten lässt sich mit Inline-Fehlerrückmeldungen zu Passwörtern rationalisieren, z. B. um die richtige Anzahl von Buchstaben, Ziffern und Sonderzeichen sicherzustellen.
Hotspots für das Onboarding
Es gibt viel zu lernen, wenn Sie eine neue Software oder Plattform erkunden. Ob ein winziger pulsierender Punkt oder eine gut platzierte Sprechblase, der Benutzer weiß sofort, wie er dieser vom System initiierten Anleitung folgen soll. Zu viele Animationen auf einer Seite wären überwältigend und unbeholfen, so dass neue Benutzer auf einem festgelegten Pfad lernen, wie man durch die Funktionen navigiert und sie auf einfachste Weise verdaut, eine nach der anderen.
Online-Chat und Benachrichtigungsstatus
Die visuelle Rückmeldung an die Nutzer von Messaging-Apps ist ein gutes Beispiel dafür, wie man eine App "klebrig" machen kann. An den drei hüpfenden Punkten erkennen wir sofort, dass der Empfänger unsere Nachricht gelesen hat und antwortet. Bei WhatsApp beispielsweise befindet sich die visuelle Rückmeldung oben auf der Seite und zeigt an, ob der Empfänger online oder abwesend ist oder tippt. Ob man sie mag oder nicht, diese doppelblauen Häkchen geben sofort Auskunft über Ihre Nachricht.
Viele Websites enthalten große Mengen an Informationen, die eine gut strukturierte Informationsarchitektur erfordern, die leicht zu navigieren ist. Bei so vielen Informationen und nur einem - oft winzigen - Bildschirm, der zur Verfügung steht, kann man alles hinter einem wiedererkennbaren Symbol verstecken (die drei horizontalen Linien, die als Hamburger bekannt sind). Sie können so animiert werden, dass sie in die Ansicht gleiten, wenn der Nutzer auf die einzelnen Kategorien klickt, um das Auffinden der gewünschten Informationen einfach und unkompliziert zu gestalten.
Effizienteres Ausfüllen von Formularen und Kassiervorgängen
Eine unerwartete Fehlermeldung kann unglaublich frustrierend sein. Daher verfügen viele Formulare und Online-Kassen über vom Benutzer ausgelöste Mikrointeraktionen, um Fehler zu vermeiden und ihre Prozesse zu vereinfachen. Ob es sich um die Inline-Validierung von E-Mail-Formaten, Vorschläge für erforderliche Felder oder die Einführung von Kalenderfeldern zur Angabe genauer Daten handelt - sie alle sollen uns zum Ziel bringen, ohne dass wir zurückkehren müssen, um Fehler zu korrigieren, die wir möglicherweise übersehen haben. Durch diese Technik wird auch der Prozess der Kontoerstellung rationalisiert, was die Anmeldung erleichtert und den Abbruch durch den Benutzer unwahrscheinlicher macht.
Mouseover-Effekte und Cursoränderungen
Wir sind es gewohnt, über Bilder, Informationskästen und Folien zu rollen, um zu testen, ob sie anklickbar sind, aber eine animierte Anweisung wie "Klicken Sie, um unsere Kontaktseite zu besuchen" oder "Halten und bewegen Sie, um Ihre Auswahl neu zu sortieren" gibt dem engagierten Benutzer genau die Art von Feedback, nach der er sucht.
Erweiterung der Suchbox
Ein expandierendes Suchfeld mit vordefinierten Optionen oder automatischen Vorschlägen während der Eingabe ist ein weiteres großartiges Beispiel dafür, wie Sie die UX Ihrer Produkte und Ihrer Nutzer mit Funktionen und Werten aufwerten können.
Vermenschlichung der Chatbox
Um ein emotionaleres Chatbox-Erlebnis zu schaffen, ist die Animation der Antwort zeitlich so abgestimmt, dass sie effizient ist, aber auch menschliches Verhalten darstellt. Wenn ein Nutzer eine Frage oder Anfrage sendet, sieht er die drei hüpfenden Punkte, die darauf hindeuten, dass jemand tippt, obwohl es sich um eine KI-Antwort handelt. Wenn Sie Ihrer Chatbox einen menschlichen Avatar geben, entsteht die gleiche emotionale Verbindung, die Sie für einen Menschen empfinden würden.
Clevere Wege zur Verwendung von Animationen
Das Hinzufügen von Informationen, Werbeaktionen oder Informationen zu Wartebildschirmen, während sich Ihre Fortschrittsbalken ausdehnen, drehen oder über den Bildschirm hüpfen, bietet Ihren Benutzern einen Mehrwert. Es ist eine großartige Gelegenheit, Upselling zu betreiben oder Kunden, Nutzer oder Mitglieder über Produkte zu informieren, die sie vielleicht noch nicht kennen.
Wenn es zu Ihrer Marke passt, können Sie eine witzige Seite hinzufügen (wir alle haben schon einmal eine geschmackvolle 404-Seite gesehen, die uns zum Schmunzeln gebracht hat), die den Besuch des Nutzers zwar nicht unmittelbar bereichert, aber die Beziehung zum Nutzer stärkt und die Kundentreue erhöht.
Beispiele erfolgreicher Mikrointeraktion als Inspiration für Sie
Wir alle wissen, welche Website- und App-Elemente uns am meisten beeindrucken, welche unsere Erfahrungen bereichern, indem sie unsere Interaktionen einfacher, unterhaltsamer und letztlich lohnender machen. Hier sind ein paar, die die Art und Weise, wie wir unsere digitalen Produkte nutzen, erheblich verändert haben.
Die Facebook React-Funktion
Als Facebook den "Gefällt mir"-Button von einem einfachen "Daumen hoch" in eine Auswahl von Reaktionen umwandelte - durch Drücken und Halten des ursprünglichen Symbols - hatte jede neue emotionale Option ein einzigartiges kleines Symbol und eine Animation. Zweifellos änderte sich dadurch die Art und Weise, wie wir anderen auf schnellstem und einfachstem Wege unsere Gefühle mitteilen.
Apples und Googles Lösung für die Sprachsteuerung
Sowohl Apple als auch Google mussten den Nutzern mitteilen, dass ihre Anfragen zur Sprachsteuerung bearbeitet wurden. Der gesamte Prozess wird mit minimalem, aber einfachem und intelligentem visuellen Feedback durchgeführt.
Während Sie Ihre Anfrage stellen, erscheinen schwebende Punkte auf dem Google Assistant, um Ihnen zu zeigen, dass er zuhört; die Punkte verwandeln sich in Schallwellen, um Ihnen zu zeigen, dass er Ihre Stimme aufnimmt, während Sie sprechen, und er liefert das Feedback mit seiner Antwort. Siri macht das Gleiche, allerdings mit seinem abstrakten Markenbild, das vibriert und seine Form verändert, um Ihnen zu zeigen, dass es Ihre Stimme erfasst hat.
Zusammenfassung
Für ein ideales Benutzererlebnis ist es wichtig, reibungslose Interaktionen zu schaffen, die Frustrationen reduzieren und es den Benutzern ermöglichen, nahtlos von einem Zustand oder einer Phase in eine andere zu wechseln. Gut durchdachte und umgesetzte Mikrointeraktionen bieten genau das.
Als UX-Forscher ist es unsere Aufgabe, die ideale Version für die Gestaltung von Mikrointeraktionen zu bestimmen. Benutzerforschung und -tests ermöglichen es uns, mit A-B- und Prototypentests die Besten herauszufiltern. In der Phase der Nutzerforschung werden Fehler bei der Bereitstellung auf die gleiche Weise reduziert wie bei vielen der Mikrointeraktionen, die in unseren Formularen und Checkout-Prozessen vorkommen.
Wenn Sie mehr darüber erfahren möchten, wie Benutzerforschung Ihnen helfen kann, Innovationsmöglichkeiten aufzudecken, um Ihre Mikrointeraktion und Ihr Benutzererlebnisdesign zu verbessern, senden Sie uns eine E-Mail an hello@ux247.com.
[...] hat kürzlich eine Seite veröffentlicht, die sich mit Mikrointeraktionen im UX-Design befasst, da wir glauben, dass diese wichtige Elemente für den Benutzer [...]
[...] Bestätigungsanimationen und bestimmte Mikrointeraktionen [...]