Nielsens Heuristiken

Von Nielsen et al. wurden 10 Heuristiken für die Bewertung eines User Interfaces zusammengestellt.

  1. Sichtbarkeit des Systemzustands: User Systemzustand jederzeit bewusst machen
  2. Abgleich von System und der realen Welt: Bekannte Objekte nutzen, Metaphern herstellen
  3. User Kontrolle und Freiheit: Notausgang aus unerwünschten Situationen immer ermöglichen
  4. Konsistenz und Standards: Plattformkomform arbeiten, Nutzer soll sich nicht neu orientieren müssen
  5. Fehlerprävention: Fehler durch erneute Abfragen verhindern, „Submit“ oder „Abbruch“ erkennbar
  6. Erkennen statt Erinnern: Aktionen auf Objekten sichtbar machen, dass Nutzer kein Langzeitgedächtnis braucht
  7. Flexibilität und Effizienz: Um erfahrenen Usern eine schnellere Nutzung zu ermöglichen
  8. Ästhetik und Minimalistisches Design: was wird wirklich benötigt, der Rest zerstört Ordnung
  9. Erkennen, Diagnostizieren und Erholen von Fehlern: sollte in menschenfreundlicher Sprache erfolgen
  10. Hilfen und Dokumentationen: schnell auffindbar und gut verständlich

[LU#9, 09-1_HCI_Evaluation_Inspections_and_Quantifications.pdf, Slides: 6-11, 13-15, 17-18]
{Video: 09-1 HCI Evaluation Inspections and Quantifications, Start: 5:28, End: 28:38}

[A#6, P5] First interactive low-fidelity prototype

(1) Summarize the feedback you received regarding your storyboard.

Bei den Feedbacks war es besonders hilfreich, von den Kommilitonen mitgeteilt zu bekommen, dass im Storyboard die Filterfunktion fehlte. Diese müsste noch nachträglich eingebaut werden. Denn – hier bezogen auf das Problem Statement und das Ziel der Persona – geht es ja um das Finden einer Route, die 30 Minuten dauert. Die Filterfunktion haben wir in den Klickdummy nicht mit umgesetzt, nur die Schaltfläche hinzugefügt.

Wir haben außerdem Feedback zu unserem Problem Statement bekommen, was uns nützliche Tipps zur weiteren Nutzung am Problem Statement gibt.

Weiterhin haben wir den Tipp bekommen, dass man möglicherweise noch die Möglichkeit haben sollte sich die Route per Fax zuschicken zu lassen.

(2) Develop an interactive paper prototype.

Wir haben uns entschieden, uns stark an unserem Storyboard zu orientieren und alle Funktionen in den Papieprototyp einzubinden, die dort gezeigt und benötigt werden. Das bedeutet, dass man die im Storyboard dargestellten Funktionalitäten auch im Klickdummy ausprobieren kann. Wir haben die Anmelde-Funktion gewählt und den Schnellplaner, mit dem man eine Route planen kann.

Wir haben für die Umsetzung des Klickdummies das Programm Marvel benutzt, nachdem wir zuvor Adobe XD angeschaut haben und dabei keine Möglichkeit gefunden, den fertigen Prototypen später teilen zu können (ohne bezahlen zu müssen). Figma hat uns von den ganzen Funktionalitäten her etwas erschlagen, während Marvel uns einfacher, aber funktional passender erschien.

Die Screens und Module für unseren Prototypen (Klickdummy) haben wir mit PowerPoint oder direkt mit Marvel erstellt. Einige Modulteile, wie Scrollbalken haben wir per Google Search und Screenshots hinzugefügt. Aufgefallen ist uns, dass Marvel die Bilder stets leicht verwaschen darstellt im Bearbeitenmodus; beim Abspielen des Prototypen sind die Bilder schärfer.

Die Verlinkungen der einzelnen Seiten war mit Marvel einfach und ziemlich intuitv. Allerdings fehlt uns das Feature, eine Seite auch auf sich selber verlinken zu können, was aber nicht allzu wichtig ist.

Unser Klickdummy bildet nur den Use Case ab, angemeldet eine Route auszusuchen. Das entspricht unserem Problem Statement von letzter Woche, dem im Storyboard abgebildetem Szenario und teilweise unserem BPMN-Modell. Das BPMN-Modell wird nur teilweise von vom Klickdummy umgesetzt, da es dort möglich ist, auch unangemeldet eine Route auszuwählen – was im Klickdummy nicht möglich ist.

Unser aktuelles Design hat schon mehr Buttons als im Prototypen klickbar sind. Da der Prototyp die Aufgabe der schnellen Routenplanung (Problem Statement) lösen und zeigen soll, ist das im Moment ausreichend. Allerdings könnten die nicht klickbaren Buttons für einen möglichen Tester bzw. eine mögliche Testerin verwirrend sein. Marvel hilft hier bereits, indem mögliche Verlinkungen bei einem Klick ins „Nichts“ gehighlighted werden.

Es fehlt immer noch ein einheitliches Farbschema; wir haben aber Annäherungen zur Primärfarbe, die wir dann auch versucht haben, möglichst für die Primärfunktionen (Routen Planer) zu nutzen – soweit es Marvel zuließ.

Weiterhin werden noch nicht verschiedene Endgeräte und deren Designs berücksichtigt. Der Prototyp bildet nur den Desktop/Laptop ab und keine Smartphones. Außerdem erkennt man noch nicht die Designsprache sowie die Einschränkungen durch die Nutzung von möglichen Frameworks (GUI).

Link zum Prototypen: https://marvelapp.com/prototype/5ah69h7

[A#6, P4] Ideation and Storyboard

(1) Finish your hypothesis statement and document it.

Problem Statement

Harry Hausen (Bürokaufmann)

braucht eine Möglichkeit eine 30-min lange Gassiroute mit seinem 2-jährigen Schäferhund – innerhalb von 15 min – zu planen,

weil er zeitnah nach der Arbeit direkt los gehen will und vorher keine Zeit hatte, die Route zu planen.

Wir wissen, dass es erfüllt sein wird, wenn wir beobachten können, dass Harry nach dem Öffnen der App in spätestens 15 min mit seinem Hund Gassi geht und nach 30min frühestens zurückkommt.

Hypothesis

Wir glauben, dass wir durch die Vorschau von möglichen Routen mit sehenswerten Orten

für Harry 

erreichen werden, dass Harry und sein Hund eine schöne und zeitlich passende Route gelaufen sind.

(2) Conceptual models for task analysis

Wir haben uns für das BPMN entschieden, da wir uns alle noch nicht damit auskennen und die Chance nutzen wollen, was Neues zu lernen! Und wir finden, dass BPMN für uns den Ablauf mit den verschiedenen Verzweigungen besser darstellen kann. Die Erstellung des BPMN Diagramms war allerdings etwas aufwändiger, da wir dabei auch die Abfolge der Aktionen diskutieren konnten. Zu Beginn hatten wir sehr verschiedene Vorstellungen, wie der Nutzer beim Erstellen der Gassiroute durch unsere Anwendung geführt wird. Zum Ende hin sind unsere Vorstellungen enger aneinander gerückt und wir haben viele Kompromisse gefunden.

BPMN der Aktion: Gassi planen

(3) Find inspirations, analogies, and create a moodboard.

Es folgt ein Screenshot unseres Moodboards. Unsere Ideen/Inspirationen sind hier bunt gemischt. (http://www.gomoodboard.com/boards/4B52wcAW/share)

(4) Create individual sketches.

https://jamboard.google.com/d/1Jj_kHjAtj057SGX4zGAhn4eq3Gfq77QaXvoxhlQfgEM/edit?usp=sharing
Unsere Sketches haben wir, nachdem alle ihre erstellt haben, in einem google jamboard zusammengetragen und dort auch mit der dot-voting Methode abgestimmt (nächster Punkt).

kleiner Ausschnitt der Übersicht der Seiten im jamboard (sind nicht alle gleichzeitig sichtbar)

(5) Share your sketches with your team.

(http://www.gomoodboard.com/boards/qQSqy_P0/share) Hier ist schon eine Zusammenfassung der Sketches, die am meisten Punkte bekommen haben.

derselbe Ausschnitt, nur sieht man hier Klebezettel mit den wichtigsten Punkten (Voting)
Hier sind alle Sketches die wir mit aufnehmen wollen in den Prototypen auf einer Seite gesammelt.

Wir haben uns auf eine Startpage/Landingpage geeinigt, bei der man angemeldet ist und auch auf eine Menüleiste, die, egal wo man ist, immer zu sehen ist. Außerdem haben wir uns zwei Routenansichten ausgewählt: eine für eigene Routen und eine für die Schnellauswahl & das Planen von Routen. Jede dieser Liste an Routen soll man filtern können, wofür wir auch entsprechende Sketches ausgewählt haben. Wir haben außerdem bereits Iconentwürfe und eine mögliche Anmeldemaske. Lediglich das Farbschema haben wir in keinem der Sketches als gut genug befunden und haben uns noch für keines entschieden, aber beschlossen, dass wir die Webseite nach den Features colorcoden wollen.

(6) Condense your results from the previous step into a storyboard.

Data Sampling

Stichproben: Um eine Population darzustellen, werden Stichproben genommen. Eine komplette Stichprobe würde eine gesamte Population repräsentieren können, das ist aber selten. Bei der Stichprobennahme gibt es erst einmal zwei Unterteilungen: die Wahrscheinlichkeits-Stichproben und die Nicht-Wahrscheinlichkeitsproben. Bei der ersten Kategorie gibt es das „Simple Random“ und das „Stratified“. Beim Simple Random, wie der Name schon sagt, werden Personen zufällig aus der Population genommen. Bei der geschichteten Methode werden die Personen in Gruppen geordnet (z.B. Geschlecht, Alter, …), sortiert, noch einmal in Gruppen geordnet (je nachdem wie groß die Gruppe ist) und dann daraus Personen (zufällig) gewählt. Die „Non-probability“ Stichprobe geht von den Probanden selbst aus.

[LU#02, 02_1_HCI_Introducing_Data_Collection.pdf, Slides: 7-8]

{Video: 02-1 HCI Overview Data Collection, Start: 8:50, End: 14:40}