Einführung in Benutzungsschnittstellen

Patrick BaudischMicrosoft Research

& University of Washington

2005

Einführung in die Benutzungsschnittstellen

Einführung in Einführung in BenutzungsschnittstellenBenutzungsschnittstellen

20 Juni

2005 Einführung in Benutzerschnittstellen 2

Beispiel: Herbst 2004 Projekte

2005 Einführung in Benutzerschnittstellen 3

2005 Einführung in Benutzerschnittstellen 4

2005 Einführung in Benutzerschnittstellen 5

Hall of Fame oder Hall of Shame?

2005 Einführung in Benutzerschnittstellen 6

Hall of Shame!

• Hilft Benutzern nicht ihre Ziele zu erledigen

• Braucht zu lange– die meisten Benutzer werden an dieser

Stelle abbrechen und nicht zurückkommen

• Ausnahme: Kann ok sein für Unterhaltungs-, Kunst-, Markenseiten

2005 Einführung in Benutzerschnittstellen 7

Hall of Fame oder Hall of Shame?

2005 Einführung in Benutzerschnittstellen 8

• Für welche Benutzer?– Ärzte im Krankenhaus

• Zur Bewältigung welcher Aufgabe?– Schneller Überblick bei der Visite

2005 Einführung in Benutzerschnittstellen 9

Hall of Shame!

• Benutzerstudie: Ärzte – brauchen die graphische

Darstellung nicht– nutzen den Platz lieber

für mehr Information

• Aber…– Ärzte sagen es könnte interessant sein, um

Resultate Patienten zu erklären– (aber nicht sicher, dass teilnehmende Ärzte

wissen, was Patienten wollen)

2005 Einführung in Benutzerschnittstellen 10

Implikationen

• Benutzbarkeit nur durch Benutzer definiert

• Machmal können wir Benutzbarkeit bewerten, wenn wir selbst zur Zielgruppe gehören

• HCI: Kunst Benutzerschnittstellen für eine Zielgruppe zu erstellen zu der man nicht selbst gehört

2005 Einführung in Benutzerschnittstellen 11

Lehrinhalte

• 2. Implementierung– Html Frontpage/Dreamweaver– GUI toolkits, visual builder– Macromedia/Adobe Flash, Director– Phidgets

• 1. Entwurf– Entwerfen– Rapid Prototyping– Evaluation– …

HCI :=

Patrick BaudischMicrosoft Research

& University of Washington

2005

Einführung in die Benutzungsschnittstellen

Einführung in Einführung in BenutzungsschnittstellenBenutzungsschnittstellen

20 Juni

& Mensch-Maschine& Mensch-MaschineKommunikationKommunikation

2005 Einführung in Benutzerschnittstellen 13

• Maschine– der Computer auf der des Programm läuft

– oft auf Clients & Servern verteilt

Mensch-Maschine-Kommunikation (HCI)

• Mensch– die Benutzer des Programms– andere Personen in der Organisation

• Kommunikation (Interaction)

– Benutzer teilen dem Computer mit was sie wollen– der Computer kommuniziert Resultate

2005 Einführung in Benutzerschnittstellen 14

HCI Ansatz zum Designvon Benutzerschnittstellen

• Benutzerschnittstelle :=Teil der Anwendung der es Benutzern erlaubt mit dem Computer zu interagieren

Design

Technologie Mensch

Aufgabe/Ziel

2005 Einführung in Benutzerschnittstellen 15

Warum ist HCI wichtig?

• Hauptteil der Entwicklungsarbeit für “echte” Programme– ungefähr 50%

• Schlechte Benutzerschnittstellen kosten– Geld: 5% Zufriedenheit -> bis zu 85%Profit– Leben (Therac-25)

2005 Einführung in Benutzerschnittstellen 16

Wer erstellt Benutzerschnittstellen?

• Ein Team von Spezialisten (im Idealfall)– Graphikdesigner– Interaktions-/Benutzerschnittstellendesigner– Dokumentationsschreiber– Marketingleute– Tester– Usability Ingenieure– Software Ingenieure – Benutzer

2005 Einführung in Benutzerschnittstellen 17

Design und Implementierung von UIs

• Entwicklungsprozess

• Benutzbarkeitsziele• Benutzerzentriertes Design (user-centered design)

• Aufgabenanalyse (task analysis)

& contextual inquiry• Rapid Prototyping• Evaluation• Implementierung

2005 Einführung in Benutzerschnittstellen 18

User Interface Entwicklungsprozess

DesignExploration

Evaluation AusführungImplementierung

Proposal:Demos/Lo Fi Prototypen(wie)

Teamarbeit zurUmsetzung desDesigns

Evaluation mitdem Kunden

DesignEntdeckung

Kunden, Produkte,Firma, Marketing

Design Definition:- Design Problemstellung- Zielbenutzer Rollen (wer)- Zielbenutzer Ziele (was)- Designkonzept

Spezifikation:Hi Fidelity, Verfeinertes Design - Basierend auf Benutzerfeedback - basiert auf Produkt Realitaet - Verbesserte Designbeschreibung

Storyboard

Kunden: - Rollen (wer) - Ziele (was) - Kontext (Szenarien)Marketing: - Business Prioritäten - BotschaftTechnologie - Produkte - ArchitekturDesign: - Führende/Konkurrenz Technologien

Beurteilen & Iterieren

basierend auf Folie von Sara Redpath, IBM & Thyra Trauch, Tivoli

Kunden, Produkte,Firma, Marketing

Kunden, Produkte,Firma, Marketing

2005 Einführung in Benutzerschnittstellen 19

Iteration

Design

Prototype

Evaluieren

In jeder Phase!

2005 Einführung in Benutzerschnittstellen 20

Design/Entwerfen

• Design– geleitet durch Anforderungen Zweck– nicht durch seine Implementierung– Bsp: PDA nicht so wichtig wie “mobile” App.

• Ein Entwurf repräsentiert das Artefakt– für Benutzerschnittsellen das beinhaltet

• Entwürfe oder storyboards• Ablaufdiagramme die zeigen,

wie die Aufgabe bewältigt wird• ausführbare Prototypen

Aufsatz schreiben starte Textverarbeitungsprg. Schreibe Outline Fülle Outline

Starte Textverarbeitung finde Textverarbeitungsicon Doppelklicke das Icon

Schreibe Outline Schreibe high-level Ideen…

2005 Einführung in Benutzerschnittstellen 21

Web Design RepresentationenSite Maps Storyboards

Schema Mock-ups

2005 Einführung in Benutzerschnittstellen 22

Benutzbarkeit (Usability)

Definition der ISO:Die Effektivität, Effizienz and Zufriedenheit mit der bestimmte Benutzer bestimmte Aufgaben bewältigen in bestimmten Umgebungen

• Das heißt nicht, dass man nur “langweilige” Benutzerschnittstellen nur für Anfänger designen darf—alles hängt von den Zielen ab

2005 Einführung in Benutzerschnittstellen 23

Benutzbarkeit Anforderungen

– Erlernbar• mit oder ohne Anleitung

– Effizient• Aufgabe schnell bewältigen

– Robust• minimale Fehlerrate• Benutzer beim Weitermachen

helfen

– Angenehm• hohe Zufriedenheit

• Anforderungen früh abstecken,dienen später um Fortschritt zu bewerten

• Anforderungen haben tradeoffs priorisieren• Beispielziele

2005 Einführung in Benutzerschnittstellen 24

Benutzerzentriertes Design(User-centered Design)

• Mantra = “Kenne Deine Benutzer”

• Benutzer einbeziehen während des gesamten Prozesses– Designer & Programmierer arbeiten mit Benutzern aus

Zielgruppe– Verstehe kognitive Fähigkeiten der Benutzer

(Sehvermögen, Farbsehen…, Job-Bedingte Fähigkeiten und Fertigkeiten)

– Verstehe den Arbeitsprozess– Denke über die Welt mit den Begriffe der Benutzer

Werde Teil der Zielgruppe

• Nicht Technologie/Feature-zentriertes Design

2005 Einführung in Benutzerschnittstellen 25

Aufgabenanalyse & Contextual Inquiry

• Beobachte existierende Arbeitspraxis

Erzeuge Beispiele and Benutzungsszenarien

?

2005 Einführung in Benutzerschnittstellen 26

Rapid Prototyping:“mock-up”, um testen zu können

• Low-fidelity Techniken– Papier Sketches– Schneiden, kopieren,

& kleben

• Interaktive Prototyping werkzeuge– HTML, Visual Basic,

HyperCard, Director, Flash, etc.

• UI builders– Visual Studio .NET,

JBuilder…Fantasy Basketball

2005 Einführung in Benutzerschnittstellen 27

ESP

Folge von Evaluationstechniken

• Teste mit echten Benutzern (Teilnehmern)

• Interaktiver Prototyp– low-fi mit Papier

“Computer”

• Low-cost Techniken– Experten Evaluierung– online Tests

• Benutzerstudie– Hypothese– harte, übertragbare

Resultate

2005 Einführung in Benutzerschnittstellen 28

Lehrinhalte Programming

• Toolkits und Widget Bibliotheken

• UI Builders

• Eventmodelle

• Input / Output Modelle

• Model-View Controller

• etc.

2005 Einführung in Benutzerschnittstellen 29

Kursformat HCI 1

• HCI 1– Vorlesung– Praktikum & Hausübungen

2005 Einführung in Benutzerschnittstellen 30

Praktikumsübersicht• Benutzerschnittstellenidee vorschlagen• Gruppen à 4 Studenten, unterschiedliche Fertigkeiten• Anforderungsanalyse und & “sketches” (kann und wird sich

ändern)

• Erstelle “Low fidelity” Prototypen– Testen mit der Gruppe

• Erstelle ersten interaktiven Prototypen– Präsentation vor dem Kurs & Kritik– Heuristische Evaluation (individuell)– Heuristische Evaluation aggregieren

• Erstelle zweiten interaktiven Prototypen – Präsentation vor dem Kurs & Kritik– Benutzertest

• Abschließende Präsentation

2005 Einführung in Benutzerschnittstellen 31

• Mehr Beispiele vom Herbst 2004

2005 Einführung in Benutzerschnittstellen 32

Verkehrsinfo

Alarm Icons

Scrollen

Zoom

Voreinstellungen(Radiometapher)

Auf Fahrerzentrieren

Hörbare Benachrichtigungen

Lautstärke

Stau-Information(Ampelmetapher)

Position des Fahrers

2005 Einführung in Benutzerschnittstellen 33

Verkehrsinfo

TabletPC Phidgets Kartenmaterial

Viele Stunden programmieren / Einatmen giftiger Dämpfe

Farbe, Klebstoff, Holz, Hammer

=

2005 Einführung in Benutzerschnittstellen 34

Prototyp

2005 Einführung in Benutzerschnittstellen 35

2005 Einführung in Benutzerschnittstellen 36

OTTO: Ortsbasierte Photoverwaltung

Kartenansicht

Albumsansicht

Vorwärts and Rück- Navigation

Hierarchische Navigation (AKA bread crumbs)

2005 Einführung in Benutzerschnittstellen 37

Otto: Evolution

Low Fidelity Interaktiv

Implementiert mit C# unter .NET

Heuristische EvaluationBenutzertest

Zweiter Prototyp bereinigt heuristische Verstösse

Implementiert mit• Pappe• Folie• Post-its

2005 Einführung in Benutzerschnittstellen 38

Bus buddy—Design Evolution

2005 Einführung in Benutzerschnittstellen 39

2005 Einführung in Benutzerschnittstellen 40

HCI 2: Aktuelle Themen der HCI

• Ubiquotous Computing

• Computer-supported cooperative work

• Interfaces für Internetsuche

• Informationsvisualisierung

• Interaktionstechniken

• Mobile Computing

• Social Computing

2005 Einführung in Benutzerschnittstellen 41

Zusammenfassung: Lerninhalte

• Programmierung von Benutzerschnittstellen...

• ...und die vielen Schritte davor– Entwurf– Rapid Prototyping– Benutzerstudien– Iteration

• Ergebnisse präsentieren

• Teamarbeit

2005 Einführung in Benutzerschnittstellen 42

ENDE

2005 Einführung in Benutzerschnittstellen 43

Backup slides

2005 Einführung in Benutzerschnittstellen 44

Bezug zum Informatik Curriculum

• Software Engineering im Bezug auf die Benutzerschnittstelle

• ähnliche Inhalte:– Wiederverwendung, Modifizierbarkeit, Toolkits…– “Design patterns” für bekannte Anwendungen wie

Webseiten

• Unterschied: Validierung– Software Engineering : Korrektheitsbeweise– HCI: Validierung ohne Benutzer nicht möglich

• Berufsbildend:– Hunderte von Usability Engineers, z.B. bei Microsoft

2005 Einführung in Benutzerschnittstellen 45

Literatur

• The Design of Sites by van Duyne, Landay, & Hong

• Lehrbücher– Human-Computer Interaction by Alan Dix,

et. al., 3rd edition, 2003– Developing User Interfaces by Dan Olsen,

1998

• Ben Shneiderman: Designing the User Interface

2005 Einführung in Benutzerschnittstellen 46

Benotung

• Kombination aus– Mittelklausur (15%)– Endklausur (20%)– Einzelprojekt (20%)– Gruppenprojekt (40%)

• Demos/Präsentation (Gruppenanteil)• Projektreport and Übungen

– Mitarbeit (5%)