Einfhrung in die Benutzungsschnittstellen Einfhrung in Benutzungsschnittstellen Patrick
Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen Patrick Baudisch Microsoft Research & University of Washington 20 Juni 2005
Beispiel: Herbst 2004 Projekte 2005 Einführung in Benutzerschnittstellen 2
2005 Einführung in Benutzerschnittstellen 3
2005 Einführung in Benutzerschnittstellen 4
Hall of Fame oder Hall of Shame? 2005 Einführung in Benutzerschnittstellen 5
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 6
Hall of Fame oder Hall of Shame? 2005 Einführung in Benutzerschnittstellen 7
• Für welche Benutzer? – Ärzte im Krankenhaus • Zur Bewältigung welcher Aufgabe? – Schneller Überblick bei der Visite 2005 Einführung in Benutzerschnittstellen 8
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 9
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 10
Lehrinhalte HCI : = • 1. Entwurf – – Entwerfen Rapid Prototyping Evaluation … • 2. Implementierung – – 2005 Html Frontpage/Dreamweaver GUI toolkits, visual builder Macromedia/Adobe Flash, Director Phidgets Einführung in Benutzerschnittstellen 11
Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen & Mensch-Maschine Kommunikation Patrick Baudisch Microsoft Research & University of Washington 20 Juni 2005
Mensch-Maschine-Kommunikation (HCI) • Mensch – die Benutzer des Programms – andere Personen in der Organisation • Maschine – der Computer auf der des Programm läuft – oft auf Clients & Servern verteilt • Kommunikation (Interaction) – Benutzer teilen dem Computer mit was sie wollen – der Computer kommuniziert Resultate 2005 Einführung in Benutzerschnittstellen 13
HCI Ansatz zum Design von Benutzerschnittstellen • Benutzerschnittstelle : = Teil der Anwendung der es Benutzern erlaubt mit dem Computer zu interagieren Aufgabe/Ziel Design Mensch Technologie 2005 Einführung in Benutzerschnittstellen 14
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 15
Wer erstellt Benutzerschnittstellen? • Ein Team von Spezialisten (im Idealfall) – – – – 2005 Graphikdesigner Interaktions-/Benutzerschnittstellendesigner Dokumentationsschreiber Marketingleute Tester Usability Ingenieure Software Ingenieure Benutzer Einführung in Benutzerschnittstellen 16
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 17
User Interface Entwicklungsprozess Kunden, Produkte, Firma, Marketing Design Entdeckung Kunden: - Rollen (wer) - Ziele (was) - Kontext (Szenarien) Marketing: - Business Prioritäten - Botschaft Technologie - Produkte - Architektur Design: Führende/Konkurrenz Technologien basierend auf Folie von Sara Redpath, IBM & Thyra Trauch, Tivoli 2005 Kunden, Produkte, Firma, Marketing Design Exploration Evaluation Ausführung Implementierung Teamarbeit zur Umsetzung des Designs Evaluation mit dem Kunden Storyboard Design Definition: - Design Problemstellung - Zielbenutzer Rollen (wer) - Zielbenutzer Ziele (was) - Designkonzept Beurteilen & Iterieren Proposal: Demos/ Lo Fi Prototypen (wie) Spezifikation: Hi Fidelity, Verfeinertes Design - Basierend auf Benutzerfeedback - basiert auf Produkt Realitaet - Verbesserte Designbeschreibung Einführung in Benutzerschnittstellen 18
Iteration In jeder Phase! Design Prototype Evaluieren 2005 Einführung in Benutzerschnittstellen 19
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 20
Web Design Representationen Site Maps 2005 Schema Storyboards Mock-ups Einführung in Benutzerschnittstellen 21
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 22
Benutzbarkeit Anforderungen • Anforderungen früh abstecken, dienen später um Fortschritt zu bewerten • Anforderungen haben tradeoffs priorisieren • Beispielziele – Robust – Erlernbar • mit oder ohne Anleitung – Effizient • Aufgabe schnell bewältigen • minimale Fehlerrate • Benutzer beim Weitermachen helfen – Angenehm • hohe Zufriedenheit 2005 Einführung in Benutzerschnittstellen 23
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 24
Aufgabenanalyse & Contextual Inquiry • Beobachte existierende Arbeitspraxis • Erzeuge Beispiele and Benutzungsszenarien ? 2005 Einführung in Benutzerschnittstellen 25
Rapid Prototyping: “mock-up”, um testen zu können • Low-fidelity Techniken – Papier Sketches – Schneiden, kopieren, & kleben • Interaktive Prototyping werkzeuge – HTML, Visual Basic, Hyper. Card, Director, Flash, etc. • UI builders – Visual Studio. NET, JBuilder… 2005 Einführung in Benutzerschnittstellen Fantasy Basketball 26
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 ESP Einführung in Benutzerschnittstellen 27
Lehrinhalte Programming • • • 2005 Toolkits und Widget Bibliotheken UI Builders Eventmodelle Input / Output Modelle Model-View Controller etc. Einführung in Benutzerschnittstellen 28
Kursformat HCI 1 • HCI 1 – Vorlesung – Praktikum & Hausübungen 2005 Einführung in Benutzerschnittstellen 29
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 30
• Mehr Beispiele vom Herbst 2004 2005 Einführung in Benutzerschnittstellen 31
Verkehrsinfo Alarm Icons Stau-Information (Ampelmetapher) Lautstärke Scrollen Hörbare Benachrichtigu ngen Zoom Auf Fahrer zentrieren Voreinstellungen (Radiometapher) 2005 Einführung in Benutzerschnittstellen Position des Fahrers 32
Verkehrsinfo Tablet. PC Farbe, Klebstoff, Holz, Hammer 2005 Phidgets Kartenmaterial Viele Stunden programmieren / Einatmen giftiger Dämpfe = Einführung in Benutzerschnittstellen 33
Prototyp 2005 Einführung in Benutzerschnittstellen 34
2005 Einführung in Benutzerschnittstellen 35
OTTO: Ortsbasierte Photoverwaltung Hierarchische Navigation (AKA bread crumbs) Kartenansicht Vorwärts and Rück. Navigation Albumsansicht 2005 Einführung in Benutzerschnittstellen 36
Otto: Evolution Low Fidelity Interaktiv Benutzertest Implementiert mit • Pappe • Folie • Post-its 2005 Heuristische Evaluation Implementiert mit C# unter. NET Einführung in Benutzerschnittstellen Zweiter Prototyp bereinigt heuristische Verstösse 37
Bus buddy—Design Evolution 2005 Einführung in Benutzerschnittstellen 38
2005 Einführung in Benutzerschnittstellen 39
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 40
Zusammenfassung: Lerninhalte • Programmierung von Benutzerschnittstellen. . . • . . . und die vielen Schritte davor – – Entwurf Rapid Prototyping Benutzerstudien Iteration • Ergebnisse präsentieren • Teamarbeit 2005 Einführung in Benutzerschnittstellen 41
ENDE 2005 Einführung in Benutzerschnittstellen 42
Backup slides 2005 Einführung in Benutzerschnittstellen 43
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 44
Literatur • The Design of Sites by van Duyne, Landay, & Hong • Lehrbücher – Human-Computer Interaction by Alan Dix, et. al. , 3 rd edition, 2003 – Developing User Interfaces by Dan Olsen, 1998 • Ben Shneiderman: Designing the User Interface 2005 Einführung in Benutzerschnittstellen 45
Benotung • Kombination aus – Mittelklausur (15%) – Endklausur (20%) – Einzelprojekt (20%) – Gruppenprojekt (40%) • Demos/Präsentation (Gruppenanteil) • Projektreport and Übungen – Mitarbeit (5%) 2005 Einführung in Benutzerschnittstellen 46
- Slides: 46