Einf

1
Einführung in Benutzungsschnittstellen
20 Juni
2
Beispiel Herbst 2004 Projekte
3
(No Transcript)
4
(No Transcript)
5
Hall of Fame oder Hall of Shame?
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

7
Hall of Fame oder Hall of Shame?
8

• Für welche Benutzer?
• Ärzte im Krankenhaus
• Zur Bewältigung welcher Aufgabe?
• Schneller Überblick bei der Visite

9
Hall of Shame!
?

• Benutzerstudie Ärzte
• brauchen die graphischeDarstellung nicht
• nutzen den Platz lieberfü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
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
Lehrinhalte

• 1. Entwurf
• Entwerfen
• Rapid Prototyping
• Evaluation

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

12
Einführung in Benutzungsschnittstellen
Mensch-MaschineKommunikation
20 Juni
13
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

14
HCI Ansatz zum Designvon Benutzerschnittstellen

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

15
Warum ist HCI wichtig?

• Hauptteil der Entwicklungsarbeit für echte
  Programme
• ungefähr 50
• Schlechte Benutzerschnittstellen kosten
• Geld 5? Zufriedenheit -gt bis zu 85?Profit
• Leben (Therac-25)

16
Wer erstellt Benutzerschnittstellen?

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

17
Design und Implementierung von UIs

• Entwicklungsprozess
• Benutzbarkeitsziele
• Benutzerzentriertes Design (user-centered design)
• Aufgabenanalyse (task analysis) contextual
  inquiry
• Rapid Prototyping
• Evaluation
• Implementierung

18
User Interface Entwicklungsprozess
Kunden, Produkte, Firma, Marketing
Kunden, Produkte, Firma, Marketing
Kunden, Produkte, Firma, Marketing
Design Exploration
Evaluation
AusführungImplementierung
Design Entdeckung
Teamarbeit zurUmsetzung desDesigns Evaluation
mit dem Kunden
Kunden - Rollen (wer) - Ziele (was) -
Kontext (Szenarien) Marketing - Business
Prioritäten - Botschaft Technologie -
Produkte - Architektur Design -
Führende/Konkurrenz Technologien
Storyboard
Beurteilen Iterieren
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
Proposal Demos/ Lo Fi Prototypen (wie)
basierend auf Folie von Sara Redpath, IBM Thyra
Trauch, Tivoli
19
Iteration

• In jeder Phase!

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
21
Web Design Representationen
Site Maps
Storyboards
Schema
Mock-ups
22
Benutzbarkeit (Usability)

• Definition der ISODie 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
Benutzbarkeit Anforderungen

• Anforderungen früh abstecken,dienen später um
  Fortschritt zu bewerten
• Anforderungen haben tradeoffs ? priorisieren
• Beispielziele

• Robust
• minimale Fehlerrate
• Benutzer beim Weitermachen helfen
• Angenehm
• hohe Zufriedenheit

• Erlernbar
• mit oder ohne Anleitung
• Effizient
• Aufgabe schnell bewältigen

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

25
Aufgabenanalyse Contextual Inquiry

• Beobachte existierende Arbeitspraxis
• ? Erzeuge Beispiele and Benutzungsszenarien

26
Rapid Prototypingmock-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

27
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
Lehrinhalte Programming

• Toolkits und Widget Bibliotheken
• UI Builders
• Eventmodelle
• Input / Output Modelle
• Model-View Controller
• etc.

29
Kursformat HCI 1

• HCI 1
• Vorlesung
• Praktikum Hausübungen

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

31

• Mehr Beispiele vom Herbst 2004

32
Verkehrsinfo
Stau-Information (Ampelmetapher)
Alarm Icons
Lautstärke
Scrollen
Hörbare Benachrichtigungen
Zoom
Auf Fahrer zentrieren
Position des Fahrers
Voreinstellungen (Radiometapher)
33
Verkehrsinfo
TabletPC
Phidgets
Kartenmaterial
Viele Stunden programmieren / Einatmen giftiger
Dämpfe
Farbe, Klebstoff, Holz, Hammer

34
Prototyp
35
(No Transcript)
36
OTTO Ortsbasierte Photoverwaltung
Hierarchische Navigation (AKA bread crumbs)
Vorwärts and Rück- Navigation
Kartenansicht
Albumsansicht
37
Otto Evolution
Low Fidelity
Interaktiv
Heuristische Evaluation
Benutzertest
Implementiert mit C unter .NET
Implementiert mit
Zweiter Prototyp bereinigt heuristische Verstösse

• Pappe
• Folie
• Post-its

38
Bus buddyDesign Evolution
39
(No Transcript)
40
HCI 2 Aktuelle Themen der HCI

• Ubiquotous Computing
• Computer-supported cooperative work
• Interfaces für Internetsuche
• Informationsvisualisierung
• Interaktionstechniken
• Mobile Computing
• Social Computing

41
Zusammenfassung Lerninhalte

• Programmierung von Benutzerschnittstellen...
• ...und die vielen Schritte davor
• Entwurf
• Rapid Prototyping
• Benutzerstudien
• Iteration
• Ergebnisse präsentieren
• Teamarbeit

42

• ENDE

43

• Backup slides

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

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

46
Benotung

• Kombination aus
• Mittelklausur (15)
• Endklausur (20)
• Einzelprojekt (20)
• Gruppenprojekt (40)
• Demos/Präsentation (Gruppenanteil)
• Projektreport and Übungen
• Mitarbeit (5)