Vorlage für Bildschirm-Flows
Validierung visueller Bildschirmkomponenten in einem Nutzerflow.
Über die Screen Flow Vorlage
Screen Flows (auch als „Wireflows“ bekannt) sind eine Kombination aus Wireframes und der Erstellung eines Flussdiagramms. Der End-to-End-Flow kartiert, was Nutzer auf jedem Bildschirm sehen und wie dies ihren Entscheidungsprozess bei Ihrem Produkt oder Service beeinflusst. Mit diesen Informationen können Sie die Entscheidungen, die Sie in Bezug auf das Interaktionsdesign getroffen haben, besser erklären.
Verwenden Sie die Screen Flow Vorlage, um neue Möglichkeiten zu finden, die Benutzererfahrung von Anfang bis Ende reibungslos und frei von Frustrationen zu gestalten.
Wenn Sie daran interessiert sind, Ihre Arbeit weiterzuentwickeln und in den Bereich des UX-Designs einzusteigen, wo Sie die Nutzerreise als Flussdiagramm mit Texten und Symbolen anstatt mit Bildschirmen darstellen können, könnte die User Flow Vorlage interessant für Sie sein.
Lies weiter, um mehr über Screen Flows zu erfahren.
Was ist ein Screen Flow?
Ein Screen Flow (oder Wireflow) verbindet ein Multi-Screen-Layout, ähnlich wie ein Flussdiagramm, um die Entscheidungspunkte und Bewegungen eines Kunden von Anfang bis Ende zu visualisieren.
Wireframes alleine bieten keinen Kontext dafür, wie ein interaktiver, seitenweiser Nutzerfluss aussehen könnte. UX-Flows für sich sind abstrakter und zeigen nicht, was der Kunde tatsächlich sieht.
Wireflows oder Screen Flows kombinieren die Stärken beider Methoden und helfen dir dabei, zu verdeutlichen, wie das, was der Nutzer sieht, einen großen Einfluss darauf hat, wie er dein Produkt oder deine Dienstleistung erlebt.
Wann Screen Flows verwenden
Wireframes helfen UX- und Produktteams, eine Kundenreise als vollständigen Flow anstelle eines Satzes von Bildschirmen zu betrachten. Der Wireflow oder Screen Flow konzentriert sich auf die Bildschirme selbst und die Interaktion des Kunden mit deinem Service oder Produkt.
Ein Designer kann einen Screenflow skizzieren, wenn er …
Sicherstellen, dass keine Szenarien fehlen: Mit einer durchgängigen Reise können alle potenziellen Anwendungsbeispiele, die den Bedürfnissen des Kunden entsprechen, berücksichtigt werden.
Nutzerinteraktionen verbessern: Lerne deine Kunden durch jede Gelegenheit im Flow kennen, z. B. Registrierungen, Bestätigungen oder Pop-ups.
Bessere abteilungsübergreifende Kommunikation schaffen: Führen Sie Designer und Entwickler zusammen und ermutigen Sie sie, die gesamte Erfahrung und nicht nur einzelne Bildschirme zu betrachten.
In die Schulung von Stakeholdern einbeziehen: Falls Kunden oder Teams nie bedacht haben, was der Nutzer sieht, wenn er sich durch Ihr Produkt oder Ihre Erfahrungen bewegt, hilft das Folgen eines Flows, Empathie für die Problempunkte des Kunden zu entwickeln.
Erstelle deinen eigenen Screenflow
Es ist einfach, deinen Screen Flow zu erstellen. Miro’s virtuelle Kollaborationsplattform bietet die perfekte Canvas, um sie zu erstellen und zu teilen. Starte, indem du die Screen Flow Vorlage auswählst und folge dann diesen Schritten, um deine eigene zu erstellen.
1. Definiere deine User Story
Bevor du eine visuelle Sequenz abbildest, beschreibe die Bedürfnisse und Problempunkte deiner Nutzer, die gelöst werden sollen. Dies ist deine Grundlage, um einen Startpunkt für deinen Screen Flow festzulegen.
2. Entscheide, was deine Hauptbildschirme anzeigen sollen
Überlege dir die Start- und Endpunkte in der Reise. Benötigst du eine Landing Page? Registrierung? Bestätigungsseite? Identifiziere Änderungen oder zusätzliche Schritte im Prozess, wie z.B. Seiten, die aufgeteilt werden müssen, oder Bildschirme, die hinzugefügt werden sollen. Miro ist der perfekte Wireframe-Maker mit einer Wireframes-Bibliothek, die über 15 UI-Komponenten enthält, die du leicht zu deinem Screen Flow hinzufügen kannst.
3. Verbinde die Bildschirme
Füge Pfeile zwischen jedem Bildschirm hinzu und bewege sie, um den Nutzer durch die Aufgabe voranzubringen, indem du das Verbindungslinien-Tool von Miro verwendest. Du kannst auch Entscheidungspunkte einfügen und zeigen, was in jeder verfügbaren Instanz mit dem Nutzer passiert.
4. Teile deinen Screen Flow mit deinem Team oder den Stakeholdern, um Feedback zu erhalten
Du kannst Miros Mention-Funktion nutzen, um dein Team oder einzelne Personen für schnelle Feedback-Runden, Designkritiken oder Überprüfungen vor den Live-Workshops mit Kunden zu taggen. Du kannst dein Miro-Board auch mit jedem teilen (selbst wenn sie noch nicht registriert sind!), indem du die Mitglieder einladen-Schaltfläche anklickst.
Entdecke weitere User-Flow-Beispiele, um dein nächstes großes Projekt zu entwickeln.
häufige Fragen zur Screen-Flow-Vorlage
Was ist ein Screen Flow im UX-Design?
Ein Screen Flow hilft dir dabei, die Interaktionen deiner Nutzer zu analysieren und konzentriert sich hauptsächlich auf deine Produkt-Bildschirme. Er vereint die Vorteile von Wireframing und Flussdiagrammen, wodurch du einen detaillierteren Überblick über den Kundenfluss erhältst und somit mehr Daten zur Verfügung hast, um ein besseres Benutzererlebnis zu schaffen.
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.