Das Geheimnis von Killer UX Design: Alles liegt in den Mikrointeraktionen
Veröffentlicht: 2016-11-13Design steckt im Detail.
Neulich verfasste ich eine Nachricht an eine alte Freundin, die nicht einfach zu schreiben war, weil es eine Nachricht war, um mein Beileid zum Verlust ihrer Mutter auszudrücken. Wir hatten Anfang der Woche ein paar Mal telefoniert, aber ich wollte ihr eine kurze Nachricht über die Facebook Messenger-App schicken, um sie wissen zu lassen, dass ich an sie denke. Ich beendete das Verfassen der Nachricht und beschloss, am Ende ein kleines „Herz“ hinzuzufügen.
Dieser einfache Akt des Tippens auf das Herz verwandelte sich schließlich in eine entzückende Explosion schwebender roter Herzen auf dem Bildschirm meines Telefons, die auch von ein paar albernen Soundeffekten begleitet wurde. Dieser Moment, obwohl kurz und flüchtig, brachte mir in einer schwierigen Zeit einige Sekunden der Überraschung und Freude.
Das ist mit meinem Bildschirm passiert, nachdem ich auf das rote Herz getippt habe.
Diese winzigen Details, die auch als Mikrointeraktionen bezeichnet werden, können die Erfahrung zwischen einem Benutzer und einem Gerät/Produkt unterhaltsamer, einfacher, effektiver und menschlicher machen. Oft nehmen wir diese Mikrointeraktionen gar nicht wahr.
Sie sind geschickt subtil und manchmal fast unsichtbar; Aber sie können ein Produkt zu etwas machen, das ein Benutzer liebt, anstatt etwas, dem sie gegenüber lauwarm sind.
Mit anderen Worten, Mikrointeraktionen haben das Potenzial, die Kluft zwischen dem Benutzer und der Technologie durch eine emotionale und menschliche Verbindung auf magische Weise zu überbrücken und sie gleichzeitig zu ermutigen, immer wieder zurückzukommen.
Was sind Mikrointeraktionen?
Mikrointeraktionen basieren auf der Erledigung eines einzelnen Moments oder einer Aufgabe durch die Bereitstellung einer angenehmen Erfahrung und nützlichen Feedbacks für die Benutzer. Diese Mikromomente führen einen Benutzer letztendlich auf intuitive und effektive Weise durch einen Flow.
Dan Saffer, Autor des Buches „Microinteractions“ und VP of Product bei Mayfield Robotics , definiert Mikrointeraktionen als „in sich geschlossene Produktmomente, die sich um einen einzigen Anwendungsfall drehen – sie haben eine Hauptaufgabe. Jedes Mal, wenn Sie eine Einstellung ändern, Ihre Daten oder Geräte synchronisieren, einen Alarm einstellen, ein Passwort auswählen, sich anmelden, eine Statusmeldung festlegen oder etwas favorisieren oder „liken“, nehmen Sie an einer Mikrointeraktion teil. Sie sind überall: in den Geräten, die wir tragen, den Geräten in unserem Haus, den Apps auf unseren Telefonen und Desktops, sogar eingebettet in die Umgebung, in der wir leben und arbeiten. Die meisten Geräte und einige Apps basieren vollständig auf einer Mikrointeraktion.“
Laut Saffer sind Mikrointeraktionen gut für:
- Erledigen einer einzigen Aufgabe und nur einer einzigen Aufgabe.
- Interaktion mit einem einzelnen Datenelement, z. B. der Temperatur oder der Bewertung eines Songs.
- Steuerung eines laufenden Prozesses, wie z. B. die Lautstärke eines Songs auf Spotify
Anpassen einer Einstellung. - Anzeigen oder Erstellen eines kleinen Inhalts, wie z. B. eines Status auf Facebook
Ein- oder Ausschalten einer Funktion oder Funktion.
Warum sollten Sie Mikrointeraktionen in Ihre Designs integrieren?
- Sie helfen Benutzern, mit Ihrer Website zu interagieren, sei es beim Klicken auf eine Schaltfläche, beim Teilen von Inhalten oder beim Antworten auf eine Nachricht oder Benachrichtigung.
- Sie geben den Benutzern sofort Feedback.
- Sie helfen Benutzern bei der Navigation durch die Website.
- Sie helfen Benutzern auf intuitive und einfache Weise durch den Ablauf zu führen.
Safer beschreibt die vier Teile von Mikrointeraktionen als Auslöser, Regeln, Feedback sowie Schleifen und Modi. Lassen Sie uns ein wenig tiefer in die Bedeutung dieser einzelnen Schritte eintauchen.
Abzug
Der Auslöser ist das, was eine Interaktion initiiert. Es ist ein visueller oder sonstiger Hinweis, der einen Benutzer dazu ermutigt, Maßnahmen zu ergreifen. Ein Auslöser kann das Flattern eines Symbols sein, das einen Benutzer dazu anregt, darauf zu tippen oder darauf zu klicken. Die blaue Schaltfläche, die oben in Ihrem Twitter-Feed schwebt und „neue Tweets“ mit einem nach oben zeigenden Pfeil anzeigt, veranlasst Sie, darauf zu klicken, um alle neuen Tweets anzuzeigen, die seit Ihrer Abwesenheit gepostet wurden.
Einige der besten Auslöser sind diejenigen, die tatsächlich die Bedürfnisse eines Benutzers antizipieren, ohne dass er seine Bedürfnisse angeben muss . Dies erfordert, dass der Designer Benutzerforschungs- und Verhaltensdaten sammelt, um vorherzusagen, was die Bedürfnisse des Benutzers sein werden, und die Auslöser entsprechend zu entwerfen.
Regeln
Der Auslöser greift in die Regeln ein. Diese Regeln legen fest, was während der Interaktion passiert. Die Regeln sollten sich für einen Benutzer natürlich anfühlen, und sie existieren, um Fehler zu minimieren. Ein gutes Beispiel hierfür ist, wenn Sie versuchen, eine E-Mail über Google Mail zu senden, ohne eine Betreffzeile einzugeben, wird Google Mail Sie darüber informieren, dass Ihre E-Mail keine Betreffzeile hat, und fragen, ob Sie sie trotzdem senden möchten.
Für dich empfohlen:
Wie Metaverse die indische Automobilindustrie verändern wird
Was bedeutet die Anti-Profiteering-Bestimmung für indische Startups?
Wie Edtech-Startups Indiens Arbeitskräften helfen, sich weiterzubilden und zukunftsfähig zu werden ...
New-Age-Tech-Aktien in dieser Woche: Zomatos Probleme gehen weiter, EaseMyTrip-Posts steigen...
Indische Startups nehmen Abkürzungen bei der Jagd nach Finanzierung
Digitale Marketingplattform Logicserve Bags INR 80 Cr-Finanzierung, Umbenennung in LS Dig...
Feedback
Das Feedback basiert auf den Regeln und gibt den Benutzern Informationen darüber, was zu diesem Zeitpunkt passiert. Ich freue mich besonders über das Feedback, das ich zu Formularen erhalte, die benutzerfreundlich gestaltet sind. Die Einbeziehung der Inline-Validierung in Ihr Design im richtigen Kontext kann für den Benutzer sehr hilfreich sein.
Wenn ich zum Beispiel bei der Eingabe eines Benutzernamens ein grünes Häkchen sehe, weiß ich, dass ich mit dem Ausfüllen des Passwortfelds fortfahren kann. Ich kann Ihnen nicht sagen, wie oft ich die Felder für Benutzername und Passwort ausfülle, auf „Senden“ drücke und rot angezeigt werde, dass der Benutzername oder das Passwort falsch sind.
Das Problem bei dieser Situation ist, dass ich absolut keine Ahnung habe, welches Feld oder welcher Buchstabe falsch ist . Wenn ich unterwegs die richtigen Änderungen vornehmen kann, macht das den gesamten Prozess viel einfacher. Diese kleinen grünen Häkchen, so unbedeutend sie auch erscheinen mögen, machen den Unterschied, wie sich ein Benutzer während und nach dem Ausfüllen des Formulars fühlt, und haben das Potenzial, zu höheren Abschlussraten zu führen.
Das Twitter-Anmeldeformular ist ein großartiges und einfaches Beispiel dafür, wie die Inline-Validierung verwendet werden sollte. Die Häkchen erscheinen auf der rechten Seite des Formularfelds, während ich die Aktion abschließe. Die rote Fehlermeldung erweist sich auch als nützlich, indem sie mir sagt, was ich tun muss, um das Formular richtig auszufüllen.
Auch die Reise-App Hopper setzt Mikrointeraktionen sinnvoll ein. Nachdem ich die Daten und Reiseziele eingegeben habe, über die ich mehr erfahren möchte, hüpft das süße kleine Kaninchen herum, während die App „überlegt“ und Ergebnisse für mich anzeigt. Niemand wartet gerne. Das Herumspringen des Häschens bringt jedoch ein wenig Freude in dieses kurze Warteerlebnis und lässt den Benutzer auch wissen, dass tatsächlich etwas passiert und die Ergebnisse bald angezeigt werden.
Loops & Modi
Schleifen und Modi bestimmen die größeren Metaregeln der Interaktion. Wenn eine Mikrointeraktion wiederholt verwendet wird, ist es wichtig zu berücksichtigen, wie sich die Interaktionen entsprechend ändern. Denken Sie darüber nach, wie sich diese Interaktion basierend auf dem Benutzerverhalten anpasst. Was ist der Unterschied zwischen der Mikrointeraktion beim ersten Mal im Vergleich zum 7. Mal?
Versuchen Sie, Schleifen zu erstellen, die sich im Laufe der Zeit anpassen und das Erlebnis mit jeder Interaktion bereichern. Die On This Day Memories-Funktion von Facebook ist ein großartiges Beispiel dafür, wie man Erfahrungen schafft, die sich jedes Mal anpassen, wenn man sich damit beschäftigt.
Die Mehrheit der Facebook-Nutzer schaut mehrmals täglich in ihre Newsfeeds. Eine Funktion zu haben, die gelegentlich ein Status-Update oder ein Bild von vor 4 Jahren abruft, kann eine emotionale (hoffentlich positive) Wirkung auf den Benutzer haben. Es besteht die Möglichkeit, dass diese spezielle Mikrointeraktion einen negativen Effekt hat. Beispielsweise hat das Anzeigen eines alten Beitrags, der den Benutzer traurig oder gestresst machen kann, unbeabsichtigte negative Folgen. Ich schlage vor, dass Facebook untersucht, wie man diese negativen Erfahrungen verhindern kann.
Dinge, die beim Entwerfen von Mikrointeraktionen zu beachten sind
Nicht überdesignen . Mikrointeraktionen sollten sich nicht seltsam anfühlen oder zu lange zum Laden benötigen. Sie sollten einen Zweck erfüllen und sich nahtlos in Ihr Gesamtdesign einfügen.
Wenn jemand die Mikrointeraktion zum ersten Mal erlebt, sollte er/sie sich nicht so fühlen wie beim 10. oder 100. Mal. Machen Sie die Mikrointeraktionen an den Kontext anpassbar. Wenn es das erste Mal ist, helfen Pfeile beim Navigieren in der App. Geben Sie ihnen die Möglichkeit, diese Nachricht nicht mehr anzuzeigen, damit sie in Zukunft nicht mehr lästig wird.
Damit komme ich zum dritten Tipp. Fangen Sie nicht bei Null an . Verstehen Sie Ihre Benutzer, ihre Motivationen und den Kontext, indem Sie Benutzerforschung betreiben. Die Informationen, die Sie sammeln, geben Ihnen die Informationen, die Sie benötigen, um Ihre Entscheidung effektiver und brauchbarer zu machen. Wenn sie zum 20. Mal dort sind, finden Sie heraus, was ihre Motivationen und Ziele sind, und erstellen Sie auf der Grundlage Ihrer Erkenntnisse Mikrointeraktionen.
Denken Sie daran, dass das Ziel darin besteht, dass diese Interaktionen subtil und effektiv sind. Stellen Sie sicher, dass der Stil der Mikrointeraktion natürlich zum Stil Ihres gesamten Schnittstellendesigns passt. Die Interaktionen sollten nicht fehl am Platz oder verwirrend wirken und die Mikrointeraktionen sollten mit dem Gesamtdesign der App verbunden sein.
6 Beispiele für richtig gemachte Mikrointeraktionen
Überraschung auf Ihrem Ärmel
Ich habe gehört, dass jemand beschrieben hat, dass er seit Jahren dasselbe weiche, kuschelige Langarmhemd trägt. Eines Tages, als sie auf einem schattigen, von Bäumen gesäumten Pfad in demselben langärmligen Hemd lief, beschrieb die Läuferin, wie ihr kalt wurde und sie den zusätzlichen Stoff zog, der für kalte Tage gedacht war, um ihre Hände zu bedecken, um die Oberteile über ihre Hände zu schlagen. Der darunter liegende Stoff enthüllte die Aussage „Du wirst geliebt“.
Diese Worte, heimlich auf die exakte Stelle des Stoffes gedruckt, wurden versteckt, um in Momenten wie diesen gezeigt zu werden und diejenigen, die es tragen, mit einem kleinen Moment der Freude zu überraschen .
Slack-Emojis
Die Website Little Big Details kuratiert einige großartige Beispiele für Mikrointeraktionen. Wenn Sie in Slack nach einem Emoji suchen und das gesuchte Emoji nicht existiert, wird das Emoji „weinen“ als Option vorgeschlagen. Anstatt sich zu ärgern, wenn der Nutzer nicht findet, was er sucht, hinterlässt das „weinen“-Emoji ein amüsiertes Gefühl .
Google Übersetzer
Wenn Sie in Google Übersetzer zum zweiten Mal auf die Schaltfläche „Zuhören“ drücken, wird die Übersetzung in einer langsameren Geschwindigkeit wiederholt, vorausgesetzt, Sie benötigen etwas mehr Zeit, um zu verstehen, was gesagt wurde.
Nachtmodus auf Google Maps
Ich fand es immer toll, wie der Hintergrund der Google Maps-App je nach Uhrzeit schwarz wird. Der Nachtmodus soll bei Nachtsicht und Sicherheit helfen und ist vollständig automatisch.
Lass mich pulsieren
Schauen Sie sich diese Seite Make Me Pulse an, um ein wirklich entzückendes interaktives Erlebnis zu erleben. Die Verwendung von Mikrointeraktionen ( Fortschrittsbalken, Sounds, Farben ) hilft dabei, Benutzer durch Trigger, Regeln, Feedback und Schleifen durch den Ablauf zu führen.
Bildlaufleisten
Sogar die kleine graue Bildlaufleiste auf der rechten Seite dieser Seite ist ein wunderbares und einfaches Beispiel dafür, wie eine Mikrointeraktion nützlich und effektiv sein kann, um Sie als Leser wissen zu lassen, wie viel Material von diesem Artikel noch zu lesen ist.
Hoffentlich inspiriert Sie dieser Artikel dazu, Mikrointeraktionen in Ihre Designs zu integrieren. Sie haben das Potenzial, die Erfahrung, die Ihre Benutzer mit Ihrem Design machen, von nur ok in etwas wirklich unvergessliches zu verwandeln.
[Dieser Beitrag erschien zuerst auf Proto.io und wurde mit Genehmigung reproduziert.]