Dies ist eine alte Version des Dokuments!
Ü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
Dauer:
- User Flow: 20 Minuten
- Wireframes zeichnen: 30 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
| Sozialform: | Im Projektteam |
| Ergebnis: | User Flow auf Papier, mit allen Entscheidungswegen. |
| 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“). |
2. Wireframes zeichnen
| Sozialform: | Im Projektteam |
| Ergebnis: | Wireframes aller Screens auf Papier. |
| 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. |
3. Wireflow zeichnen
| Sozialform: | Im Projektteam |
| Ergebnis: | Wireflow auf Papier, ein grosses Papier mit den Wireframes und User Flows. |
| 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“. |
4. Papierprototyp testen
| Sozialform: | Im Projektteam |
| Ergebnis: | User Flow auf Papier, mit allen Entscheidungswegen. |
| 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. |