So erstellt man ein Nutzerflussdiagramm

Stellen Sie sich Ihre Website wie ein Geisterhaus vor – Sie müssen genau wissen, wie sich Ihre Gäste durch das Geisterhaus bewegen, wo die uneinsehbaren Ecken sind und wann Sie die Horde von Killerclowns freilassen müssen, um ein Maximum an Schreie zu erzielen. Ohne Timing und Koordination könnte Ihr unberechenbarer Mann mit der Kettensäge einen leeren Raum überraschen und Ihre Vampirbraut könnte aus ihrem Sarg springen, sobald die Gruppe von Teenager-Mädchen in den Sumpf der Killerschnecken vorgedrungen ist.

Ähnlich verhält es sich, wenn Sie nicht verstehen, wie sich die Nutzenden auf Ihrer Website bewegen: Sie werden den Nutzen nicht erkennen können. Aber Ihre Nutzenden zu verstehen, ist nicht so beängstigend, wie es scheint: Sie benötigen lediglich ein Nutzerflussdiagramm. 

Erfahren Sie, warum Nutzerflussdiagramme so wichtig sind und wie Sie ein solches Diagramm für Ihre Website erstellen können.

Was ist ein Nutzerfluss?

Sie haben den Begriff „User Journey“ sicher schon oft gehört, aber ein Nutzerfluss ist etwas anderes als eine User Journey. 

Das ist der Unterschied:

• Nutzerfluss: Diese Darstellung umfasst alle verschiedenen Interaktionen, die Nutzende auf Ihrer Website haben sollten. Nutzerflüsse erfassen die Logik „hinter den Kulissen“, die die treibende Kraft hinter einem scheinbar einfachen Vorgang darstellt (z. B. die Anmeldung oder Verlängerung eines Abonnements). Das visuelle Abbilden dieser Logik hilft den Teams, Bedingungen, Ausnahmen und alternative Pfade zu erkennen, die in Gesprächen leicht übersehen werden können.

• User Journey: Der Nutzerfluss ist nur ein Teil der User Journey. Die User Journey betrachtet die gesamte Umgebung eines Kaufs, von Offlineeinflüssen bis hin zu Onlineanzeigen. Der Nutzerfluss befasst sich erst mit Ihren Gästen, sobald sie Ihre Website oder Anwendung erreichen. Sobald sie Ihre Website verlassen haben, setzen Ihre Gäste die User Journey fort.

Warum ein Nutzerflussdiagramm verwenden?

Nutzerflussdiagramme werden hauptsächlich von Produkt- und UX-Teams genutzt, um den Fluss einer Website oder Anwendung auszuarbeiten, nachdem Sie das Kundenerlebnis und die Bedürfnisse der Nutzenden festgelegt haben. Um diese Bedürfnisse und die gewünschte Erfahrung für Ihre Nutzenden bestmöglich verstehen zu können, ist es wichtig, sie zu erfassen und zu visualisieren.

Nutzerflussdiagramme werden Ihnen bei folgenden Dingen helfen:

• Wichtige Schritte im Prozess nicht zu übersehen

• Entscheidungen zu treffen, Feedback von Stakeholdern einzuholen und diesen Prozess bei einem niedrigen Ausarbeitungsgrad zu wiederholen, bevor Sie viel Zeit in das Design stecken

• Entwicklungsfehler und Nacharbeit zu reduzieren, indem Sie den Ingenieuren eine gemeinsame, leicht verständliche Referenz an die Hand geben, wie die einzelnen Teile des Erlebnisses zusammenpassen

• Randfälle und versteckte Komplexität sichtbar zu machen (z. B. bedingte Logik, Kontostatus oder Berechtigungsprüfungen), die sonst den Wissensschatz mehrerer Personen beanspruchen würden

• Das Onboarding neuer Teammitglieder zu beschleunigen, indem institutionelles Wissen und lange Erklärungen durch eine zentrale visuelle Informationsquelle ersetzt werden

Letztendlich gilt: Wenn Ihnen Ihre Zeit und Energie wichtig sind, sollten Sie etwas Zeit in die Erstellung eines Nutzerflussdiagramms investieren, um spätere Hindernisse zu vermeiden. 

Nehmen wir beispielsweise an, Sie verkaufen Software zur Budgetverwaltung. Ihre Kunden werden wahrscheinlich den AIDA-Phasen auf folgendem Pfad durch Ihre Website folgen:

• Bewusstsein (Awareness): Der Gast gelangt auf Ihre Landingpage „Kreditkarten schneller abbezahlen“.

• Interesse (Interest): Der Gast scrollt durch die Seite und sieht sich ein Erfahrungsbericht-Video über ein Paar an, das seine Kreditkartenschulden in Höhe von 30.000 Dollar abbezahlt hat. (Nicht vorschnell urteilen: Schuhe sind teuer!)

• Wunsch (Desire): Der Gast klickt auf eine Seite über die Kosten Ihrer Software und stellt sich vor, wie schön es sein wird, all diese Schulden los zu sein.

• Aktion (Action): Der Gast kauft Ihre Software.

Wenn Sie nicht genau wissen, was Ihr Gast im Laufe des Nutzerflusses auf den einzelnen Seiten sucht, wird er frustriert werden und schließlich Ihre Website verlassen. Wenn Sie wissen, was Ihre Nutzenden tun, können Sie sich darauf konzentrieren, ihre Erfahrungen auf Ihrer Website zu optimieren.

Das gleiche Prinzip gilt auch abseits von Marketingabläufen. Selbst einfache Produktmomente (wie die Anmeldung) können Dutzende von bedingten Verzweigungen verbergen. Ein Nutzerflussdiagramm hebt diese Verzweigungen hervor, sodass das Team sie absichtlich herausarbeiten (oder korrigieren) kann, anstatt sie über Bugs und Support-Tickets zu entdecken.

Wie man ein Nutzerflussdiagramm erstellt

Beginnen Sie nicht damit, ein Nutzerflussdiagramm zu erstellen, das auf Vermutungen basiert. Verwenden Sie stattdessen Daten, um fundiert vorzugehen. Folgen Sie diesen Schritten, um die Informationen zu sammeln, die Sie benötigen, um genaue Nutzerflussdiagramme zu erstellen.

1. Bestimmen Sie Ihr Ziel und die Ziele Ihrer Nutzenden

Sie können keine Wegbeschreibung für ein unbekanntes Ziel geben. Ebenso können Sie keinen Nutzerfluss erstellen, bevor Sie festgelegt haben, wo Ihre Nutzenden landen sollen und – was noch wichtiger ist – was Ihre Nutzenden letztlich von Ihrer App oder Website erwarten.

Sie kennen wahrscheinlich das Ziel Ihres Unternehmens, zu dem auch gehören könnte, Nutzende davon zu überzeugen, ein Produkt zu kaufen, sich für einen Newsletter zu registrieren oder Gated Content herunterzuladen, aber es ist möglicherweise weniger klar, was die Nutzenden auf Ihrer Website erreichen wollen.

Falls Sie es noch nicht getan haben: Erstellen Sie eine Customer Journey Map, um Ihrem Unternehmen eine gemeinsame Vorstellung davon zu bieten, wie das Kundenerlebnis aussehen sollte. Sie visualisiert, wie sich ein Kunde in den verschiedenen Phasen seiner Reise fühlt und auf welche Touchpoints er stoßen könnte. Customer Journey Mapping Software legt für Sie offen, wie Ihre Nutzenden Ihre Website betreten, was sie tun, sobald sie dort sind, und was sie tun, wenn sie sie verlassen.

Fügen Sie eine Customer Journey Map Vorlage mit Bildunterschrift ein: Diese kostenlose Customer Journey Map Vorlage hilft Ihnen und Ihrem Team dabei, den Verlauf der Erfahrung des Kunden mit Ihrem Unternehmen klar zu visualisieren. 

Wenn Ihr Fluss ein komplexes Set von Funktionen unterstützt – etwa Single Sign-On (SSO), Unternehmensberechtigungen oder Abonnementstatus –, definieren Sie auch Erfolgskriterien für diese Szenarien im Voraus. Andernfalls könnte der ideale Pfad großartig aussehen, während Randfälle das Erlebnis still und heimlich untergraben.

2. Herausfinden, wie Nutzende Ihre Website finden

Wenn Sie versuchen, eine Website oder App zu verbessern, die bereits erstellt wurde, sollten Sie die Daten analysieren. Google Analytics schlüsselt die Prozentsätze für jede der folgenden Einstiegsmethoden auf:

• Direktzugriffe

• Organische Suche

• Bezahlte Werbung

• Soziale Medien

• Internetseiten Dritter

• E-Mail

Überlegen Sie, was diese verschiedenen Einstiegspunkte über Ihre Nutzenden aussagen und wie Sie das Erlebnis besser an ihre Bedürfnisse anpassen können. Diese Einstiegspunkte werden den Anfang Ihres Nutzerflussdiagramms bilden.

3. Identifizieren, welche Informationen Ihre Nutzenden wann benötigen

Nachdem Sie nun einen Ausgangspunkt haben, überlegen Sie, welche Informationen Ihre Nutzenden benötigen und welche Aktionen sie durchführen sollen. Um Nutzende zu konvertieren, liefern Sie ihnen die richtigen Informationen zu dem Zeitpunkt, zu dem sie diese am dringendsten benötigen.

Stellen Sie sich bei der Erstellung Ihres Nutzerflussdiagramms unbedingt Fragen, um sich in Ihre Kunden zu versetzen, etwa „Welche Aktion sollte ich auf dieser Seite ergreifen, wenn ich mein Kunde wäre?“, „Wie navigiere ich durch den Checkout-Prozess?“ und „Wenn ich dieser Kunde wäre, was würde ich von diesem Erfahrungsbericht Video halten?“ Überlegen Sie, was der Kunde von einer bestimmten Seite erwartet, was er möglicherweise fühlt und in welcher Gemütsverfassung er sich befindet.

Wenn Sie eine bestehende Website optimieren möchten, sollten Sie analysieren, was derzeit gut funktioniert. Anders gesagt: Welchen Pfade sind Menschen auf Ihrer Website gefolgt, wenn sie etwas gekauft oder andere Aktivitäten erfolgreich durchgeführt haben? Konzentrieren Sie sich nicht nur auf den Kauf: Es kann mehrere Besuche auf einer Website erfordern, bevor ein Kunde einen Kauf abschließt. Wenn ein Gast sich über ein Popup für Ihren Newsletter oder SMS Benachrichtigungen anmeldet, zählt dies bereits als Erfolg.

Dies ist auch der Moment, um weniger verbreitete, aber dennoch wichtige Pfade zu inventarisieren, etwa Passwortrücksetzungen, abgelaufene Testversionen, fehlgeschlagene Zahlungen, Kontozusammenführungen, Berechtigungsfehler und andere Ausnahmen. Dies sind die Szenarien, die dazu neigen, sich in den Köpfen der Menschen (oder den To-do-Listen der Teams) festzusetzen, bis sie durch ein Diagramm ins Bewusstsein gerückt werden.

4. Skizzieren Sie Ihren Nutzerfluss

Jetzt, da Sie Ihre Zielgruppe, ihre Beweggründe und ihre typischen Pfade für das Ausführen verschiedener Aktionen kennen, können Sie mit der Erstellung eines Nutzerflussdiagramms beginnen. Wählen Sie einen visuellen Arbeitsbereich wie Lucidchart, in dem Sie Formen einfach per Drag and Drop im Nutzerpfad platzieren und Gelegenheiten notieren können, um Ihren Kunden zu begeistern und zu informieren.

Beginnen Sie mit Formen, die Einstiegspunkte darstellen, beispielsweise „Organisch“ oder „Bezahlt“. Anstelle von geometrischen Formen können Sie hier sogar Low Fidelity Wireframe Formen verwenden, um eine Vorstellung davon zu vermitteln, wie die Website oder Anwendung aussehen soll und wo sich Ihre Handlungsaufrufe befinden.

Als Nächstes legen Sie fest, wie die Landingpage aussehen soll und welche Entscheidungen Ihr Kunde auf dieser Seite treffen muss. Fügen Sie weitere Formen und Entscheidungspunkte hinzu, bis der Fluss vollständig ist.

Streben Sie nach Vollständigkeit ohne unnötige Komplexität. Geben Sie alle Details an, die Ihre Zielgruppe benötigt, um fundierte Entscheidungen zu treffen, aber vermeiden Sie Wirrwarr, das das Analysieren des Flusses erschweren würde. Der von Ihnen genutzte Detailgrad sollte vollständig von Ihren Stakeholdern abhängen:

• Allgemeine Ansichten: Führungskräfte benötigen möglicherweise nur einen umfassenden Überblick über die User Journey, um die Geschäftslogik zu verstehen.

• Technische Einzelheiten: Techniker benötigen oft Details wie Systembedingungen, Anfragen oder API Touchpoints.

Die Integration von Wireframes in Ihre Nutzerflüsse hilft dabei, die Benutzeroberfläche mit der zugrundeliegenden Systemlogik zu verbinden, was es einfacher macht, zu überprüfen, ob jeder Bildschirm den darauffolgenden Schritt unterstützt. In vielen Fällen kann eine Reihe von Wireframes den notwendigen Code implizieren, was den Bedarf an ausschweifenden schriftlichen Beschreibungen reduziert.

Geben Sie der Effizienz jedoch Vorrang vor einer umfassenden Dokumentation. Wenn Ihr Team ein Standardvokabular für Komponenten teilt, kann es effektiver sein, das Muster zu benennen, als jedes Bild einzubetten. Passen Sie den visuellen Detailgradgrad an, um sicherzustellen, dass das Diagramm eine hilfreiche Ressource bleibt und keine Belastung darstellt. Und denken Sie daran: Ihr Nutzerflussdiagramm kann sich im Laufe der Zeit ändern, wenn sich Ihre Zielgruppe weiterentwickelt und sich ihre Beweggründe für die Navigation auf Ihrer Website ändern.

5. Feedback einholen, finalisieren und teilen

Wenn Sie eine neue Website oder Anwendung erstellen, teilen Sie Ihr Nutzerflussdiagramm mit anderen Stakeholdern, um Feedback einzuholen und Anpassungen vorzunehmen. Die visuelle Darstellung ist unter diesen Umständen besonders aussagekräftig, da die Stakeholder das von Ihnen vorgeschlagene Erlebnis auf einen Blick verstehen können.

Sobald Sie das Nutzerflussdiagramm fertiggestellt haben, teilen Sie es mit UX Designern, Webentwicklern, Softwareentwicklern und anderen Teammitgliedern, um ihnen den Kontext zu vermitteln, bevor sie mit der Erstellung oder Gestaltung Ihrer Website oder App beginnen.

Es ist einfach, Feedback zu bestimmten Teilen eines Diagramms zu erhalten, wenn Sie Ihre Nutzerflüsse in Lucidchart entwerfen. Hinterlassen Sie einfach Post its oder taggen Sie Kollegen in Kommentaren, um in Echtzeit oder asynchron zusammenzuarbeiten. 

Außerdem dient Lucidchart von dem Moment an, in dem Sie ein Projekt starten, bis zu dem Tag, an dem Ihr Code veröffentlicht wird, als zentrale Informationsquelle. Wenn Ihr Team Projektverfolgungssoftware (wie Jira und Confluence) oder Tools zum Wissensaustausch verwendet, sollten Sie erwägen, das Lucidchart Diagramm in diese Tools einzubetten, damit es in der Nähe von Tickets und Dokumentation verfügbar ist. Bei einer Zwei Wege Synchronisierung werden Ihre Diagramme jedes Mal, wenn Sie sie in Lucidchart aktualisieren, automatisch auch dort aktualisiert, wo sie eingebettet sind, sodass die Teams immer mit den aktuellsten Informationen arbeiten. 

Beispiele für Nutzerflussdiagramme

Lassen Sie sich von diesen Beispielen für Nutzerflussdiagramme inspirieren. Diese Beispiele umfassen Wireflows, die Wireframe Formen mit Standard Flussdiagramm Formen kombinieren, sodass Sie veranschaulichen können, wie Ihre Website oder Anwendung aussehen soll und wie Nutzende durch sie hindurchnavigieren sollen.

Mit Ihrem Nutzerflussdiagramm haben Sie eine konkretere User-Journey, die als Grundlage für zukünftige Geschäftspraktiken dienen kann. Sie werden Ihre Kunden besser verstehen und ihnen eine erfolgreiche Journey bieten können – nicht nur über Ihre Website oder Anwendung, sondern während des gesamten Lebenszyklus der Nutzung Ihres Produkts und Unternehmens.