interface design ingo l¨utkebohle termin 12iluetkeb/2005/session12.pdf · einleitung anforderungen...

Einleitung Anforderungen Heuristiken Gestaltung Usability

Techniken der ProjektentwicklungInterface Design

Ingo Lutkebohle

Termin 12

Ingo Lutkebohle Techniken der Projektentwicklung 1

Einleitung Anforderungen Heuristiken Gestaltung Usability Uberblick

Einordnung

Was bisher war

GUI-Architektur

Katalog von UI-Elementen

Use Cases mit festgelegten Zielen

Themen heute

Anforderungen an benutzbare GUIs (Usability)

Tips um Usability zu erreichen

Gestaltung von Oberflachen

Empirisches Testen von GUIs (Usability Engineering)


Einleitung Anforderungen Heuristiken Gestaltung Usability Acceptability Designprozeß

Kriterien fur akzeptable Software

Praktisch

Sozial

Nutzen

Kosten

Kompatibilität

Zuverlässigkeit

Zweckdienlichkeit

Usability

Leicht erlernbar

Effektiv nutzbar

Leicht zu merken

Wenige Fehlerquellen

Subjektiv angenehm

(Nielsen 1993, S. 25)



Was ist Usability?

Leicht erlernbarWie schnell konnen Neulinge produktiv arbeiten?

Effektiv nutzbarWie lange dauert die Erledigung von Aufgaben?

Leicht zu merkenIst der Wiedererkennungseffekt der Oberflache hoch?

Wenige FehlerquellenWie viele Fehler kommen vor und wie leicht lassen sie sich

ruckgangig machen?

Subjektiv angenehmArbeiten die Anwender gerne mit dem System?



Interdisziplinaritat von Interaction Design

Interface DesignEin-/Ausgabe, User Interface

Human-Computer-InteractionWissen, Kognition, Interaktion

KunstÄsthetik,Affekt,Emotion



Wieso nicht einfach auf Entwickler-Know-How vertrauen?

Handlungspotential der Benutzer ist unbegrenzt

Annahmen der Entwickler sind nicht gut genug!

Aus http://www.ok-cancel.com/comic/78.html


http://www.ok-cancel.com/comic/78.html


Ein moglicher Designprozeß

Verstehendas wirkliche Problem erfassen, User Tests

AbstrahierenHauptelemente, was ist wichtig

StrukturierenBeziehungen, Ordnungen, Prioritaten

Reprasentierenbildlich/klanglich, UI-Skizze, Prototyping

Details ausarbeitenFarben, Fonts, Icon-Stile, Ubergange

Iterativ wiederholen!


Einleitung Anforderungen Heuristiken Gestaltung Usability Sprache Feedback Fehlerbehandlung

Heuristiken

Ein paar allgemeine Hinweise zu benutzbaren Programmen.

Kontext des Benutzers mit einbeziehen:1 Aufgabenorientiertes Design (use Use Cases!)2 Performanceerwartungen

Oberflachen konsistent (nicht unbedingt exakt gleich)

unmittelbares Feedback wichtig, gerade bei langeren Tasks

Fehlerquellen identifizieren und entfernen



Sprache des Anwenders sprechen

Begriffe der Domane verwenden

Texte aus der Sicht des Anwenders schreiben

Keine doppelten Verneinungen

Weniger ist mehr

Entwickler-Jargon ersetzen1 mogliche Ersetzungen aufstellen2 Anwender abstimmen lassen



Feedback durch das Programm

Muß alle notige Info enthaltenz.B. Name der zu loschenden Datei

Aktionsbeginn signalisierenz.B. Button wird

”eingedruckt“

Verlaufsbenachrichtigung fur langere Aktionenz.B. Fortschrittsbalken

Persistenz

niedrig verschwindet von selbstmittel verlangt Bestatigunghoch Verbleibt in der UI



Obergrenzen fur interaktives Verhalten

0.1s Unmittelbar

1.0s Merklich aber Arbeitsfluß bleibt erhalten

10s Aufmerksamkeit wandert ab



Fehler und ihre Behandlung

Vermeidung

Ungultige Aktionen nichtverwendbar

Wo moglich Auswahl stattfreier Eingabe

Eingaben unmittelbarvalidieren und Feedbackeinblenden

Behandlung

Klare, kurze, hoflicheMeldungen

Losungshinweise anbieten

Undo durchgangig anbieten


Einleitung Anforderungen Heuristiken Gestaltung Usability Visuelle Darstellung Anordnung Farbe

Design der Benutzerschnittstelle

Die Benutzerschnittstelle...

... ist fur den Anwender das Programm

... vermittelt konzeptionelles Modell des Programms

... reprasentiert Systemzustand nach Aussen

Ihre Gestaltung unterscheidet funktionierende von benutzbarenProgrammen.



Gestaltbare Bereiche

Verwendete physische Gerate(Tastatur, Touchscreen, Soundkarte, Projektor, . . . )

Visuelle Darstellung von Information(grafisch, textuell, farbig, bewegt, . . . )

Eingabeelemente(Anordnung, Auswahl)

Konzeptionelle Analogien/Abstraktionen(Datei, Papierkorb, Hyperlink, Blog, . . . )



Grafikdesign

Gutes Design essentiell

Grafikdesigner hinzuziehen

Heuristiken:

An vorhandenes UI-Wissen anknupfenGestaltregeln zur AnordnungWeniger ist mehr



Anordnung von Elementen

Leserichtung folgenim westlichen Kulturraum: links→rechts, oben→unten

Platz lassenGruppierung, Absetzung

Standards folgenMenuposition, Buttonposition in Dialogen, etc.

Mit skizzenhaften Prototypen testen



Gestaltregeln

Zusammengehorigkeit wird gefordertdurch

Raumliche Nahe

Umschlossen von Linien / Rahmen

Gleiche Bewegung / Anderung

Gleiche Farbe, Form, Große, Schrift



Heuristiken zur Anordnung von Information

UberblickdurchAusrichtung

Logische zuraumlicherGruppierung

Beide Dialoge sind uberladen!



Erklarungen in Dialogen

Erlauterung maximal nah

Visuell unaufdringlich getrennt



Farbe

Erreicht viel Aufmerksamkeit

Sparsam einsetzenInhalt hervorheben, nicht

”bunt sein“

Geringe Kontraste sind oft ausreichendz.B. zur visuellen Abtrennung

Konsistent einsetzen


Einleitung Anforderungen Heuristiken Gestaltung Usability Beispiele Benutzerstudien Durchfuhrung

Usability Engineering

Nur Ruckmeldungen von Benutzern fuhren zu gutenProgrammen

Wichtigstes Instrument: Benutzerstudien

Beobachtung von Testpersonen, insbesondere unterVerwendung von:

Scenarios Beobachtung bei Ausfuhrung eines bestimmtenUse Case

Laut denken Benutzer beschreibt, was er/sie tutZeitmessung Zeit ermitteln, die Ausfuhrung einer bestimmten

Aufgabe dauertMeta-Notizen Experimentator beobachtet und interpretiert

Ablauf schriftlich



Beispielaufgabe I: Rechteck zeichnen

Programmprinzip bekannt

Konkretes Programm unbekannt

”Studie“

Aufgabe Vorgegebenes Bildzeichnen

Zweck Intuitivitat derOberflache testen

Bildschirmausgabe



Video zu Beispiel I

/vol/tdpe/share/material/session12/draw.avi



Beispielaufgabe II: Information auf Website finden

Aufgabe Finde die Anzahl Leistungspunkte fur das Bestehen desModuls

”Werkzeuge und Programmierung“

Programm bekannt (Web-Browser Firefox)

Sitezweck bekannt (Techfak), Struktur nicht

Zweck Erfaßbarkeit der Seiteninhalte testen



Video zu Beispiel II

/vol/tdpe/share/material/session12/findlp.avi



Benutzerstudien

1 Studienzweck festlegen

gestaltend z.B. zur Verbesserung der Schnittstelle imRahmen iterativer Entwicklung

evaluierend z.B. zur Messung der Qualitat, Vergleich vonAnsatzen

2 Studienplan aufstellen (vor der Studie)

3 Pilottest mit wenigen Versuchspersonen

”den Test testen“

4 Versuchspersonen ermitteln (moglichst reprasentativ)

5 Durchfuhrung und Analyse der Ergebnisse



Experimentplanung

Prinzipiell gelten die Regeln des Experiment-Designs. Kurzgefaßt:

Gultigkeit

Ergebnisse aussagekraftig?

Variation nur in Gegenstandder Studie

Realistisches Szenario

ReprasentativeBenutzergruppe

Wiederholbarkeit

Ergebnisse uberprufbar?

Grundproblem: Benutzerdifferieren starka

Vor- und Nachbedingungenexakt festlegen

vollstandiger Studienplan!

atypische StandardabweichungGeschwindigkeit: 33% bis 50%



Auswahl der Benutzergruppe

Oberster Maßstab: Ahnlichkeit zur Zielgruppe

Anpassung nach Große

klein? moglichst einheitlich reprasentativgroß? alle relevanten Subgruppen reprasentieren

Bedeutung von Erfahrung

Neulinge i.d.R. wichtigste Gruppe, testet LernbarkeitExperten fortgeschrittene Aufgaben, testet Konsistenz



Ethische Belange

Der Benutzer hat immer Recht

Mitteilen, dass das System, nicht der Benutzer studiert wird

Systeme noch in Entwicklung!

Neutrale Aufgaben stellen

Motivation aufrechterhalten, nicht”leiden“ lassen

Privatsphare beachten, wahrend und nach der Studie



Aufgaben

Vor allem: Reprasentative Aufgaben, z.B. aus Use Cases

Aufteilung in Bereiche, z.B. Dateneingabe, -operationen,-analyse

Beschreibung in Schriftform (reproduzierbar, referenzierbar)

”Witze“ vermeiden

Erste Aufgabe besonders einfach



Fragebogen

Fragebogen dienen dem expliziten Feedback vom Benutzer undsind komplementar zur Beobachtung

Art der Erhebung

quantitativ Auswahl aus Moglichkeiten, numerischesErgebnis.

qualitativ Freie Antwort – hier nicht weiter betrachtet.

Likert-Skala

Als Aussage formuliertAntwort gibt Grad der Ubereinstimmung anTypisch: Werte von 1 (vollige Ablehnung) bis 7 (volligeZustimmung)

Alternativ: Einordnung zwischen zwei Extremen

statistische Tests je nach geforderter Gute



Zusammenfassung: Elemente des Studienplans

Rahmenbedingungen

Studienziel

Ort, Zeit, Dauer

Hard-/Software, Konfiguration

reproduzierbarer Anfangszustand

Experimentatoren

Benutzergruppe

Durchfuhrung

Aufgaben

Erfolgskriterien

Benutzereinfuhrung

Erlaubte Hilfestellungen

Art/Umfang der Daten

Analyseverfahren

siehe auch (Nielsen 1993, S. 170f)



Durchfuhrung eines Experiments

1 Vorbereitungbevor die Testperson anwesend ist!

2 EinfuhrungZiel der Studie, Vorgehen beschreiben, System soweit notig

einfuhren

3 Experiment durchfuhrenminimale Interaktion, aufzeichnen (schriftlich, auf Video)

4 Abschlussevtl. Fragebogen ausfullen, Kommentare erbitten, Report schreiben



Discount Usability Studies

”Volles Programm“ evtl. zu aufwendig

Lockere Benutzerstudie besser als gar keine

Einfach durchfuhrbare Methoden:

Durchsicht auf Einhaltung der Heuristiken (1. Teil)

”Laut denken“

1 Anwender beschreibt seine Uberlegung wahrend der Aktion2 Experimentator macht Aufzeichnungen

→ Kann viele”Denkfallen“ aufdecken.



Aufgabe: Analyse des Benutzerverhaltens

Fragen

Was passiert?

Treten Probleme auf?

Vorschlage?

/vol/tdpe/share/material/session12/draw2.avi



The Secret to a Great User Experience



Quellen

Nielsen 1993 Usability Engineering, Jakob Nielsen, APProfessional, 1993.

Winograd 1996 Bringing Design to Software, Terry Winograd(editor), ACM Press, 1996.


interface design ingo l¨utkebohle termin 12iluetkeb/2005/session12.pdf · einleitung anforderungen...

Documents