Ein einfacher UI-Hack zur Verbesserung von Onboarding UX [OCD]

UI-Modelle und -Skizzen setzen voraus, dass Benutzerdaten bereits vorhanden sind. Das folgende Modell setzt beispielsweise voraus, dass der Benutzer über Kontakte, Benachrichtigungen und sogar Chat-Threads verfügt, mit denen er chatten kann.

Einfache Messenger-Benutzeroberfläche, die mit dieser kostenlosen Skizzierressource erstellt wurde

Dies ist jedoch nie der Fall, wenn sich ein Benutzer anmeldet. Am Anfang gibt es keine Daten, also eine leere Kontaktspalte und ein leeres Chatfenster.

Das glänzende Design der Benutzeroberfläche erleichtert das Konsumieren von Informationen und konzentriert sich nicht darauf, wie diese Informationen erstellt werden.

Ich habe das auf die harte Weise gelernt, als ich so viel von Dribbble eingeweicht habe, dass ich ein Dashboard für eine B2B-Anwendung entwerfen konnte. Auf Sketch sah es gut aus, aber unsere Kunden konnten sich nicht zurechtfinden.

Bad UX erhöht die Einstiegs- und Supportkosten und wirkt sich direkt auf den Umsatz aus. Es fühlt sich auch schlecht an, einem Benutzer zuzusehen, wie er darum kämpft, sein pixelgenaues Design zu verbrauchen. Erinnert Sie daran, dass Sie versagt haben.

Bestehende Lösungen

Eine Lösung bestand darin, ein Onboarding im Voraus mithilfe von Folien wie der Benutzeroberfläche durchzuführen. Dies scheint der Standard für mobile Apps zu sein.

Slides On-Boarding-UX von Slack

Das Problem mit dem Ansatz von Folien ist der Mangel an Kontext. Sie können auf den Folien nur so viel vermitteln (wie viel der Benutzer behält, ist eine andere Frage).

Es ist großartig, um einen Überblick über das Produkt zu geben, aber nicht sehr hilfreich, um die Funktionsweise des Produkts zu erklären. Für meinen Anwendungsfall war dies irrelevant, da die Komplexität des Produkts nicht auf ein paar Folien reduziert werden konnte.

Es gab auch eine Tooltip-basierte Lösung, die den Benutzer durch bestimmte Schritte führt. Diese Option ist bei Web-Apps beliebter. Es gibt viele gute Javascript-Bibliotheken, mit denen Sie diese Flows erstellen können.

Tooltip-basierte On-Boarding-Demo für introjs.com/

Was eine Tooltip-basierte Lösung anbelangt, fand ich sie ärgerlich und klickte fast immer auf „Tutorial überspringen“. Obwohl große Unternehmen wie Canva Tooltips verwenden, die auf dem Boarding basieren. Mit einem Produkt namens AppCues können Sie diese QuickInfos ohne Code übersichtlich gestalten.

Es gibt auch einen Beacon-Ansatz, bei dem häufig missverstandene Funktionen mit leuchtenden Beacons gekennzeichnet sind, die bei Bedarf relevante Informationen liefern.

Dies ist der unauffälligste Weg. Im Gegensatz zu einem Tooltipp, der ein Tutorial mit 17 Schritten in den Rachen schiebt und verschwindet, wenn Sie es tatsächlich benötigen, bietet dieser Hotspot-basierte Ansatz Informationen, wenn Sie bereit sind.

Erwähnenswert ist, dass Slack alle drei Formen verwendet. Kein Wunder, dass ihre User bleiben. Was auch irgendwie darauf hindeutet, dass die Retention direkt proportional zur Erleichterung des Einsteigens ist.

OCD aka Onboarding zentriertes Design

Ich mag es Dinge zu benennen. Namen helfen dabei, Ideen im Kopf zu verwirklichen. Nennen wir dieses Design Onboarding-zentriert.

Ich wollte eine Lösung, die:

  • War für den Kontext relevant
  • War nicht ärgerlich (niemand unternimmt gerne 17 Schritte, um zu lernen, wie ein Feature funktioniert)
  • Ist unauffällig (wie die Leuchtfeuer)
  • Ist einfach zu konsumieren (Tooltips sind nicht einfach zu konsumieren)

Ergebnis

Ich habe einfach angefangen, Zustände zu entwerfen. Das Chat-Design, das Sie beim Lesen dieses Artikels gesehen haben, kann in drei Zuständen gestaltet werden.

Status 1: Es sind keine Kontakte vorhanden

Status 2: Kontakte vorhanden, aber keine Chats

Status 3: Sowohl Chats als auch Kontakte sind vorhanden

Ziel jedes Zustands ist es, den Benutzer zum nächsten Zustand zu bringen. Wenn der Benutzer den Status 3 erreicht hat, ist er erfolgreich an Bord. In Anbetracht des Chat-Modells lauten die Ziele für jeden Status wie folgt:

Ziel von Status 1: Erstbenutzer, um einen Kontakt hinzuzufügen

Das folgende Modell hat nur einen Aufruf zum Handeln, die blaue Plus-Schaltfläche, mit der der Benutzer einen neuen Kontakt hinzufügen kann. Sowohl die Grafiken als auch der Text veranlassen den Benutzer, diese Aktion auszuführen.

Status 1 - Benutzer zum Hinzufügen von Kontakten anlernen (Abbildung von undraw.co)

Sobald ein Kontakt hinzugefügt wurde, können wir mit dem zweiten Ziel beginnen.

Ziel von Status 2: Erstbenutzer, um einen Chat zu starten

Das folgende Modell zeigt eine grafische Grundierung zum Starten eines Chats. Es werden die verfügbaren Funktionen explizit beschrieben. Wieder gibt es nur eine Sache, die Sie jetzt tun können, nämlich eine Nachricht senden. Sie können in dieser Benutzeroberfläche auch einen Anruf tätigen, aber beide Aktionen haben denselben Zweck. Sie führen Ihren Benutzer zu Schritt 3.

Status 2 - Kontakt hinzugefügt, um einen Chat zu starten

Ziel von Status 3: Keine, der Benutzer ist an Bord - alle Hinweise sollten verschwinden

Und schließlich, wenn Ihr Benutzer den Vorgang ein paar Mal wiederholt hat, sieht die Benutzeroberfläche so aus, wie wir es ursprünglich beabsichtigt hatten.

Status 3 - Der Benutzer ist erfolgreich an Bord

Vorteile dieses Ansatzes

  • Im Vergleich zum Ansatz für Folien in Schritt 1 wird der Inhalt im Onboarding Centric Design (OCD) in Blöcken dargestellt. Die Informationen stehen zum Zeitpunkt der Entscheidungsfindung zur Verfügung.
  • Dieser Ansatz kann sowohl auf Mobilgeräten als auch auf Desktopgeräten verwendet werden. Diese Benutzeroberfläche ist einfach, aber im Fall einer komplexen Benutzeroberfläche können Sie OCD mit Hotspots verwenden, um CTAs zu erhöhen.
  • Dieser Ansatz verbessert in erster Linie Ihre UX, indem Sie gezwungen werden, über die Reise des Benutzers nachzudenken.
  • Wenn Sie Ihre Frontends mit React schreiben, fügt sich dieser Ansatz nahtlos in die Komponentenarchitektur ein.

Also als Faustregel:

Entwurfsmodelle für Bundesstaaten.
Jeder Staat hat ein Ziel - den Fortschritt zum nächsten Staat.
Der letzte Status ist, wenn Ihr Benutzer eingebunden ist.

Danke fürs Lesen :)

Hallo, wenn dir dieser Artikel gefallen hat und du auf dem Laufenden bleiben möchtest, folge mir auf: Medium, Github oder Twitter

Ich führe eine Slack Community (mit 18 Mitgliedern ab dem 6. Oktober 2018), in der Sie anderen helfen oder Hilfe in Bezug auf Frontend, Backend und Entwicklung im Allgemeinen erhalten können. Sie können sich hier anmelden.