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 Mapping-Prozess, der aufzeigt, was ein Nutzer tut, um eine Aufgabe zu erledigen oder ein Ziel durch dein Produkt oder Erlebnis zu erreichen.
Das Erstellen von Diagrammen des Nutzerflusses kann helfen, die Qualität oder das Erlebnis des Pfades zu interpretieren, den ein Nutzer wählt. Der Flow kann auch aufzeigen, wie viele Schritte sie wählen, um eine Aufgabe abzuschließen, und welche Wege sie einschlagen, wenn sie mit deinem Produkt oder deiner Dienstleistung interagieren, um ein Problem zu lösen.
Während sich Nutzerflussdiagramme darauf konzentrieren, wie sich ein Nutzer durch ein bestimmtes Produkt bewegt, stellt eine Screen Flow Vorlage eine Wireframe-ähnliche Seitenanordnung in Form eines Flussdiagramms dar.
Was ist ein Nutzerflussdiagramm?
Nutzerflussdiagramme helfen UX- und Produktteams, den logischen Pfad zu skizzieren, den ein Nutzer beim Interagieren mit einem System nehmen sollte. Als visuelles Werkzeug zeigt das Nutzerflussdiagramm 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 Nutzerflusses sind:
Ein Start- oder Endpunkt: Dadurch wird deutlich, wo der Ablauf beginnt oder endet
Prozess oder Aktion: zeigt, welche Schritte der Nutzer unternimmt, wie „Anmelden“ oder „Kaufen“
Entscheidungspunkte: zeigt, wann ein Nutzer eine Entscheidung treffen muss
Pfeile: Sie zeigen, wohin der Nutzer auf Grundlage getroffener Entscheidungen steuert
Probiere einen Nutzer-Flow aus, wenn dein Team versucht herauszufinden, wie das bestehende Benutzererlebnis zu besseren Kundenumwandlungsraten führen kann oder wie es verbessert werden kann.
Der Prozess kann dir helfen, deinen Nutzer im Auge zu behalten und das Geschäftsobjektiv zu bestimmen, wie z. B. einen Kauf, die Registrierung für einen Newsletter oder die Wahl einer kostenlosen Testversion.
Wann man eine Nutzerfluss-Vorlage verwenden sollte
Nutzerflussdiagramme können dir helfen:
Intuitive Schnittstellen gestalten: Lässt sich dein Ablauf leicht durchlaufen, ist er effizient zu verwenden und für den Nutzer intuitiv?
Entscheide, ob deine bestehende Benutzeroberfläche zweckmäßig ist: Was funktioniert, was nicht oder was verbesserungswürdig ist? Wirkt der Ablauf nahtlos und logisch?
Präsentiere deinen Produktablauf internen Teams oder Kunden: Kann dein Designteam sehen, was dein Kunde während des Kaufprozesses, der Registrierung oder des Logins sagt oder tut? Können Kunden eine Schritt-für-Schritt-Übersicht erhalten, um sich mit deiner Vision abzustimmen?
Beim Erstellen oder Neuerstellen eines Nutzerflows, frage dich und dein Team:
Was versucht der Nutzer zu tun?
Was ist für den Nutzer wichtig und gibt ihm das Vertrauen, weiterzumachen?
Welche zusätzlichen Informationen benötigt der Nutzer, um erfolgreich zu sein?
Was sind die Hemmnisse oder Hürden des Nutzers bei der Erledigung der Aufgabe?
Eine Nutzerflusskarte kann Designern (und ihren Teams oder Kunden) helfen, auch bei der Abbildung komplexer Prozesse benutzerzentriert zu bleiben.
Als Designer kannst du Nutzerflussdiagramme verwenden, um zu entscheiden, wie du Seiten, Bildschirme oder Oberflächen auf deiner Website oder App gestalten wirst und um zu ordnen, welche Inhalte und Navigationselemente eingefügt werden sollen.
Erstelle dein eigenes Nutzerflussdiagramm
Das Erstellen eines eigenen Nutzerflusses ist einfach. Miros visueller Arbeitsbereich ist die perfekte Leinwand, um dein Diagramm zu erstellen und zu teilen. Beginne mit der Auswahl der Nutzerfluss-Vorlage und befolge dann die folgenden Schritte, um eine eigene zu erstellen:
Bestimme deine Geschäftziele und die Ziele deiner Nutzer.
Finde heraus, wo deine Nutzer letztendlich landen sollen. Wenn du noch keine hast (oder sie aktualisieren musst), verwende eine Customer Journey Map, um eine gemeinsame Vision deiner Kundenerfahrung zu schaffen. Jedes Teammitglied kann von einem gemeinsamen Verständnis der Gefühle Ihrer Kunden an jedem potenziellen Berührungspunkt mit Ihrem Produkt oder Ihrer Dienstleistung profitieren. Der Aufbau von Nutzerempathie wird jeden Schritt deines User-Flow-Prozesses informieren.
Entdecke, wie Besucher deine Website finden.
Finden sie Ihr Produkt oder Ihre Dienstleistung über direkten Traffic, organische Suche, kostenpflichtige Werbung, soziale Medien, Empfehlungslinks oder E-Mails? Diese Punkte werden der Beginn deines Nutzerflussdiagramms sein, abhängig davon, was du herausfindest.
Finde heraus, welche Informationen deine Nutzer benötigen und wann sie diese benötigen.
Nutzer konvertieren, wenn sie zur richtigen Zeit die richtigen Informationen erhalten. Überlege also, was deine Kunden von deinem digitalen Touchpoint erwarten und wie sie sich möglicherweise fühlen. Einbindung – zum Beispiel eine Chatbot-Interaktion – ist immer noch eine potenzielle Erfolgskennzahl – es geht nicht immer darum, zu einem endgültigen Kauf zu führen.
Plane deinen Nutzerfluss.
Du kannst die bestehenden Formen und Pfeile in unserer Nutzerfluss-Vorlage bearbeiten, um die bei deiner Nutzerforschung in den vorherigen Schritten gewonnenen Erkenntnisse zu berücksichtigen. Nachdem dein Kunde deinen ersten Berührungspunkt entdeckt hat, was macht er dann? Wie viele Schritte sind nötig, um eine Aufgabe abzuschließen? Verwende den grundlegenden Nutzerablauf auf der Vorlage, um mit dem Zeichnen deiner eigenen zu beginnen. Ändere Berührungspunkte und Absprünge sowie die Richtung der Pfeile der Verbindungslinien, damit sie besser zu deinem Nutzerflussdiagramm passen.
Feedback von deinem Team einholen.
Lade dein Team, Kunden oder funktionsübergreifende Stakeholder ein, dein Miro-Board anzusehen. Du kannst wählen, ob du Feedback asynchron mit Notizen oder @Erwähnungen für eine Peer-Review hinterlässt. Du kannst in deinem Miro-Board auch eine Videokonferenz starten und jemandem in deinem Team die Rolle des Protokollführers zuweisen. Sobald du genug Input von deinem Team hast, nimm entsprechende Anpassungen vor.
Teile es mit anderen Stakeholdern oder Kunden und iteriere so oft wie nötig.
Dein Nutzerfluss wird sich mit der Zeit ändern, da sich die Einstellungen und Motivationen deiner Kunden weiterentwickeln. Entsprechend anpassen, nutzerzentriert bleiben.
Was ist ein Beispiel für einen Benutzerfluss?
Stelle dir vor, du entwickelst eine Website für eine Veranstaltung. Wenn du die Benutzerfreundlichkeit verbessern willst, musst du alle notwendigen Schritte für die Registrierung und den Kauf von Tickets für die Veranstaltung aufzeichnen. Sie können damit beginnen, den Kundenfluss zu verfolgen und herauszufinden, wo er seine Reise zum Kauf der Tickets für Ihre Veranstaltung beginnt. Das Benutzerflussdiagramm hilft Ihnen, auf einen Blick zu sehen, wie der Kunde seinen Kauf abschließt (das ultimative Ziel Ihrer Website), von der Registrierung bis zur Zahlungsseite.
Beginne jetzt mit diesem Template
Wireframes mit geringer Genauigkeit Vorlage
Ideal für:
Schreibtischforschung, Produktmanagement, Wireframes
Wenn du eine Website entwirfst oder eine App baust, sollten die frühen Phasen GROSS sein – das Gesamtbild sehen und die große Idee kommunizieren. Wireframes mit geringer Genauigkeit geben dir die Möglichkeit, es zu sehen und zu machen. Diese grobe Layouts (stell sie dir wie die digitale Version einer Skizze auf einer Serviette vor) helfen deinem Team und den Projektbeteiligten schnell festzustellen, ob ein Design-Meeting den Bedürfnissen deiner Nutzer entspricht. Unsere Vorlage ermöglicht es dir, Wireframes während Meetings oder Workshops, Präsentationen und Kritiksitzungen mühelos zu nutzen.
Das Webseiten-Flussdiagramm-Template
Ideal für:
Flowcharts, Mapping, User Experience
Ein Flussdiagramm für eine Website, auch Sitemap genannt, zeigt die Struktur und Komplexität einer aktuellen oder zukünftigen Website auf. Das Flussdiagramm kann deinem Team auch helfen, Wissenslücken für zukünftige Inhalte zu identifizieren. Wenn du eine Website erstellst, musst du sicherstellen, dass jeder Inhalt den Nutzern genaue Suchergebnisse auf der Grundlage von Schlüsselwörtern liefert, die mit deinem Webinhalt verbunden sind. Produkt-, UX- und Content-Teams können Flussdiagramme oder Sitemaps verwenden, um alle Inhalte einer Website zu verstehen und zu planen, wie Inhalte hinzugefügt oder umstrukturiert werden können, um die Benutzerfreundlichkeit einer Website zu verbessern.
Prototyp-Vorlage
Ideal für:
UX-Design, Design Thinking
Ein Prototyp ist ein Live-Mock-up deines Produkts, das die Struktur, den Nutzerfluss und die Navigationsdetails (wie Schaltflächen und Menüs) definiert, ohne sich auf endgültige Details wie das visuelle Design festzulegen. Prototypen ermöglichen es dir, zu simulieren, wie ein Nutzer dein Produkt oder deine Dienstleistung erfahren könnte, Nutzerkontexte und Aufgabenabläufe zu skizzieren, Szenarien zu erstellen, um Personas besser zu verstehen, und Feedback zu deinem Produkt zu sammeln. Ein Prototyp hilft dir, Geld zu sparen, indem er Blockaden frühzeitig im Prozess aufdeckt. Prototypen können variieren, enthalten jedoch in der Regel eine Reihe von Bildschirmen oder Zeichenflächen, die durch Pfeile oder Links verbunden sind.
App Wireframe-Vorlage
Ideal für:
UX-Design, Wireframes
Bereit, mit dem Aufbau einer App zu beginnen? Stell dir nicht nur vor, wie es funktionieren wird und wie die Nutzer damit interagieren werden – lass dir von einem Wireframe zeigen, wie es aussieht. Wireframing ist eine Technik zur Erstellung eines grundlegenden Layouts für jeden Bildschirm. Wenn du wireframest, idealerweise früh im Prozess, wirst du ein Verständnis dafür gewinnen, was jeder Bildschirm erreichen soll, und die Zustimmung wichtiger Stakeholder erhalten – alles, bevor du Design und Inhalt hinzufügst, was dir Zeit und Geld spart. Indem du Dinge im Hinblick auf die Reise eines Nutzers betrachtest, lieferst du ein überzeugenderes und erfolgreicheres Erlebnis ab.