HCI-10a GUI-Prototypen - schmiedecke · 2017. 5. 10. · etwa wie Papierprototyp: 1.Gesamtaufbau...

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 ...


TFH Berlin

Theoretische Kategorisierung von Prototypen

§ High Fidelity – Low Fidelity

§ Dimensionen (nach Mc Curdy)– Funktionsumfang – Funktionstiefe– Darstellungstreue– Interaktivität– Datengehalt


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.


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


TFH Berlin

Card Sorting: Menüpunkte eines Mailprogramms


TFH Berlin

Papier-Prototyp

§ alles, was schnell geht§ von sketchy bis

akkurat

§ schnell zu ändern§ wirkt nicht wertvoll§ schafft keine Distanz


TFH Berlin

Papier-Alternativen

Für die Gruppenkommunikation oft besser:

§ Whiteboard§ Overhead-Projektor§ Pinwand§ Flipchart

Speichern unter….§ Jede stabile Zwischenstufe fotografieren


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)– …


Finden Sie mindestens 3 Gestaltungs-

beispiele!

TFH Berlin

Papierprototypen im Usability-Test

§ Benutzeraktionen und Systemreaktionen werden simuliert§ Youtube: http://youtu.be/9wQkLthhHKA


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


TFH Berlin

Kategorie "Dealing with Data"


TFH Berlin


www.welie.com

TFH Berlin

... es gibt noch viele andere ...


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


TFH Berlin

Das Storyboard

§ Dynamische UI-Sicht§ Navigationsgraph mit visualisierten Knoten§ Gut zum Diskutieren von Anwendungsfällen


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


Quelle:gliffy.com

TFH Berlin

Kostenlose Wireframe- und LoFi-Mockup-Tools


moqups.com

wireframe.cc

TFH Berlin

Kostenlose Probeversionen HiFi-Prototyping


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


TFH Berlin

GUIs basteln leicht gemacht …

J

Jetzt brauchen wir noch Gestaltungsregelnund Evaluierungstechniken ...


HCI-10a GUI-Prototypen - schmiedecke · 2017. 5. 10. · etwa wie Papierprototyp: 1.Gesamtaufbau...

Documents

Transcript of HCI-10a GUI-Prototypen - schmiedecke · 2017. 5. 10. · etwa wie Papierprototyp: 1.Gesamtaufbau...