Bessere UX durch Mikrointeraktionen

Beim Entwerfen eines Produkts gibt es viele Möglichkeiten, die Benutzererfahrung zu verbessern, einschließlich der Definition von Personas, einer gut strukturierten Informationsarchitektur und durchdacht geschriebener Inhalte. Aber nachdem diese Struktur auf hoher Ebene festgelegt wurde, liegt die Freude für einen Benutzer in den kleineren Details des Interaktionsdesigns.

Diese als Mikrointeraktionen bezeichneten Details sind einzelne Momente im Produkt, die darauf ausgelegt sind, eine einzelne Aufgabe zu erfüllen und gleichzeitig den natürlichen Produktfluss zu verbessern. Nach oben wischen, um Daten zu aktualisieren, Inhalte zu mögen oder eine Einstellung zu ändern, sind Mikrointeraktionen. Sie können auch einfache UI-Animationen enthalten, z. B. die Art und Weise, wie ein Menü beim Tippen eingeblendet wird oder eine Karte beim Wischen vom Bildschirm gleitet.

Oftmals werden Mikrointeraktionen vom Nutzer nicht einmal bewusst wahrgenommen, aber ihre subtilen Details machen das Produkt angenehmer und einfacher zu bedienen und verbessern somit das Benutzererlebnis.

Vorteile von Mikrointeraktionen

Mikrointeraktionen und UI-Animationen sind so entscheidend, dass sie ein Design bestimmen oder zerstören können – oder wie Charles Eames, der für Möbeldesign und Architektur berühmt ist, sagte:

Die Details sind nicht die Details. Sie machen das Design.

Einige Hauptvorteile der Integration von Mikrointeraktionen in ein Produkt sind:

• Schaffung einer positiven emotionalen Wirkung auf den Benutzer durch reibungslosere UI-Interaktionen
• Bereitstellung von sofortigem Feedback für den Benutzer basierend auf den von ihm durchgeführten Aktionen
• Den Benutzer flüssiger und intuitiver durch eine App führen
• Benutzer ermutigen, mit einer App zu interagieren, indem sie auf eine Benachrichtigung antworten oder Inhalte teilen
• Benutzerfehler verhindern

Best Practices für Mikrointeraktionsdesign

Nachdem wir nun einige Definitionen und Kontexte dazu erstellt haben, was Mikrointeraktionen tun, und ein Beispiel dafür gegeben haben, wie sie die Benutzererfahrung verbessern, lassen Sie uns die bewährten Methoden zum Erstellen von Mikrointeraktionen diskutieren.

Identifizieren und verstehen Sie das Problem des Benutzers

Die erste Regel in jedem User-Experience-Design ist es, Benutzerprobleme aufzudecken und zu verstehen – das ist bei Mikrointeraktionen nicht anders. Der beste Weg, um zu verstehen, was der Benutzer braucht, ist die Durchführung von Umfragen oder Interviews oder die Beobachtung des Verhaltens durch Benutzerforschung. Toptal-Designer Ivan Annikov geht in seinem Artikel „Going Guerilla: Affordable UX Research Tips And Alternatives“ näher auf das Verständnis der Benutzerbedürfnisse ein.

Halten Sie Mikrointeraktionen natürlich

Das Ziel ist es, die Lücke zwischen dem Benutzer und einem Produkt auf eine Weise zu schließen, die sich intuitiv und natürlich anfühlt, also vermeiden Sie seltsame Animationen, die zu lange zum Laden brauchen oder den Benutzer ablenken könnten. Erstellen Sie stattdessen Designs, die sich nahtlos in das Produkt einfügen. Subtilität ist der Schlüssel zu Mikrointeraktionen. Lassen Sie den Benutzer nicht verwirrt zurück und denken Sie nicht: "Was war das?"

Testen und iterieren Sie Erkenntnisse aus Benutzertests

Selbst erfahrene Designer bekommen Designs selten beim ersten Versuch ganz richtig hin. Aus diesem Grund ist die Verwendung eines Prozesses aus Benutzertests und iterativem Design eine einfache Möglichkeit, Usability-Mängel vor der Produkteinführung zu reduzieren.

Während der User-Testing-Phase werden Mikrointeraktionen auf Usability getestet und analysiert und in der nächsten Design-Phase überarbeitet. Dieser Prozess wird wiederholt, bis Usability-Probleme und Schmerzpunkte behoben sind.

Folgen Sie der Struktur von Mikrointeraktionen

Laut Dan Saffer, Senior Staff Product Designer bei Twitter und Autor von „Microinteractions: Designing with Details“, besteht eine Mikrointeraktion aus vier Teilen.

1. Trigger – Ein Trigger löst die Mikrointeraktionen aus. Eine Art von Auslöser ist ein Kippschalter, der eine Funktionalität ein- und ausschaltet.
2. Regeln – Eine Regel bestimmt, wie eine Mikrointeraktion auf einen Auslöser reagiert, und definiert, was während der Interaktion passiert. Beispielsweise verwendet eine Taschenlampen-App einen Knopf als Auslöser, der das Licht ein- und ausschaltet.
3. Feedback – Feedback teilt dem Benutzer mit, was während der Mikrointeraktion passiert. Ein Beispiel für Feedback ist ein Anmeldeformular mit Inline-Validierung – eine Rahmenfarbe wird grün, wenn das Feld korrekt ausgefüllt ist, und rot, wenn etwas falsch ist. Auf diese Weise weiß der Benutzer sofort, ob etwas richtig oder falsch ist.
4. Schleifen und Modi — Schleifen und Modi definieren die Metaregeln der Mikrointeraktion und wie sich die Mikrointeraktion ändert, wenn sie wiederholt verwendet wird. Beispielsweise kann sich im E-Commerce eine „Jetzt kaufen“-Schaltfläche in „Weitere kaufen“ ändern, wenn der Benutzer den Artikel zuvor gekauft hat.

Dekonstruktion des Mikrointeraktionsdesigns

Um den Denkprozess hinter dem Entwerfen von Mikrointeraktionen zu veranschaulichen, lassen Sie uns eine Mikrointeraktion von Google dekonstruieren: die Mikrointeraktion mit Dateinamensvorschlag in Google Docs.

Diese Mikrointeraktion übernimmt die erste Zeile eines Dokuments und schlägt diesen Textabschnitt als Namen für das Dokument vor, wodurch der Prozess der Namenserstellung intuitiver wird.

Der Prozess des Entwerfens einer Mikrointeraktion ist derselbe wie bei jeder anderen Designaufgabe: Identifizieren des Schmerzpunkts des Benutzers und Beheben des Problems. Lassen Sie uns unter Berücksichtigung der vorherigen Best Practices beginnen, das Problem zu identifizieren.

Das Benutzerproblem

Eine einfache und intuitive Möglichkeit, Dokumente zu organisieren, besteht darin, sie einfach aussagekräftig zu benennen. In den meisten Texteditoren bleibt das Feld „Benennen Sie Ihr Dokument“ leer, obwohl die Wahrscheinlichkeit groß ist, dass der Dateiname irgendwann mit dem Inhalt des Dokuments korreliert. Dies ist ein Prozess, der es wert ist, mit einer Mikrointeraktion angegangen zu werden.

Googles Lösung

Google Docs handhabt dies auf zwei Arten, je nach Auswahl des Benutzers: 1) Benutzer können in das Namensfeld klicken und den Dokumentnamen sofort ändern, bevor sie Inhalte eingeben, und „Unbenanntes Dokument“ in den Namen ihrer Wahl ändern, oder 2 ) Sobald ein Nutzer die erste Textzeile eingibt, fügt Google diese automatisch als Dokumentnamen hinzu. Der Benutzer kann dies beibehalten oder ändern.

Lassen Sie uns die Details untersuchen:

Löst aus

Es könnte einige mögliche Auslöser geben, um das Dokument zu benennen, indem Sie die Menüfunktion Datei > Speichern unter verwenden oder cmd + s auf einem Mac ( Strg + s unter Windows) auf der Tastatur wie in Desktop-Anwendungen drücken. Aber keines davon nutzt die interaktive Natur des Webs aus, und sie verbessern den Benutzerfluss nicht besonders.

Stattdessen besteht der Hauptauslöser von Google Docs darin, einfach auf das Feld mit dem Dokumentnamen zu klicken. Der Hover-Status auf dem Feld zeigt einen „Umbenennen“-Tooltip an. Der sekundäre Auslöser ist Datei > Umbenennen , wodurch das Namenseingabefeld hervorgehoben wird.

Regeln

Regeln definieren, was nach dem Klicken auf den Trigger passiert. In diesem Fall erscheint die erste Textzeile als Dokumentname. Was aber, wenn der Benutzer nicht die erste Textzeile als Namen haben möchte? Wenn der Benutzer auf das Namenseingabefeld klickt, wird der gesamte Text ausgewählt und wird mit jedem Tastendruck gelöscht, was es dem Benutzer erleichtert, einen neuen Namen zu erstellen.

Feedback

Das Ändern der Farbe des Eingabefeldrahmens ist ein gängiges Interaktionsmuster und wird von Google Docs hier verwendet, um dem Benutzer sofortiges Feedback zu geben.

Schleifen und Modi

Der Benutzer hat den Dokumentnamen erfolgreich erstellt und der Auslöser bleibt bestehen, mit einem wesentlichen Unterschied: Das Dokument wurde jetzt benannt.

An diesem Punkt möchte der Benutzer möglicherweise nur einige Buchstaben ändern oder dem Namen ein Datum hinzufügen, anstatt den gesamten zuvor definierten Namen zu ändern. In diesem Fall ist im Gegensatz zur vorherigen Regel die Regel zum Hervorheben des gesamten Dokumentnamens deaktiviert.

Ergebnis

Nachdem Sie das Problem definiert und sich auf alle vier Teile einer Mikrointeraktion konzentriert haben, ist das Ergebnis eine natürlichere, benutzerfreundlichere Erfahrung. Die Dateibenennungslösung von Google Docs hilft dem Benutzer, mit richtig benannten Dateien organisiert zu bleiben, und vereinfacht den Prozess der Benennung von Dokumenten.

Mikrointeraktionen in Aktion: Beispiele aus der Praxis

Neuordnen einer Aufgabenliste

Apple iOS Reminders helfen Benutzern, organisiert zu bleiben und mehrere Schritte zu eliminieren, indem sie ein Listenelement antippen, halten und ziehen, um seine Position in der Listenreihenfolge zu ändern.

Reagieren auf Social-Media-Beiträge

Das „Gefällt mir“ von Inhalten durch Klicken auf eine „Daumen hoch“-Schaltfläche oder ein Symbol ist in vielen Apps und Websites zu einem gängigen UX-Designmuster geworden. Facebook baute auf dieser Interaktion auf, indem es mehrere Optionen über das „Gefällt mir“ hinaus durch eine subtile Mikrointeraktion hinzufügte.

Markentexthervorhebung

In den meisten Browsern ist es möglich, die Standardfarbe für die Textauswahl zu überschreiben. IKEA verwendet dieses Interaktionsmuster, um ein subtiles Markendetail hinzuzufügen, indem Text in seinen ikonischen gelben und blauen Farben hervorgehoben wird.

Teilen Ihres Standorts

Google Hangouts geht davon aus, dass ein Benutzer unter anderem seinen Standort teilen möchte, wenn jemand eine SMS mit „Wo bist du?“ sendet.

Wenn der Benutzer diese Nachricht anzeigt, wird eine Schaltfläche „Standort teilen“ als kontextabhängige Option angezeigt. Sie können dann auf diese Schaltfläche tippen, um automatisch eine Karte ihres Standorts an den anderen Benutzer zu senden.

Wischen zu Auswählen

Mittels Mikrointeraktionen lassen sich in einer App einfache Ja- oder Nein-Fragen beantworten. Tinder tut dies, indem der Benutzer nach links oder rechts (nein/ja) wischt, je nachdem, ob ihm die mögliche Übereinstimmung gefällt oder nicht.

Sucherweiterung

Die Google Inbox-App gruppiert E-Mails nicht nur intelligent mit Bündeln, sondern ermöglicht auch die Suche per Sprache oder die Auswahl der neuesten Kontakte mit einem einzigen Antippen.

Schnelles Hinzufügen der Kontaktinformationen eines Freundes

SeatGeek vereinfacht das Ausfüllen von Formularen durch automatisches Ausfüllen der Informationen aus den Kontakten eines Benutzers durch Tippen auf die Schaltfläche „Aus Kontakten hinzufügen“.

Erfahren Sie mehr über Mikrointeraktionen

Mikrointeraktionen sind ein wichtiger Bestandteil der Verbesserung der Benutzererfahrung, und es gibt viele Ressourcen, um mehr darüber zu erfahren, von denen einige unten aufgeführt sind.

Um mehr über Mikrointeraktionen im Allgemeinen zu erfahren, besuchen Sie Microinteractions, die Website, die als Ergänzung zum zuvor erwähnten Buch „Microinteractions: Designing with Details“ von Dan Saffer erstellt wurde. Auf der Seite gibt es ausführliche Erläuterungen zu Mikrointeraktionen sowie Informationen zur Entstehung bekannter Mikrointeraktionen wie Autokorrektur, Autovervollständigung und Ausschneiden und Einfügen. Das erste Kapitel des Buches ist auch als kostenloser Download verfügbar.

Besuchen Sie Little Big Details, eine kuratierte Sammlung von Mikrointeraktionen in digitalen Produkten, um sich von Mikrointeraktionen inspirieren zu lassen. Es zeigt Beispiele dafür, wie Unternehmen wie Apple, Trello und Stack Overflow Mikrointeraktionen und UI-Animationen implementieren.

Um zu erfahren, wie Sie Mikrointeraktionen in Framer erstellen, lesen Sie Toptal Designer, Wojciech Dobrys Artikel Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Gestaltungsprinzipien und ihre Bedeutung
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Erforschung der Gestaltungsprinzipien des Designs
• Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
• Die 10 UX-Ergebnisse, die Top-Designer verwenden