Nutzerfluss-Vorlage
Hilf UX- und Produktteams dabei, die Nutzererfahrung zu verbessern, indem du Bedingungen für kreative Lösungen förderst.
Über die Nutzerfluss-Vorlage
Ein Nutzerflussdiagramm (auch bekannt als Interaktions- oder Aufgabenflussdiagramm) ist ein schrittweiser visueller Abbildungsprozess, der illustriert, was ein Nutzer tut, um eine Aufgabe abzuschließen oder ein Ziel durch dein Produkt oder Erlebnis zu erreichen.
Das Diagrammieren des Nutzerflusses kann helfen, die Qualität oder das Erlebnis des gewählten Weges eines Nutzers zu interpretieren. Der Fluss kann auch aufzeigen, wie viele Schritte sie gewählt haben, um eine Aufgabe zu beenden und welche Wege sie entscheiden einzuschlagen, wenn sie mit deinem Produkt oder Service interagieren, um ein Problem zu lösen.
Während sich Nutzerflussdiagramme darauf konzentrieren, wie sich ein Nutzer durch ein bestimmtes Produkt bewegt, präsentiert eine Screen-Flow-Vorlage ein Wireframe-artiges Seitenlayout in Form eines Flussdiagramms.
Was ist ein User-Flow-Diagramm?
User-Flow-Diagramme helfen UX- und Produktteams, den logischen Pfad zu kartieren, den ein Nutzer bei der Interaktion mit einem System nehmen sollte. Als visuelles Werkzeug zeigt das User-Flow-Diagramm die Beziehung zwischen der Funktionalität einer Website oder App, den potenziellen Aktionen, die ein Nutzer ausführen könnte, und dem Ergebnis dessen, was der Nutzer entscheidet zu tun.
Die Hauptelemente eines User-Flows sind:
Ein Start- oder Endpunkt: Dies macht klar, wo der Flow beginnt oder endet
Prozess oder Aktion: Zeigt, welche Schritte der Nutzer unternimmt, wie „Anmeldung“ oder „Kauf“
Entscheidungspunkte: Zeigt, wann ein Nutzer eine Wahl treffen muss
Pfeile: Sie zeigen, wohin der Nutzer aufgrund getroffener Entscheidungen geht
Probiert ein User-Flow-Diagramm aus, wenn euer Team versucht einzuschätzen oder zu verbessern, wie die bestehende Nutzererfahrung zu besseren Konversionsraten führen kann.
Der Prozess kann dir helfen, den Nutzer im Blick zu behalten und das Geschäftsziele wie einen Kauf, die Registrierung für einen Newsletter oder die Entscheidung für eine kostenlose Testversion zu identifizieren.
Wann man eine User-Flow-Vorlage verwendet
User-Flow-Diagramme können dir helfen:
Intuitive Oberflächen gestalten: Ist dein Flow einfach zu durchlaufen, effizient zu nutzen und intuitiv für den Nutzer?
Entscheiden, ob deine bestehende Oberfläche zweckmäßig ist: Was funktioniert, was nicht und was muss verbessert werden? Fühlt sich der Flow nahtlos an und macht Sinn?
Den Produktablauf internen Teams oder Kunden präsentieren: Kann dein Design-Team sehen, was dein Kunde während des Kauf-, Registrierungs- oder Anmeldevorgangs sagt oder tut? Können Kunden einen Schritt-für-Schritt-Überblick erhalten, um sich mit deiner Vision abzustimmen?
Wenn du einen User-Flow erstellst oder neu gestaltest, frage dich und dein Team:
Was versucht der Nutzer zu tun?
Was ist dem Nutzer wichtig und gibt ihm das Vertrauen, weiterzumachen?
Welche zusätzlichen Informationen braucht der Nutzer, um erfolgreich zu sein?
Welche Vorbehalte oder Hindernisse hat der Nutzer, um die Aufgabe zu erledigen?
Eine User-Flow-Map kann Designern (und ihren Teams oder Kunden) helfen, benutzerorientiert zu bleiben, selbst bei der Abbildung komplexer Prozesse.
Als Designer kannst du User-Flow-Diagramme verwenden, um zu entscheiden, wie du Seiten, Bildschirme oder Oberflächen auf deiner Website oder App gestaltest und wie du die Inhalte und Navigationsaufgaben organisierst.
Erstelle dein eigenes User-Flow-Diagramm
Die Abbildung des eigenen User-Flows ist einfach. Miro’s visueller Arbeitsbereich ist die perfekte Leinwand, um dein Diagramm zu erstellen und zu teilen. Wähle zuerst die User-Flow-Vorlage aus und gehe dann die folgenden Schritte, um ein eigenes zu erstellen:
Entscheide dich für deine Geschäftsziele und die Ziele deiner Nutzer.
Überlege, wo du deine Nutzer hinführen möchtest. Wenn du noch keine hast (oder sie aktualisieren musst), nutze eine Customer Journey Map, um eine gemeinsame Vision deines Kundenerlebnisses zu erstellen. Jedes Teammitglied kann von einem gemeinsamen Verständnis der Gefühle deiner Kunden an jedem potenziellen Touchpoint mit deinem Produkt oder Service profitieren. Das Aufbauen von Nutzer-Empathie wird jeden Schritt deines User-Flow-Prozesses beeinflussen.
Erfahre, wie Besucher deine Website finden.
Finden sie dein Produkt oder Service über direkten Traffic, organische Suche, bezahlte Werbung, soziale Medien, Empfehlungslinks oder E-Mails? Diese Punkte werden der Start deines User-Flow-Diagramms sein, je nach dem, was du herausfindest.
Finde heraus, welche Informationen deine Nutzer benötigen und wann sie diese brauchen.
Nutzer konvertieren, wenn ihnen zur richtigen Zeit die richtigen Informationen bereitgestellt werden. Überlege also, was dein Kunde von deinem digitalen Touchpoint erwartet und wie er sich fühlen könnte. Engagement – zum Beispiel eine Chatbot-Interaktion – ist immer noch eine potenzielle Erfolgskennzahl; es geht nicht nur um den finalen Kauf.
Deine User Flow skizzieren.
Du kannst die vorhandenen Formen und Pfeile unserer User Flow Vorlage bearbeiten, um die Benutzerforschung zu berücksichtigen, die du in den vorherigen Schritten ermittelt hast. Nachdem dein Kunde deinen ersten Touchpoint entdeckt hat, was macht er als Nächstes? Wie viele Schritte dauert es, bis eine Aufgabe abgeschlossen ist? Verwende den Basis-User-Flow auf der Vorlage, um deinen eigenen zu zeichnen. Passe Touchpoints und Abbrüche und die Pfeilrichtungen der Verbindungslinien an, um dein User Flow Diagramm besser zu gestalten.
Feedback von deinem Team einholen.
Lade dein Team, deine Kunden oder abteilungsübergreifende Beteiligte ein, dein Miro-Board anzusehen. Du kannst Feedback asynchron mit Notizen oder @-Erwähnungen zur Peer-Review hinterlassen. Du kannst auch eine Videokonferenz in deinem Miro-Board starten und jemanden aus deinem Team damit beauftragen, die Rolle eines Protokollführers zu übernehmen. Sobald du genügend Rückmeldung vom Team hast, nimm entsprechend Anpassungen vor.
Teile es mit anderen Beteiligten oder Kunden und wiederhole den Prozess bei Bedarf.
Dein Nutzerfluss wird sich im Laufe der Zeit ändern, während sich die Einstellungen und Motivationen deiner Kunden weiterentwickeln. Passe dich entsprechend an und bleib nutzerzentriert.
Häufige Fragen zur User Flow Vorlage
Was ist ein Beispiel für einen User Flow?
Stell dir vor, du entwickelst eine Website für ein Event. Wenn du das Nutzererlebnis verbessern möchtest, musst du alle notwendigen Schritte zur Registrierung für das Event und zum Kauf der Tickets abbilden.
Du kannst damit beginnen, den Nutzerfluss zu verfolgen und herauszufinden, wo sie ihre Reise beginnen, um Tickets für dein Event zu kaufen. Das Nutzerflussdiagramm hilft dir dabei, auf einen Blick zu visualisieren, wie der Nutzer seinen Kauf abschließt (das ultimative Ziel deiner Website), von der Registrierung bis zur Zahlungsseite.
Was ist ein Beispiel für einen User Flow?
Stell dir vor, du machst eine Website für eine Veranstaltung. Wenn du die Nutzererfahrung verbessern willst, musst du alle notwendigen Schritte bis zur Anmeldung für die Veranstaltung und den Kauf der Tickets genau planen. Du kannst damit anfangen, deinen Kundenfluss zu verfolgen und zu sehen, wo die Leute ihre Reise zum Kauf deiner Event-Tickets starten. Mit dem User Flow Diagramm kannst du auf einen Blick sehen, wie der Kunde seinen Kauf abschließt (das ist das Ziel deiner Website), von der Registrierung bis zur Zahlungsseite.
Beginne jetzt mit diesem Template
Low-Fidelity-Wireframe-Vorlage
Ideal für:
Sekundärforschung, Produktmanagement, Wireframes
Wenn du eine Website entwirfst oder eine App entwickelst, sollten die frühen Phasen GROSS sein – das große Ganze sehen und die große Idee kommunizieren. Low-Fidelity-Wireframes befähigen dich, es zu sehen und zu tun. Diese groben Layouts (sieh sie als digitale Version einer Skizze auf einer Serviette) helfen deinem Team und den Projekt-Stakeholdern schnell festzustellen, ob ein Design-Meeting die Bedürfnisse deiner Nutzer erfüllt. Unsere Vorlage ermöglicht es dir, Wireframes ganz einfach während Meetings oder Workshops, Präsentationen und Kritik-Sitzungen zu verwenden.
Webseiten-Flussdiagramm-Vorlage
Ideal für:
Flussdiagramme, Mapping, User Experience
Ein Website-Flussdiagramm, auch als Sitemap bekannt, kartiert die Struktur und Komplexität einer bestehenden oder zukünftigen Website. Das Flussdiagramm kann Ihrem Team auch dabei helfen, Wissenslücken für zukünftige Inhalte zu identifizieren. Beim Erstellen einer Website möchten Sie sicherstellen, dass jeder Inhalt den Nutzern genaue Rechercheergebnisse basierend auf den mit Ihren Webinhalten verknüpften Schlüsselwörtern liefert. Produkt-, UX- und Content-Teams können Flussdiagramme oder Sitemaps nutzen, um den gesamten Inhalt einer Website zu verstehen und zu planen, Inhalte hinzuzufügen oder umzugestalten, um die Benutzererfahrung der Website zu verbessern.
Vorlage für Prototypen
Ideal für:
UX-Design, Design Thinking
Ein Prototyp ist ein Live-Mockup deines Produkts, das die Struktur des Produkts, den Nutzerfluss und Navigationsdetails (wie Schaltflächen und Menüs) definiert, ohne sich auf endgültige Details wie das visuelle Design festzulegen. Prototypen ermöglicht es dir, zu simulieren, wie ein Nutzer dein Produkt oder deine Dienstleistung erleben könnte, Nutzerkontexte und Aufgabenabläufe zu skizzieren, Szenarien zu erstellen, um Personas zu verstehen, und Feedback zu deinem Produkt zu sammeln. Die Verwendung eines Prototyps hilft dir, Geld zu sparen, indem du frühzeitig im Prozess Hindernisse identifizierst. Prototypen können variieren, enthalten aber in der Regel eine Reihe von Bildschirmen oder Artboards, die durch Pfeile oder Links verbunden sind.
App Wireframe-Vorlage
Ideal für:
UX-Design, Wireframes
Bereit, eine App zu entwickeln? Stell dir nicht nur vor, wie es funktionieren wird und wie die Nutzer damit interagieren werden – lass dir von einem Wireframe zeigen, wie es geht. Wireframing ist eine Technik zur Erstellung eines einfachen Layouts für jeden Bildschirm. Wenn du in der frühen Phase Wireframes erstellst, erhältst du ein Verständnis dafür, was jeder Bildschirm erreichen soll, und du gewinnst das Einverständnis von wichtigen Stakeholdern – und das alles, bevor du Design und Inhalt hinzufügst, was dir Zeit und Geld sparen wird. Und indem du die Dinge im Hinblick auf die Reise eines Nutzers betrachtest, wirst du ein überzeugenderes und erfolgreicheres Erlebnis bieten.