© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie.

Präsentation zum Thema: "© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie."—  Präsentation transkript:

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

2 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.2 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.

3 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.3 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 (ISO9241-12)

4 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.4 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.

5 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.5 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

6 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.6 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 ISO9241-12 Informationsdarstellung  aus ISO9241-303 Anforderungen an elektronische optische Anzeigen  Leserlichkeit der Informationscodierung  Leserlichkeit von Grafiken  Leserlichkeit und Lesbarkeit

7 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.7 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

8 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.8 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

9 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.9 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 Text 2 Text 1 Text 2 Text 3 Text 4 Text 2 Text 1 Text 2 Text 3 Text 4 Text 2

10 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.10 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%

11 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.11 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 7x9 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

12 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.12 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

13 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.13 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

14 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.14 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

15 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.15 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

16 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.16 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

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

18 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.18 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 MacOS Nimbus Look and Feel iOS  im Edutainment-Bereich oft abweichend  Anforderungen  ISO9241-17Dialogführung mittels Bildschirmformularen (alt)  ISO9241-143Formulardialoge (neu) dort Formularelemente genannt geringe Strukturierung

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

20 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.20 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 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

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

22 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.22 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

23 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.23 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7.2.2.3 Druckschalter (1)  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 ISO9241-143: Schaltfläche englisch push button, command button Oberbegriff: Schaltfläche (englisch button)

24 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.24 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

25 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.25 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

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

27 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.27 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

28 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.28 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7.2.2.5 Optionsfelder (1)  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) ISO9241-143: Optionsfeld englisch radio button, option button Oberbegriff: Schaltfläche (englisch button)

29 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.29 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 Optionsmenü mit Anzeige der gewählten Option in separater Auswahlleiste

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

31 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.31 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

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

33 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.33 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

34 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.34 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

35 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.35 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

36 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.36 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

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

38 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.38 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

39 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.39 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

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

41 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.41 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

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

43 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.43 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 ISO11581 wird in der Regel missachtet

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

45 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.45 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

46 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.46 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7.2.3.1 Rollbalken  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 ISO9241-143 Bildlaufleisten englisch scroll bar

47 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.47 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 7.2.3.2 Trennbalken  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 englisch split bar

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

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

50 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.50 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

51 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.51 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

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

53 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.53 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

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

55 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.55 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

56 © Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. http://mci.drheinecke.dehttp://mci.drheinecke.de Wissen. Was praktisch zählt. Stand: 09.11.2015 Folie 7.56 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