Nutzer-Workflow-Vorlage
Hilf UX- und Produktteams dabei, die Nutzererfahrung zu verbessern, indem du Bedingungen für kreative Lösungen förderst.
Über die Nutzer-Workflow-Vorlage
Ein Nutzer-Workflow-Diagramm (auch bekannt als Interaktions- oder Aufgabenflussdiagramm) ist ein Schritt-für-Schritt-visueller Mapping-Prozess, der aufzeigt, was ein Nutzer tut, um eine Aufgabe abzuschließen oder ein Ziel mit deinem Produkt oder deiner Erfahrung zu erreichen.
Das Diagramm des Nutzer-Workflows kann dabei helfen, die Qualität oder das Erlebnis des Wegs zu interpretieren, den ein Nutzer wählt. Der Workflow kann auch aufzeigen, wie viele Schritte sie zur Erledigung einer Aufgabe wählen und welche Wege sie bei der Interaktion mit deinem Produkt oder Service einschlagen, um ein Problem zu lösen.
Während Nutzer-Workflow-Diagramme darauf abzielen, wie ein Nutzer sich durch ein bestimmtes Produkt bewegt, präsentiert eine Screen-Flow-Vorlage ein Wireframe-ähnliches Seitenlayout in Form eines Flussdiagramms.
Was ist ein Nutzer-Workflow-Diagramm?
Nutzer-Workflow-Diagramme helfen UX- und Produktteams, den logischen Weg zu planen, den ein Nutzer einschlagen sollte, wenn er mit einem System interagiert. Als visuelles Tool zeigt das Nutzer-Workflow-Diagramm die Beziehung zwischen der Funktionalität einer Website oder App, den möglichen Aktionen, die ein Nutzer durchführen könnte, und dem Ergebnis, das aus den Entscheidungen des Nutzers resultiert.
Die Hauptelemente eines Nutzer-Workflows sind:
Ein Start- oder Endpunkt: Dies verdeutlicht, wo der Workflow beginnt oder endet.
Prozess oder Aktion: zeigt, welche Schritte der Nutzer unternimmt, wie „Login“ oder „Kauf“.
Entscheidungspunkte: zeigt, wann ein Nutzer eine Wahl treffen muss.
Pfeile: Sie zeigen, wohin der Nutzer basierend auf getroffenen Entscheidungen geht.
Probiere einen Nutzer-Workflow aus, wenn dein Team versucht zu beurteilen oder zu verbessern, wie die bestehende Nutzererfahrung zu besseren Kundenkonversionsraten führen kann.
Der Prozess kann dir helfen, den Nutzer im Blick zu behalten und das Geschäftsziel zu identifizieren, wie z. B. einen Kauf, eine Newsletter-Registrierung oder die Entscheidung für eine kostenlose Testversion.
Wann man eine Nutzer-Workflow-Vorlage verwenden sollte
Nutzer-Workflow-Diagramme können dir helfen:
Intuitive Schnittstellen gestalten: Fühlt sich dein Workflow leicht zu durchlaufen, effizient zu nutzen und für den Nutzer intuitiv an?
Entscheide, ob deine bestehende Schnittstelle zweckmäßig ist: Was funktioniert, was nicht und was benötigt Verbesserungen? Fühlt sich der Workflow nahtlos an und ergibt er Sinn?
Präsentiere deinen Produkt-Workflow internen Teams oder Kunden: Kann dein Designteam sehen, was dein Kunde während des Kaufs, der Registrierung oder des Logins sagt oder tut? Können Kunden eine Schritt-für-Schritt-Übersicht bekommen, um sich mit deiner Vision abzustimmen?
Wenn du einen Nutzer-Workflow 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?
Was sind die Bedenken oder Hindernisse des Nutzers, um die Aufgabe zu bewältigen?
Eine Nutzer-Workflow-Map kann Designern (und ihren Teams oder Kunden) helfen, nutzerzentriert zu bleiben, selbst bei der Abbildung komplexer Prozesse.
Als Designer kannst du Nutzer-Workflow-Diagramme verwenden, um zu entscheiden, wie du Seiten, Bildschirme oder Oberflächen auf deiner Website oder App gestalten und welche Inhalte und Navigationsaufgaben du einbinden und umordnen möchtest.
Erstelle dein eigenes Nutzer-Workflow-Diagramm
Das Abbilden deines eigenen Nutzer-Workflows ist einfach. Der visuelle Arbeitsbereich von Miro ist die perfekte Leinwand, um dein Diagramm zu erstellen und zu teilen. Beginne mit der Auswahl der Nutzer-Workflow-Vorlage und gehe dann folgendermaßen vor, um eine eigene zu erstellen:
Entscheide über deine Geschäftsziele und die Ziele deiner Nutzer.
Finde heraus, wo du möchtest, dass deine Nutzer enden. Falls du noch keine hast (oder sie aktualisieren musst), nutze eine Customer Journey Map, um eine gemeinsame Vision deiner Kundenerfahrung zu erstellen. Jedes Teammitglied kann von einem gemeinsamen Verständnis der Gefühle deiner Kunden an jedem potenziellen Berührungspunkt mit deinem Produkt oder Service profitieren. Das Entwickeln von Nutzerempathie wird jeden Schritt in deinem Nutzer-Workflow-Prozess beeinflussen.
Entdecke, wie Besucher deine Website finden.
Finden sie dein Produkt oder deinen Service über direkten Traffic, organische Suche, bezahlte Werbung, soziale Medien, Empfehlungslinks oder E-Mails? Diese Punkte werden je nachdem, was du herausfindest, der Ausgangspunkt deines Nutzer-Workflow-Diagramms sein.
Finde heraus, welche Informationen deine Nutzer benötigen und wann sie sie brauchen.
Nutzer konvertieren, wenn sie zur richtigen Zeit die richtigen Informationen erhalten. Überlege also, was dein Kunde von deinem digitalen Berührungspunkt 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 darum, zu einem endgültigen Kauf zu führen.
Abbilde deinen Nutzer-Workflow.
Du kannst die vorhandenen Formen und Pfeile aus unserer Nutzer-Workflow-Vorlage bearbeiten, um sie an die Nutzerforschung anzupassen, die du in den vorherigen Schritten entdeckt hast. Nachdem dein Kunde deinen ersten Berührungspunkt entdeckt hat, was machen sie dann? Wie viele Schritte sind nötig, bis sie eine Aufgabe abschließen? Verwende den grundlegenden Nutzer-Workflow auf der Vorlage, um deinen eigenen zu zeichnen. Ändere die Berührungspunkte, Abbruchstellen und Drehrichtungen der Verbindungslinienpfeile, um sie besser an dein Nutzer-Workflow-Diagramm anzupassen.
Hol dir Feedback von deinem Team.
Lade dein Team, deine Kunden oder funktionsübergreifende Stakeholder ein, dein Miro-Board anzusehen. Du kannst dich dafür entscheiden, Feedback asynchron mit Notizen oder @Erwähnungen für das Peer-Review zu hinterlassen. Du kannst auch einen Videoanruf in deinem Miro-Board starten und jemanden aus deinem Team mit der Rolle des Protokollführers beauftragen. Sobald du genügend Input von deinem Team hast, nimm entsprechende Anpassungen vor.
Teile es mit anderen Stakeholdern oder Kunden und wiederhole den Vorgang, wenn nötig.
Dein Nutzer-Workflow wird sich im Laufe der Zeit ändern, wenn sich die Einstellungen und Motivation deiner Kunden entwickeln. Passe dich entsprechend an und bleib nutzerzentriert.
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, Abbildung, Nutzererfahrung
Ein Website-Flussdiagramm, auch bekannt als Sitemap, bildet die Struktur und Komplexität jeder aktuellen oder zukünftigen Website ab. Das Flussdiagramm kann deinem Team auch dabei helfen, Wissenslücken für zukünftige Inhalte zu identifizieren. Wenn du eine Website erstellst, möchtest du sicherstellen, dass jedes Inhaltsstück den Nutzern basierend auf den mit deinen Webinhalten verbundenen Schlüsselwörtern genaue Forschungsergebnisse liefert. Produkt-, UX- und Content-Teams können Flussdiagramme oder Sitemaps verwenden, um alles, was auf einer Website enthalten ist, zu verstehen und Content hinzuzufügen oder neu zu strukturieren, um die Nutzererfahrung 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.