Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m322_2025:learningunits:lu06:theorie:lu6-kapitel_4 [2025/09/16 21:51] – gjenni
+++ de:modul:m322_2025:learningunits:lu06:theorie:lu6-kapitel_4 [2026/06/08 11:20] (aktuell) – emastrandrea
@@ Zeile 1: / Zeile 1: @@
-==== 03 Wireframe & Wireflow ====
+==== 04 Wireframe & Wireflow ====
 === 1. User Flow ===
@@ Zeile 7: / Zeile 7: @@
 Beispiel: Anmeldung → Übung auswählen → Aufgabe lösen → Ergebnis ansehen.\\
-User Flows helfen zu prüfen, ob der Ablauf logisch und einfach ist.
+User Flows helfen zu prüfen, ob der Ablauf logisch und einfach ist.\\
+{{:de:modul:m322_2025:learningunits:lu06:theorie:simple_flowchart_for_nng_wireflows_article-8.png?600|}}
 ----
@@ Zeile 17: / Zeile 19: @@
 Beispiel: Auf einer Startseite einer Lern-App: oben der Titel, darunter eine Liste mit Übungen, unten ein „Start“-Button.\\
+{{:de:modul:m322_2025:learningunits:lu06:theorie:wireframe-example-plain.png?600|}}
 ----
 === 3. Wireflow ===
@@ Zeile 23: / Zeile 25: @@
 Ein Wireflow kombiniert Wireframes und User Flows. Es zeigt nicht nur die Screens, sondern auch, wie man von einem Screen zum nächsten kommt. Pfeile und kleine Anmerkungen zeigen die Interaktionen und Entscheidungen.\\
-Beispiel: Wenn ein:e Nutzer:in auf „Übung starten“ klickt, öffnet sich die Aufgabenübersicht. Wenn er/sie auf „Beenden“ klickt, kommt das Ergebnis.
+Beispiel: Wenn ein:e Nutzer:in auf „Übung starten“ klickt, öffnet sich die Aufgabenübersicht. Wenn er/sie auf „Beenden“ klickt, kommt das Ergebnis.\\
+{{:de:modul:m322_2025:learningunits:lu06:theorie:letter-8.png?600|}}
+{{:de:modul:m322_2025:learningunits:lu06:theorie:reworked-littlehootz-8.png?400|}}
 ----
@@ Zeile 31: / Zeile 35: @@
   * Wireframes zeichnen: jeden wichtigen Screen skizzieren.
   * Wireflow erstellen: Screens verbinden und Abläufe sichtbar machen.
+----
+=== Zusammenfassung ===
+User Flow:
+  * Zeigt den Ablauf bzw. die Schritte eines Benutzers durch eine Anwendung.
+  * Fokus: Navigation und Benutzerführung.
+Wireframe:
+  * Zeigt den groben Aufbau einer einzelnen Seite oder Maske.
+  * Fokus: Struktur und Anordnung der Inhalte.
+Wireflow:
+  * Kombination aus User Flow und Wireframe.
+  * Zeigt sowohl den Ablauf als auch den Aufbau der einzelnen Seiten.