Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Patrick Baudisch Microsoft Research & University of Washington 2005 Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen 20.

Ähnliche Präsentationen


Präsentation zum Thema: "Patrick Baudisch Microsoft Research & University of Washington 2005 Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen 20."—  Präsentation transkript:

1 Patrick Baudisch Microsoft Research & University of Washington 2005 Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen 20 Juni

2 2005Einführung in Benutzerschnittstellen2 Beispiel: Herbst 2004 Projekte

3 2005Einführung in Benutzerschnittstellen3

4 2005Einführung in Benutzerschnittstellen4

5 2005Einführung in Benutzerschnittstellen5 Hall of Fame oder Hall of Shame?

6 2005Einführung in Benutzerschnittstellen6 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

7 2005Einführung in Benutzerschnittstellen7 Hall of Fame oder Hall of Shame?

8 2005Einführung in Benutzerschnittstellen8 Für welche Benutzer? –Ärzte im Krankenhaus Zur Bewältigung welcher Aufgabe? –Schneller Überblick bei der Visite

9 2005Einführung in Benutzerschnittstellen9 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)

10 2005Einführung in Benutzerschnittstellen10 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

11 2005Einführung in Benutzerschnittstellen11 Lehrinhalte 2. Implementierung –Html Frontpage/Dreamweaver –GUI toolkits, visual builder –Macromedia/Adobe Flash, Director –Phidgets 1. Entwurf –Entwerfen –Rapid Prototyping –Evaluation –… HCI :=

12 Patrick Baudisch Microsoft Research & University of Washington 2005 Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen 20 Juni & Mensch-Maschine Kommunikation

13 2005Einführung in Benutzerschnittstellen13 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

14 2005Einführung in Benutzerschnittstellen14 HCI Ansatz zum Design von Benutzerschnittstellen Benutzerschnittstelle := Teil der Anwendung der es Benutzern erlaubt mit dem Computer zu interagieren Design Technologie Mensch Aufgabe/Ziel

15 2005Einführung in Benutzerschnittstellen15 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)

16 2005Einführung in Benutzerschnittstellen16 Wer erstellt Benutzerschnittstellen? Ein Team von Spezialisten (im Idealfall) –Graphikdesigner –Interaktions-/Benutzerschnittstellendesigner –Dokumentationsschreiber –Marketingleute –Tester –Usability Ingenieure –Software Ingenieure –Benutzer

17 2005Einführung in Benutzerschnittstellen17 Design und Implementierung von UIs Entwicklungsprozess Benutzbarkeitsziele Benutzerzentriertes Design (user-centered design) Aufgabenanalyse (task analysis) & contextual inquiry Rapid Prototyping Evaluation Implementierung

18 2005Einführung in Benutzerschnittstellen18 User Interface Entwicklungsprozess Design Exploration Evaluation Ausführung Implementierung Proposal: Demos/ Lo Fi Prototypen (wie) Teamarbeit zur Umsetzung des Designs Evaluation mit dem Kunden Design Entdeckung 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 - Botschaft Technologie - Produkte - Architektur Design: - Führende/Konkurrenz Technologien Beurteilen & Iterieren basierend auf Folie von Sara Redpath, IBM & Thyra Trauch, Tivoli Kunden, Produkte, Firma, Marketing Kunden, Produkte, Firma, Marketing

19 2005Einführung in Benutzerschnittstellen19 Iteration Design Prototype Evaluieren In jeder Phase!

20 2005Einführung in Benutzerschnittstellen20 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…

21 2005Einführung in Benutzerschnittstellen21 Web Design Representationen Site MapsStoryboards SchemaMock-ups

22 2005Einführung in Benutzerschnittstellen22 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 darfalles hängt von den Zielen ab

23 2005Einführung in Benutzerschnittstellen23 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

24 2005Einführung in Benutzerschnittstellen24 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

25 2005Einführung in Benutzerschnittstellen25 Aufgabenanalyse & Contextual Inquiry Beobachte existierende Arbeitspraxis Erzeuge Beispiele and Benutzungsszenarien ?

26 2005Einführung in Benutzerschnittstellen26 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

27 2005Einführung in Benutzerschnittstellen27 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

28 2005Einführung in Benutzerschnittstellen28 Lehrinhalte Programming Toolkits und Widget Bibliotheken UI Builders Eventmodelle Input / Output Modelle Model-View Controller etc.

29 2005Einführung in Benutzerschnittstellen29 Kursformat HCI 1 HCI 1 –Vorlesung –Praktikum & Hausübungen

30 2005Einführung in Benutzerschnittstellen30 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

31 2005Einführung in Benutzerschnittstellen31 Mehr Beispiele vom Herbst 2004

32 2005Einführung in Benutzerschnittstellen32 Verkehrsinfo Alarm Icons Scrollen Zoom Voreinstellungen (Radiometapher) Auf Fahrer zentrieren Hörbare Benachrichtigu ngen Lautstärke Stau-Information (Ampelmetapher) Position des Fahrers

33 2005Einführung in Benutzerschnittstellen33 Verkehrsinfo TabletPCPhidgetsKartenmaterial Viele Stunden programmieren / Einatmen giftiger Dämpfe Farbe, Klebstoff, Holz, Hammer =

34 2005Einführung in Benutzerschnittstellen34 Prototyp

35 2005Einführung in Benutzerschnittstellen35

36 2005Einführung in Benutzerschnittstellen36 OTTO: Ortsbasierte Photoverwaltung Kartenansicht Albumsansicht Vorwärts and Rück- Navigation Hierarchische Navigation ( AKA bread crumbs)

37 2005Einführung in Benutzerschnittstellen37 Otto: Evolution Low FidelityInteraktiv Implementiert mit C# unter.NET Heuristische EvaluationBenutzertest Zweiter Prototyp bereinigt heuristische Verstösse Implementiert mit Pappe Folie Post-its

38 2005Einführung in Benutzerschnittstellen38 Bus buddyDesign Evolution

39 2005Einführung in Benutzerschnittstellen39

40 2005Einführung in Benutzerschnittstellen40 HCI 2: Aktuelle Themen der HCI Ubiquotous Computing Computer-supported cooperative work Interfaces für Internetsuche Informationsvisualisierung Interaktionstechniken Mobile Computing Social Computing

41 2005Einführung in Benutzerschnittstellen41 Zusammenfassung: Lerninhalte Programmierung von Benutzerschnittstellen......und die vielen Schritte davor –Entwurf –Rapid Prototyping –Benutzerstudien –Iteration Ergebnisse präsentieren Teamarbeit

42 2005Einführung in Benutzerschnittstellen42 ENDE

43 2005Einführung in Benutzerschnittstellen43 Backup slides

44 2005Einführung in Benutzerschnittstellen44 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

45 2005Einführung in Benutzerschnittstellen45 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

46 2005Einführung in Benutzerschnittstellen46 Benotung Kombination aus –Mittelklausur (15%) –Endklausur (20%) –Einzelprojekt (20%) –Gruppenprojekt (40%) Demos/Präsentation (Gruppenanteil) Projektreport and Übungen –Mitarbeit (5%)


Herunterladen ppt "Patrick Baudisch Microsoft Research & University of Washington 2005 Einführung in die Benutzungsschnittstellen Einführung in Benutzungsschnittstellen 20."

Ähnliche Präsentationen


Google-Anzeigen