HCI HCI I. Was gab es in diesem Semester zu lernen? In 55 Folien durchs Semester. Zusammenfssung. TFH Berlin. TFH Berlin

Transkript

1 HCI Was gab es in diesem Semester zu lernen? In 55 Folien durchs Semester HCI I Zusammenfssung Ilse Schmiedecke 2008

2 Was ist HCI? Die Lehre von der Qualität der Schnittstelle zwischen Mensch und interaktivem Gerät HCI 2 Interaktion und Interface Usability: effektiv, effizient, zufriedenstellend User Experience: angenehm, reaktiv, visuell ansprechend, inspririerend, schmiedecke 10 HCI 2

3 Was ist HCI? Ein Arbeitsfeld für Korrekte Visionäre Kreative Kleinliche schmiedecke 10 HCI 3

4 Es geht um Nutzungserlebnisse angenehme und unangenehme Nutzungserlebnisse schmiedecke 10 HCI 4

5 Plattformspezifisches Nutzungserlebnis

6 2. Modelle Interaktion begreifen durch Modelle 1. Kommunikationsparadigmen 2. Mentale Modelle 3. Handlungsmodelle schmiedecke 10 HCI 6

7 Kommunikationsparadigmen 2.2 Kommunikationsparadigmen Kommunikationsparadigmen: - Computer als Arbeitsmittel (Ressource) der Mensch setzt den Computer ein Als was erscheint mir der Computer? - Computer als Werkzeug (Funktion oder Automat) der Mensch bedient den Computer - Computer als Kommunikationspartner (Assistent, Partner, Überwacher oder Ausführender) der Mensch kommuniziert mit dem Computer - Computer als Medium (Mittler zur Anwendungswelt) der Mensch interagiert über den Computer - Computer als Künstliche Realität (der Computer wird unsichtbar) der Mensch bewegt sich in einer künstlichen Welt schmiedecke 10 HCI 7

8 Mentale und Handlungsmodelle 2 Bereiche der Schwierigkeit Verständnis mentale Modelle Handhabung Handlungsmodelle Mentale Modelle Komplexität und Kohärenz Modell-Inkompatibilitäten Handlungsmodelle Aufwand intellektuell und manuell / sensorisch von der Idee zur Durchführung und Bewertung auf verschiedenen Abstraktionsebenen dargestellt als "Abstand" zwischen Ebenen: Transformationsdistanz schmiedecke 10 HCI 8

9 Mentale Modelle Der (System-)Designer entwirft das konzeptuelle Modell bildet es auf ein funktionales Modell der Software ab Der Benutzer besitzt ein mentales Modell der Realität (Fachwissen) erwirbt ein mentales Modell des Systems Das System stellt ein implementiertes Modell von Realität und technischer Funktion dar realisiert damit das Systemverhalten Hilfsmittel zur Erkennung von Missverständnissen: Modell-Inkompatibilitäten schmiedecke 10 HCI 9

10 Modellkalkül (Pseudo-Mathe, eher Steno): Wer besitzt Modelle? Und wovon? Wovon? immer vom Arbeitsbereich A (UoD, universe of discourse) Wer? der Benutzer B - der Experte!!! der Systemdesigner D - der Analytiker das System S - das implementierte Modell, das die Systemreaktionen definiert (mentales Modell des Programmierers) Also B(A), D(A), S(A) Müssen nicht zwangläufig harmonieren!!! Und wenn nicht, gibt s Missverständnisse schmiedecke 10 HCI 10

11 Modell des regulierten Handlungsprozesses (kybernetisches Handlungsmodell) Regeln, Regulation: Angleichung an eine Führungsgröße durch fortlaufenden Soll-Ist-Vergleich und Rückkopplung Handlungsregulation: intellektuelle Ebene bewusste Regulation sensomotorische Ebene automatiserte Regulation Ebene der flexiblen Handlungsmuster kombiniert für Routinehandlungen schmiedecke 10 HCI 11

12 Fehler im regulierten Handlungsprozess Definition Fehler Nicht-Übereinstimmung zwischen dem Ziel des Benutzers und der Reaktion des Systems. Fehler beeinträchtigen die Zufriedenheit des Benutzers Ziel ist Fehlervermeidung auf intellektueller Ebene (falsch verstanden) auf sensomotorischer Ebene (daneben getroffen) auf der Ebene der flexiblen Handlungsmuster (Sonderfall nicht erkannt) schmiedecke 10 HCI 12

13 Modell der Klüfte (Transformationsdistanzen) Physical System Gulf of Execution Goals Gulf of Evaluation Grundlage der meisten detaillierteren Handlungsmodelle schmiedecke 08 HCI 13

14 Modell der 7 Handlungsschritte (Norman) schmiedecke 10 HCI 14

15 3. Benutzer verstehen Physische Benutzereigenschaften: Sehen und visuelle Wahrnehmung Handmotorik Psychische Benutzereigenschaften Gedächtnisformen Kognition Benutzermodelle Benutzerklassen Benutzerprofile Personas (fiktive Benutzer) schmiedecke 10 HCI 15

16 Zusammenfassung: Sehvermögen des gesunden Auges Sehfeld zentral unterhalb der Mitte Farbwahrnehmung adaptiosabhängig Adaption benötigt Zeit Blendung Adaption und Farbwahrnehmung "altern" deutlich Weniger als 5% der Sehzellen Zäpfchen (Farbsehen) Feine Strukturen und Schrift benötigen SW-Kontrast Weitere Problemquellen: Sukzessivkontrast bei zu starker Farbintensität Farbfehlsichtigkeit Spektralzerlegung durch die Linse schmiedecke 10 HCI 16

17 Visuelle Entlastung aufgrund von Alterung / Erkrankung / Sehschwäche aufgrund von Umgebungsbedingungen Kontrast gleicht Schärfemängel aus Möglichst keine Farbschrift, niemals auf farbigem Hintergrund Blau wird am stärksten gebrochen, Rot am wenigsten Blau- Rot kann niemals konturscharf sein (Flimmern)! Rot-Grün-Kontrast vermeiden, niemals zentral sinntragend einsetzen! Adaption entlasten Zentrales Sehfeld optimal nutzen Graustufen-Erkennbarkeit sichern Nebenbelastung vermeiden! schmiedecke 10 HCI 17

18 Visuelle Wahrnehmung Unbewusste Vorverarbeitung Erkennen bekannter Strukturen "Vorsortierung" der visuellen Information Unterdrückung von Dauerreizen (Hintergrundstrukturen) Gestaltgesetze: Erklärungen der Vorverarbeitung über 100 Gestaltgesetze formuliert mit 4 Hauptgesetzen gut zu erfassen: Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Geschlossenheit Gesetz der Prägnanz schmiedecke 08 HCI 18

19 3.4 Exkurs: Alternative Eingabeformen Sprach- Ein/Ausgabe Menschen mit Behinderungen Bedienung während manueller Arbeit in Situationen, in denen eine manuelle Bedienung nicht geeignet ist (Lebensmittelverabeitung, Diagnostik) Gesten und Augensteuerung für spezielle Anwendungen Tragbare und taktile Interfaces Motion-Capturing Ultrafeine Instrumentenführung (Feinmechanik, Chemie, Chirurgie) Hirnstromsteuerung Bewegungssensoren i-phone Spielschnittstelle schmiedecke 10 HCI 19

20 3.5 Gedächtnis und Kognition Gedächtnisforschung ist Teil der Psychologie daher "psychische Benutzereigenschaft" Kognition steht für menschliche Informationsverarbeitung: Erkennen, Durchdenken, Anwenden... Gedächtnis ist zentral für die Interaktion: Keine Interaktion ohne Kognition Keine Kognition ohne Gedächtnis schmiedecke 10 HCI 20

21 Gedächtnisarten Sensorisches Gedächtnis: - ikonischer (12 Chunks, 0,5 sec Persistenz) - und echoischer Speicher (bis 5 sec. Persistenz) KZG (Kurzzeit-Gedächtnis) - Arbeitsspeicher - 7 +/- 2 Chunks, sec. - störungsanfällig - Informationsverlust durch Überlastung - auffrischbar durch Wiederholung LZG (Langzeit-Gedächtnis) - Unbegrenzte Kapazität und Persistenz (100 TB) - Assoziatives Wissensnetz - Zugriffszeit 8 sec/chunk - Recall / Recognition (Zugang zum Wissensnetz) Grafik: J.Tomaschewski, Modul MCK schmiedecke 10 HCI 21

22 Kognition: Gedächtnis und Informationsverarbeitung Kognition als Systemmodell: schmiedecke 08 HCI 22

23 3.1 Benutzerklassen 3.1 Benutzerklassen Alle Benutzer sind verschieden Am deutlichsten wirken sich Unterschiede in Wissen und Erfahrung aus! Wissen und Erfahrung Fachkenntnis Fachmann Laie Programmerfahrung Experte Anfänger Computererfahrung Computerfreak Computerlaie HCI-Kriterien schmiedecke 10 HCI 23

24 3.1 Benutzerklassen Benutzerklassen HCI-Benutzerklassen: Gelegenheitsbenutzer Ungeübte Benutzer Routinebenutzer Experte schmiedecke 10 HCI 24

25 3.1 Benutzerklassen Computererfahrung Computererfahrung grundsätzlich orthogonale Kategorie Computererfahrung Anna Beate Christine Programmerfahrung Wer kann helfen, wenn das Programm sich nicht mehr mit dem Server verbindet? ein völlig falscher Wert eingegeben und gespeichert wurde? die Daten beim Kopieren in ein anderes Programm verfälscht werden? schmiedecke 10 HCI 25

26 3.2 Benutzerprofil Wichtige Kategorien eines Benutzerprofils jeweils spezifisch zu ergänzen (z.b. Sprachkenntnis, Kultur,...) Benutzerklasse Computererfahrung Fachkenntnis Rolle im Anwendungsbereich Häufigkeit der Benutzung Zahl und Umfang der Aufgaben am System körperliche Fähigkeiten / Handicaps Alter Möglichst grobe Bewertungsskalen Typbildung! schmiedecke 10 HCI 26

27 3.3 Persona als Profil-Repräsentant schmiedecke 10 HCI 27

28 Barrieren der Computernutzung Nutzungsbarrieren erfahren: blinde Nutzer sehbehinderte Nutzer motorikgestörte Nutzer (auch temporär) gehörlose Nutzer lernbehinderte Nutzer alte Nutzer Fotoquelle: schmiedecke 08 HCI 28

29 Barrierefreiheit: Prinzipien des WCAG Prinzip 1 Wahrnehmbarkeit Prinzip 2 Bedienbarkeit Prinzip 3 Verständlichkeit Prinzip 4 Robustheit so in der ISO schmiedecke 13 HCI 29

30 Barrierefreiheit : Technische Anforderungen Webseiten: Valides HTML Semantische Auszeichnung Linearisierbarkeit Layout und Dekor nur durch CSS relative Größenangaben Rich Internet Applications Zusätzlich ARIA-Auszeichnung Software: Hilfsmittel erwarten Accessibility-APIs (MSAA/MSUI, JAAPI) müssen von der GUI-Bibliothek implementiert werden schmiedecke 13 HCI 30

31 Webseiten: Textalternativen Textalternativen: informativ, aber nicht "geschwätzig" Quelle: schmiedecke 13 HCI 31

32 4. Interaktionsgestaltung Informationscodierung Gestaltungsgrundsätze Grundsätze der Interaktionsgestaltung Grundsätze der GUI-Gestaltung WIMP-Grundsätze Gestaltung von Kommandosprachen Innovative Interaktionsformen Interaktionsparadigmen schmiedecke 10 HCI 32

33 Codierungsformen für visuelle Darstellungen * Die wichtigsten: Text Farbe Anordnung Grafik schmiedecke 08 HCI 33 Quelle: M.Herczeg, Modul MCK der VFH *) Anzahl der absolut, d.h. ohne Vergleich, unterscheidbaren Stufen.

34 Die wichtigsten Codierungsformen Texte: mächtigste Codierungsform mit der Fähigkeit nahezu jede Information zu repräsentieren. Farbe: sehr wirksame Codierungsform, vor allem zur Hervorhebung bestimmter Informationskategorien Probleme: Kontrast, Schärfe, Standardbedeutungen. Manipulationsmöglichkeiten durch Standardbedeutungen. Anordnung: Codierungsform auf der Basis der Gestaltgesetze zur Gruppierung und Isolation von Informationselementen. Chunking zur KZG-Entlastung. Manipulationsmöglichkeiten durch Fehlanordnung. Graphik: Codierungsform, vor allem zur Visualisierung komplexer oder umfangreicher Informationsmengen. Hohe Datenreduktion, gute Decodierbarkeit. Manipulationsmöglichkeiten durch Skalierung. schmiedecke 10 HCI 34

35 Grundregeln des GUI-Entwurfs Gleichförmigkeit der Gestaltung Sichtbarkeit des Systemzustands Affordanz der Bedienelemente Nicht-Modalität Minimalistisches Design Strukturiertheit Strukturierung durch visuelle Grundparameter Symmetrie, bekannte Strukturen, Gitter und Raster Semantische Struktur Einheitliche Semiotik Offener Text schmiedecke 10 MCK 35

36 Entwicklung der Benutzerschnittstellen bis 1980 Konsolen, Fernschreiber ab 1980 erste GUIs, WIMP ab 1990 Multimedia Gruppen-Interaktion Touchscreen etc. Web-Design ab 2000 Mobile Geräte, Wearables Taktile Schnittstellen Augmented Reality schmiedecke 10 HCI 36

37 WIMP-Interaktionselemente Fenster Haupt, Unter- und Dialogfenster Menüs Drop-down und Pop-up-Menüs Widgets Knöpfe ("Schaltflächen" lt. MS-Terminologie) Auswahllisten Deiktische Werteingaben Meldungen und Warnungen About-Boxen und Splash Screens Für jedes Element gibt es Regeln... Werkzeugleisten Hilfemenüs schmiedecke 10 HCI 37

38 4.3 Klassische Interaktionsparadigmen Kommandosystem Menü-Maske-System Direkte Manipulation Hypermedia schmiedecke 10 HCI 38

39 4.4 Alternative und innovative Interaktionsformen Zumeist durch innovative Eingabegeräte definiert Die zur Zeit wichtigsten: Multi-Touch-Panels Bewegungssensoren RFID und Wearables Berührungsfreie Interaktion (Gesten, Augen, Sprache) AR in diversen Ausprägungen Hirnstrom-Interface Trend zu "immersiven" Technologien Aufweichung der Grenze zwischen realer und virtueller Welt. Wichtig auch Sondertechniken, z.b. "unterstützte Kommunikation" Scanning Augensteuerung schmiedecke 10 HCI 39

40 Interaktionsparadigmen - Belastung des LZG Kommandosystem: Starke Belastung des LZG! Abhilfe durch (Pseudo-)Menüs und Hilfefunktionen, Default-Parameter Entlastung im Einzelfall durch Makrobildung. Menü-Maske: geführt: keine Belastung benutzernavigiert: mittlere bis starke Belastung des LZG. Abhilfe: Thematisch gegliederte Navigationshilfen Direkte Manipulation: minimale Belastung des LZG durch Visualisierung Hypermedia: minimale Belastung des LZG LZG-Belastung schmiedecke 10 HCI 40

41 Interaktionsparadigmen - Belastung des KZG Kommandosystem: KZG-freundlich, da Arbeitsschritte und ergebnisse sichtbar Menü-Maske: Geführte Systeme (Wizards) entlasten das KZG benutzernavigierte System beanspruchen das KZG; Abhilfe: Historien- oder Ergebnisvisualisierung; sinnvoll: Undo-Operation! Direkte Manipulation: ähnlich wie benutzernavigierte Menü-Maskensysteme; Ergebnisvisualisierung erforderlich, da sonst keine Kontrolle; Undo zwingend erforderlich Hypermedia: Linkverfolgung überfordert das KZG! Navigationsvisualisierung, Historie, Vorgänger- und Nachfolgernavigation, Suchraumvisualisierung KZG-Belastung schmiedecke 10 HCI 41

42 Ergonomie per Gesetz? Schlecht gestaltete Arbeit macht krank! körperliche Beschwerden psychische Beschwerden Leistungseinbrüche soziale Einbrüche plötzliche Erkrankungen Menschengerechte Arbeitsgestaltung ist gültiges Arbeitsrecht! DIN EN ISO 9241, Teil 2 Betriebsverfassungsgesetz 75,2 DIN EN ISO Bildschirmarbeitsverordnung 3 u. 5 Arbeitsschutzgesetz 3 u. 4 schmiedecke 10 HCI 42

43 Gesetze Arbeitsschutzgesetz (ArbSchG) Grundlage für den gesetzlichen Arbeitsschutz. Bildschirmarbeitsverordnung (BildscharbV) seit 1996 Konkretisierung des Arbeitsschutzgesetzes im Bereich der Bildschirmarbeit Barrierefreie Informationstechnik-Verordnung (BITV) seit 2002 Vorschrift für öffentliche Internetauftritte der Bundesbehörden barrierefreie Technik, v.a. für Sehbehinderte und Blinde Hinweis: Verordnung = Konkretisierung eines Gesetzes, bindend schmiedecke10 HCI 43

44 Normen Norm DIN EN ISO 6385 ergonomische Grundnorm für die Gestaltung von Arbeitssystemen Normenreihe DIN EN ISO 9241 seit 1996, Überarbeitung seit 2000, teilw. noch in Planung früher Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmen heute Ergonomie der Mensch-Computer-Interaktion für uns am wichtigsten Teil 110 und Teil 12 Normenreihe DIN EN ISO seit 2003, wird weiter entwickelt, bisher 3 Teile Software-Ergonomie für Multimedia-Benutzungsschnittstellen Norm DIN EN ISO seit 2000 Benutzer-orientierte Gestaltung interaktiver Systeme. 44

45 BITV Seit 2002 Gesetz Grundlage Web Content Accessibility Guidelines 1.0 des World Wide Web Consortiums (1999) Zwei Anpassungsstufen Technisch genau beschrieben, daher auch als Handbuch für Barrierefreiheit geeignet. Die wichtigsten Grundforderungen der BITV Schriftgröße einstellbar Hintergrund ausblendbar Sematische Auszeichnung Tabellen nur für tabellierte Inhalte (nicht fürs Layout) Text-Äquivalent für jedes Nicht-Text-Element schmiedecke10 HCI 45

46 DIN-EN-ISO 6385 (2004) Gestaltung von Arbeitssystemen Die "Ergonomische Grundnorm" umfasst: Arbeitsumgebung Arbeitsmittel Arbeitsplatz Wichtige Begriffe: Belastung Gesamtheit der Bedingungen und Anforderungen der Arbeit Beanspruchung innere Reaktion auf die Arbeitsbelastung schmiedecke 10 HCI 46

47 DIN-EN-ISO 9241-Teil2 Leitsätze zur Arbeitsgestaltung "Das allgemeine Ziel, ergonomische Grundsätze in der Arbeitsgestaltung zu berücksichtigen, ist es, optimale Arbeitsbedingungen in Bezug auf das Wohlbefinden, die Sicherheit und die Gesundheit der Menschen zu schaffen." Humankriterien aus ISO-EN 9241-Teil 2: Benutzerorientierung Anforderungsvielfalt Ganzheitlichkeit und Bedeutsamkeit Handlungsspielräume Rückmeldungen Entwicklungsmöglichkeiten schmiedecke 10 HCI 47

48 EN Grundsätze der Dialoggestaltung Neuer Anwendungsbereich "Interaktive Systeme" Neue Definition Benutzungsschnittstelle: "Alle Bestandteile eines interaktiven Systems (Software oder Hardware), die Informationen und Steuerelemente zur Verfügung stellen, die für den Benutzer notwendig sind, um eine bestimmte Arbeitsaufgabe mit dem interaktiven System zu erledigen." Gestaltungskriterien ISO Aufgabenangemessenheit 2. Selbstbeschreibungsfähigkeit 3. Steuerbarkeit 4. Erwartungskonformität 5. Fehlertoleranz 6. Individualisierbarkeit 7. Lernförderlichkeit <<ASSEFIL>> schmiedecke10 HCI 48

49 DIN-EN-ISO Benutzerorientierte Gestaltung interaktiver Systeme Vorgehensweise bei der Gestaltung Einbeziehung vieler Fachpersonen Endbenutzer, Einkäufer, Führungskräfte,, Systemanalytiker,, Programmierer, Marketingfachleute, Grafikdesigner, HCI- Experten, Handbuchautor, Ausbilder, Wartungspersonal Usability-Engineering-Zyklus: Anforderungen aus Nutzungszweck und -kontext erfassen Anforderungen der Benutzergruppen erfassen Gesamtlösungen entwerfen Lösungsentwürfe gegenüber Anforderungen evaluieren Iterieren, bis das Evaluationsziel erreicht ist. schmiedecke10 HCI 49

50 Zeitlos gültig: Shneidermanns Goldene Regeln des Dialogentwurfs 1. Versuche Konsistenz zu erreichen. 2. Biete erfahrenen Benutzern Abkürzungen an. 3. Biete informatives Feedback. 4. Dialoge sollten abgeschlossen sein. 5. Biete einfache Fehlerbehandlung. 6. Biete einfache Rücksetzmöglichkeiten. 7. Unterstütze benutzergesteuerten Dialog. 8. Reduziere die Belastung des Kurzzeitgedächtnisses. schmiedecke10 HCI 50

51 Usability Engineering und Evaluation Aufgabenanforderungen erfassen Benutzeranforderungen erfassen Lösungen entwerfen Papierprototypen formative Evaluation Entwurf evaluieren summative Evaluation Produkt realisieren Produkt evaluieren Vorgaben für die nächste Version Produktzugang verbessern schmiedecke 10 HCI 51

52 Evaluationstechniken Theoriebasierte Evaluation Informationsanalyse: Dokumentenanalyse, Datenanalyse Expertengutachten: Heuristische Evaluation, Cognitive Walkthrough Benutzerbasierte Evaluation Befragung. Umfrage, Interview Usability-Test (im Labor): Videoaufzeichnung, Logging, Eyetracking, Think-Aloud Beobachtung (vor Ort): (Feld-)Studie, Ethnographie schmiedecke 10 HCI 52

53 Heuristische Evaluation Benutzbarkeitsheuristiken nach Nielsen: 1. Sichtbarkeit des Systemstatus 2. Übereinstimmung zwischen System und der realen Welt 3. Benutzerkontrolle und Freiheit 4. Konsistenz und Einhaltung von Standards 5. Fehlervermeidung 6. Wiedererkennen anstelle von Erinnern 7. Flexibilität und Effizients 8. Ästhetisches und minimalistisches Design 9. Hilfe für den Benutzer um Fehler wahrzunehmen, zu erkennen und zu beheben 10.Hilfe und Dokumentation Andere Heuristiken möglich: z.b. Gestaltungskriterien nach ISO Shneiderman's Goldene Regeln schmiedecke 08 HCI 53

54 Theoriebasierte Evaluation: Kognitiver Walkthrough Kognitiver Walkthrough Polson. Lewis at al. Benutzbarkeits-"Gedankenexperiment" naives Benutzerverhalten verschiedener fiktiver Benutzer (Personae) Experten durchlaufen stellvertretend alle Aktionen Versuch, Probleme stellvertretend zu identifizieren Durchführung anhand eines konkreten Testplans ausgewählte Szenarien systematisches Protokoll (anhand Handlungsmodell) schmiedecke 10 HCI 54

55 Benutzerbasierte Evaluation: Beobachtung reale Umgebung: Feldstudie, Ethnographie Labor: Usability-Experiment Befragung Umfrage Interview Vorbedingungen Nutzerauswahl Ziel der Studie Festgelegte Methodik Definierter Evaluationsprozess Metriken und Auswertungsverfahren: Quantifizierbarkeit? Qualität: Pilottest Untersuchung schmiedecke 10 HCI 55

56 Usability und Wirtschaftlichkeit Usability kostet! Expertenevaluation ("theoriebasiert") deutlich günstiger als Benutzerevaluation Usability zahlt sich aus größerer Akzeptanz weniger Nachbesserungen weniger Supportbedarf Usability schafft Wettbewerbsvorteile Auf Messen gut vermittelbar Benutzerbewertungen in Foren etc. Awards schmiedecke 10 HCI 56

57 Das war's in HCI Bleiben Sie offen für alles Neue - wenn es den Benutzern nützt!