Über die Screenflow-Vorlage
Screenflows (auch bekannt als „Wireflows“) sind eine Kombination aus Wireframes und Flussdiagrammen. Der End-to-End-Flow kartiert, was Nutzer auf jedem Bildschirm sehen und wie dies ihren Entscheidungsprozess durch Ihr Produkt oder Ihre Dienstleistung beeinflusst. Mit diesen Informationen können Sie Ihre Entscheidungen im Hinblick auf Ihr Interaktionsdesign besser erklären.
Verwende die Screen Flow Vorlage, um neue Möglichkeiten zu finden, die Benutzererfahrung von Anfang bis Ende reibungslos und frustfrei zu gestalten.
Wenn du interessiert daran bist, deine Arbeit weiterzuentwickeln und in den Bereich des UX-Designs einzutauchen, in dem du die Nutzerreise als Flussdiagramm mit Texten und Symbolen statt mit Bildschirmen darstellst, könnte für dich die User Flow Vorlage von Interesse sein.
Lies weiter, um mehr über Screen Flows zu erfahren.
Was ist ein Screen Flow?
Ein Screen Flow (oder Wireflow) vereint ein Multibildschirm-Layout, das wie ein Flussdiagramm verbunden ist, um die Entscheidungspunkte und Bewegungen eines Kunden von Anfang bis Ende abzubilden.
Wireframes allein bieten keinen Kontext dafür, wie ein interaktiver, seitenweiser Nutzerflow aussehen könnte. UX-Flows an sich sind abstrakter und können nicht zeigen, was der Kunde tatsächlich sieht.
Wireflows oder Screen Flows kombinieren die Stärken beider Methoden und helfen dir dabei, zu veranschaulichen, wie das, was der Nutzer sieht, einen großen Einfluss darauf hat, wie er dein Produkt oder deine Dienstleistung erfährt.
Wann man Screen Flows verwendet
Wireframes helfen UX- und Produktteams, eine Kundenreise als vollständigen Workflow anstatt als eine Reihe 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 Screen Flow erstellen, wenn er …
Sicherstellen, dass keine Szenarien fehlen: Mit einer End-to-End-Reise, die abgebildet ist, kannst du alle potenziellen Anwendungsbeispiele betrachten, die den Bedürfnissen des Kunden entsprechen.
Verbesserung der Nutzerinteraktionen: Lerne deinen Nutzer bei jeder Gelegenheit im Workflow kennen, z. B. bei Anmeldungen, Bestätigungen oder Pop-ups.
Besserer funktionsübergreifender Austausch: Bringe Designer und Entwickler zusammen und motiviere sie, über das gesamte Erlebnis nachzudenken, anstatt über einzelne Bildschirme.
Stakeholder-Schulung: Wenn Kunden oder Teams noch nie berücksichtigt haben, was der Nutzer sieht, wenn er dein Produkt oder deine Erfahrung durchläuft, hilft das Folgen eines Workflows, Empathie für Problempunkte des Nutzers aufzubauen.
Erstelle deinen eigenen Screen Flow
Das Erstellen deines Screen Flows ist einfach. Miro’s virtuelle Kollaborationsplattform bietet die perfekte Leinwand, um sie zu erstellen und zu teilen. Starte, indem du die Screen-Flow-Vorlage auswählst, und folge dann den folgenden Schritten, um deinen eigenen zu erstellen.
1. Definiere deine User Story
Bevor du eine visuelle Sequenz erstellst, beschreibe deine Nutzerbedürfnisse und Problempunkte, die gelöst werden sollen. Dies ist die Grundlage für den Ausgangspunkt deines Screen Flows.
2. Entscheide, was deine Schlüsselseiten anzeigen sollen
Denke über den Start- und Endpunkt deiner Reise nach. Brauchst du eine Landingpage? Registrierungsformular? Bestätigungsseite? Identifiziere Änderungen oder zusätzliche Schritte im Prozess, wie Seiten, die geteilt werden müssen, oder Bildschirme, die hinzugefügt werden müssen. Miro ist das perfekte Wireframe-Tool mit einer Wireframes-Bibliothek, die über 15 UI-Komponenten enthält, die du ganz einfach zu deinem Screenflow hinzufügen kannst.
3. Verbinde die Bildschirme
Füge Pfeile zwischen den Bildschirmen hinzu und verschiebe sie, um den Nutzer durch die Aufgabe zu führen, indem du das Miro Connection Line Tool verwendest. Du kannst auch Entscheidungspunkte einfügen und zeigen, was in jeder verfügbaren Instanz mit dem Nutzer passiert.
4. Gib deinen Screenflow zur Rückmeldung an dein Team oder Stakeholder weiter
Du kannst die Erwähnen-Funktion von Miro nutzen, um dein Team oder einzelne Personen für schnelle Feedbackrunden, Designkritiken oder Überprüfungen 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, um dein nächstes großes Ding zu entwickeln.
FAQ zur Screen Flow Vorlage
Was ist ein Screen Flow im UX?
Ein Screenflow hilft dir, die Interaktionen deiner Nutzer zu analysieren, indem er sich hauptsächlich auf deine Produktbildschirme konzentriert. Er vereint das Beste aus Wireframing und Flussdiagrammen und bietet dir einen detaillierteren Überblick über den Kundenfluss und somit mehr Daten, um eine bessere Nutzererfahrung zu entwickeln.
Miro
Der visuelle Workspace für Innovationen
80 Millionen Menschen nutzen Miro als einen Ort, an dem sie mühelos und unabhängig von ihrem Standort zusammenarbeiten – und ihre Vision der Zukunft entwickeln können.
Kategorien
Ähnliche Vorlagen
Vorlage für einen Lo-Fi-Wireframe
4 positive Bewertungen
444 Verwendungen
Vorlage für einen Lo-Fi-Wireframe
Wenn du eine Website entwirfst oder eine App entwickelst, sollten die frühen Phasen GROß sein – das große Ganze sehen und die große Idee kommunizieren. Niedrig aufgelöste Wireframes ermöglichen es dir, genau das zu sehen und zu tun. Diese groben Layouts (denk sie dir als digitale Version einer Skizze auf einem Papierfetzen) helfen deinen Teams und Projektbeteiligten schnell zu bestimmen, ob ein Designmeeting die Bedürfnisse deiner Nutzer erfüllt. Unsere Vorlage ermöglicht es dir, Wireframes mühelos bei Treffen, Workshops, Präsentationen und Feedback-Sitzungen einzusetzen.
Vorlage für App-Wireframe
0 positive Bewertungen
173 Verwendungen
Vorlage für App-Wireframe
Bereit, eine App zu entwickeln? Stell dir nicht nur vor, wie sie funktionieren wird und wie Nutzer mit ihr interagieren werden – lass dir das von einem Wireframe zeigen. Wireframing ist eine Technik, um ein grundlegendes Layout jeder Bildschirmseite zu erstellen. Wenn du idealerweise früh im Prozess mit Wireframes arbeitest, erhältst du ein Verständnis darüber, was jeder Bildschirm erreichen soll, und gewinnst die Unterstützung wichtiger Stakeholder – all das, noch bevor das Design und der Inhalt hinzugefügt werden, was dir Zeit und Geld spart. Und indem du die Dinge im Hinblick auf die Reise des Nutzers betrachtest, lieferst du ein überzeugenderes und erfolgreicheres Erlebnis.
Online-Skizzenvorlage
2 positive Bewertungen
285 Verwendungen

Online-Skizzenvorlage
Bevor du mit einer vielversprechenden Idee voll durchstartest, betrachte sie zunächst aus einer Vogelperspektive – um zu wissen, wie sie funktioniert und wie gut sie deine Ziele erfüllt. Genau das leisten Skizzen. Diese Vorlage bietet dir ein leistungsstarkes Tool für die Zusammenarbeit aus der Ferne in den ersten Phasen der Prototypenerstellung, 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 weiter ausbaust.
Vorlage für einen Website-Wireframe
1 positive Bewertungen
237 Verwendungen
Vorlage für einen Website-Wireframe
Wireframing ist eine Methode zum Entwerfen einer Website auf struktureller Ebene. Ein Wireframe ist ein stilisiertes Layout einer Webseite, das die Interface-Elemente jeder Seite zeigt. Nutze diese Wireframe-Vorlage, um schnell und kostengünstig Webseiten zu iterieren. Du kannst den Wireframe mit Kunden oder Teamkollegen teilen und mit Stakeholdern zusammenarbeiten. Wireframes ermöglichen es Teams, das Buy-in von Stakeholdern zu erhalten, ohne zu viel Zeit oder Ressourcen zu investieren. Sie helfen sicherzustellen, dass die Struktur und der Ablauf deiner Website die Bedürfnisse und Erwartungen der Nutzer erfüllen.
Vorlage für einen Lo-Fi-Wireframe
4 positive Bewertungen
444 Verwendungen
Vorlage für einen Lo-Fi-Wireframe
Wenn du eine Website entwirfst oder eine App entwickelst, sollten die frühen Phasen GROß sein – das große Ganze sehen und die große Idee kommunizieren. Niedrig aufgelöste Wireframes ermöglichen es dir, genau das zu sehen und zu tun. Diese groben Layouts (denk sie dir als digitale Version einer Skizze auf einem Papierfetzen) helfen deinen Teams und Projektbeteiligten schnell zu bestimmen, ob ein Designmeeting die Bedürfnisse deiner Nutzer erfüllt. Unsere Vorlage ermöglicht es dir, Wireframes mühelos bei Treffen, Workshops, Präsentationen und Feedback-Sitzungen einzusetzen.
Vorlage für App-Wireframe
0 positive Bewertungen
173 Verwendungen
Vorlage für App-Wireframe
Bereit, eine App zu entwickeln? Stell dir nicht nur vor, wie sie funktionieren wird und wie Nutzer mit ihr interagieren werden – lass dir das von einem Wireframe zeigen. Wireframing ist eine Technik, um ein grundlegendes Layout jeder Bildschirmseite zu erstellen. Wenn du idealerweise früh im Prozess mit Wireframes arbeitest, erhältst du ein Verständnis darüber, was jeder Bildschirm erreichen soll, und gewinnst die Unterstützung wichtiger Stakeholder – all das, noch bevor das Design und der Inhalt hinzugefügt werden, was dir Zeit und Geld spart. Und indem du die Dinge im Hinblick auf die Reise des Nutzers betrachtest, lieferst du ein überzeugenderes und erfolgreicheres Erlebnis.
Online-Skizzenvorlage
2 positive Bewertungen
285 Verwendungen

Online-Skizzenvorlage
Bevor du mit einer vielversprechenden Idee voll durchstartest, betrachte sie zunächst aus einer Vogelperspektive – um zu wissen, wie sie funktioniert und wie gut sie deine Ziele erfüllt. Genau das leisten Skizzen. Diese Vorlage bietet dir ein leistungsstarkes Tool für die Zusammenarbeit aus der Ferne in den ersten Phasen der Prototypenerstellung, 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 weiter ausbaust.
Vorlage für einen Website-Wireframe
1 positive Bewertungen
237 Verwendungen
Vorlage für einen Website-Wireframe
Wireframing ist eine Methode zum Entwerfen einer Website auf struktureller Ebene. Ein Wireframe ist ein stilisiertes Layout einer Webseite, das die Interface-Elemente jeder Seite zeigt. Nutze diese Wireframe-Vorlage, um schnell und kostengünstig Webseiten zu iterieren. Du kannst den Wireframe mit Kunden oder Teamkollegen teilen und mit Stakeholdern zusammenarbeiten. Wireframes ermöglichen es Teams, das Buy-in von Stakeholdern zu erhalten, ohne zu viel Zeit oder Ressourcen zu investieren. Sie helfen sicherzustellen, dass die Struktur und der Ablauf deiner Website die Bedürfnisse und Erwartungen der Nutzer erfüllen.