Post on 03-Jan-2016
description
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%)