Das Screen-Flow-Template
Validiere visuelle Bildschirmkomponenten in einem Benutzerfluss und gewinne Erkenntnisse über deine Benutzerinteraktion. Verbessere das Erlebnis auf jeder Plattform.
Ü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
Flussdiagramm Vorlage
Ideal für:
Flussdiagramme, Kartierung, Diagramme
Möchtest du deinem Team einen Prozess oder einen Arbeitsablauf erklären – oder dich einfach nur selbst damit vertraut machen? Manchmal ist es am besten, etwas vor Augen zu haben, und zu diesem Zweck erstellt man ein Flussdiagramm. Unter Verwendung gängiger Formen (einfache Ovale, Rechtecke, Rauten und Pfeile) zeigt ein Flussdiagramm die Richtung eines Prozesses oder Arbeitsablaufs und die Reihenfolge der Schritte. Dadurch erhältst du nicht nur ein klares Verständnis, sondern kannst auch potenzielle Fehler und Engpässe erkennen. Auf diese Weise gelingt es dir, deinen Prozess zu verfeinern und zu verbessern und ein besseres Produkt auf effizientere Weise herzustellen.
Low-fidelity Wireframes Template (Vorlage)
Ideal für:
Desk Research, Product Management, Wireframes
Beim Entwerfen einer Website oder beim Erstellen einer App sollten die frühen Phasen sich darauf konzentrieren, das große Ganze zu betrachten und die grundlegende Idee zu kommunizieren. Low-fidelity Wireframes ermöglichen dir, das zu sehen und zu tun. Diese groben Layouts (stell dir diese als die digitale Version einer Skizze auf einer Serviette vor) helfen deinen Teams und Projektbeteiligten, schnell festzustellen, ob eine Designbesprechung die Bedürfnisse deiner Benutzer erfüllt. Unser Template ermöglicht es dir, Wireframes einfach während Meetings oder Workshops, Präsentationen und Reviewsitzungen zu verwenden.
Datenfluss Diagramm Vorlage
Ideal für:
Flussdiagramme, Software-Entwicklung, Diagramme
Jeder Prozess kann ziemlich komplex werden, vor allem wenn er mehrere Komponenten hat. Mit einem Datenflussdiagramm (DFD) kannst du deinen Prozess besser erfassen. Ein DFD kreiert eine einfache visuelle Darstellung aller Datenflusskomponenten und Anforderungen in einem gesamten System. Diese Diagramme werden am häufigsten von Growth-Teams, Datenanalysten und Produktteams verwendet und weisen eine von drei Komplexitätsebenen auf: 0, 1 oder 2. Dieses Template hilft dir, das beste DFD für deinen Prozess zu erstellen.
Incident Management Prozess Flussdiagramm Vorlage
Die Incident Management Flussdiagramm Vorlage in Miro wurde entwickelt, um den Prozess des Incident Managements innerhalb einer Organisation zu rationalisieren und zu verdeutlichen. Diese Vorlage dient als visueller Leitfaden, der die Schritte des Incident Managements von der ersten Meldung bis zur abschließenden Überprüfung skizziert. Es handelt sich um ein lebendiges Dokument, das auf der Grundlage von Rückmeldungen und Erkenntnissen aus vergangenen Vorfällen ständig weiterentwickelt wird, um sicherzustellen, dass der Prozess stets auf dem neuesten Stand der bewährten Verfahren ist. Durch die Definition von Vorfällen als Störungen, die eine koordinierte Reaktion zur Wiederherstellung des Service-Levels erfordern, unterstreicht die Vorlage die Bedeutung eines strukturierten, organisierten und zeitnahen Vorgehens. Sie deckt verschiedene Phasen ab, wie z. B. die Erklärung des Vorfalls, die Bewertung, die Reaktion, die Kommunikation und die Überprüfung, und bietet den Teams einen klaren Rahmen, den sie befolgen können.
Das Unterrichtsreflexion-Template
Ideal für:
Education, Meetings
Die Vorlage für die Unterrichtsreflexion ist ein Instrument, das Raum für Selbstreflexion und Verbesserung schafft. Die Schüler können die wichtigsten Erkenntnisse aus einer Lektion und die Themen, die sie am interessantesten finden, bewerten. Wenn die Lehrkräfte die Lektionsreflexion der Schüler erhalten, können sie nach Möglichkeiten zur Verbesserung der Lern- und Lehrmethoden suchen. Die Vorlage "Lesson Reflection" kann dir helfen, den Bildungsprozess zu erleichtern, und sie ist einfach und unkompliziert zu verwenden.
Sailboat Retrospektive Template
Ideal für:
Agile Methodology, Meetings, Retrospectives
Die Segelboot Retrospektive ist eine Methode, mit der Teams mit geringem Druck darüber nachdenken können, wie sie ein Projekt durchgeführt haben. Indem du deine Risiken (die Felsen), verzögernde Probleme (Anker), helfende Teams (Wind) und das Ziel (Land) definierst, kannst du herausfinden, was du gut machst und was du für den nächsten Sprint verbessern musst. Wenn man die Teamdynamik mit der Metapher des Segelboots betrachtet, können alle Beteiligten beschreiben, wohin sie gemeinsam gehen wollen, indem sie herausfinden, was sie bremst und was ihnen hilft, ihre zukünftigen Ziele zu erreichen.