Wissen Was praktisch zhlt MenschComputerInteraktion WS 20152016 Alle

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7 Ein-/Ausgabe-Ebene 7. 1 Gestaltung der Ein-/Ausgabe § Gestaltungsprinzipien § Visuelle Informationsdarstellung § Akustische Informationsdarstellung 7. 2 Interaktionselemente § § Übersicht Basiselemente Erweiterungselemente Interaktionselemente bei Hypermedia 7. 3 Gruppierung visueller Information § Gruppierungsprinzipien § Gruppierungselemente § Anordnung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 1

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 1 Gestaltungsprinzipien der Ein-/Ausgabe (1) § Klarheit § Informationsinhalt wird schnell und zutreffend vermittelt. § Unterscheidbarkeit § Angezeigte Information kann genau unterschieden werden. § Kompaktheit (Prägnanz) § Nur die zur Erledigung der Aufgabe notwendige Information. § Konsistenz § Gleiche Information wird entsprechend Benutzererwartungen auf gleiche Art dargestellt. © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 2

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 1 Gestaltungsprinzipien der Ein-/Ausgabe (2) § Erkennbarkeit § Aufmerksamkeit wird zur benötigten Information gelenkt. § Lesbarkeit § Information ist leicht zu lesen. § Verständlichkeit § Bedeutung ist leicht verständlich, eindeutig, interpretierbar und erkennbar. Charakteristische Eigenschaften der Informationsdarstellung (ISO 9241 -12) © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 3

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 1 Gestaltungsprinzipien der Ein-/Ausgabe (3) § Ableitung von Gestaltungsregeln § Die sieben charakteristischen Eigenschaften (Gestaltungsprinzipien) operationalisieren durch Aufstellung konkreter Forderungen § Berücksichtigung von • • • Physiologie -> Kapitel 3 Psychologie -> Kapitel 4 Arbeitswissenschaft Design Typographie § Beispiel • Unterscheidbarkeit => Rot-/Grün-Unterscheidungen eignen sich nicht zur Kodierung, da Rot und Grün von ca. 8% der männlichen Bevölkerung nicht unterschieden werden können. © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 4

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 1 Gestaltungsprinzipien der Ein-/Ausgabe (4) § DIN EN ISO 9241 -12 Informationsdarstellung § Formulierung der sieben Prinzipien § Empfehlungen • zur Organisation der Information o Anordnung o Gruppierung o Gliederung • zu grafischen Objekten o Zeiger o Schreibmarke • zu Kodierungen o Farben o Hervorhebungen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 5

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 1 Visuelle Informationsdarstellung § Regeln für § Verwendung von Farben § Verwendung von Effekten § Verwendung von Schrift § weitgehend unabhängig von der dargestellten Information § aus ISO 9241 -12 Informationsdarstellung § aus ISO 9241 -303 Anforderungen an elektronische optische Anzeigen § Leserlichkeit der Informationscodierung § Leserlichkeit von Grafiken § Leserlichkeit und Lesbarkeit © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 6

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 2 Verwendung von Farben (1) § Farben nicht als alleinige Kodierung § Farben sinnvoll verwenden (Bedeutung, Orientierungserleichterung) § Farbkodierung nach bekannten Zuordnungen § Anzahl der Farben zur Kodierung ≤ 6 + 2 § Unterscheidung in Farbton, Helligkeit und Sättigung Schwerer Fehler aufgetreten © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 7

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 2 Verwendung von Farben (2) § keine gemeinsame Verwendung von gesättigtem Blau und Rot (Tiefeneffekt) § gesättigtes Blau nicht für kleine Vordergrund-Objekte, insbesondere nicht bei dunklem Hintergrund § gesättigte Farben im Hintergrund vermeiden § vor dunklem Hintergrund langwellige Farben (rot bis grün) § Hintergrund in heller Umgebung hell Lesen Sie diesen Text © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 8

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 3 Verwendung von Effekten (1) § § § Hervorhebung darf maximal 10 - 20% des Inhalts betreffen möglichst nur 1 Art der Hervorhebung verwenden gute Hervorhebung durch 3 -D-Effekt („gedrückt“) gute Hervorhebung durch höhere Helligkeit bei Invertierung zur Hervorhebung auf ausreichende Lesbarkeit in beiden Zuständen achten § Abblendung durch Kontrastverringerung Text 1 Text 2 Text 3 Text 4 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Text 1 Text 2 Text 3 Text 4 http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 9

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 3 Verwendung von Effekten (2) § Blinken nur sparsam verwenden (max. 1 Stelle + Cursor) § gilt auch für andere Arten der Animation § Blinkende Objekte möglichst klein § Blinkrate 1 bis 3 Hz bei Tastverhältnis 50% § Vermeidung epileptischer Anfälle § gilt auch für andere Arten der Animation § keine Texte blinken lassen § allenfalls mit ⅓ bis 1 Hz bei Tastverhältnis 70% © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 10

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 4 Darstellung von Schrift (1) § Schrifthöhe mindestens 16' Sehwinkel § bei 50 cm Leseabstand 2, 3 mm Höhe § bei 60 cm Leseabstand 2, 8 mm Höhe § Schrifthöhe empfohlen bei 20' bis 22' Sehwinkel § bei 50 cm Leseabstand 2, 9 bis 3, 2 mm Höhe § bei 60 cm Leseabstand 3, 5 bis 3, 8 mm Höhe § Zeichenmatrix § mindestens 7 x 9 Pixel je Zeichen § bei Umlauten und Akzenten 2 Pixel mehr nach oben § bei Kleinbuchstaben für Unterlängen 2 Pixel mehr nach unten § Strichbreite 10 bis 17% der Zeichenhöhe § Verhältnis Zeichenbreite zu Zeichenhöhe zwischen 0, 7: 1 und 0, 9: 1 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 11

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 4 Darstellung von Schrift (2) § nötige Schrifthöhe in Pixeln errechnen § Monitordiagonale § benutzte Auflösung => Anzahl der Pixel in der Diagonalen § Größe eines einzelnen Pixels § benötigte Anzahl von Pixeln § ausreichende Auflösung § minimale Matrix gewährleisten © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 12

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester E 7. 1. 2. 4 Darstellung von Schrift (3) § Schriftgröße in Pixel © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 13

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 4 Darstellung von Schrift (4) § Bildschirmschrift möglichst § mit proportionaler Zeichenbreite • Ausnahmen z. B. für Programmtexte § serifenlos • insbesondere bei kleiner Schrift und geringer Auflösung § nicht unterstrichen • weil Unterlängen durchgestrichen werden § nicht kursiv • wegen Treppeneffekts (Aliasing) bei geringer Auflösung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 14

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 2. 4 Darstellung von Schrift (5) § Zeichenvorrat § inklusive Umlauten § Groß- und Kleinschreibung § horizontal ausgerichtet § Zeichenkontrast mindestens 1: 3 Lesen Sie diesen Text Lesen Sie diesen Text © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Lesen Sie diesen Text Lesen Sie diesen Text http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 15

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 1. 3 Akustische Informationsdarstellung § Allgemein § ausreichend laut § nicht zu laut (Gehör schädigend) § regelbar § keine Störung Dritter § abschaltbar, wenn keine besondere Aufmerksamkeitslenkung nötig § Klangausgabe § Signale deutlich unterscheidbar § bekannte Zuordnungen ausnutzen § Sprachausgabe § natürliche Sprechweise © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 16

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 1 Interaktionselemente (1) § Standard-Interaktionselemente controls, widgets § Basiselemente • Eingabefeld • Schaltfläche • Auswahlliste • Grafik § Erweiterungselemente • Rollbalken • Trennbalken § Applikationsabhängige Interaktionselemente controls § Interaktionselemente für Hypermedia • Ankerwort © Prof. Dr. • Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Auswahlgrafik custom Stand: 09. 11. 2015 Folie 7. 17

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 1 Interaktionselemente (2) § Gestaltung § jeweils für ein System / Look & Feel § im Folgenden Beispiele für • • • Windows XP Windows 7 Mac. OS Nimbus Look and Feel i. OS § im Edutainment-Bereich oft abweichend § Anforderungen § ISO 9241 -17 Dialogführung mittels Bildschirmformularen (alt) § ISO 9241 -143 Formulardialoge (neu) • dort Formularelemente genannt • geringe Strukturierung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 18

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 1 Eingabefeld für Daten (1) ISO 9241 -143: (einzeiliges) Textfeld auch Feld, Textfeld englisch field, entry field, edit field, text field § Anwendung § Eingeben, Ändern, Löschen • alphanumerische Daten • numerische Daten § für freie Eingaben (nicht aufzählbar) § Tastaturkenntnisse nötig, aber leicht erlernbar © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 19

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 1 Eingabefeld für Daten (2) § Gestaltung § Führungstext soll vorhanden sein • links vom Feld, ohne Trenner (Doppelpunkt), ohne Verbinder (Punktreihe) • kurz (Sehwinkel<5° => 4, 4 cm bei 50 cm Entf. ), aber informativ • möglichst nicht mehrere Wörter § Eingabebereich • so kurz wie möglich, angepasst an Eingabelänge • Unterscheidung zwischen Muss- und Kann-Feldern • Zahlen rechtsbündig • Vorbelegung für häufige / erwartete Werte § Besonderheiten • Eingabeschablonen • Automatische Fortbewegung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 20

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 2 Eingabefeld für Texte (1) ISO 9241 -143: (mehrzeiliges) Textfeld auch Textbereich englisch text area § Anwendung § wie bei Eingabefeld für alphanumerische Daten § Eingaben in der Regel länger © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 21

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 2 Eingabefeld für Texte (1) § Gestaltung § wie bei Eingabefeld für Daten, zusätzlich § Führungstext • bei breiten Feldern über dem Feld § Eingabebereich • so breit wie möglich • Zeilenabstand zwischen 2 - und 2, 7 -fachen der Buchstabenhöhe • nötige Rollbalken lieber vertikal als horizontal • rollen über vier Zeilen reicht aus • Texte linksbündig © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 22

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 3 Druckschalter (1) ISO 9241 -143: Schaltfläche englisch push button, command button Oberbegriff: Schaltfläche (englisch button) § Anwendung § Auslösung eines Vorgangs § nur kurzzeitig aktiv § Betätigung über • Zeige- oder Positioniergerät • Tastatur o mit Tabulator- und Leertaste o mnemonisch mit Buchstabentaste © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 23

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 3 Druckschalter (2) § Gestaltung der Bezeichnung § Text oder Symbol möglichst exakt § Normen und Standards beachten • ISO/IEC 11581 Benutzerschnittstellen und Symbole Teil 6: Kontrolle • ISO/IEC 18035: Information technology – Icon symbols and functions for controlling multimedia software applications • Look & Feel des Systems § Beschriftung möglichst nur ein Wort, groß beginnend § Tastenzuordnung durch Unterstreichung • nicht bei Standardauswahl • nicht bei Abbruchtaste © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 24

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 3 Druckschalter (3) § Gestaltung der Auswahl § möglichst wenige Schalter im Dialog § besser horizontal als vertikal angeordnet § eine Standard-Vorgabe § nur eine Auslösetaste • keine mnemonischen Tasten bei Vorgabe-Schaltfläche • für Abbruch-Schalter die Escape-Taste © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 25

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 4 Kontrollkästchen (1) ISO 9241 -143: Kontrollkästchen englisch check box, check button Oberbegriff: Schaltfläche (englisch button) § Anwendung § § § Dauerschalter n binäre Schalter m-aus-n-Auswahl, n <= 7 Betätigung wie bei Druckschaltern Umkehrung des Zustandes bei jeder Betätigung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 26

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 4 Kontrollkästchen (2) § Gestaltung § Zustände „An“ / „Aus“, ggf. auch „belanglos“ oder „undefiniert“ • gut unterscheidbar • gut zuzuordnen § Bezeichnung • Text oder Symbol ca. 0, 3 cm rechts neben Kästchen o gilt nicht bei Berührungsbildschirm • sonst wie bei Druckschaltern § Gruppierung • vertikal angeordnet, ca. 0, 3 cm Zeilenabstand • nicht mehr als 7 pro Auswahlgruppe • ggf. einzelne Kästchen deaktivieren, Anzahl jedoch beibehalten © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 27

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 5 Optionsfelder (1) ISO 9241 -143: Optionsfeld englisch radio button, option button Oberbegriff: Schaltfläche (englisch button) § Anwendung § § § Dauerschalter n binäre Schalter, die sich gegenseitig ausschließen 1 -aus-n-Auswahl, n <= 7 Betätigung wie bei Druckschaltern bei jeder Betätigung löschen der vorigen Auswahl (wenn anders) © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 28

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 5 Optionsfelder (2) § Gestaltung § wie bei Kontrollkästchen § Sonderformen • Auswahlmenge • Optionsmenü Auswahlmenge mit rechteckigen Tasten © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Optionsmenü mit Anzeige der gewählten Option in separater Auswahlleiste http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 29

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (1) ISO 9241 -143 Listenfeld englisch list box § Anwendung § 1 -aus-n-Auswahl oder m-aus-n-Auswahl § n groß oder n variabel § n Zeilen, die markiert werden können © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 30

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (2) § Gestaltung § Führungstext • Text linksbündig über dem Feld • sonst wie bei Eingabefeldern § Auswahl • mindestens vier Zeilen gleichzeitig sichtbar • vertikale Rollbalken, wenn nötig • möglichst keine horizontalen Rollbalken © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 31

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (3) § Drehscheibe ISO 9241 -143 Schaltfläche für die schrittweise Weiterschaltung englisch spin box, stepper, spinner nur Einfachauswahl Anzeigebereich nur eine Zeile häufig gleichzeitig als Eingabefeld auch mit Tastenbedienung auch mit Gestenbedienung © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 32

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (4) § mehrspaltige Auswahlliste § bei großen Anzahlen § oft mit horizontalem Rollbalken § Problem: Verdeckung gewählter Elemente © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 33

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (5) § tabellarische Auswahlliste § nur ganze Zeile wählbar © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 34

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (6) § hierarchische Auswahlliste (Auswahlbaum, tree list) § einfach, wenn nur Einfach - oder Mehrfachauswahl auf Ebene der Blätter § Aus- und Einklappen § Deselektieren beim Einklappen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 35

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 6 Listenfeld (7) § hierarchische Auswahlliste (Auswahlbaum, tree list) § schwierig bei verteilter Mehrfachauswahl § Aus- und Einklappen § Selektieren von Blättern und Ästen § Visualisierung der Auswahl in Ästen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 36

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 7 Klappliste (1) ISO 9241 -143 Drop-down-Liste / Pop-up-Liste englisch drop down list / pop up list © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 37

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 7 Klappliste (2) § Varianten § Drop down • Liste erscheint unterhalb der Anzeige • meist bisher gewählter Eintrag in Mitte des Auswahlbereichs § Pop up • bisher gewählter Eintrag bleibt an seinem Platz • Rest der Liste wird darüber und darunter dargestellt § Anwendung § § § 1 -aus-n-Auswahl anstelle von Optionsfeldern bei wenig Platz anstelle von Listenfeld bei wenig Platz zusätzlicher Interaktionsschritt zum Ausklappen der Liste ausgewählter Eintrag wird in das Feld übernommen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 38

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 7 Klappliste (3) § Gestaltung § Führungstext • Text linksbündig über dem Feld oder links neben dem Feld • sonst wie bei Eingabefeldern § Auswahl • nach Ausklappen mindestens vier Zeilen gleichzeitig sichtbar • vertikale Rollbalken, wenn nötig • möglichst keine horizontalen Rollbalken • möglichst nicht mehr als 10 bis 12 Elemente © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 39

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 8 Kombinationsfeld (1) ISO 9241 -143 Kombinationsfeld auch Kombiliste, Kombifeld englisch (drop down) combination box, combo box § Anwendung § erweiterbare 1 -aus-n-Auswahl § Kombination aus Klappliste und Eingabefeld © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 40

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 8 Kombinationsfeld (2) § Gestaltung § Grafische Gestaltung • Unterscheidbarkeit zu Klappliste § Führungstext • wie bei Klappliste § Auswahl • wie bei der Klappliste • wie bei Eingabefeldern © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 41

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 9 Piktogramm (1) englisch icon § Anwendung § bildhafte Repräsentation • eines Objekts • einer Funktion • eines Prozesses § statisch oder dynamisch § dienen zum „Öffnen“ © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 42

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 9 Piktogramm (2) § Gestaltung § möglichst selbsterklärend § möglichst aus dem Arbeitskontext § Gestaltgesetze beachten § gute Figur-Grund-Unterscheidung § zusätzlicher Führungstext sinnvoll § bekannte Zuordnungen beibehalten • etablierte Standards • Norm ISO 11581 wird in der Regel missachtet © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 43

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 10 Skala (1) ISO 9241 -143 Analoge Formularelemente (z. B. Drehregler, Schieberegler) englisch analogue form element (slider, scale) § Anwendung § Eingabe analoger Größen § Darstellung des Verhältnisses von gewählter Größe und Auswahlbereich © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 44

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 2. 10 Skala (2) § Gestaltung § Schieberegler gut bedienbar § Drehknöpfe nicht so gut intuitiv bedienbar § möglichst selbsterklärend § möglichst aus dem Arbeitskontext § Skalenteilung sinnvoll § zusätzliche Wertdarstellung als Text sinnvoll • auch als Eingabefeld • auch als Drehscheibe © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 45

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 3. 1 Rollbalken ISO 9241 -143 Bildlaufleisten englisch scroll bar § Anwendung § wenn nicht genügend Platz für alle Informationen § nur wenn nötig § bevorzugt vertikal § möglichst proportional in Lage und Größe des Schiebers © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 46

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 3. 2 Trennbalken englisch split bar § Anwendung § Trennung des Informationsbereichs in unabhängige Teile § z. B. für weit auseinander liegende Spalten oder Zeilen einer Tabelle § meist jeweils eigene Rollbalken erforderlich © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 47

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 4. 1 Ankerwort englisch link point, hotword § Verwendung § Sprung zu einem anderen Knoten § Einblenden einer Zusatzinformation § Abspielen eines Mediums § Gestaltung § Hervorhebung • statisch • dynamisch § Statuszeile für Erläuterungen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 48

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 2. 4. 2 Auswahlgrafik englisch map § Verwendung § Grafik als Anker § sonst wie bei Ankerworten § Gestaltung § statische Hervorhebung nur, wenn ganze Grafik einziger Anker § dynamische Hervorhebung • Pfeilveränderung • Aufhellen von Teilbereichen § Statuszeile für Erläuterungen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 49

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 1 Gruppierungsprinzipien für visuelle Information § Gruppierung nach Sinnzusammenhang und Arbeitsablauf § inhaltliche Gemeinsamkeiten § Abfolge der Bearbeitung § Benutzungshäufigkeit § sonstige Gruppierungen • alphabetisch • numerisch § zum schnellen Auffinden nicht mehr als 5 Elemente § für umfassenden Überblick nicht mehr als 5 Gruppen § maximal 15 Gruppen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 50

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 2 Gruppierungselemente (1) § Gruppenumrandung § Rahmen § farbliche Hinterlegung § Gruppenüberschrift § meist oben links im Gruppenrahmen § Notizbuch / Register § mehrere Zusammenfassungen von Interaktionselementen § Steuerung über Reiter (entspricht Rollen zu festen Punkten) • Problem bei zu vielen Reitern: Springen von Reiter-Reihen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 51

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 2 Gruppierungselemente (2) § Notizbuch mit Gruppenumrandungen und -überschriften © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 52

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 3 Anordnung (1) § Bildschirmlayout § Gestaltgesetze beachten § Leserichtung beachten • in europäischer Kultur von oben links § Trennung der Gruppen mindestens 0, 5 cm § möglichst wenig Fluchtlinien § ausbalanciertes und symmetrisches Bild § Spalten günstiger für das Suchen © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 53

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 3 Anordnung (2) § Bildschirmlayout © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 54

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 3 Anordnung (3) § Verteilung auf mehrere Geräte § feste Zuordnung von Informationsarten zu Geräten § maximal zwei Bildschirme § maximal drei Eingabegeräte © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 55

Wissen. Was praktisch zählt. Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7. 3. 3 Anordnung (4) § Binnengliederung § Eingabefelder linksbündig ausrichten § Beschriftungen • bei nahezu gleicher Länge linksbündig untereinander • bei stark unterschiedlicher Länge (wenn unvermeidbar) rechtsbündig an die Felder § keine Trenner (: ) oder Verbinder (. . . ) § Hervorhebung des aktuellen Eingabefeldes § möglichst Muss- vor Kannfelder • wenn die Aufgabe keine andere logische Folge erfordert © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http: //mci. drheinecke. de Stand: 09. 11. 2015 Folie 7. 56