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

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
modul:m322:learningunits:lu06:theorie:lu6-kapitel_4 [2025/03/14 14:06] – emastrandreamodul:m322:learningunits:lu06:theorie:lu6-kapitel_4 [2025/03/14 17:26] (aktuell) – alte Version wiederhergestellt (2024/03/28 14:07) emastrandrea
Zeile 1: Zeile 1:
 ==== 4. Wireflow und Key Screen ==== ==== 4. Wireflow und Key Screen ====
-<html><span style="font-size:8px">Angelehnt an Artikel von Mike Angeles (mike@balsamiq.com) und https://www.collaborative-uxdesign.com/methods/konzept-wireflows<br/></html>\\ +<html><span style="font-size:8px">Artikel von Mike Angeles (mike@balsamiq.com)<br/> 
-===Einführung=== +aus dem englischen sinngemäss übersetzt</html>\\ 
-//Wireflows sind eine Kombination aus Wireframes (grafische Darstellungen von Benutzeroberflächen) und User Flows (sequenzielle Beschreibung von Benutzerinteraktionen), die verwendet werden, um das Zusammenspiel von Seiten und Interaktionen in einer Anwendung zu visualisieren und zu dokumentieren. Sie bieten einen detaillierten Überblick über den Ablauf der Benutzerinteraktionen und dienen als Grundlage für die Entwicklung und das Design von Benutzeroberflächen.//\\+===Wireflows einer Benutzerführung=== 
 +//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.\\
 {{: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 und warum Wireflows ein gut geeignetes Werkzeug für die gleichzeitige Kommunikation eines Schnittstellen- und Interaktionsdesigns sind.
 ===Grundlegende Elemente von Wireflows=== ===Grundlegende Elemente von Wireflows===
-Mit einem Wireflow können wir die in den Szenarien beschriebenen Interaktionen in Form von miteinander verknüpften Wireframes visualisieren. Abgebildet wird der Fluss der Szenarios.  +Wir beginnen mit einem Vergleich von Wireframes und User Flows zur Gestaltung von Abläufen und fahren dann mit der Gestaltung eines Wireflows fort.\\ 
-<br/> +\\
-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.\\ +
 **Wireframes**\\ **Wireframes**\\
 Wireframes (auch als Key Screens bezeichnet) eignen sich gut für die Darstellung statischer Schnittstellen.\\ Wireframes (auch als Key Screens bezeichnet) eignen sich gut für die Darstellung statischer Schnittstellen.\\
Zeile 19: 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.\\
 \\ \\
-**User Flow (Nutzerfluss)**\\+**User Flows**\\ 
 +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 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.\\
 +Die User Story «Der Benutzer möchte eine schnelle Möglichkeit, einzelne Kleidungsstücke zu kaufen» könnte durch einen Aufgabenablauf wie den folgenden dargestellt werden:\\
 +{{:modul:m322:learningunits:lu06:theorie:lu06-wirefram_pic3.png?400|}}\\
 +//Abb. 6-7: Aufgabenfluss für Kaufprozess//\\
 +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.\\
 +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|}}\\
 +//Abb. 6-8: Flussdiagramm zu Kaufprozess//\\
 +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**\\
-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.\\+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 31: 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=== 
-Es ist üblich, ganze Schlüsselbildschirme (Key Screen) zu reproduzieren und Zustandsänderungen 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.\\ 
-Die Erstellung von Wireflows kann in 3 einfachen Schritten durchgeführt werden:\\+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:\\
 1. Beschreibender Text des Ablaufs oder User Flow\\ 1. Beschreibender Text des Ablaufs oder User Flow\\
 2. Definieren von Key Screens\\ 2. Definieren von Key Screens\\
Zeile 39: Zeile 53:
 \\ \\
 **1. Beschreibender Text**\\ **1. Beschreibender Text**\\
-Basierend auf einem Szenario wird eine mögliche Lösung in Worte gefasst und ein einfacher Aufgabenablauf festgehalten.\\+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 (basierend auf Lösungsskizzen aus der Ideation Phase). 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.\\
 Ziel ist es, Bildschirme zu identifizieren, bei denen die Schnittstelle ihren Zustand ändert, z. B. wenn Daten während eines Prozesses wie dem Auschecken aus einem Geschäft dynamisch aktualisiert werden. Es könnte ein Formular verwendet werden, das nach und nach mehr Eingaben erfordert, z.B. Kontaktinformationen, Versandinformationen und Rechnungsinformationen in einer Ansicht. Jedes dieser Formulare müsste entworfen werden.\\ Ziel ist es, Bildschirme zu identifizieren, bei denen die Schnittstelle ihren Zustand ändert, z. B. wenn Daten während eines Prozesses wie dem Auschecken aus einem Geschäft dynamisch aktualisiert werden. Es könnte ein Formular verwendet werden, das nach und nach mehr Eingaben erfordert, z.B. Kontaktinformationen, Versandinformationen und Rechnungsinformationen in einer Ansicht. Jedes dieser Formulare müsste entworfen werden.\\
 **3. Bildschirme verbinden**\\ **3. Bildschirme verbinden**\\
Zeile 58: Zeile 72:
 ---- ----
  
-===Ergebnis und Schlussfolgerung=== +===Schlussfolgerung=== 
-Ein Wireflow ist nicht mehr lösungsneutral. Er spiegelt erste Designentscheidungen insbesondere im Bezug zur Informationsarchitektur und den verwendeten Patterns wider: Welche Interaktionskontexte gibt es, wie wird navigiert, welche Interaktionen sind notwendig?\\+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).\\ 
 +Eine umfassende Untersuchung des Ablaufs stellt sicher, dass die Anwendung bereit ist, mit gut formulierten Meldungen zu helfen 
 +<html><sup>(2)</sup></html>, im Gegensatz zu vagen Fehlertexten. Außerdem können nützliche Optionen angeboten werden, um weiterzukommen 
 +<html><sup>(3)</sup></html>, wenn ein Hindernis vorliegt, anstatt dass der Benutzer sich festgefahren fühlt und herausfinden muss, was er als Nächstes tun soll.\\
 Wie wir im obigen Vergleich gesehen haben, bieten uns Wireflows eine Reihe von Vorteilen gegenüber der Verwendung jeder einzelnen dieser Entwurfstechniken. Der Hauptgrund für die Verwendung von Wireflows besteht darin, dass Sie als Produktdesigner die Möglichkeit haben, die Schnittstelle und den Ablauf auf die effektivste Art und Weise mit einem einzigen Design-Artefakt visuell zu kommunizieren.\\ Wie wir im obigen Vergleich gesehen haben, bieten uns Wireflows eine Reihe von Vorteilen gegenüber der Verwendung jeder einzelnen dieser Entwurfstechniken. Der Hauptgrund für die Verwendung von Wireflows besteht darin, dass Sie als Produktdesigner die Möglichkeit haben, die Schnittstelle und den Ablauf auf die effektivste Art und Weise mit einem einzigen Design-Artefakt visuell zu kommunizieren.\\
 \\ \\
  • modul/m322/learningunits/lu06/theorie/lu6-kapitel_4.1741957600.txt.gz
  • Zuletzt geändert: 2025/03/14 14:06
  • von emastrandrea