04 WIMP Übung

Mensch-Maschine-Interaktion
Übung WIMP
Prof. Dr.-Ing. Michael Prilla
Sebastian Reinke
Mensch-Maschine-Interaktion 2022 1
Agenda für heute
• Wiederholung WIMP
• Was sind Styleguides und wo finde ich diese?
• Vergleich von Styleguides
Agenda für heute
Windows
Fenstersysteme, um an mehreren Aufgaben gleichzeitig zu arbeiten
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
Bild: Eigener Screenshot

Panel Horizontaler Fensterinhalt
Scrollbalken Mensch-Maschine-Interaktion 2022 5
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
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
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 – 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
Untermenü
Menüebene 3
• 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!

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 2022 13
Mouse-cursor-hand-
pointer.svg
Agenda für heute
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]
Eure Aufgabe
• Untersucht ein Device eurer Wahl (Laptop, Handy, Tablet,…)
in Bezug auf die verwendeten Styleguides
• Welche Richtlinien wurden angewendet?
• Wurden Richtlinien nicht angewendet?
• Ihr habt 30 Minuten Zeit

• Danach präsentiert ihr was ihr herausgefunden habt
Styleguides
Windows
• https://docs.microsoft.com/en-us/style-guide/design-planning
Android
• https://material.io/design
MAC
• https://developer.apple.com/design/human-interface-guidelines/
Beispiel Windows
Beispiel Android
Agenda für heute
Eure Aufgabe
• Setzt euch in Zweierteams zusammen
• Im Idealfall habt ihr unterschiedliche Devices
• Untersucht die Unterschiede bzgl. Styleguides zwischen den
Devices
• Verwendet dafür die gleiche Applikation (z.B. Google Chrome)
• Ihr habt 20 Minuten Zeit

• Danach präsentiert ihr was ihr herausgefunden habt
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/

04 WIMP Übung

Hochgeladen von

Dokumentinformationen

Originaltitel

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

04 WIMP Übung

Hochgeladen von

Copyright:

Verfügbare Formate

Mensch-Maschine-Interaktion

Hierarchie in einem Fenster

Bild: Eigener Screenshot

Grafiken zur Wiedererkennung

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

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!

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

• Auswahl von Elementen erschwert, wenn

• Ihr habt 30 Minuten Zeit

• Ihr habt 20 Minuten Zeit

Das könnte Ihnen auch gefallen