Der Schlüssel zu einer erfolgreichen User Experience

Was ist ein User Flow und warum ist er wichtig?

Bei User Flows handelt es sich um Diagramme, die von UX-Designern und Produktentwicklern genutzt werden, um einen logischen Pfad der Nutzer bei der Interaktion mit einer Website oder App darzustellen. Es handelt sich also um ein visuelles Tool zur Darstellung aller Aufgaben, die ein Nutzer benötigt, um eine bestimmte Aufgabe erfolgreich abzuschliessen – beispielsweise die Bestellung eines Produkts im Online-Shop

Die User Flow Diagramme beginnen dabei stets mit dem Einstiegspunkt (oder auch mehreren Einstiegspunkten) und stellen dann eine Reihe weiterer Berührungspunkte grafisch dar, bis der User den Abschlusspunkt erreicht. Die Darstellung des User Flows wird ähnlich einer Mindmap aufgebaut und sollte das gesamte Customer Journey umfassen, aber auch auf mögliche Error States hinweisen.

Ziel des User Flows ist es, beim Endprodukt eine reibungslose User Experience sicherzustellen. Durch die grafische Darstellung können Probleme frühzeitig erkannt und gelöst werden, um im Anschluss zu einem optimierten UX Design zu gelangen.

Bestandteile eines User Flows – Von Einstiegspunkten bis hin zu Error States

Der User Flow besteht aus einer Vielzahl unterschiedlicher Bestandteile, die bei der anschliessenden Umsetzung von grosser Bedeutung sind. Dabei sollten nicht nur optimierte Einstiegspunkte betrachtet werden, sondern auch mögliche Error States, die den Endnutzer von der Anwendung abbringen könnten. Ein möglichst detaillierter User Flow unterstützt mit seiner visuellen Darstellung also den gesamten Entwicklungsprozess.

Einstiegspunkte

Einstiegspunkte bilden die Grundlage im User Flow. Sie beschreiben den Ort, der den Nutzer auf die Website oder App bringt. Oft handelt es sich dabei um eine Landingpage oder Werbeanzeige, einen Link in der Google-Suche oder eine Verlinkung auf anderen Websites. Klickt ein User auf diesen Link, muss sofort das Interesse geweckt werden. Daher ist es essentiell, im Rahmen des User Flows einen optimalen Einstieg zu gestalten, der Nutzer langfristig auf der Website oder App hält.

Interaktionen und Entscheidungen

Wurde das Interesse durch einen optimierten Einstiegspunkt geweckt, folgt im Anschluss die Interaktion auf der Website oder innerhalb der App. Dabei muss jeder einzelne Schritt so optimiert werden, dass er eine positive User Experience sicherstellt. Im User Flow ist dafür die Darstellung aller Interaktionen, Klicks und Auswahlmöglichkeiten sowie deren individuelle Bedeutung notwendig, um das Verhalten der Nutzer vorhersagen zu können. Die Entscheidungen, die im User Flow getroffen werden, sollten den Nutzer zur Conversion führen. Dafür wird jeder einzelne Klick genauer betrachtet, analysiert und gegebenenfalls verbessert, um eine positive User Experience im gesamten Ablauf sicherzustellen.

Error States

Auch Fehlerzustände müssen in einem User Flow berücksichtigt werden, um eine authentische Darstellung sicherzustellen. Was geschieht, wenn die Nutzer ungültige Eingaben machen? Kann es zu abgelaufenen Sitzungen kommen? Gibt es auf der Website unerreichbare 404-Seiten, die den User frustrieren können? Alles, was eine mögliche Conversion verhindert, sollte innerhalb des User Flows aufgedeckt und berücksichtigt werden, um Fehlerquellen im Anschluss zu beseitigen.

User Flow Diagramme – Visualisierung der Nutzerführung

In einem User Flow Diagramm wird der gesamte Prozess, angefangen beim Einstiegspunkt, über die einzelnen Interaktionen, bis hin zum Ausstiegspunkt grafisch dargestellt. Das Diagramm beschreibt dabei den gesamten Weg, den ein Nutzer durchläuft, während er sich auf der Website oder innerhalb der App bewegt und mit den einzelnen Elementen interagiert. Je nach Art des User Flow Diagramms lassen sich einfache oder komplexe Sachverhalte darstellen.

Für die Umsetzung des User Flow Diagramms kommen verschiedene Tools in Frage, die mit individuellen Vor- und Nachteilen einhergehen:

• Figma: Mithilfe von Figma lässt sich ein detailliertes User Flow Diagramm erstellen, anhand dessen ein fiktiver Nutzer durch den gesamten Prozess geführt werden kann. Zusätzlich bietet dieses Tool die Option, anhand eines Prototyps den Ablauf direkt selbst zu testen und zu optimieren.

• Miro: Miro bietet ein eigenes User-Flow-Template an, das eine lückenlose Darstellung im gesamten Ablauf ermöglicht. So lassen sich Qualitäts- und Erfahrungsaspekte dokumentieren, die Nutzer bei der Auswahl einer bestimmten Interaktion machen. Hier ist auch eine komplexe Darstellung möglich, die neben einzelnen Zwischenschritten auch Error States berücksichtigt.

• Lucidchart: Bei Luchidchart handelt es sich um ein sogenanntes Flowchart Tool, das den User Flow in Form eines Diagramms darstellt und eine umfassende Planung und Dokumentation der einzelnen Schritte ermöglicht.

Welches Tool für die Darstellung Ihres User Flows für Ihre Produkte sinnvoll ist, hängt von vielen unterschiedlichen Faktoren ab. Daher lohnt sich die Zusammenarbeit mit einem User Flow Experten, um wirklich jeden einzelnen Schritt im Customer Journey zu berücksichtigen und innerhalb des User Flow Diagramms darzustellen. Auf diese Weise haben Sie noch vor dem Launch die Möglichkeit, Fehlerquellen aufzudecken und die Conversion Rate langfristig zu verbessern.

Beispiele für User Flow Diagramme

Es gibt verschiedene Möglichkeiten, User Flow Diagramme zu erstellen. Dabei kommt es nicht nur auf die Wahl des Tools an, sondern auch auf die Komplexität des Diagramms selbst. Welche Herangehensweise sinnvoll ist, hängt auch von der Komplexität des Endprodukts ab.

So genügt für eine einfache Landing Page, die im Anschluss zur Conversion führen soll, oft schon ein einfaches Diagramm, das eine grobe Darstellung der Customer Journey ermöglicht – zum Beispiel immer dann, wenn Nutzer durch die Landingpage nur dazu animiert werden sollen, den Newsletter zu abonnieren. Da hier wenig Optionen zur Interaktion gegeben sind, ist ein solches User Flow Diagramm eher einfach zu halten.

Je nach Produkt kann es aber auch sinnvoll sein, deutlich komplexere Diagramme zu erstellen, die Entscheidungen, Abzweigungen und Fehlerzustände beinhalten. Geht es beispielsweise darum, einen erfolgreichen Kaufabschluss in einem Online-Shop im E-Commerce sicherzustellen, so müssen auch viele weitere Aspekte berücksichtigt werden: Suchverhalten der Nutzer, das Browsen durch das Produktsortiment, die Adresseingabe, die Auswahl der Zahlungsmethode und der Kaufabschluss selbst. Hier sollte jeder einzelne Schritt im User Flow Diagramm betrachtet werden, um mögliche Fehlerquellen aufzudecken und ein positives Erlebnis für den Nutzer zu erschaffen.

Ein User Flow Diagramm hilft Ihnen dabei, das komplexe Verhalten der Nutzer innerhalb eines einfachen und leicht verständlichen Diagramms darzustellen. Bei der anschliessenden Entwicklung des Endprodukts, also der Website oder App, können Sie so das Diagramm als visuelle Unterstützung nutzen.