Mensch Maschine

Mensch-Maschine-Interaktion
Sommersemester 2021
Prof. Dr.-Ing. Michael Prilla
Sebastian Reinke
Mensch-Maschine-Interaktion 2021 1
Fragen zur Vorlesung
• Stellen Sie Ihre Fragen in den Online-Sessions am 5.5., 19.5. und
2.6.2021
oder
• Senden Sie Ihre Fragen in Table:

• Stellen Sie Ihre Frage anonym oder mit Namen
• Fügen Sie die entsprechende Folie als Screenshot hinzu
• Table Q&A System: https://table.in.tu-clausthal.de/5e99a8d10f67b44b766b7310
• Login über RZ-Kürzel
Diese Vorlesung auf einer Folie
• Existierende Styleguides helfen bei Gestaltung von Nutzeroberflächen
• Grundlagen der Wahrnehmung & Kognition sind auch Grundlagen bei

Design von Nutzeroberflächen
• Windows, Icons, Menus & Pointers als vorherrschendes Konzept von

Interaktionsdesign
• Verwendung von Design um Nutzer durch den Prozess in einem System

zu führen
Quelle zur Vorlesung: Preim & Dachselt 2010 (http://www.hci-buch.de/)
Styleguides
Styleguides um ein einheitliches Design abzustimmen
Was sind Styleguides?
„Ein Styleguide ist eine strukturierte Sammlung von Richtlinien
für die Entwicklung von Benutzungsschnittstellen. Sie sind
entweder auf bestimmte Benutzerklassen,
Anwendungssysteme oder Plattformen zugeschnitten. Die
Richtlinien enthalten Begründungen, Beispiele und
Gegenbeispiele, damit Entwickler in der Lage sind, die
Anwendbarkeit und Relevanz von Richtlinien einzuschätzen.“
[Preim & Dachselt 2015]
Warum Styleguides?
• Softwareprojekte umfassen oft viele verschiedene Dialoge
• Konsistenz sichern: Gleiche Bedienung überall gewährleisten
• Usability-Probleme vermeiden
• In Projekten können viele Entwickler und andere Beteiligte arbeiten

• Unterschiedliche Auffassungen zur Gestaltung vermeiden
• Einschleichen von nicht geplanten Änderungen über die Zeit vermeiden
• Gemeinsame Referenz zur Diskussion
• Entwickler stehen oft unter Zeitdruck und müssen schnell die

Standards zur Gestaltung nutzen können
Inhalt eines Styleguides
• Geräte
• Eingabemöglichkeiten
• Interaktionstechniken
• Begründungen
• Entstehungsprozesse
• Auch: Namenskonventionen
• Wichtig: Fortschreiben und aktualisieren – häufiges Problem ist, dass

der Styleguide nicht aktuell ist
Erfolgskriterien für Styleguides: How to ...
• Schnelles Auffinden benötigter Informationen (Index, Suche, logischer
Aufbau)
• Leichte Umsetzbarkeit (klare Strategie und Designsprache, keine
komplexen Anweisungen)
• Verweis auf direkt nutzbare Komponenten (Basisklassen, Templates,
Icons, ...)
• Beispiele zur Anschaulichkeit und Nachweis der Praktikabilität / des
Nutzens
• Begründungen und Kontext, um Relevanz der Richtlinien verständlich
zu machen
• Organisatorische Einbettung in Berichte usw.
Gestaltung: Goldene Regeln von Shneiderman
(aus: Dix et al., 2003)
1. Strive for consistency (sequences, layout, terminology, …)
2. Enable frequent users to use shortcuts
3. Offer informative feedback (desirable for every action)
4. Design dialogs to yield closure (user knows when task is completed)
5. Prevent errors (and offer instructions how to recover)
6. Permit easy reversal of actions (low anxiety, encourage exploration)
7. Support internal locus of control (user controls the system)
8. Reduce short-term memory load (keep displays simple)
Erstellung von Styleguides
• „Lebendes Dokument“
• Gute Durchsuchbarkeit wichtig
• Adressaten müssen von Nutzen überzeugt sein
• Mischung von wissenschaftlichen Erkenntnissen & eigenen Ideen
• Oft unterschiedliche „Fassungen“ für Designer & Entwickler
• Beispiele:
• Apple OS X Human Interface Guidelines:
https://developer.apple.com/library/mac/documentation/UserExperience/
Conceptual/OSXHIGuidelines/
• Microsoft Windows Guidelines:
https://developer.microsoft.com/de-de/windows/desktop/design
Windows
Fenstersysteme, um an mehreren Aufgaben gleichzeitig zu arbeiten
Wozu Fenster?
• Abbildung von computer-
gestützten Prozessen auf
menschliche Gedankenwelt
• Bearbeitung mehrerer Aufgaben
parallel möglich
• Erinnerung: Rolle von Metaphern in
der MMI
Bild: Eigener Screenshot
Gestaltungselemente in einem Fenster
Titelleiste Menüleiste Ordner Manipulation des Fensters
Hierarchie in einem Fenster
Vertikaler Top-Level-Fenster
Scrollbalken - Icons zur Manipulation
- Titelleiste
- Menüleiste
- Vertikaler Scrollbalken
- Horizontaler Scrollbalken
- Fensterinhalt
Dateien - Ordner
- …Unterordner
- …Dateien
- Dateien

Panel Horizontaler Fensterinhalt
Scrollbalken Mensch-Maschine-Interaktion 2021 13
Charakteristika Bild: Eigener Screenshot
x
• Verschieben & Skalieren

• Ikonifizieren &
Minimieren

• Ikonifizieren &
Minimieren
• Vordergrund/Hintergrund
=2½D
• Funktionen zur
Anordnung sinnvoll
Probleme Bild: Eigener Screenshot
• Unübersichtlichkeit
(insb. wenn es viele Fenster für
untergeordnete Prozessschritte
gibt)
• Überlappung / Verschiebbarkeit
kann vordefiniertes Design stören
• Anordnen vieler Fenster
zeitaufwändig
• Aufteilung der Bedienung auf
viele Fenster ist verwirrend
Arten von Fenstern
• Primär
• Sekundär
• Eigenschaften
• Dialogboxen
• Messages
• Farb-Paletten
• Popups
• Fehlermeldungen
Beispiele aus dem Windows Styleguide
https://msdn.microsoft.com/de-de/library/windows/desktop/dn742499.aspx
Beispiel aus dem Mac OS X Styleguide – Speichern
https://developer.apple.com/library/mac/documentat
ion/UserExperience/Conceptual/OSXHIGuidelines/Wi
ndowDialogs.html#//apple_ref/doc/uid/20000957-
CH43-SW1
Icons CC0 Public Domain
Grafiken zur Wiedererkennung
Eigenschaften von Icons
• Nutzung nicht nur in MMI:
• Schilder: Verkehr, Chemielabor, etc. [1] [2] [3]
• Orte: Bahnhöfe, Flughäfen, etc.
• Toiletten
• In MMI: Funktionen und Programme [4] [5] [6]
Bildquellen siehe Bildreferenzen(F.72)
• Wiedererkennung!
• Icons helfen auch bei Internationalisierung von Software [Strothotte & Strothotte 1997]
• Achtung: Farben und Formen sind nicht in allen Kulturen gleich!
• Darstellung von: Konzepten, Aktionen, Objekten
• Unterstützen mentales Modell des Nutzers
• Oft platzsparender als textueller Ersatz (insb. bei Smartphones)
• Icons weniger anschaulich als Fotos, Abstraktion hilft bei Verdeutlichung
• Gewählte Icons beibehalten
Repräsentative vs. Abstrakte Icons
• Repräsentativ: Abbildung realer Gegenstände
• Abstrakt: Abbildung von Konzepten

Abstrakte Icons müssen erlernt
werden!
Erklärung z.B. via Tooltips
Bilder: Eigene Screenshots
Checkliste für den Einsatz von Icons
Icons sollten:
• Einfach und klar sein,
• Verständlich sein,
• Einprägsam sein,
• Einen klaren Kontrast zum Hintergrund
haben (dazu ist eine eigene
Hintergrundfarbe erforderlich)
• Leicht unterscheidbar sein und
• Sich im selektierten Zustand klar von
anderen Icons abheben
[Benyon et al., 2005]
• Zustände von Icons:

[7] [8] Mensch-Maschine-Interaktion 2021 24
Vorgehensweise beim Entwurf von neuen Icons
• Identifikation wichtiger Konzepte der
Domäne
• Probanden zeichnen Grafiken
• Zuordnung von Kandidaten-Grafiken zu
diesen Konzepten durch mehrere
Experten
• Kategorisierung der Grafiken
anhand visueller Merkmale
• Generierung von repräsentativen
Prototypen der Icons auf Basis der
sortierten Kandidatengrafiken
Bilder und Inhalte: Payne & Starren 2006, 2010
Beispiel Mac OS X Styleguides
https://developer.apple.com/library/mac/documentation/UserExperience/Conc
eptual/OSXHIGuidelines/Designing.html#//apple_ref/doc/uid/20000957-CH87-
SW1
Beispiel Windows Style Guidelines
https://docs.microsoft.com/de-
de/windows/desktop/uxguide/vis-icons
Menus
Strukturierung von Interaktionselementen
Menüs
• Strukturierung von
Interaktionselementen
• Selektion von Kommandos anstatt
erinnern
• Hierarchisierung von
zusammenhängenden Elementen
https://commons.wikimedia.org/wiki/File:PowerShell_registry_provider.png CC-BY-NC-SA Digibarn Computer Museum
Arten von Menüs
• Menüleiste
• Pull-Down
• Cascading Menus
• Ribbons (Multifunktionsleiste)
• Pop-up
Arten von Menüs: Pull-Down
Konvention: Datei | Bearbeiten | Ansicht
Menüleiste
Pull-Down Menü
Arten von Menüs – Kaskadierendes Pull-Down Menü
[Wurzelebene] Menüleiste
Menüebene 1 Menüebene 1 Menüebene 1 Pull-Down Menü
Menüebene 2 Menüebene 2
Kaskadierendes
Menüebene 3
Untermenü
• Komplex verschachtelte Menüs sind schwer zu merken!

• < 10 Einträge pro Menü
• ~3-10 Elemente pro Eintrag, ggf. Strukturierung durch Linien
• Tiefe 2-3 Bild: Eigener Screenshot
Literatur hat widersprüchliche Angaben!

Pull-down Menüs: Eigenschaften & Nachteile
• Es ist immer nur ein Pfad im Menü sichtbar
• Kein Schreibaufwand durch Auswahl der Menüs
• Kommandonamen müssen nicht erlernt werden (→ Icons)
Nachteile:
• Es können nicht mehrere Aktionen zusammen initiiert werden
• Komplexe Menüs sind unübersichtlich (→ cognitive load)
• Langsam für fortgeschrittene Nutzer
• Nicht-verfügbare Optionen erschweren Suche
• Nutzer denken in anderen Gruppierungen als Entwickler!
Arten von Menüs: Ribbons & Popup
Versuch komplexe Menüs zu vereinfachen:
• 105 Menüeinträge in Word 97
• 243 Menüeinträge in Word 2003
Suchleiste
Menüleiste
Ribbon
Popup-Menü
• Explizit (Kontextabhängig) vs.

Implizit (immer gleich)
• Oft über Rechtsklick erreichbar
• Nähe der Selektion → Fitts‘ Law
• Beinhalten oft Teilmenge der
Pulldown-Menüs
Arten von Menüs: Tear Off
Menüleiste Menü „abreißbar“
Tear off eines

Menüeintrags
+ Wichtige Schaltflächen
immer erreichbar
+ Freiheit für den Nutzer
- Platzbedarf
- Übersicht, Ordnung
Arten von Menüs: Kreismenüs
+ Schnelle Selektion
- Hoher Platzbedarf
Häufig bei großen Touchscreens

genutzt (Distanz, Auswahl)
Menü
Selektiertes
Menüelement
https://support.content.office.net/en-us/media/84f49f80-3558-4b3d-82a3-6bbfdaa91a45.png
Einblenden zusätzlicher
http://www.swordandsharpie.com/learn-from-games-the-radial-menu/
Einträge möglich
Arten von Menüs: Flower menus
http://www.gillesbailly.fr/flowermenu.html
[Bailly, Lecolinet, Nigay 2008]
Inkonsistenzen vermeiden Bilder: eigene Screenshots
Konventionen für Gestaltung von Menüs
• Tastaturkürzel für wichtige Elemente vergeben (Auf Doppelbelegung
achten!)
• Lange Tastaturkürzel sind schwer zu merken,
bspw. Sprache in OneNote ändern: Alt + p => sp => l
• Kritische Operationen (z.B. „Löschen“) nur über Nachfrage mit
Tastaturkürzel erlauben
• Häufig genutzte Elemente leicht erreichbar positionieren
• Card-Sorting um Menüstruktur zu ermitteln
(http://www.usability.gov/how-to-and-tools/methods/card-
sorting.html)
• Elemente sollten nicht wie Menütitel heißen
Beispiel Mac OS X Style Guidelines
Auch hier die Konvention mit: Datei | Bearbeiten | Anzeige
https://developer.apple.com/library/mac/doc
umentation/UserExperience/Conceptual/OSX
HIGuidelines/MenuNaming.html#//apple_ref
/doc/uid/20000957-CH24-SW1
Beispiel Windows Style Guide Bild: Eigener Screenshot
https://msdn.microsoft.com/de-
de/library/windows/desktop/dn742392(v=vs.85).aspx
Pointers
Zeiger zur Interaktion mit dem System
Zeigegeräte
• Indirekt: Maus, Touchpad, Trackball
• verschieben eines Cursors
• Verdeckt keine Bildfläche (im Vgl. zu Touchscreen)
CC BY 2.0 Justus Blümer
• Direkt: Stift https://www.flickr.com/photos/j

ustusbluemer/6904132204
• Auswahl von Elementen erschwert, wenn

Elemente dicht beieinander liegen
• Unterschiedliche Mauscursor repräsentieren
verschiedene Interaktionsmöglichkeiten
CC0
CC BY 2.5 Lordalpha1
https://commons.wik
imedia.org/wiki/File: Mensch-Maschine-Interaktion 2021 43
Mouse-cursor-hand-
pointer.svg
Beispiel Mac OS X Style Guidelines
https://developer.apple.com/library/mac/documentation/
UserExperience/Conceptual/OSXHIGuidelines/Pointers.htm
l#//apple_ref/doc/uid/20000957-CH97-SW2
Beispiel Windows Style Guide
https://msdn.microsoft.com/de-de/library/windows/desktop/dn742466(v=vs.85).aspx
Control
Welche Interaktionselemente sind wann sinnvoll?
Modale vs. Nicht-modale Dialoge
Modal: Nicht-Modal:
Fenster muss geschlossen werden bevor weitere Primärfenster kann parallel weiter genutzt werden
Bearbeitung möglich ist.
Unterscheidung: Applikationsmodal vs. Systemmodal Bilder: Eigene Screenshots
Modale vs. Nichtmodale Dialoge – Abwägungen
• Abwägen von Freiheitsgraden für die Nutzer
• Wichtige Fehlermeldungen prominent platzieren
• Nutzer nicht mit zu vielen Fenstern verwirren
• Systemmodale Fenster sollten die Ausnahme sein
• Abhängigkeiten im abgebildeten Prozess bedenken
• Wo sollen neue Fenster platziert werden, wenn schon nichtmodale
Fenster offen sind?
„Dialoge sollen in der Nähe des Fensters erscheinen, auf das sie sich
beziehen, aber nicht direkt auf diesem Fenster“ [Shneiderman & Plaisant 2009]
Fragen zur Dialoggestaltung
• Welche Eingaben sind notwendig und welche sind optional?
• Welche Eingaben stehen in einem logischen Zusammenhang?
• Welche Wertebereiche numerischer Eingaben sind zu beachten?
• Welche Anforderungen an die Genauigkeit besteht?
• Welche Eingaben stehen im Zusammenhang?
• Welche Abhängigkeiten zwischen den Eingaben existieren?
• In welchem Format sollen bzw. können Eingaben gemacht werden?
• Wie können Aufgaben auf verschiedene Dialoge aufgeteilt werden?
[Preim & Dachselt 2010, p.375]
Dialoggestaltung – Sinnvolle Standardwerte
• Bei Dialogen immer einen sinnvollen Standardwert anbieten
• Die für den Nutzer wahrscheinlichste Option anbieten
• Bei destruktiven Aktionen: Sichere Aktion als Standard
https://docs.microsoft.com/de-
de/windows/desktop/uxguide/win-dialog-box

Controls I
Textbox • Beschreibung anbieten
• Gruppieren von
zusammengehörenden
Elementen
• Plausibilitätsprüfung der
Eingabe
• Evtl. Hilfe für Eingabe
anbieten „TTMMJJJJ“

Controls II
Tabs
Trennlinie mit Überschrift
Label
Drop-Down Box
Number-Spinner
Checkbox
Button „…“ als Indikator für neuen Dialog

Controls III • List Box:
• Auswahl von vielen Elementen
• Mehrfachauswahl machbar
• Hoher Platzbedarf
• Unübersichtlich bei vielen
Einträgen
• Sortierung von Einträgen?
• Combobox:
• Textbox zum leichteren
Auffinden von Elementen
• Ansonsten wie List Box
• Drop-down List Box:
Sinnvolle Beschriftungen nicht vergessen! • Wenn wenig Platz
vgl :https://www3.rocketsoftware.com/bluezone/help/v52/en/bzsh/bzaa_aref_list-combo-and- • Nur eine Auswahl möglich
drop-down-list-boxes.htm • Einträge können auch abhängig
von vorheriger Auswahl sein
• Button um List aufzuklappen
Controls IV
Farbpalette
Radiobuttons (wenn 1 von wenigen
Optionen selektierbar sein soll)
Schieberegler Schieberegler eher bei relativen Werten

bzw. wenn konkrete Werte uninteressant
sind (ansonsten Numberspinner oder
Bilder: Eigene Screenshots Textbox)!
Gruppieren von Elementen
• Möglichkeiten:
• Rahmen
• Linien
• Farben
• Konsistenz wichtig!
• Einzelne Elemente
brauchen keinen
Rahmen!
Beschriftungen von Elementen
• Labels am Anfang
mit Großbuchstaben
• Größe: 10-12px
• Doppelpunkte bei
Elementen mit
Eingabemöglichkeit
werden schneller
wahrgenommen
[Galitz 2007]
Text – Größe, Formatierung
• Nutzer „lesen“ keine Oberflächen, sie „scannen“ sie
• Wenn Nutzer gefunden haben, was sie suchen, interagieren sie
• Redundanz vermeiden
• Fettgedruckte (engl. bold) Texte, um wichtige Aspekte hervorzuheben
• Kursivtext (engl. Italics) für wortwörtliche Hervorhebung, wird aber
langsamer gelesen [Hill & Scharff 1997]
• Unterstrichenen Text nur für (Hyper-)Links
• Vielnutzer nutzen oft kleine Schriften (z.B. Programmierer), Ältere
Menschen bevorzugen große Schriftarten
• Formatierung für Uhrzeiten / Datumsangaben vom Nutzer konfigurierbar
gestalten
• Unterschiedliche Schriftarten und Formatierung zurückhaltend einsetzen
https://msdn.microsoft.com/de-de/library/windows/desktop/dn742478(v=vs.85).aspx
Sinnvolle Fehlermeldungen
• User muss jederzeit über
Zustand des Systems Kenntnis
haben.
• Sinnvolle Fehlermeldungen
verwenden, damit der Nutzer
handeln kann
• Microsoft Style Guide:
„Problems are never OK“
Eigener Screenshot
Vorsicht: Automatische Gestaltung von Dialogen
Eigener Screenshot
Post-WIMP User Interfaces
Mehr als nur Maus und 2D Oberflächen
Vorteile und Nachteile von WIMP
Nachteile Vorteile
• Je komplexer die Software, desto • Einfach zu lernen
schwieriger ist auch das Menü zu
erlernen • Einfach zu behalten
• Zu viel Zeit für Manipulation des • Verbreitung von Standards
Interfaces benötigt, im Vgl. zur
Nutzung der Anwendung
• Unpassend für Manipulation von
3D Objekten
• Maus & Tastatur passt nicht jedem
• Für einen Nutzer zur Zeit
(Van Dam 1997)
Was gibt es noch?
• Sprachsteuerung
• Gestensteuerung
• Augensteuerung
•…
CC BY-SA 2.0 AUDI AG

https://www.flickr.com/photos/audiag/24223452526
Beispiel: Microsoft HoloLens
CC BY-SA 4.0 Ramadhanakbr

https://www.flickr.com/photos/audiag/24223452526
Mehr dazu in der Vorlesung zu

Augmented Reality!
CC BY 2.0 Microsoft Sweden

https://www.flickr.com/photos/microsoftsweden/16153485657
ZOIL
(Jetter et al. 2012)
Amazon Echo
• Sprachsteuerung über Alexa
• Suche
• Vorlesen von Nachrichten & Audiobooks
• Abspielen von Musik
• Verkehrs- und Wetterberichte
• Steuerung von Licht, Ventilatoren,
Thermostaten, Schlössern
Public Domain • Datenschutz?
Reactable – Interaktive Musikgestaltung
https://www.youtube.com/watch?v=Mgy1S8qymx0
CC BY-SA 2.0 Daniel Williams
https://commons.wikimedia.org/wiki/File:Reactable_Multitouch.jpg
Diese Vorlesung auf einer Folie
• Existierende Styleguides helfen bei Gestaltung von Nutzeroberflächen
• Grundlagen der Wahrnehmung & Kognition sind auch Grundlagen bei

Design von Nutzeroberflächen
• Windows, Icons, Menus & Pointers als vorherrschendes Konzept von

Interaktionsdesign
• Verwendung von Design um Nutzer durch den Prozess in einem System zu

führen
Quelle zur Vorlesung: Preim & Dachselt 2010
Referenzen
• B. Preim und R. Dachselt, Interaktive Systeme: Band 1: Grundlagen, Graphical User Interfaces, Informationsvisualisierung, 2. Aufl.
Berlin Heidelberg: Springer-Verlag, 2010.
• B. Preim und R. Dachselt, Interaktive Systeme: Band 2: User Interface Engineering, 3D-Interaktion, Natural User Interfaces, 2. Aufl.
Springer Vieweg, 2015.
• C. Strothotte und T. Strothotte, Seeing Between the Pixels: Pictures in Interactive Systems. Berlin Heidelberg: Springer-Verlag, 1997.
• P. R. O. Payne und J. Starren, „Presentation Discovery: Building a better icon“, in CHI’06 Extended Abstracts on Human Factors in
Computing Systems, CHI EA’06, 2006, S. 1223–1228.
• P. R. O. Payne, P. J. Embi, S. B. Johnson, E. Mendonca, und J. Starren, „Improving Clinical Trial Participant Tracking Tools Using
Knowledge-anchored Design Methodologies“, Appl Clin Inform, Bd. 1, Nr. 2, S. 177–196, 2010.
• W. O. Galitz, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. John Wiley &
Sons, 2007.
• B. Shneiderman, C. Plaisant, M. Cohen, und S. Jacobs, Designing the User Interface: Strategies for Effective Human-Computer
Interaction, 5th Aufl. USA: Addison-Wesley Publishing Company, 2009.
• Hill, A. and Scharff L. V. (1997). “ Readability of screen displays with various foreground/background colour combinations, font
styles, and font types”. Proceedings of the Eleventh National Conference on Undergraduate Research, Vol. II, pp. 742-746.
• A. van Dam, „Post-WIMP User Interfaces“, Commun. ACM, Bd. 40, Nr. 2, S. 63–67, Feb. 1997.
• H.-C. Jetter, M. Zöllner, J. Gerken, und H. Reiterer, „Design and Implementation of Post-WIMP Distributed User Interfaces with
ZOIL“, International Journal of Human–Computer Interaction, Bd. 28, Nr. 11, S. 737–747, Nov. 2012.
• Dix, A., Dix, A.J., Finlay, J., Abowd, G.D. & Beale, R. (2003). Human-computer Interaction -. Amsterdam: Pearson Education.
Bildreferenzen
• [1]http://www.clipartbest.com/cliparts/LcK/pAd/LcKpAd4bi.png
• [2]https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle
001.svg/2000px-Recycle001.svg.png
• [3]http://www.schilderbob.de/WebRoot/Store/Shops/15464356/5283/D7E
9/9510/5926/7E68/C0A8/28B8/16BA/saeure_aetzend_m.gif
• [4]https://upload.wikimedia.org/wikipedia/commons/8/8f/Toilets_unisex.s
vg
• [5] https://www.dvr.de/bilder/stvo/gt/123.png
• [6] https://www.dvr.de/bilder/stvo/gt/Flugbetrieb.png
• [7] http://cdn.osxdaily.com/wp-content/uploads/2014/04/hide-unread-
mail-number-ios-icon.jpg
• [8] https://weblog.usability.at/2010/10/01/auch-farben-sind-wichtig/

Mensch Maschine

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Mensch Maschine

Hochgeladen von

Copyright:

Verfügbare Formate

Mensch-Maschine-Interaktion

• Senden Sie Ihre Fragen in Table:

• Grundlagen der Wahrnehmung & Kognition sind auch Grundlagen bei

• Windows, Icons, Menus & Pointers als vorherrschendes Konzept von

• Verwendung von Design um Nutzer durch den Prozess in einem System

Quelle zur Vorlesung: Preim & Dachselt 2010 (http://www.hci-buch.de/)

• In Projekten können viele Entwickler und andere Beteiligte arbeiten

• Entwickler stehen oft unter Zeitdruck und müssen schnell die

• Wichtig: Fortschreiben und aktualisieren – häufiges Problem ist, dass

Bild: Eigener Screenshot

Hierarchie in einem Fenster

Bild: Eigener Screenshot

• Verschieben & Skalieren

• Verschieben & Skalieren

Grafiken zur Wiedererkennung

• Abstrakt: Abbildung von Konzepten

• Zustände von Icons:

https://commons.wikimedia.org/wiki/File:PowerShell_registry_provider.png CC-BY-NC-SA Digibarn Computer Museum

Bild: Eigener Screenshot

Menüebene 1 Menüebene 1 Menüebene 1 Pull-Down Menü

• Komplex verschachtelte Menüs sind schwer zu merken!

Literatur hat widersprüchliche Angaben!

• Explizit (Kontextabhängig) vs.

Tear off eines

Bild: Eigener Screenshot

Häufig bei großen Touchscreens

• Direkt: Stift https://www.flickr.com/photos/j

• Auswahl von Elementen erschwert, wenn

Unterscheidung: Applikationsmodal vs. Systemmodal Bilder: Eigene Screenshots

Bilder: Eigene Screenshots

Bild: Eigener Screenshot

Bild: Eigener Screenshot

Button „…“ als Indikator für neuen Dialog

Schieberegler Schieberegler eher bei relativen Werten

Bilder: Eigene Screenshots

Bilder: Eigene Screenshots

CC BY-SA 2.0 AUDI AG

CC BY-SA 4.0 Ramadhanakbr

Mehr dazu in der Vorlesung zu

CC BY 2.0 Microsoft Sweden

(Jetter et al. 2012)

• Grundlagen der Wahrnehmung & Kognition sind auch Grundlagen bei

• Windows, Icons, Menus & Pointers als vorherrschendes Konzept von

• Verwendung von Design um Nutzer durch den Prozess in einem System zu

Quelle zur Vorlesung: Preim & Dachselt 2010

Das könnte Ihnen auch gefallen