modul:m322:learningunits:lu06:theorie:lu6-kapitel_4

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
modul:m322:learningunits:lu06:theorie:lu6-kapitel_4 [2024/03/28 14:07] – angelegt - Externe Bearbeitung 127.0.0.1modul:m322:learningunits:lu06:theorie:lu6-kapitel_4 [2025/03/14 17:26] (aktuell) – alte Version wiederhergestellt (2024/03/28 14:07) emastrandrea
Zeile 3: Zeile 3:
 aus dem englischen sinngemäss übersetzt</html>\\ aus dem englischen sinngemäss übersetzt</html>\\
 ===Wireflows einer Benutzerführung=== ===Wireflows einer Benutzerführung===
-//Ein Wireflow ist ein hybrides Designdokument, das Wireframing mit Flussdiagrammen kombiniert. Sie sind im Wesentlichen Wireframes, die Benutzerführung und Systemablauf zeigen.//\\+//Ein Wireflow ist ein hybrides Designdokument, das Wireframing mit User Flows kombiniert. Sie sind im Wesentlichen Wireframes, die Benutzerführung und Systemablauf zeigen.//\\
 \\ \\
 Durch einfaches Hinzufügen von Pfeilen und Anmerkungen zwischen den Wireframes (Screens) werden die Pfade angezeigt, die ein Benutzer bei der Verwendung einer Anwendung einschlagen kann. Diese kleinen Änderungen an Wireframes kommunizieren die visuellen Änderungen an der Mensch-Maschinen-Schnittstelle und beschreiben gleichzeitig Zustandsänderungen und Sequenzen in der Benutzerinteraktion.\\ Durch einfaches Hinzufügen von Pfeilen und Anmerkungen zwischen den Wireframes (Screens) werden die Pfade angezeigt, die ein Benutzer bei der Verwendung einer Anwendung einschlagen kann. Diese kleinen Änderungen an Wireframes kommunizieren die visuellen Änderungen an der Mensch-Maschinen-Schnittstelle und beschreiben gleichzeitig Zustandsänderungen und Sequenzen in der Benutzerinteraktion.\\
 {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic1.png?600|}}\\ {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic1.png?600|}}\\
 //Abb. 6-5: Beispiel eines Wireflows//\\ //Abb. 6-5: Beispiel eines Wireflows//\\
-In diesem Text wird aufgezeigt, wie diese Technik im Designprozess eingesetzt werden kann. Zunächst werden die verschiedenen Arten von Design-Artefakten vorgestellt, die Produktdesigner für die Gestaltung von Schnittstellen und die Erstellung von Flussdiagrammen verwenden. Schließlich wird aufgezeigt, warum Wireflows das am besten geeignete Werkzeug für die gleichzeitige Kommunikation eines Schnittstellen- und Interaktionsdesigns ist. +In diesem Text wird aufgezeigt, wie diese Technik im Designprozess eingesetzt werden kann und warum Wireflows ein gut geeignetes Werkzeug für die gleichzeitige Kommunikation eines Schnittstellen- und Interaktionsdesigns sind. 
-===Vergleich von Wireframes mit Flussdiagrammen=== +===Grundlegende Elemente von Wireflows=== 
-Wir beginnen mit einem Vergleich von Wireframes mit anderen Techniken zur Gestaltung von Abläufen und fahren dann mit der Gestaltung eines Wireflows fort.\\+Wir beginnen mit einem Vergleich von Wireframes und User Flows zur Gestaltung von Abläufen und fahren dann mit der Gestaltung eines Wireflows fort.\\
 \\ \\
 **Wireframes**\\ **Wireframes**\\
Zeile 20: Zeile 20:
 Dieser Wireframe vermittelt eine gute Vorstellung davon, welche Elemente auf den Produktseiten eines Shops erscheinen und wo sie angeordnet werden sollten. Einige dieser Oberflächenelemente lösen jedoch Aktionen aus. Zum Warenkorb hinzufügen (Add to Cart) ist hier ein offensichtlicher Auslöser. Es muss daher explizit festlegt werden, was passiert, wenn der Benutzer diese Aktion auslöst. Um dies zu tun, könnte ein Produktdesigner typischerweise jeden geänderten Zustand drahtlos darstellen, wenn der Benutzer die Kaufabwicklung durchläuft.\\ Dieser Wireframe vermittelt eine gute Vorstellung davon, welche Elemente auf den Produktseiten eines Shops erscheinen und wo sie angeordnet werden sollten. Einige dieser Oberflächenelemente lösen jedoch Aktionen aus. Zum Warenkorb hinzufügen (Add to Cart) ist hier ein offensichtlicher Auslöser. Es muss daher explizit festlegt werden, was passiert, wenn der Benutzer diese Aktion auslöst. Um dies zu tun, könnte ein Produktdesigner typischerweise jeden geänderten Zustand drahtlos darstellen, wenn der Benutzer die Kaufabwicklung durchläuft.\\
 \\ \\
-**Flussdiagramme**\\ +**User Flows**\\ 
-Flussdiagramme können für die Gestaltung von Interaktionen verwendet werden.\\ +User Flows (Nutzerfluss) können für die Gestaltung von Interaktionen verwendet werden.\\ 
-Es gibt mehrere Arten von Flussdiagrammen, die bei der Gestaltung von Softwareprodukten nützlich sind - Aufgabenflüsse, Benutzerflüsse und Flussdiagramme. Die Grenzen zwischen den einzelnen Diagrammtypen sind fließend, und der Begriff "Benutzerfluss" wird häufig synonym mit "Aufgabenfluss" und "Flussdiagramm" verwendet. Im Allgemeinen eignet sich diese Diagrammklasse hervorragend zur Darstellung von gerichteten Abläufen und/oder entscheidungsbasierter Logik.\\+Es gibt mehrere Arten von Flussdiagrammen, die bei der Gestaltung von Softwareprodukten nützlich sind - Aufgabenflüsse, Benutzerflüsse und Flussdiagramme. Die Grenzen zwischen den einzelnen Diagrammtypen sind fliessend, und der Begriff "Nutzerfluss" wird häufig synonym mit "Aufgabenfluss" und "Flussdiagramm" verwendet. Im Allgemeinen eignet sich diese Diagrammklasse hervorragend zur Darstellung von gerichteten Abläufen und/oder entscheidungsbasierter Logik.\\
 Aufgabenabläufe sind nützlich, um zu entwerfen, wie ein Benutzer eine Aufgabe erledigen wird. Sie werden in der Regel als lineare Abfolge von Schritten dargestellt und können auf einer hohen Ebene entworfen werden oder sehr detailliert sein, indem eine Aufgabe in Teilaufgaben unterteilt wird. Sie können das Ergebnis einer Aufgabenanalyse sein, bei der beobachtet wird, wie Benutzer Aufgaben erledigen.\\ Aufgabenabläufe sind nützlich, um zu entwerfen, wie ein Benutzer eine Aufgabe erledigen wird. Sie werden in der Regel als lineare Abfolge von Schritten dargestellt und können auf einer hohen Ebene entworfen werden oder sehr detailliert sein, indem eine Aufgabe in Teilaufgaben unterteilt wird. Sie können das Ergebnis einer Aufgabenanalyse sein, bei der beobachtet wird, wie Benutzer Aufgaben erledigen.\\
 Aufgabenflüsse sind auch bei der Planung der optimalen Pfade für die Aufgabenerledigung nützlich, zumal sie sich leicht in natürlicher Sprache ausdrücken lassen. Man könnte sie auch als visuelle Antworten auf User Stories betrachten, da sie auf ähnliche Weise geschrieben sind.\\ Aufgabenflüsse sind auch bei der Planung der optimalen Pfade für die Aufgabenerledigung nützlich, zumal sie sich leicht in natürlicher Sprache ausdrücken lassen. Man könnte sie auch als visuelle Antworten auf User Stories betrachten, da sie auf ähnliche Weise geschrieben sind.\\
Zeile 30: Zeile 30:
 Aufgabenflüsse eignen sich zwar für die Vorhersage, wie der Benutzer eine Aufgabe erledigt, aber Abweichungen von diesen idealen Pfaden werden in der Regel nicht untersucht.\\ Aufgabenflüsse eignen sich zwar für die Vorhersage, wie der Benutzer eine Aufgabe erledigt, aber Abweichungen von diesen idealen Pfaden werden in der Regel nicht untersucht.\\
 Flussdiagramme sind gut geeignet, um den Weg des Benutzers bei der Interaktion mit dem System (den Benutzer-Taskflow), die Entscheidungen, die er auf dieser Reise trifft, und die reaktiven Backend-Prozesse, die er möglicherweise auslöst, darzustellen.\\ Flussdiagramme sind gut geeignet, um den Weg des Benutzers bei der Interaktion mit dem System (den Benutzer-Taskflow), die Entscheidungen, die er auf dieser Reise trifft, und die reaktiven Backend-Prozesse, die er möglicherweise auslöst, darzustellen.\\
-Die Diagramme enthalten Start- und Endpunkte, Entscheidungspunkte, den gerichteten Fluss des Systems und die Reaktion des Systems auf die Eingaben des Benutzers, einschließlich der Art und Weise, wie Daten verarbeitet und transportiert werden.\\+Die Diagramme enthalten Start- und Endpunkte, Entscheidungspunkte, den gerichteten Fluss des Systems und die Reaktion des Systems auf die Eingaben des Benutzers, einschliesslich der Art und Weise, wie Daten verarbeitet und transportiert werden.\\
 {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic4.png?400|}}\\ {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic4.png?400|}}\\
 //Abb. 6-8: Flussdiagramm zu Kaufprozess//\\ //Abb. 6-8: Flussdiagramm zu Kaufprozess//\\
-Diese Art von Flussdiagrammen eignet sich gut, um den Benutzer-/Systemfluss gründlicher darzustellen, indem sie die Verzweigung von Pfaden an Entscheidungspunkten und den Datenfluss durch das System zeigen. Sie sind zwar gut geeignet, diese Komplexität innerhalb des Produkts darzustellen, zeigen aber nicht das Design der Schnittstelle an verschiedenen Stellen. An dieser Stelle helfen Wireflows, die Lücke zwischen Wireframes und Flussdiagrammen zu schließen.\\+Sie sind zwar gut geeignet, die Komplexität innerhalb des Produkts darzustellen, zeigen aber nicht das Design der Schnittstelle an verschiedenen Stellen. An dieser Stelle helfen Wireflows, die Lücke zwischen Wireframes und Flussdiagrammen zu schliessen.\\
 \\ \\
 **Wireflows**\\ **Wireflows**\\
 Wireflows vereinen die Vorteile von Wireframes und Flussdiagrammen. Der Begriff Wireflow wurde von der Nielsen Norman Group geprägt, nachdem sie beobachtet hatte, wie sich die Praxis in diesem Bereich entwickelte.\\ Wireflows vereinen die Vorteile von Wireframes und Flussdiagrammen. Der Begriff Wireflow wurde von der Nielsen Norman Group geprägt, nachdem sie beobachtet hatte, wie sich die Praxis in diesem Bereich entwickelte.\\
 Wireflows zeigen visuell, wie sich Teile der Benutzeroberfläche verändern, wenn der Benutzer mit der Anwendung interagiert. Zusätzlich können Anmerkungen hinzugefügt werden, um Faktoren wie die Übertragung von Daten innerhalb des Systems anzuzeigen.\\ Wireflows zeigen visuell, wie sich Teile der Benutzeroberfläche verändern, wenn der Benutzer mit der Anwendung interagiert. Zusätzlich können Anmerkungen hinzugefügt werden, um Faktoren wie die Übertragung von Daten innerhalb des Systems anzuzeigen.\\
-Wireflows können einfach als eine Erweiterung der Wireframing-Praxis betrachtet werden, um Benutzerflussinformationen direkt in das Schnittstellendesign einzufügen. Das einfachste Beispiel zeigt lediglich eine Abfolge von Ereignissen bei der Ausführung einer Aufgabe. Sie können einem Storyboard mit Anmerkungen ähneln. Dies veranschaulicht im Wesentlichen einen Aufgabenablauf mit dem Zusatz von Wireframes.\\+Wireflows können einfach als eine Erweiterung der Wireframing-Praxis betrachtet werden, um Benutzerflussinformationen direkt in das Schnittstellendesign einzufügen. Das einfachste Beispiel zeigt lediglich eine Abfolge von Ereignissen bei der Ausführung einer Aufgabe.\\
 {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic5.png?400|}}\\ {{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic5.png?400|}}\\
 //Abb. 6-9: Veranschaulichung des Ablaufs anhand eines Wireflows//\\ //Abb. 6-9: Veranschaulichung des Ablaufs anhand eines Wireflows//\\
Zeile 44: Zeile 44:
 Die komplexesten Beispiele können Flussdiagrammen ähneln und zeigen die Art von Entscheidungsverzweigungen, Backend-Prozessen und Datenbewegungen, wie sie in detaillierten Flussdiagrammen erwartet werden. Die komplexesten Beispiele können Flussdiagrammen ähneln und zeigen die Art von Entscheidungsverzweigungen, Backend-Prozessen und Datenbewegungen, wie sie in detaillierten Flussdiagrammen erwartet werden.
  
-===Wie man einen Wireflow erstellt.=== +===Wie man einen Wireflow erstellt=== 
-Produktdesigner verwenden schon seit langem hybride Methoden für das Wireframing. Häufig wird dabei eine Einzelansicht (Key Screen) um Teileansichten ergänzt, um das dynamische Verhalten zu zeigen. \\ +Produktdesigner verwenden schon seit langem hybride Methoden für das Wireframing. Es ist üblich, ganze Schlüsselbildschirme (Key Screens) zu reproduzieren und Zustandsänderungen zu zeigen.\\ 
-Eine weitere gängige Wireflow-Praxis ist das Design von mobilen Anwendungen. Da die Ansichtsfenster von Mobiltelefonen im Vergleich zu Desktop-Anwendungen und Websites klein sind, ist es üblich, ganze Schlüsselbildschirme (Key Screen) zu reproduzieren und Zustandsänderungen zu zeigen.\\+Häufig wird dabei eine Einzelansicht (Key Screen) um Teileansichten ergänzt, um das dynamische Verhalten zu zeigen. \\
 Die Erstellung von Wireflows kann in 3 einfache Schritte, durchgeführt werden:\\ Die Erstellung von Wireflows kann in 3 einfache Schritte, durchgeführt werden:\\
-1. Beschreibender Text des Ablaufs oder Flussdiagramm\\+1. Beschreibender Text des Ablaufs oder User Flow\\
 2. Definieren von Key Screens\\ 2. Definieren von Key Screens\\
 3. Screens verbinden\\ 3. Screens verbinden\\
 \\ \\
 **1. Beschreibender Text**\\ **1. Beschreibender Text**\\
-Oftmals wird mit der Beschreibung des Bedarfs begonnen und das Problem in einer User Story festgehalten. Dann kann, wie im obigen Beispiel des Aufgabenablaufs gezeigt, eine Lösung in Worte gefasst oder ein einfacher Aufgabenablauf verwenden werden.\\+Oftmals wird mit einem Szenario oder einer Problemstellung begonnen. Dann kann eine Lösung in Worte gefasst und ein einfacher Aufgabenablauf festgehalten werden.\\
 **2. Definieren von Key Screens**\\ **2. Definieren von Key Screens**\\
 Als Nächstes werden die wichtigsten Bildschirme (Key Screens) der Schnittstelle erstellt. Eine gute Möglichkeit, dies zu tun, ist es, in Form von Start- und Endpunkten zu denken. Im Beispiel der Aufgabe "Kauf eines Hoodies" ist der Startpunkt die Produktseite und der Endpunkt die Bestätigungsseite der WEB-Anwendung.\\ Als Nächstes werden die wichtigsten Bildschirme (Key Screens) der Schnittstelle erstellt. Eine gute Möglichkeit, dies zu tun, ist es, in Form von Start- und Endpunkten zu denken. Im Beispiel der Aufgabe "Kauf eines Hoodies" ist der Startpunkt die Produktseite und der Endpunkt die Bestätigungsseite der WEB-Anwendung.\\
Zeile 73: Zeile 73:
  
 ===Schlussfolgerung=== ===Schlussfolgerung===
-Flussdiagramme helfen dabei, optimale Pfade für die Erledigung von Benutzeraufgaben zu definieren+User Flows helfen dabei, optimale Pfade für die Erledigung von Benutzeraufgaben zu definieren.
 <html><sup>(1)</sup></html> und es können auch potenzielle Abweichungen von Best-Case-Szenarien vorhergesagt werden. Weiter kann aufgezeigt werden, wie der Benutzer wieder auf den richtigen Weg kommt (oder einen anderen beabsichtigten Pfad einschlägt).\\ <html><sup>(1)</sup></html> und es können auch potenzielle Abweichungen von Best-Case-Szenarien vorhergesagt werden. Weiter kann aufgezeigt werden, wie der Benutzer wieder auf den richtigen Weg kommt (oder einen anderen beabsichtigten Pfad einschlägt).\\
 Eine umfassende Untersuchung des Ablaufs stellt sicher, dass die Anwendung bereit ist, mit gut formulierten Meldungen zu helfen Eine umfassende Untersuchung des Ablaufs stellt sicher, dass die Anwendung bereit ist, mit gut formulierten Meldungen zu helfen
  • modul/m322/learningunits/lu06/theorie/lu6-kapitel_4.1711631267.txt.gz
  • Zuletzt geändert: 2024/03/28 14:07
  • von 127.0.0.1