Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
TFH Berlin
HCI-10a GUI-Prototypen
Ø Arten von PrototypenØ Prototyp-EvaluationØUI-Patterns
© Ilse Schmiedecke 2010BHT Berlin
TFH Berlin
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 9241-210 (Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme)
© schmiedecke 10 MCK 2
TFH Berlin
... Entwurf ohne Benutzerbeteiligung ...
© schmiedecke 10 MCK 3
TFH Berlin
Theoretische Kategorisierung von Prototypen
§ High Fidelity – Low Fidelity
§ Dimensionen (nach Mc Curdy)– Funktionsumfang – Funktionstiefe– Darstellungstreue– Interaktivität– Datengehalt
© schmiedecke 10 MCK 4
TFH Berlin
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
TFH Berlin
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
TFH Berlin
Card Sorting: Menüpunkte eines Mailprogramms
© schmiedecke 10 MCK 7
TFH Berlin
Papier-Prototyp
§ alles, was schnell geht§ von sketchy bis
akkurat
§ schnell zu ändern§ wirkt nicht wertvoll§ schafft keine Distanz
© schmiedecke 10 MCK 8
TFH Berlin
Papier-Alternativen
Für die Gruppenkommunikation oft besser:
§ Whiteboard§ Overhead-Projektor§ Pinwand§ Flipchart
Speichern unter….§ Jede stabile Zwischenstufe fotografieren
© schmiedecke 10 MCK 9
TFH Berlin
UI-Patterns
§ Pattern (=Muster)– Gestaltungsoption für einen bestimmten Aufgabentyp– Design Patterns im Software Engineering– UI Patterns im Interface-Design
§ Mögliche UI-Aufgabentypen– Liste mit Detailanzeige (Liste bleibt sichtbar)– Zerlegung einer langen Liste in darstellbare Seiten– Navigation mit Untermenüs– Visuelle Auflistung gleichwertiger Elemente (Fotos)– …
© schmiedecke 10 MCK 10
Finden Sie mindestens 3 Gestaltungs-
beispiele!
TFH Berlin
Papierprototypen im Usability-Test
§ Benutzeraktionen und Systemreaktionen werden simuliert§ Youtube: http://youtu.be/9wQkLthhHKA
© schmiedecke 10 MCK 11
TFH Berlin
UI-Patterns
§ Es gibt div. Online-Sammlungen von UI-Patterns– mit guten Kategorien (Aufgabentypen)
§ Die Traditions-Sammlung http://ui-patterns.com
§ Patternbeschreibung besteht aus– Kategorie und Zweck– Spezifische Vorteile, Schwächen– Screenshot(s), Anwendungsbeispiele– Alternativen– Evtl. HTML-Code
© schmiedecke 10 MCK 12
TFH Berlin
Kategorie "Dealing with Data"
© schmiedecke 10 MCK 13
TFH Berlin
© schmiedecke 10 MCK 14
www.welie.com
TFH Berlin
... es gibt noch viele andere ...
© schmiedecke 10 MCK 15
https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns
TFH Berlin
Prototyping mit UI-Patterns
§ Prototyp-Erstellungetwa 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 montierenohne Design/Farbschema/Fonts anzupassen
© schmiedecke 10 MCK 16
TFH Berlin
Das Storyboard
§ Dynamische UI-Sicht§ Navigationsgraph mit visualisierten Knoten§ Gut zum Diskutieren von Anwendungsfällen
© schmiedecke 10 MCK 17
Quelle: IBM
TFH Berlin
Digitale Prototypen
§ LoFi-Wireframes– topologische Entwürfe– alle relevanten Details vorhanden– zunächst Abstraktion von Farbe und Gestaltung– zunehmende Ausgestaltung möglich– zunehmende Datentreue möglich
§ HiFi-Mockups– grafisch gestaltete Entwürfe– Click-Mockups möglich (z.B. mit Flash)– nicht ausführbar, keine Funktionalität
§ Zweck– Usability-Bewertung durch größere Gruppe– Implementierungsvorlage
© schmiedecke 10 MCK 18
Quelle:gliffy.com
TFH Berlin
Kostenlose Wireframe- und LoFi-Mockup-Tools
© schmiedecke 10 MCK 19
moqups.com
wireframe.cc
TFH Berlin
Kostenlose Probeversionen HiFi-Prototyping
© schmiedecke 16 MCK 20
proto.io
fluidui.com
TFH Berlin
Evaluation von Prototypen
§ Jeder Prototyp ist evaluierbar!
§ Experten-Evaluation – ist immer möglich J§ 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 21
TFH Berlin
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 22
TFH Berlin
GUIs basteln leicht gemacht …
J
Jetzt brauchen wir noch Gestaltungsregelnund Evaluierungstechniken ...
© schmiedecke 10 MCK 23