So erstellen Sie Benutzerflüsse für E-Commerce

Stellen Sie sich vor, Sie erstellen eine neue Website für Ihren Online-Shop. Du gehst in einen Seitenersteller wie WordPress und beginnst damit, Seiten Abschnitte hinzuzufügen, wobei du entscheidest, dass die Navigationsleiste zentriert sein soll oder dass dein About-Clip an erster Stelle stehen soll.

Oder vielleicht haben Sie bereits eine Website und haben entschieden, dass sie besser aussehen könnte, also beginnen Sie, Bilder, Texte und CTAs zu verschieben.

Unabhängig davon wurden bereits Fehler gemacht: In beiden Fällen ist keine Strategie oder kein Benutzerfluss vorhanden. Das Design ist lässig gewählt und wie ein authentisches Gemälde von Jackson Pollock bespritzt.

Und ob Pollock-Fan oder nicht, seine Gemälde mussten nie von einer Stufe des Trichters zur nächsten führen.

Im neuen Zeitalter des Online-Shoppings ist eine E-Commerce-Website von entscheidender Bedeutung – eine App, die möglicherweise von Vorteil ist.

Aber eine schöne Website zu haben ist nicht genug, genauso wie es eine Verschwendung ist, eine Menge Verkehr anzuziehen, es sei denn, sie konvertiert (dh kauft Ihre Produkte). Sie benötigen eine Website, die darauf ausgelegt ist, Ihre Leads auf dem Weg zur Conversion zu führen.

Eine gut gestaltete Website beginnt nicht mit der Auswahl Ihrer bevorzugten Schriftart und Animation. Es beginnt mit der Abbildung Ihrer Benutzerströme.

Was ist ein Benutzerflussdiagramm?

Benutzerflussdiagramme – auch als Benutzerflussdiagramme, Aufgabenflussdiagramme und Flussdiagramme der Benutzeroberfläche bezeichnet – zeigen den Weg, den ein Benutzer durch Ihre Website oder App nimmt, um ein Ziel oder eine Aufgabe zu erreichen. Indem Sie die Schritte veranschaulichen, die ein Benutzer unternimmt, um von einer Seite zur nächsten zu fließen, bis er seine Aufgabe abgeschlossen hat (z. B. den Kauf eines Produkts), gewinnen Sie ein Verständnis dafür, wie Sie die Aufgabenerfüllung fördern können.

Beispiel für ein Benutzerflussdiagramm von UX Collective.

Die Rolle von Benutzerströmen im UX-Design

Beim User Experience Design (UX-Design) geht es darum, Designs zu erstellen, die benutzerzentriert sind. Indem Sie Ihre Benutzer, alias potenzielle Kunden, in den Mittelpunkt Ihrer Designentscheidungen stellen, verbessern Sie ihre Erfahrung und erhöhen die Wahrscheinlichkeit, dass sie zum Ende des Verkaufs navigieren.

Benutzerflüsse zeigen, wie Benutzer mit Ihrem Produktdesign interagieren, wobei die Benutzeraktionen und Produktfunktionen berücksichtigt werden, die zum Erstellen einer Conversion erforderlich sind.

Erstellen Sie ein Benutzerflussdiagramm, bevor Sie mit dem Designprozess beginnen, um Ihre Website-Anforderungen zu informieren. Strategen, Designer und Webentwickler verwenden UX-Flows, um Produktmängel zu erkennen und den Umfang eines Projekts zu verstehen, einschließlich der Anzahl der Seiten, der einzelnen Komponenten und der gesamten Informationsarchitektur.

Sie können auch Benutzerströme nach der Website-Entwicklung erstellen, um Bereiche für Vereinfachung und Verbesserung zu erkennen.

Beispiel für ein Benutzerflussdiagramm von Creately.

Allgemeine vs. detaillierte Benutzerabläufe

Benutzerabläufe auf hoher Ebene sind schnell und kurz und wurden erstellt, um einen schnellen Überblick über eine Idee oder einen Prozess zu geben.

Detaillierte Benutzerabläufe oder Aufgabenabläufe sind nützlicher und beschreiben alle Schritte und Entscheidungen, die zum Abschließen einer Aufgabe erforderlich sind. Detaillierte Flussdiagramme sind das, was Sie erstellen möchten, um das Design und den Inhalt Ihrer E-Commerce-Website zu informieren.

Einige unterscheiden Benutzerflows von Taskflows insofern, als Benutzerflows betonen, dass eine Aufgabe von Benutzern basierend auf Persona und Einstiegspunkt unterschiedlich abgeschlossen werden kann.

User Flows vs. User Journeys

User Flows unterscheiden sich von User Journey Maps, die die End-to-End-Erfahrung eines Benutzers mit einem Produkt skizzieren. Wo Flows rein aktionsbasiert sind, berücksichtigen User Journeys Faktoren wie Benutzeremotionen.

User Journey Maps und Customer Journey Maps werden manchmal synonym verwendet, aber das funktioniert nur, wenn Benutzer und Kunde dieselbe Person sind, was nicht immer der Fall ist. Beispielsweise könnte ein Arbeitgeber (der Kunde) ein Online-Tool für seine Mitarbeiter (die Benutzer) erwerben.

So erstellen Sie Benutzerflussdiagramme

1. Entscheiden Sie sich für den Zweck des Diagramms

Was Ihr Benutzerflussdiagramm enthält, hängt von Ihrem Ziel und der Aufgabe ab, die Sie verfolgen. Begrenzen Sie die Anzahl der Ziele oder Aufgaben pro Diagramm; Am besten ist es, wenn Sie nur einen nach dem anderen aufzeichnen. Das Betrachten von mehr als einem Diagramm kann das Diagramm überkomplizieren und überfüllen, wodurch es weniger effektiv wird.

Geben Sie dem Benutzerfluss einen eindeutigen Titel basierend auf seinem Zweck für zukünftige Referenzen.

2. Verstehen Sie Ihren typischen Benutzer

Ein Verständnis Ihrer Benutzer hilft dabei, die Taskflow-Navigation zu bestimmen, die am besten funktioniert, und die Inhalte, die auf jeder Seite enthalten sein sollen.

Führen Sie Benutzerrecherchen durch, um Folgendes von Ihren Benutzern zu sammeln:

• Ziele
• Motivationen
• Gewünschte Funktionen
• Erfahrungs-/Wissensstand
• Barrieren

Diese Faktoren können sich für verschiedene Zielgruppensegmente und Phasen der Kaufreise ändern, aber Sie werden sie verwenden, um zu bestimmen, was auf jeder Webseite zu sehen ist, wie jede Seite gestaltet und wohin verlinkt werden soll.

Benutzer- und Geschäftsziele sollten aufeinander abgestimmt sein, damit Sie E-Commerce-Website-Flows entwerfen können, die beide erfüllen.

Das Studium der Abläufe Ihrer Konkurrenz kann ebenfalls Erkenntnisse liefern.

3. Erstellen Sie einen TaskFlow-Schlüssel

Es gibt keine festen Regeln dafür, wie Ihr Aufgabenflussdiagramm aussehen sollte, solange Sie konsistent sind und einen Schlüssel für die verwendeten Farben und Formen bereitstellen, damit andere es verstehen können.

Übliche Benutzerflusssymbole sind:

Andere Formen, die manchmal verwendet werden, umfassen Dreiecke, schräge Parallelogramme und gestrichelte Formen (anstelle von durchgezogenen Umrissen). Sie können so spezifisch werden, wie Sie möchten, und Formen für zusätzliche Elemente wie Systemaufgaben, Eingabeelemente oder Auswahlen/Klicks umschalten.

Alle verwendeten Farben sollten zur Bedeutung und Lesbarkeit Ihres Benutzerflussdiagramms beitragen. Überlegen Sie, wie Farbe dabei helfen kann, Gegenstände zu gruppieren, Elemente zu identifizieren und Muster aufzudecken.

Andere Arten von Benutzerflussdiagrammen

Da Benutzerflussdiagramme nur für Ihre Website gelten, folgen nicht alle der üblichen Praxis der Verwendung von Formen und Farben.

Eine andere Art des Benutzerflusses ist den in der Informatik verwendeten Zustandsdiagrammen nachempfunden. Zustandsdiagramme sehen unterschiedlich aus, aber Sie können sie als eine Reihe von Brüchen mit Pfeilen schreiben, die den E-Commerce-Prozessfluss leiten. Die Brüche beinhalten, was der Benutzer über dem Bruchstrich sieht und was der Benutzer darunter tut, etwa so:

Es gibt auch Benutzerflüsse, die Sitemaps nachempfunden sind. Zusätzlich zu den durchgeführten Aktionen präsentieren sie jede am Benutzerfluss beteiligte Webseite mit einer Liste aller Abschnitte und Unterabschnitte auf diesen Seiten. Dann zeigen Pfeile oder Linien, welche Seitenabschnitte und CTAs Benutzer zum nächsten Schritt im Fluss führen.

Beispiel für einen Benutzerfluss von Salinthip Kaewkerd auf Behance.

4. Skizzieren Sie Ihr Benutzerflussdiagramm

Nachdem Sie sich für ein Format entschieden haben, können Sie mit der Gestaltung Ihrer Aufgabenabläufe beginnen. Beginnen Sie mit dem Einstiegspunkt, der für Ihr spezielles Diagramm ausgewählt wurde, und listen Sie alle Schritte zwischen dem Einstiegspunkt und dem Abschluss der Aufgabe auf.

Einstiegspunkte können jede Quelle sein, die einen Benutzer zu Ihrer Website führt, einschließlich Anzeigen, soziale Medien, organische Suchergebnisse, externe Links, E-Mail-Kampagnen und mehr. Apps haben tendenziell weniger Einstiegspunkte als Websites.

Die folgenden Schritte (das Kernstück des Flussdiagramms der Benutzeroberfläche) hängen von der Aufgabe ab, die Sie zuordnen möchten. Sie können Elemente wie Anmelde- und Anmeldeformulare, Produktsuche, Checkout-Prozesse oder Onboarding umfassen. Überlegen Sie, wie der Benutzer zu jeder Seite gelangt, welche Aktionen er darauf ausführen kann und wohin er von dieser Seite aus geht, um sein Ziel zu erreichen.

Der letzte Schritt in Ihrem Benutzerflow sollte nicht die Benutzeraktion sein, die die Aufgabe abschließt, sondern die Funktionalität, die dem Benutzer den Abschluss bestätigt.

Wenn Sie eine aktuelle E-Commerce-Website aktualisieren, können Sie Google Analytics-Verhaltensflussberichte verwenden, um zu erfahren, woher Ihre Benutzer kommen, wie sie auf Ihrer Website navigieren und wo sie sie verlassen.

Wenn Sie Ihren Benutzerfluss abbilden, werden Sie feststellen, dass es mehrere Wege gibt, die ein Benutzer nehmen kann, um eine Aufgabe zu erledigen. An diesen Punkten brechen Zweige oder Knoten ab, um die Kartierung der primären Pfade fortzusetzen.

Beim Erstellen von Flussdiagrammen können Sie die Lesbarkeit erhöhen, indem Sie die Anzahl der Richtungen begrenzen, in die sie sich bewegen. Wenn Sie am Ende Pfeile haben, die in alle Richtungen zeigen, sieht Ihr Diagramm eher wie ein Labyrinth aus. Es gibt viele Benutzerfluss-Tools zum Erstellen von Funktionsdiagrammen.

5. Reduzieren Sie Ihre Flüsse

Sobald Sie Ihr Benutzerflussdiagramm erstellt haben, ist es an der Zeit, Ihre Schere zu zücken. Dieser Schritt beinhaltet drei wesentliche Änderungen:

1. Entfernen von Informationen, die für die Visualisierung des Flusses unwesentlich sind
2. Verschieben von Details außerhalb der reinen Benutzernavigation in eine Reisekarte
3. Identifizieren von Schritten, die überflüssig oder unnötig sind

Dieser letzte Schritt dient weniger der Visualisierung des Navigationsflusses als vielmehr dem Benutzer, dessen Erfahrung Sie verbessern möchten. Je mehr Entscheidungen und Aktionen ein Benutzer treffen muss, um eine Aufgabe abzuschließen, desto unwahrscheinlicher ist es, dass er dies tut. Vereinfachen Sie Ihren Benutzerfluss so weit wie möglich, um die Conversion-Chancen zu erhöhen.

6. Label mit Absicht

Beschriften Sie alle Elemente Ihres Benutzerflussdiagramms eindeutig. Es sollte klar sein, worauf sich jede Form, Seite, jeder Abschnitt oder jede Aktion bezieht. Vermeiden Sie die Verwendung von Abkürzungen, wenn sie von der Bedeutung ablenken. Wenn Sie fertig sind, lassen Sie einige Kollegen Ihre Benutzerflows überprüfen, um zu sehen, ob sie sie interpretieren können.

Optimieren Sie Ihre Benutzerströme mit Daten

Wenn Sie eine neue Website erstellen oder neue Designs oder Inhalte testen, sollten Sie in Betracht ziehen, reale Benutzerströme zu untersuchen und sie mit Ihren Erwartungen zu vergleichen, wie sie in Ihrem Flussdiagramm dargestellt sind. Wenn Abweichungen auftreten, können Sie sie verwenden, um Ihr Flussdiagramm zu korrigieren oder die Benutzeroberfläche selbst zu bearbeiten, um die Benutzer so zu führen, wie Sie es geplant haben. Mehrere UX-Forschungsmethoden testen Benutzerströme, darunter Usability-Tests, Aufgabenanalysen und Baumtests.

Sie können auch Daten aus Google Analytics oder Recherchen verwenden, um zu sehen, wo Sie Ihren Benutzerfluss optimieren können, um den Umsatz zu steigern. Beim Erstellen von E-Commerce-Websites werden Benutzerströme in den E-Commerce-Verkaufstrichter eingebunden. Es ist natürlich, dass Benutzer abfallen, je weiter sie den Trichter hinuntergehen (daher die Trichterform), aber drastische Abbruchpunkte weisen auf Bereiche hin, in denen Verbesserungen erforderlich sind.

Und häufig bedeuten Verbesserungen, dass Sie Ihren Benutzerfluss optimieren, sei es durch eine natürlichere Navigation, die Bearbeitung des Designs oder das Hinzufügen von Richtungstexten.

Ein Rückgang des Flusses kann auch auf Geschäftsentscheidungen zurückzuführen sein: Ein Anstieg der Absprungraten, nachdem potenzielle Käufer die Versandkosten gesehen haben, deutet darauf hin, dass hohe Versandkosten wahrscheinlich das Problem sind.

Analysieren Sie die Schritte rund um die Absprungraten und stellen Sie eine Hypothese auf, was das Problem (und die Lösung) sein könnte. A/B-Testen Sie Ihre Lösungen, bis die Drop-Offs abnehmen und mehr Benutzer zum nächsten Schritt übergehen.

Differenzierung Ihres E-Commerce-Website-Flusses

E-Commerce-Flussdiagramme folgen in der Regel einem ähnlichen Muster: Entdecken Sie eine Seite extern, rufen Sie die Seite auf, sehen Sie sich Produkte an, legen Sie Produkte in den Warenkorb, gehen Sie zur Kasse, erhalten Sie eine Bestätigung.

Obwohl dies alles Schritte sind, die von Natur aus zum E-Commerce gehören, lohnt es sich, Ihr einzigartiges Wertversprechen und Ihre Zielgruppe beim Entwerfen von Benutzerströmen zu berücksichtigen.

Können Sie mehr anbieten? Können Ihre Benutzer von zusätzlichen Funktionen profitieren?

Einige E-Commerce-Shops mischen Benutzerreisen und Aufgabenabläufe, indem sie Personalisierungsquiz oder Anprobefunktionen einbeziehen. Mit Sephoras Virtual Artist können Benutzer beispielsweise simulieren, wie Make-up auf ihnen aussehen würde, bevor sie es von zu Hause aus kaufen.

Ein weiterer Punkt zur Differenzierung im E-Commerce, der beim Entwerfen von Benutzerabläufen oft vergessen wird, ist der Nachkauf. Die Bestätigung eines Kundenkaufs ist nie das Ende der Customer Journey. Jetzt müssen sie ihr Paket verfolgen, gespannt auf seine Ankunft warten, es aufgeregt auspacken und möglicherweise zurücksenden. Es lohnt sich zu überlegen, wie Sie die Benutzererfahrung mit Versand, Dankesseiten und Upselling verbessern können.

Berücksichtigen Sie beim Erstellen von Abläufen für E-Commerce-Websites und -Apps alle Phasen des E-Commerce-Trichters:

• Rücksichtnahme
• Auswertung
• Kaufen
• Nach Kauf

Steigern Sie den Umsatz mit effizienten UX-Flows

Benutzererfahrung ist mehr als nur hübsches Design, das Benutzer gerne sehen. Es entwirft Informationsarchitektur und Inhalte, die Leads durch die E-Commerce-Reise zur Konversion führen.

Es geht darum, eine Website oder Anwendung zu erstellen, mit der ein Benutzer problemlos navigieren, von einer Phase zur nächsten wechseln, das gesuchte Produkt finden und zu gegebener Zeit auf den richtigen CTA klicken kann.

Zu viele Schritte zwischen ihrem Einstiegspunkt und dem Verkaufspunkt zu stopfen, bedeutet, dass sie mehr Arbeit verlangen; Zu wenige Schritte reichen möglicherweise nicht aus, um ihre Bedenken auszuräumen, was bedeutet, dass sie aufgefordert werden, ein größeres Risiko einzugehen. Niemand mag Arbeit oder Risiko beim Online-Kauf.

Die Abbildung eines effizienten Benutzerflusses für jede der Aufgaben auf Ihrer Website ist eine effektive Methode, um Reibungspunkte bei Verbrauchern zu erkennen, sodass Sie ein digitales Produkt entwerfen können, das eine bessere Benutzererfahrung bietet und folglich den Umsatz ankurbelt.