Das Screen-Flow-Template
Validiere visuelle Bildschirmkomponenten in einem Benutzerfluss und gewinne Erkenntnisse über deine Benutzerinteraktion. Verbessere das Erlebnis auf jeder Plattform.
Trusted by 65M+ users and leading companies
Über das Screen-Flow-Template
Bildschirmabläufe (auch bekannt als "Wireflows") sind eine Kombination aus Wireframes und Flussdiagrammen. Der durchgängige Ablauf stellt dar, was die Benutzer auf den einzelnen Bildschirmen sehen und wie sich dies auf ihren Entscheidungsprozess in deinem Produkt oder deiner Dienstleistung auswirkt. Mit diesen Informationen kannst du die Entscheidungen, die du bezüglich deines Interaktionsdesigns getroffen hast, besser erklären. Verwende die Screen Flow Vorlage, um neue Möglichkeiten zu finden, das Benutzererlebnis von Anfang bis Ende reibungslos und ohne Frustration zu gestalten. Dies kann eine hilfreiche Ergänzung zu User Storymapping Tools sein. Wenn du daran interessiert bist, deine Arbeit weiterzuentwickeln und in den Bereich des UX-Designs vorzudringen, in dem du die User Journey als Flussdiagramm mit Texten und Symbolen statt mit Bildschirmen darstellen kannst, könnte dich die User Flow-Vorlage interessieren. Auch das UI Design Tool kann dir dabei helfen, ein gutes User Interface für deine Benutzer*innen zu erstellen.
Was ist ein Screen-Flow (Bildschirmablauf)?
Ein Screen-Flow (Bildschirmablauf oder Wireflow) stellt ein Layout mit mehreren Bildschirmen zusammen, die wie ein Flussdiagramm miteinander verbunden sind, um die Entscheidungspunkte und Bewegungen eines Kunden von Anfang bis Ende darzustellen. Wireframes allein geben keinen Aufschluss darüber, wie ein interaktiver, seitenweiser Benutzerfluss aussehen könnte. UX-Flows allein sind eher abstrakt und können dir nicht zeigen, was dein Kunde tatsächlich sieht. Wireflows oder Screen Flows vereinen die Stärken beider Methoden und helfen dir zu zeigen, dass das, was der Benutzer sieht, einen großen Einfluss darauf hat, wie er dein Produkt oder deine Dienstleistung erlebt.
Wann sollte man Screen Flows verwenden?
Wireframe Tools helfen UX- und Produktteams dabei, die Customer Journey als einen vollständigen Ablauf und nicht als eine Reihe von Bildschirmen zu betrachten. Der Wireflow oder Bildschirmablauf konzentriert sich auf die Bildschirme selbst und die Interaktion des Kunden mit der Dienstleistung oder dem Produkt. Ein Designer kann einen Bildschirmablauf entwerfen, wenn er ...
Sicherstellen, dass es keine fehlenden Szenarien gibt: Wenn eine durchgehende Reise abgebildet ist, kannst du alle potenziellen Anwendungsfälle berücksichtigen, die auf die Bedürfnisse des Kunden zutreffen.
Verbessere die Benutzerinteraktionen: Lerne den Kunden bei jeder Gelegenheit im Ablauf kennen, z. B. bei Anmeldungen, Bestätigungen oder Pop-ups.
Bessere funktionsübergreifende Kommunikation: Bringe die Designer und Entwickler zusammen und ermutige sie, über das gesamte Erlebnis und nicht nur über einzelne Bildschirme nachzudenken.
Aufklärung der Stakeholder: Wenn Kunden oder Teams noch nie darüber nachgedacht haben, was der Kunde sieht, wenn er sich durch das Produkt oder die Erfahrung bewegt, hilft das Befolgen eines Ablaufs, Empathie für die Schmerzpunkte des Kunden zu entwickeln.
Erstelle deinen eigenen Screen Flow
Die Erstellung eines eigenen Bildschirmablaufs ist einfach. Das Kollaborationtool von Miro ist das perfekte Whiteboard, um sie zu erstellen und zu teilen. Du hast auch die Möglichkeit verschiedene Flussdiagramme zu erstellen. Für den Screen Flow wähle zunächst die zugehörige Vorlage aus und führe dann die folgenden Schritte aus, um deinen eigenen Screen Flow zu erstellen.
Definiere deine User Story Bevor du mit dem Mapping einer visuellen Sequenz beginnst, beschreibe deine Nutzerbedürfnisse und Schmerzpunkte, die es zu lösen gilt. Auf dieser Grundlage erstellst du einen Startpunkt für deinen Screen Flow auf.
Entscheide dich, was deine Hauptbildschirme zeigen werden Überlege dir deine Start- und Endpunkte der Reise. Brauchst du eine Landing Page? Ein Anmeldeformular? Eine Bestätigungsseite? Identifiziere die Änderungen oder zusätzlichen Schritte im Prozess, wie z.B. Seiten, die geteilt werden müssen oder Bildschirme, die hinzugefügt werden müssen. Die Wireframe-Bibliothek von Miro enthält mehr als 15 UI-Komponenten, die du einfach zu deinem Bildschirmfluss hinzufügen kannst, wenn du Inspiration brauchst.
Verbinde die Bildschirme Füge Pfeile zwischen den einzelnen Bildschirmen hinzu und verschieben sie, um den Benutzer durch die Aufgabe voranzubringen, indem du das Verbindungslinien-Tool von Miro verwendest. Du kannst auch Entscheidungspunkte einfügen und dem Benutzer zeigen, was in jeder verfügbaren Instanz passiert.
Teilen Bildschirmablauf mit deinem Team oder Stakeholdern für Feedback Mit der Mention-Funktion von Miro kannst du dein Team oder einzelne Personen für schnelle Feedbackrunden, Designkritiken oder Überprüfungen vor Live-Workshops mit Kunden markieren. Du kannst dein Miro Board auch für andere Personen freigeben (auch wenn diese noch nicht registriert sind!), indem du auf die Schaltfläche Mitglieder einladen klickst.
Was ist Screen Flow in UX?
Ein Screenflow hilft dir, die Interaktionen deiner Nutzer zu analysieren, wobei du dich hauptsächlich auf deine Produktbildschirme konzentrierst. Er kombiniert das Beste aus Wireframing und Flussdiagrammen und gibt dir einen detaillierteren Überblick über deinen Kundenfluss und damit mehr Daten, um ein besseres Nutzererlebnis zu schaffen.
Beginne jetzt mit diesem Template
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.
Das Produktions-Workflow-Template
Ideal für:
Projektmanagement, Agile Methodologie, Agile Abläufe
Ganz gleich, ob du einen Podcast, eine Marketingkampagne, eine Fernsehsendung oder einen Inhalt produzierst, die Erstellung eines Produktions-Workflows ist entscheidend. Ein Produktions-Workflow stellt einen visuellen Leitfaden für die verschiedenen Schritte eines Prozesses dar. Er kann verwendet werden, um neue Teammitglieder zu schulen oder den Beteiligten einen Überblick zu geben. Obwohl die Produktionsabläufe von Team zu Team und von Unternehmen zu Unternehmen unterschiedlich sind, enthalten sie im Allgemeinen Informationen darüber, wer die Beteiligten sind, wie du Ideen sammelst, wie dein Zeitplan aussieht und welche Ressourcen du für den Erfolg brauchst.
Das iPhone-App-Template
Ideal für:
UX-Design, Desk Research, Wireframes
Ein unglaublicher Prozentsatz der Smartphone-Nutzer weltweit hat sich für das iPhone entschieden (darunter auch einige deiner bestehenden und potenziellen Kunden) – und diese Nutzer sind von ihren Apps einfach begeistert. Aber eine iPhone App von Grund auf zu entwerfen und zu erstellen, kann durchaus eine entmutigende, mühevolle Aufgabe sein. Nicht bei uns – dieses Template macht es einfach. Du kannst Designs anpassen, interaktive Protokolle erstellen, mit deinen Mitarbeitern teilen, im Team vervielfältigen und schließlich eine iPhone App entwickeln, die deine Kunden begeistert.
Das KWL-Diagramm-Template
Ideal für:
Ausbildung, Brainstorming, Retrospektiven
Austausch und Kenntniserweiterung sind der Treibstoff eines jeden ehrgeizigen Teams oder Unternehmens. Ein KWL-Diagramm ist ein grafisches Organisationsmittel, das den Lernprozess fördert. Mit diesem einfachen Template kannst du ein KWL mit drei Spalten erstellen und anwenden: Know, Want to Know und Learned (Was ich weiß, Was ich wissen möchte und Was ich gelernt habe). Dann füllst du gemeinsam mit dem Team die Spalten aus, indem ihr drei Schritte befolgt: Mache eine Bestandsaufnahme der Kenntnisse, dokumentiere, was du aus der Sitzung mitnehmen willst, und halte schließlich fest, was du gelernt hast.
Product Development Flowchart Vorlage
Ideal für:
Diagramming, Product Development
Verbessere den Produktentwicklungsprozess mit der Product Development Flussdiagramm Vorlage für die Produktentwicklung. Die Vorlage bietet einen gemeinsamen Bereich, in dem Teammitglieder in Echtzeit Input und Feedback zu den verschiedenen Phasen der Produktentwicklung geben können. Diese kollaborative Funktion stellt sicher, dass alle Beteiligten auf derselben Seite stehen, wodurch die Wahrscheinlichkeit von Missverständnissen verringert und die Projekteffizienz insgesamt gesteigert wird. Durch die Zentralisierung von Erkenntnissen und Ideen innerhalb des Flussdiagramms können die Teams den Produktentwicklungsprozess gemeinsam gestalten und verfeinern, was zu einem kohärenteren und erfolgreicheren Ergebnis führt.
Das Working-Backwards-Template
Ideal für:
Desk Research, Strategic Planning, Product Management
Amazon leistete Pionierarbeit mit dem Ansatz der Rückwärtsarbeit, der auf einem ihrer wichtigsten Prinzipien basiert: Besessenheit für ihre Kunden. Rückwärtsarbeit ist ein System, mit dem du über ein Produkt ohne detaillierte Roadmap nachdenken kannst. Dein Produktteam geht dabei von einer Vorstellung des Kunden aus, um dein Produkt so auf den Markt zu bringen, dass es dem Kunden wirklich dient. Diese Methode verlangt von jedem, der eine neue Produkt- oder Funktionsidee hat, deren Ziel so klar wie möglich zu formulieren. Wenn die Ideenpräsentation die Führung beeindruckt, besteht der nächste Schritt darin herauszufinden, was das Team braucht, um zur Produkt- oder Funktionseinführung zu kommen.