Arten von Prototypen Prototyp-Evaluation UI-Patterns

Transkript

1 HCI-10a GUI-Prototypen Arten von Prototypen Prototyp-Evaluation UI-Patterns BHT Berlin Ilse Schmiedecke 2010

2 Wozu UI-Prototypen? Usability steht und fällt mit der UI-Gestaltung Iterative Entwicklung Beteiligung von Benutzern Verschiedene Stufen der Genauigkeit Kleinigkeiten entscheiden oft über Akzeptanz! Prototyp-Iterationen sind in der Norm festgeschrieben! DIN EN ISO (Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme) schmiedecke 10 MCK 2

3 Theoretische Kategorisierung von Prototypen High Fidelity Low Fidelity Dimensionen (nach Mc Curdy) Funktionsumfang Funktionstiefe Darstellungstreue Interaktivität Datengehalt schmiedecke 10 MCK 3

4 Pragmatische Kategorisierung von Prototypen S.Ridder begleitet von: CardSorting, Storyboard schmiedecke 10 MCK 4

5 Startschuss: Card Sorting Aus einem Usability-Bericht: "Allerdings wirkten mir einige Funktionen zu versteckt, z.b. das Anzeigen der Seitenzahlen über Einfügen Feldbefehl Seitennummer. Ohne die Hilfe-Funktion wäre ich nicht darauf gekommen." Am Anfang des Prototyping steht die Ordnung, d.h. die Organisation der Informationen und Befehle in logischen Kategorien z.b. für Menuzuordnungen. schmiedecke 10 MCK 5

6 Startschuss: Card Sorting In welchem Menü steckt nochmal? Alle Informations- und Funktionseinheiten auf Karten schreiben Kategorien auf Karten schreiben, Karten einsortieren lassen oder Karten sortieren lassen, dabei Kategorien benennen lassen schmiedecke 10 MCK 6

7 Card Sorting: Menüpunkte eines Mailprogramms schmiedecke 10 MCK 7

8 Papier-Prototyp alles, was schnell geht von sketchy bis akkurat schnell zu ändern wirkt nicht wertvoll schafft keine Distanz schmiedecke 10 MCK 8

9 Papier-Alternativen Für die Gruppenkommunikation oft besser: Whiteboard Overhead-Projektor Pinwand Flipchart Speichern unter. Jede stabile Zwischenstufe fotografieren schmiedecke 10 MCK 9

10 UI-Patterns Pattern (=Muster) Gestaltungsoption für einen bestimmten Aufgabentyp Design Patterns im Software Engineering UI Patterns im Interface-Design Finden Sie mindestens 3 Gestaltungsbeispiele! Liste mit Detailanzeige (Liste bleibt sichtbar) Mögliche UI-Aufgabentypen Zerlegung einer langen Liste in darstellbare Seiten Navigation mit Untermenüs Visuelle Auflistung gleichwertiger Elemente (Fotos) schmiedecke 10 MCK 10

11 UI-Patterns Es gibt div. Online-Sammlungen von UI-Patterns mit guten Kategorien (Aufgabentypen) Patternbeschreibung besteht aus Kategorie und Zweck Spezifische Vorteile, Schwächen Screenshot(s), Anwendungsbeispiele Alternativen Evtl. HTML-Code schmiedecke 10 MCK 11

12 Kategorie "Dealing with Data" schmiedecke 10 MCK 12

13 schmiedecke 10 MCK 13

14 Prototyping mit UI-Patterns Prototyp-Erstellung etwa wie Papierprototyp: 1. Gesamtaufbau wählen (Navigation oben/rechts/links, Kopfbereich, Spaltenzahl ), ggf. Pattern benutzen 2. Patterns für einzelne Seitenbereiche wählen (nicht alle ) 3. Protoyp zusammenkleben - Screenshots ausdrucken und aufkleben - Screenshots digital montieren ohne Design/Farbschema/Fonts anzupassen schmiedecke 10 MCK 14

15 Yahoo-Schablonen für die digitale Montage schmiedecke 10 MCK 15

16 Das Storyboard Dynamische UI-Sicht Navigationsgraph mit visualisierten Knoten Gut zum Diskutieren von Anwendungsfällen Quelle: IBM schmiedecke 10 MCK 16

17 Digitale Prototypen Wireframes topologische Entwürfe alle relevanten Details vorhanden zunächst Abstraktion von Farbe und Gestaltung zunehmende Ausgestaltung möglich zunehmende Datentreue möglich Mockups grafisch gestaltete Entwürfe Click-Mockups möglich (z.b. mit Flash) nicht ausführbar, keine Funktionalität Quelle:gliffy.com Zweck Usability-Bewertung durch größere Gruppe Implementierungsvorlage schmiedecke 10 MCK 17

18 Softwareprototypen Prototypische Realisierung in der Zieltechnologie Funktionalität anschließbar Click-Prototyp oder Funktionaler Prototyp Für die iterative Weiterentwicklung bis zur Endform Vorteile Echte Usability-Tests möglich Kompatibilität mit Programmlogik testbar Nachteil Aufwand schmiedecke 10 MCK 18

19 Evaluation von Prototypen Jeder Prototyp ist evaluierbar! Experten-Evaluation ist immer möglich Testbenutzer Simulieren Anwendungsfälle und kommentieren ihr "Nutzungserlebnis" Bewerten ohne vorgegebene Kriterien ("Bauchgefühl") Beantworten gezielte Fragen (Interview, Fragebogen) Je einfacher der Prototyp umso besser fokussiert er den Blick auf die essentielle Interaktion umso einfacher lässt er sich unmittelbar bearbeiten umso geringer ist die Scheu des Testers, Änderungswünsche zu äußern. schmiedecke 10 MCK 19

20 Evaluation von Prototypen High-Fidelity-Prototypen ermöglichen präzisere Bewertung Zeitmessungen für Interaktionen Eyetracking, um die Orientierung zu untersuchen Handhabungsbewertung nach dem 6-Ebenen-Modell Visuelle Eigenschaften Erkennbarkeit, Lesbarkeit, Informationsdarstellung, Informationsfülle, Chunking Verständniseigenschaften Bezeichnungen, Texte, Icons Designbewertung schmiedecke 10 MCK 20

21 Weiterlesen modeling.com/artifacts/uiprototype.htm schmiedecke 10 MCK 21

22 GUIs basteln leicht gemacht Jetzt fehlen noch Regeln für gute UIs schmiedecke 10 MCK 22