© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.2 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.3 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 )
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.4 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.5 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Gestaltungsprinzipien der Ein-/Ausgabe (4) DIN EN ISO 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. Wissen. Was praktisch zählt. Stand: Folie 7.6 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Visuelle Informationsdarstellung Regeln für Verwendung von Farben Verwendung von Effekten Verwendung von Schrift weitgehend unabhängig von der dargestellten Information aus ISO Informationsdarstellung aus ISO Anforderungen an elektronische optische Anzeigen Leserlichkeit der Informationscodierung Leserlichkeit von Grafiken Leserlichkeit und Lesbarkeit
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.7 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Verwendung von Farben (1) Farben nicht als alleinige Kodierung Farben sinnvoll verwenden (Bedeutung, Orientierungserleichterung) Farbkodierung nach bekannten Zuordnungen Anzahl der Farben zur Kodierung ≤ Unterscheidung in Farbton, Helligkeit und Sättigung Schwerer Fehler aufgetreten
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.8 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.9 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Verwendung von Effekten (1) Hervorhebung darf maximal % 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.10 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.11 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.12 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.13 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester E Darstellung von Schrift (3) Schriftgröße in Pixel
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.14 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.15 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Darstellung von Schrift (5) Zeichenvorrat inklusive Umlauten Groß- und Kleinschreibung horizontal ausgerichtet Zeichenkontrast mindestens 1:3 Lesen Sie diesen Text
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.16 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.17 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.18 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 ISO Dialogführung mittels Bildschirmformularen (alt) ISO Formulardialoge (neu) dort Formularelemente genannt geringe Strukturierung
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.19 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 ISO : (einzeiliges) Textfeld auch Feld, Textfeld englisch field, entry field, edit field, text field
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.20 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.21 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Eingabefeld für Texte (1) Anwendung wie bei Eingabefeld für alphanumerische Daten Eingaben in der Regel länger ISO : (mehrzeiliges) Textfeld auch Textbereich englisch text area
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.22 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.23 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 ISO : Schaltfläche englisch push button, command button Oberbegriff: Schaltfläche (englisch button)
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.24 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Druckschalter (2) Gestaltung der Bezeichnung Text oder Symbol möglichst exakt Normen und Standards beachten ISO/IEC 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. Wissen. Was praktisch zählt. Stand: Folie 7.25 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.26 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 ISO : Kontrollkästchen englisch check box, check button Oberbegriff: Schaltfläche (englisch button)
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.27 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.28 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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) ISO : Optionsfeld englisch radio button, option button Oberbegriff: Schaltfläche (englisch button)
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.29 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Optionsfelder (2) Gestaltung wie bei Kontrollkästchen Sonderformen Auswahlmenge Optionsmenü Auswahlmenge mit rechteckigen Tasten Optionsmenü mit Anzeige der gewählten Option in separater Auswahlleiste
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.30 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Listenfeld (1) Anwendung 1-aus-n-Auswahl oder m-aus-n-Auswahl n groß oder n variabel n Zeilen, die markiert werden können ISO Listenfeld englisch list box
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.31 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.32 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Listenfeld (3) Drehscheibe nur Einfachauswahl Anzeigebereich nur eine Zeile häufig gleichzeitig als Eingabefeld auch mit Tastenbedienung auch mit Gestenbedienung ISO Schaltfläche für die schrittweise Weiterschaltung englisch spin box, stepper, spinner
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.33 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Listenfeld (4) mehrspaltige Auswahlliste bei großen Anzahlen oft mit horizontalem Rollbalken Problem: Verdeckung gewählter Elemente
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.34 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Listenfeld (5) tabellarische Auswahlliste nur ganze Zeile wählbar
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.35 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.36 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.37 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Klappliste (1) ISO Drop-down-Liste / Pop-up-Liste englisch drop down list / pop up list
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.38 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.39 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.40 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Kombinationsfeld (1) Anwendung erweiterbare 1-aus-n-Auswahl Kombination aus Klappliste und Eingabefeld ISO Kombinationsfeld auch Kombiliste, Kombifeld englisch (drop down) combination box, combo box
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.41 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.42 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Piktogramm (1) Anwendung bildhafte Repräsentation eines Objekts einer Funktion eines Prozesses statisch oder dynamisch dienen zum „Öffnen“ englisch icon
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.43 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.44 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Skala (1) Anwendung Eingabe analoger Größen Darstellung des Verhältnisses von gewählter Größe und Auswahlbereich ISO Analoge Formularelemente (z.B. Drehregler, Schieberegler) englisch analogue form element (slider, scale)
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.45 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.46 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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 ISO Bildlaufleisten englisch scroll bar
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.47 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.48 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.49 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.50 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.51 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.52 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Gruppierungselemente (2) Notizbuch mit Gruppenumrandungen und -überschriften
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.53 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.54 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester Anordnung (2) Bildschirmlayout
© Prof. Dr. Andreas M. Heinecke, WHS Gelsenkirchen. Wissen. Was praktisch zählt. Stand: Folie 7.55 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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. Wissen. Was praktisch zählt. Stand: Folie 7.56 Mensch-Computer-Interaktion WS 2015/2016 – Alle Bachelor-Studiengänge der Informatik – 1. Semester 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