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
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.
Vorlage für Prototypen
Ideal für:
UX-Design, Design Thinking
Ein Prototyp ist ein Live-Mockup deines Produkts, das die Struktur, den Nutzerfluss und die Navigationsdetails des Produkts (wie Buttons und Menüs) definiert, ohne sich auf abschließende Details wie das visuelle Design festzulegen. Prototypen ermöglichen es dir, zu simulieren, wie ein Nutzer dein Produkt oder deine Dienstleistung erleben könnte, Nutzerkontexte und Aufgabenabläufe darzustellen, 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 Hindernisse im Prozess erkennst. Prototypen können variieren, aber sie enthalten im Allgemeinen eine Reihe von Bildschirmen oder Artboards, die durch Pfeile oder Links miteinander 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.