Workflow-Vorlage
Visuelle Bildschirmkomponenten in einem Nutzer-Workflow validieren.
Über die Workflow-Vorlage
Screen-Workflows (auch bekannt als „Wireflows“) sind eine Kombination aus Wireframes und dem Erstellen eines Flussdiagramms. Der End-to-End-Workflow kartiert, was Nutzer auf jedem Bildschirm sehen und wie dies ihren Entscheidungsprozess durch dein Produkt oder deine Dienstleistung beeinflusst. Mit diesen Informationen kannst du deine Entscheidungen hinsichtlich deines Interaktionsdesigns besser erklären.
Verwende die Workflow-Vorlage, um neue Möglichkeiten zu finden, das Nutzererlebnis reibungslos und frei von Frustration von Anfang bis Ende zu gestalten.
Wenn du daran interessiert bist, deine Arbeit weiterzuentwickeln und in den Bereich des UX-Designs einzutauchen, wo du die User Journey als Flussdiagramm mit Texten und Symbolen statt mit Bildschirmen darstellen kannst, könnte die User Flow Vorlage für dich interessant sein.
Lies weiter, um mehr über Screen-Workflows zu erfahren.
Was ist ein Screen-Workflow?
Ein Screen-Workflow (oder Wireflow) verbindet ein Layout mit mehreren Bildschirmen, das wie ein Flussdiagramm aufgebaut ist, um die Entscheidungspunkte und Bewegungen eines Kunden von Anfang bis Ende abzubilden.
Wireframes allein bieten keinen Kontext dafür, wie ein interaktiver, seitenweiser Nutzer-Workflow aussehen könnte. UX-Workflows sind für sich genommen eher abstrakt und können nicht zeigen, was dein Kunde tatsächlich sieht.
Wireflows oder Screen-Workflows kombinieren die Stärken beider Methoden und helfen dir, zu argumentieren, dass das, was der Nutzer sieht, einen großen Einfluss darauf hat, wie er dein Produkt oder deine Dienstleistung erlebt.
Wann man Screen-Workflows verwendet
Mit Wireframes können UX- und Produktteams das Kundenreise als vollständigen Workflow statt als eine Reihe von Bildschirmen betrachten. Der Wireflow oder Screenflow konzentriert sich auf die Bildschirme selbst und die Interaktion des Kunden mit deinem Service oder Produkt.
Ein Designer kann einen Screenflow abbilden, wenn er ...
Stelle sicher, dass keine Szenarien fehlen: Mit einer durchgängig abgebildeten Journey kannst du alle potenziellen Anwendungsfälle berücksichtigen, die den Bedürfnissen des Kunden entsprechen.
Verbessere die Nutzerinteraktionen: Lerne deine Kunden durch jede Gelegenheit im Workflow kennen, wie z.B. Registrierungen, Bestätigungen oder Popups.
Fördere bessere funktionsübergreifende Kommunikation: Bring Designer und Entwickler zusammen und ermutige sie, über das gesamte Erlebnis nachzudenken statt über einzelne Bildschirme.
Betreibe Stakeholder-Schulung: Wenn Kunden oder Teams noch nie bedacht haben, was der Kunde sieht, wenn er durch dein Produkt oder dein Erlebnis navigiert, hilft das Verfolgen eines Workflows, Empathie für die Problempunkte des Kunden aufzubauen.
Erstelle deinen eigenen Screenflow
Deinen Screenflow zu erstellen ist einfach. Miros virtuelle Kollaborationsplattform bietet die perfekte Canvas, um sie zu erstellen und zu teilen. Fang an, indem du die Screenflow-Vorlage auswählst, und befolge dann die folgenden Schritte, um deinen eigenen zu erstellen.
1. Definiere deine User Story
Bevor du damit beginnst, eine visuelle Sequenz abzubilden, beschreibe die Bedürfnisse deiner Nutzer und die zu lösenden Problempunkte. Dies ist dein Fundament, um einen Ausgangspunkt für deinen Screenflow festzulegen.
2. Entscheide, was deine Hauptbildschirme anzeigen werden
Denke über deine Start- und Endpunkte in der Reise nach. Benötigst du eine Landingpage? Registrierungsformularbildschirm? Bestätigungsseite? Erkenne Änderungen oder zusätzliche Schritte im Prozess, wie das Aufteilen von Seiten oder das Hinzufügen von Bildschirmen. Miro ist der perfekte Wireframe-Ersteller mit einer Wireframes-Bibliothek, die über 15 UI-Komponenten enthält, die du einfach zu deinem Workflow hinzufügen kannst.
3. Verbinde die Bildschirme
Füge Pfeile hinzu und verschiebe sie zwischen den einzelnen Bildschirmen, um den Nutzer mithilfe von Miros Verbindungslinien-Tool durch die Aufgabe voranzubringen. Du kannst auch Entscheidungspunkte einfügen und dem Nutzer zeigen, was in jedem verfügbaren Fall passiert.
4. Teile deinen Screen-Workflow mit deinem Team oder Stakeholdern für Feedback
Du kannst die @Erwähnen-Funktion von Miro verwenden, um dein Team oder einzelne Personen für schnelle Feedbackrunden, Designkritiken oder Reviews vor Live-Workshops mit Kunden zu taggen. Du kannst dein Miro-Board auch mit jedem teilen (selbst wenn sie noch nicht registriert sind!), indem du auf die Mitglieder einladen-Schaltfläche klickst.
Entdecke weitere Beispiele für Nutzer-Workflows, die dir helfen, dein nächstes großes Ding zu entwickeln.
Was ist Screen Flow in der UX?
Ein Screen Flow hilft dir dabei, die Interaktionen deiner Nutzer zu analysieren, wobei der Fokus hauptsächlich auf deinen Produktbildschirmen liegt. Es kombiniert das Beste aus Wireframing und Flussdiagrammen und gibt dir einen detaillierteren Überblick über deinen Kundenfluss und damit mehr Daten, um eine bessere User Experience zu erstellen.
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.
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.
Online-Skizzieren-Vorlage
Ideal für:
UX-Design, Desk Research, Design Thinking
Bevor du mit einer vielversprechenden Idee aufs Ganze gehst, betrachte sie aus einer höheren Perspektive – um zu wissen, wie sie funktioniert und wie gut sie deine Ziele erfüllt. Genau das machen Skizzen. Diese Vorlage bietet dir ein leistungsstarkes Tool für die Zusammenarbeit aus der Ferne in den Anfangsphasen des Prototypings, egal ob du Webseiten und mobile Apps skizzierst, Logos entwirfst oder Veranstaltungen planst. Dann kannst du deine Skizze ganz einfach mit deinem Team teilen und jede Phase deiner Skizze speichern, bevor du sie änderst und weiterentwickelst.
Website Wireframe-Vorlage
Ideal für:
Wireframes, Nutzererfahrung
Wireframing ist eine Methode, um eine Website auf struktureller Ebene zu gestalten. Ein Wireframe ist ein stilisiertes Layout einer Webseite, das die Interface-Elemente auf jeder Seite darstellt. Verwende diese Wireframe-Vorlage, um Webseiten schnell und kostengünstig weiterzuentwickeln. Du kannst den Wireframe mit Kunden oder Teamkollegen teilen und mit Stakeholdern zusammenarbeiten. Wireframes ermöglichen es Teams, das Buy-in von Stakeholdern zu gewinnen, ohne zu viel Zeit oder Ressourcen zu investieren. Sie tragen dazu bei, dass die Struktur und der Ablauf deiner Website die Bedürfnisse und Erwartungen der Nutzer erfüllen.