Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m322_2025:learningunits:lu06:aufgaben:lu6-aufgabe_4 [2025/03/27 15:01] – angelegt - Externe Bearbeitung 127.0.0.1
+++ de:modul:m322_2025:learningunits:lu06:aufgaben:lu6-aufgabe_4 [2025/09/17 09:46] (aktuell) – gjenni
@@ Zeile 1: / Zeile 1: @@
-====Auftrag 16: Wireflow erstellen====
+====Übung: Wireflow erstellen====
-Zu dem in Auftrag 15, Aufgabe 1 erstellten Key Screen wird ein Wireflow erstellt.
-===1. 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%"   | Einzelarbeit
+|style = "width: 100%"   | Im Projektteam
 |-
 |style="border-top: thin solid; "| Ergebnis:
-| Ein Wireflow zu der in Aufgabe 1. ausgewählten User Story Map.
+| User Flow auf Papier, mit allen Entscheidungswegen.
 |-
 |style="border-top: thin solid; vertical-align: top;"| Vorgehen:
-| Skizzieren Sie zuerst eine vereinfachte Sicht Ihres Key Screens aus Auftrag 15. Vergleichen Sie dazu in der Theorie die Abbildung 6-12.\\
+| – Ü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“).
-Zeigen Sie die typischen Durchläufe und beteiligten Screens auf. Aus der Graphik muss klar hervorgehen, welches Element zu welcher Aktion führt und was als Ergbebnis (z.B. Dialogfenster usw.) resultiert.
 |-
-|style="border-top: thin solid; vertical-align: top;"| Dauer:
+|style="border-top: thin solid;"|
-| 45 Minuten (je nach Komplexität braucht es evtl. mehr (Hausaufgaben-) Zeit.)
+|}
+\\
+====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; vertical-align: top;"| Artefakte:
+|style="border-top: thin solid; "| Ergebnis:
-| Wireflow mit Wireframe Library in Miro.
+| 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;"|
@@ Zeile 25: / Zeile 59: @@
 \\
+====3. Wireflow zeichnen ====
-===2. Wireflows diskutieren ===
 {|style = "table-layout: fixed; width: 100%;"
 |-
 |style = "width: 100px; border-top: thin solid;"| Sozialform:
-|style = "width: 100%"   | Gruppenarbeit
+|style = "width: 100%"   | Im Projektteam
 |-
 |style="border-top: thin solid; "| Ergebnis:
-| Je ein ausgewähltes Artefakt aus den Aufgaben 1. und 2.
+| Wireflow auf Papier, ein grosses Papier mit den Wireframes und User Flows.
 |-
 |style="border-top: thin solid; vertical-align: top;"| Vorgehen:
-| Stellen Sie sich in Ihrem Team gegenseitig die erstellten Wireflows vor.\\
+| – 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“.
-Stellen Sie kritische Fragen an den Autor und diskutieren Sie unterschiedliche Lösungsvarianten.\\
-Definieren Sie welche Lösungsvarianten Sie für den Prototyp in Figma verwenden möchten.
 |-
-|style="border-top: thin solid; vertical-align: top;"| Dauer:
+|style="border-top: thin solid;"|
-| 20 Minuten
+|}
+\\
+====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; vertical-align: top;"| Artefakte:
+|style="border-top: thin solid; "| Ergebnis:
-| Key Screens als Wireflow in Miro hinterlegt.
+| 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;"|
@@ Zeile 50: / Zeile 91: @@
 \\
-----
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] (c) René Probst