⌘ K
Deutsch
Designprozess

App-Flows vs. einzelne Screenshots: So studieren Sie die Sequenz

Erfahren Sie, wie Sie App-Screenshot-Sequenzen auf Aufgabenstruktur, Statusänderungen und Übergangslücken überprüfen und wo einzelne UI-Referenzen vor einem interaktiven Ablauf stehen bleiben.

ScreenKits-Redaktion6 Min. Lesezeit
Konzeptionelle Einkaufsbildschirme, die durch Pfeile von der Produktauswahl bis zur Fertigstellung verbunden sind.
Konzeptionelle redaktionelle Gestaltung; keine erfasste App-Oberfläche.

Ein einzelner Screenshot ist nützlich, um ein Layout, eine Hierarchie oder ein visuelles Muster zu studieren. Aber eine Produktaufgabe entwickelt sich im Laufe der Zeit: Eine Person beginnt irgendwo, trifft Entscheidungen, stößt auf System- oder App-Zustände und kommt entweder zu einem Ergebnis oder bleibt stecken. Um diese Erfahrung zu untersuchen, betrachten Sie Screenshots als geordnete Sequenz und fragen Sie, was die Lücken zwischen ihnen bedeuten.

Eine Reihe von Screenshots ist immer noch eine teilweise visuelle Referenz. Es werden nicht alle Routen, Tippziele, Animationen, Fehlerbedingungen oder Benutzerergebnisse überprüft. ScreenKits hilft Ihnen, erfasste App-Bildschirme zu durchsuchen und Muster zu vergleichen; Verwenden Sie Ihren eigenen Prototyp oder Ihre eigene Forschung, um zu validieren, wie sich ein tatsächlicher Fluss verhält.

Wichtige Erkenntnisse

  • Beginnen Sie mit einem Benutzerziel und -szenario und ordnen Sie dann die relevanten Bildschirme in der für die Aufgabe erforderlichen Reihenfolge an.
  • Kommentieren Sie Status, Entscheidungen und Übergänge zwischen Aufnahmen, anstatt benachbarte Bilder als verifizierte Interaktionsaufzeichnung zu behandeln.
  • Erfassen Sie fehlende Beweise und testen Sie die reale Schnittstelle, wenn Verhalten, Timing oder alternative Pfade von Bedeutung sind.

1. Trennen Sie eine Bildschirmreferenz von einem Flow

Ein Screenshot beantwortet Fragen zu einem erfassten Zustand: Was ist auffällig? Wie werden Informationen gruppiert? Wie sieht die primäre Aktion aus? Eine Flow-Überprüfung fügt Beziehungen hinzu: Welches Ziel führt jemanden hierher? Welche Aktion bringt sie voran? Was ändert sich nach dieser Aktion und wie können sie sich erholen oder einen anderen Weg einschlagen?

Halten Sie drei Beweisarten unterscheidbar. Ein einzelner Screenshot ist ein Standbild. Eine geordnete Screenshot-Sequenz deutet einen möglichen Verlauf durch erfasste Zustände an. Eine interaktive Aufzeichnung oder ein Prototyp zeigt das Verhalten im Laufe der Zeit, deckt jedoch möglicherweise immer noch nur einen Pfad und eine Reihe von Bedingungen ab. Eine Sequenz ist nicht automatisch ein interaktiver Ablauf, eine vollständige Nutzerreise oder ein Analysedatensatz.

Diese Unterscheidung macht eine Screenshot-Bibliothek nützlicher und nicht weniger. Durchsuchen Sie alle ScreenKits Beispiele, um visuelle Referenzen zu sammeln, und erstellen Sie dann Ihre eigene Karte der Aufgabe, Zweige und unbeantworteten Fragen. Verwenden Sie Kategorien, um den Kontext einzugrenzen, oder filtern Sie nach Onboarding-Beispielen, wenn Sie eine Erstverwendungssequenz überprüfen.

2. Beginnen Sie mit der Aufgabe, nicht mit dem Bilderstapel

Wählen Sie ein konkretes Szenario aus, z. B. „Produkt für später speichern“ oder „Einrichtung eines neuen Kontos abschließen“. Benennen Sie das Ziel der Person in ihren eigenen Worten; das Ausfüllen eines Formulars oder das Tippen auf eine Schaltfläche ist normalerweise ein Schritt, nicht das Ziel. Die Nielsen Norman Group beschreibt die Aufgabenanalyse als Untersuchung des Ziels, der Schritte, ihrer Reihenfolge und Struktur sowie der auf dem Weg benötigten Informationen. Das gibt Ihrer Rezension eine nützliche Analyseeinheit: die Aufgabe und den Weg durch sie.

Sammeln Sie als Nächstes die Bildschirme, die relevant erscheinen, und ordnen Sie sie in einer vorläufigen Reihenfolge an. Beschriften Sie jeden mit dem, was gerade passiert, z. B. Durchsuchen, Auswählen, Bestätigen, Berechtigungsanforderung, Erfolg oder Wiederherstellung. Markieren Sie die Reihenfolge als Hypothese, es sei denn, Sie wissen, wie die Aufnahmen erstellt wurden. Wenn ein Bildschirm zu mehr als einem Punkt der Aufgabe passen könnte, beachten Sie die Mehrdeutigkeit, anstatt Gewissheit zu erzwingen.

Fügen Sie für eine stärkere Karte alternative Pfade und Bedingungen neben der Hauptsequenz hinzu: ein wiederkehrender Benutzer, eine abgelehnte Berechtigung, ein ungültiges Feld, ein leeres Ergebnis oder eine verlorene Verbindung. Diese Zweige werfen oft Designfragen auf, die eine ausgefeilte Happy-Path-Galerie nicht beantworten kann.

  • Schreiben Sie den Benutzer, die Situation und das beabsichtigte Ergebnis in einem Satz.
  • Ordnen Sie die scheinbaren Schritte und kennzeichnen Sie die Beweise hinter dieser Reihenfolge.
  • Fügen Sie wahrscheinliche Zweige, Voraussetzungen und Wiederherstellungsschritte als separate Notizen hinzu.

3. Überprüfen Sie, was sich zwischen den Bildschirmen ändert

Der Übergang ist der Ort, an dem die Argumentation stattfindet. Schreiben Sie für jedes benachbarte Paar den Auslöser auf, der sie Ihrer Meinung nach verbindet, was sich geändert hat und was die Person jetzt verstehen sollte. Ist eine Wahl bestehen geblieben? Hat die App eine Speicherung bestätigt? Ist der nächste Bildschirm ein neues Ziel, ein temporärer Dialog oder eine Systemberechtigungsaufforderung? Wenn die Beweise den Auslöser nicht erkennen lassen, markieren Sie ihn als unbekannt.

Verfolgen Sie den Status und das Ziel. Ein Formular kann leer, teilweise vollständig, ungültig, übermittelt oder nach einer Unterbrechung wiederhergestellt sein. Ein Kaufbildschirm kann ein Angebot, einen Ladestatus, einen Fehler und eine Bestätigung enthalten. Zwei nahezu identische Aufnahmen können eine bedeutsame Zustandsänderung offenbaren; Zwei optisch unterschiedliche Bildschirme können zu unterschiedlichen Routen gehören. Verwenden Sie Beschriftungen oder Anmerkungen, damit Ihre Sequenz keine Kausalität impliziert, die die Aufnahmen nicht beweisen können.

Navigation braucht Orientierung und verlässliche Rückwege. Die Human Interface Guidelines von Apple beschreiben Tab-Leisten als Navigation zwischen Abschnitten der obersten Ebene und weisen darauf hin, dass die Beibehaltung des Navigationsstatus jedes Abschnitts den Benutzern hilft, zu wechseln, ohne ihre Position zu verlieren. Wenden Sie diese Art von Frage auf Referenzen an: Kann jemand erkennen, in welchem Bereich er sich befindet, zu einem früheren Kontext zurückkehren oder eine geführte Aufgabe verlassen? Ein Standbild kann die Erschwinglichkeit andeuten, aber nur Interaktionstests können feststellen, wie es sich verhält.

  • Zeichnen Sie für jeden Übergang den Auslöser, das sichtbare Feedback, den resultierenden Zustand und das Vertrauen auf.
  • Überprüfen Sie die Pfade noch einmal, brechen Sie sie ab, überspringen Sie sie, versuchen Sie es erneut und setzen Sie sie bei Bedarf fort.
  • Trennen Sie App-Bildschirme von der Benutzeroberfläche des Betriebssystems und externen Zielen.

4. Wählen Sie den richtigen Beweis für die Frage

Unterschiedliche Artefakte beantworten unterschiedliche Designfragen. Beginnen Sie mit der einfachsten nützlichen Referenz und gehen Sie dann zu einem Prototyp, einer Aufzeichnung oder einer Benutzerbeobachtung über, wenn die Frage vom tatsächlichen Verhalten abhängt.

ArtefaktNützlich fürWas es nicht selbst feststellen kann
Individueller ScreenshotVisuelle Hierarchie, Kopie, Komponentenmuster und ein erfasster ZustandWas hat den Zustand verursacht, was ist davor oder danach passiert oder ob die Kontrollen funktionieren
Bestellte Screenshot-SequenzVergleich scheinbarer Fortschritte, sich wiederholender Muster und Übergangslücken bei KandidatenDass die Reihenfolge vollständig ist, jeder Zweig dargestellt ist oder Übergänge interaktiv sind
Interaktiver Prototyp oder AufzeichnungÜberprüfung eines definierten Pfads, Timings, Feedbacks und InteraktionsverhaltensWie sich alle Benutzer verhalten, alle möglichen Routen oder Ergebnisse außerhalb des aufgezeichneten Szenarios
Beobachtete AufgabenforschungErfahren Sie, wo Menschen zögern, was sie erwarten und wie sie sich im Kontext erholenEin universelles Ergebnis aus einer kleinen oder nicht repräsentativen Stichprobe

5. Eine wiederholbare kommentierte Flussüberprüfung

Nutzen Sie die Checkliste unten für eine kurze Kritik oder eine tiefergehende Übergabe. Halten Sie jede Anmerkung spezifisch und trennen Sie Beobachtungen von Annahmen. Wenn Sie Ihr eigenes Produkt überprüfen, testen Sie die zugeordnete Aufgabe mit einem Prototyp oder einem funktionierenden Build und überarbeiten Sie die Zuordnung, wenn sich das beobachtete Verhalten unterscheidet.

  • Definieren Sie einen Benutzer, einen Kontext und ein beobachtbares Endziel.
  • Bestellen Sie die entsprechenden Aufnahmen; kennzeichnen Sie jedes als bestätigt, abgeleitet oder unbekannt.
  • Notieren Sie sich für jeden Schritt die Benutzeraktion, die Schnittstellenreaktion, den aktuellen Status und die nächste Entscheidung.
  • Markieren Sie Lücken: fehlender Auslöser, unklarer Fortschritt, verlorener Kontext, fehlendes Feedback oder kein Wiederherstellungsweg.
  • Fügen Sie Alternativ- und Fehlerstatus hinzu, einschließlich Fälle „Überspringen“, „Zurück“, „Abbrechen“, „Leer“, „Fehler“ und „Berechtigung abgelehnt“.
  • Prüfen Sie, ob Beschriftungen und Hierarchie die nächste Aktion und den aktuellen Standort verständlich machen.
  • Verwandeln Sie jede Unsicherheit in eine Frage für eine Prototypen-Komplettlösung oder eine beobachtete Aufgabensitzung.
  • Notieren Sie die Beweisquelle und das Datum, damit spätere Prüfer wissen, was die Karte darstellt.

Häufige Fragen

Sind eine Abfolge von Screenshots und ein App-Flow dasselbe?

Nein. Eine Sequenz besteht aus einer Reihe von Standbildern, die so angeordnet sind, dass sie einen Fortschritt andeuten. Ein App-Flow beschreibt außerdem Aktionen, Übergänge, Zustände und mögliche Verzweigungen. Behandeln Sie eine Screenshot-Sequenz als teilweisen visuellen Beweis, es sei denn, Interaktionsverhalten und Abdeckung wurden separat überprüft.

Wie soll ich fehlende Bildschirme oder Übergänge kommentieren?

Schreiben Sie auf, was Sie wissen, was Sie daraus schließen und was unbekannt ist. Beachten Sie die Benutzeraktion, das erwartete Feedback, den resultierenden Status und alle fehlenden Wiederherstellungs- oder alternativen Pfade. Verwenden Sie einen Prototyp oder eine beobachtete Sitzung, um Fragen zu beantworten, die die Aufnahmen nicht lösen können.

Kann ich Screenshot-Referenzen für die Benutzerrecherche verwenden?

Sie können den Designvergleich unterstützen und Ihnen bei der Bildung von Hypothesen helfen, sie zeigen jedoch nicht, wie sich die Teilnehmer verhalten oder was sie verstehen. Um das zu lernen, geben Sie den Leuten eine realistische Aufgabe in einem Prototyp oder einer Arbeitsoberfläche und beobachten Sie das Ergebnis.

Quellen & weiterführende Literatur

Verwandeln Sie Inspiration in Ihren nächsten Flow.

Durchsuchen Sie echte Bildschirme, vergleichen Sie Muster und sehen Sie, wie die Teile zusammenpassen.

Entdecken Sie App-Bildschirme