====Übung: Wireflow erstellen====

**Ziel: \\  **
– Fertiger Low-Fidelity-Papierprototyp der App oder Webseite\\ 
– User Flow, Wireframes und Wireflow auf Papier dargestellt\\ 
– Prototyp kann direkt für erste Tests verwendet werden\\

{{:de:modul:m322_2025:learningunits:lu06:aufgaben:complete-guide-designing-paper-prototypes.png?600|\\}}

**Dauer:**\\

  * User Flow: 20 Minuten
  * Wireframes zeichnen: 45 Minuten
  * Wireflow zusammenstellen: 30 Minuten
  * Testen: 20 Minuten
  * Gesamt: ca. 1,5 Stunden

**Artefakte:**\\
Alle auf Papier, fotografiert und in Miro hochgeladen für Dokumentation: 

  - User Flow-Diagramm
  - Einzelne Wireframes
  - Wireflow auf großem Papier
  - Notizen aus dem Test


----

====1. User Flow zeichnen ====
{|style = "table-layout: fixed; width: 100%;"
|- 
|style = "width: 100px; border-top: thin solid;"| Sozialform:
|style = "width: 100%"   | Im Projektteam
|-
|style="border-top: thin solid; "| Ergebnis:   
| User Flow auf Papier, mit allen Entscheidungswegen.
|-
|style="border-top: thin solid; vertical-align: top;"| Vorgehen:   
| – Überlegen Sie, welche Screens Ihre App haben muss (Startseite, Anmeldung, Aufgabenübersicht, Ergebnis etc.).\\ – Zeichnen Sie Kästchen für jede Seite auf ein Blatt Papier.\\ – Zeichnen Sie Pfeile, die zeigen, welcher Button wohin führt.\\ – Markieren Sie Entscheidungspunkte (z. B. „Richtig/Falsch“).
|-
|style="border-top: thin solid;"|
|}
\\

====2. Wireframes zeichnen ====
{|style = "table-layout: fixed; width: 100%;"
|- 
|style = "width: 100px; border-top: thin solid;"| Sozialform:
|style = "width: 100%"   | Im Projektteam
|-
|style="border-top: thin solid; "| Ergebnis:   
| Wireframes aller Screens auf Papier.
|-
|style="border-top: thin solid; vertical-align: top;"| Vorgehen:   
| – Zeichnen Sie jeden wichtigen Screen auf ein separates Blatt. Mobile Screens: Handy-Format; Desktop Screens: Desktop-Format\\ –  Zeigen Sie grob Anordnung von Texten, Buttons, Listen oder Eingabefeldern.\\ – Beschriften Sie alle wichtigen interaktiven Elemente. \\ Tipp: Es muss nicht schön aussehen, nur verständlich und übersichtlich.
|-
|style="border-top: thin solid;"|
|}
\\

====3. Wireflow zeichnen ====
{|style = "table-layout: fixed; width: 100%;"
|- 
|style = "width: 100px; border-top: thin solid;"| Sozialform:
|style = "width: 100%"   | Im Projektteam
|-
|style="border-top: thin solid; "| Ergebnis:   
| Wireflow auf Papier, ein grosses Papier mit den Wireframes und User Flows.
|-
|style="border-top: thin solid; vertical-align: top;"| Vorgehen:   
| – Schneiden Sie die Wireframes aus. \\ – Kleben oder legen Sie sie auf ein großes Blatt Papier in der Reihenfolge des User Flows. \\ – Zeichnen Sie Pfeile zwischen den Screens, um Navigation und Interaktionen zu zeigen. \\ – Fügen Sie kleine Notizen hinzu, z. B. „Button gedrückt → nächste Seite“.
|-
|style="border-top: thin solid;"|
|}
\\

====4. Papierprototyp testen ====
{|style = "table-layout: fixed; width: 100%;"
|- 
|style = "width: 100px; border-top: thin solid;"| Sozialform:
|style = "width: 100%"   | Im Projektteam
|-
|style="border-top: thin solid; "| Ergebnis:   
| User Flow auf Papier, mit allen Entscheidungswegen.
|-
|style="border-top: thin solid; vertical-align: top;"| Vorgehen:   
| – Führen Sie den Prototypen innerhalb des Teams durch.\\ –  Nutzen Sie ihn, um erste Usability-Tests mit anderen Lernenden zu machen: Kann man die Aufgaben ohne Probleme erledigen? Sind Buttons und Navigation verständlich? Macht der Ablauf Sinn? Fehlt etwas wichtiges? \\ – Notieren Sie Probleme oder Verbesserungsideen, die später umgesetzt werden können.
|-
|style="border-top: thin solid;"|
|}
\\