![Page 1: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/1.jpg)
Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik
User Interface Design 1:Regeln zur Gestaltung von Displays Regeln zur Gestaltung von Displays und Eingabegeräten
VL MMST Wintersemester 2013/14Professur für Prozessleittechnik
L. Urbas; J. Ziegler; J. Pfeffer
![Page 2: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/2.jpg)
Ziele und Inhalt
• Verständnis elementarer Gestaltgesetze
– Wirkungsweise und Anwendbarkeit
• Charakterisierung des Begriffs Benutzungsschnittstelle
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 2
• Charakterisierung des Begriffs Benutzungsschnittstelle
– Begriffsbestimmung und Einordnung
• Grundlagen der Informationsdarstellung
– Charakteristische Eigenschaften dargestellter Informationen
– Gestaltung und Auswahl von Bedienelementen
• Adaptive Benutzungsschnittstellen
– Zweck und Methoden
![Page 3: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/3.jpg)
Warum Schnittstellengestaltung?
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 3
![Page 4: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/4.jpg)
ELEMENTARE GESTALTGESETZE
![Page 5: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/5.jpg)
Gestaltgesetz
• Deskriptive Theorie zum visuellen* Zusammenschluss von Einzelteilen zu einer Ganzheit:
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 5
"Der Zusammenschluss erfolgt derart, dass die entstehenden Ganzen in irgendeiner Weise vor anderen denkbaren Einteilungen gestaltlich ausgezeichnet sind, […] dass möglichst einfache, einheitliche, [...] geschlossene, […] symmetrische, [...] gleichartige Ganzgebilde entstehen“ [Metzger 1954, S. 108 f]
* Auch bei anderen Modalitäten – z.B. auditiv - beobachtbar
![Page 6: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/6.jpg)
Gesetz der Ähnlichkeit
• Gleiche oder einander ähnliche Elemente werden als zusammengehörig wahrgenommen.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 6
(Bildquelle: http://www.pt-mediengestaltung.de/kug.html )
![Page 7: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/7.jpg)
Gesetz der Prägnanzpräferenz
• Objekte, die sie sich durch bestimmte Merkmale von anderen Objekten unterscheiden, werden bevorzugt wahrgenommen.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 7
wahrgenommen.
(Bildquelle: http://www.pt-mediengestaltung.de/kug.html )
![Page 8: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/8.jpg)
Gesetz der guten Gestalt (Prägnanz)
• Mehrdeutige oder unvollständige Formen werden als einfache Formen wahrgenommen.
– Präferenz für die Abbildung in möglichst einfachen Gestalten,
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 8
– Präferenz für die Abbildung in möglichst einfachen Gestalten, z.B. Quadrat, Rechteck, Dreieck, Kreis
(Bildquelle: http://www.e-teaching.org )
![Page 9: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/9.jpg)
Gesetz der Nähe
• Elemente in enger räumlicher Nähe werden als zusammengehörend wahrgenommen.
– An- und Zuordnung von Linien, Feldern, Beschriftung und
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 9
– An- und Zuordnung von Linien, Feldern, Beschriftung und Fenstern
(Bildquelle: http://www.pt-mediengestaltung.de/kug.html )
![Page 10: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/10.jpg)
Gesetz der einfachen Fortsetzung
• Nicht existente Teile einer Figur werden hinzugefügt oder unvollständige Figuren werden automatisch vervollständigt.
– Erwartungskonforme Ergänzung unvollständiger Anzeigeelemente
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 10
– Erwartungskonforme Ergänzung unvollständiger Anzeigeelemente
(Bildquelle: http://www.pt-mediengestaltung.de/kug.html )
![Page 11: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/11.jpg)
Gesetz der Geschlossenheit
• Elemente, die eine einfache Form einschließen, werden als zusammengehörig wahrgenommen.
– Reduktion komplexer Designs, Weglassen von Elementen
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 11
– Reduktion komplexer Designs, Weglassen von Elementen
(Bildquelle: http://www.webmasterpro.de) (Bildquelle: www.el-mediaagentur.com)
![Page 12: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/12.jpg)
Gesetz der Verbundenheit
• Miteinander verbundene Elemente werden als zusammengehörig wahrgenommen.
– Setzt u.U. andere Gesetze (z.B. Nähe, Ähnlichkeit) außer Kraft
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 12
– Setzt u.U. andere Gesetze (z.B. Nähe, Ähnlichkeit) außer Kraft
(Bildquelle: http://www.e-teaching.org )
a) Die Verbindungslinien wirken stärker als das Gesetz der Nähe.
b) Die Verbindungslinien wirken stärker als das Gesetz der Ähnlichkeit.
c,d) Die Verbindungslinien wirken stärker als die Gesetze von Ähnlichkeit und Nähe.
![Page 13: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/13.jpg)
Gesetz der Symmetrie
• Elemente, die symmetrisch zugeordnet sind, werden als zusammengehörig wahrgenommen.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 13
(Bildquelle: http://www.pt-mediengestaltung.de/kug.html ) (Bildquelle: http://www.webmasterpro.de)
![Page 14: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/14.jpg)
Gesetz des gemeinsamen Schicksals
• Elemente, die sich mit ähnlicher Geschwindigkeit in eine ähnliche Richtung bewegen, werden als zusammengehörig wahrgenommen.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 14
wahrgenommen.
– Je größer Ähnlichkeit in Form, Richtung und Geschwindigkeit, desto stärker wirkt der Effekt
(Bildquelle: http://www.webmasterpro.de) (Bildquelle: http://www.e-teaching.org )
![Page 15: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/15.jpg)
Gesetz der durchgehenden Linie
• Präferenz kontinuierlicher Formen und Verläufe.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 15
Welcher Graph ist leichter lesbar?Welche Punkte sind miteinanderverbunden?
(Bildquelle: http://www.webmasterpro.de) (Bildquelle: http://www.e-teaching.org )
![Page 16: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/16.jpg)
Weitere Gestaltgesetze
• Figur und Grund • Räumlichkeit
• Plastizität
(Bildquelle:http://www.gradias.de)
• …
[Nach Stapelkamp, T. Screen- und Interface-Design, S. 16-31]
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 16
![Page 17: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/17.jpg)
Anwendungsbeispiel: Bereiche
• Typische Bereichsaufteilung bei Anzeige- und Bedien-geräten
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 17
(Bild: Lockheed L-1011 engineer's panel)(Bild: Sony_DVS-2000 Video Mixer)
![Page 18: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/18.jpg)
Anwendungsbeispiel: Graphische Darstellung großer Datenmengen
• Tabellen und Diagramme nutzen Gestaltgesetze zur Informationskondensation (Bildquelle: SMC IT-Solutions)
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 18
![Page 19: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/19.jpg)
Bedeutung und Vertrautheit
• Interpretation (optischer) Eindrücke ist abhängig von der individuellen Erfahrungswelt
– Vertrautheit mit den dargestellten Figuren und ihrem aktuellen
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 19
– Vertrautheit mit den dargestellten Figuren und ihrem aktuellen Bezugsrahmen
(Bildquelle: http://www.e-teaching.org )(Bildquelle: www.el-mediaagentur.com)
![Page 20: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/20.jpg)
Anwendungsbeispiel: Adaption physikalischer Metaphern
• Bekannte physikalische Metaphern (Gestalt, Funktionalität) werden auf digitale Anzeigen übertragen
(Bild: Apple „djay“)
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 20
![Page 21: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/21.jpg)
DIE BENUTZUNGS-SCHNITTSTELLE
![Page 22: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/22.jpg)
Kontext einer Benutzungsschnittstelle
Maschine
Physikalische Umwelt
Ver-sorgung
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 22
Maschine
Mensch
Wissens- & Motivationsbasis, Ziele
Organisation
sorgung
Einsatz-stoff,Energie, Infor-mation.
Kunde
Benutzungs-schnittstelle
(Nach Timpe et al., 2000)
![Page 23: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/23.jpg)
Benutzungsschnittstelle
= Sammelbegriff für alle Komponenten und Bedienelemente[…] nebst aller wahrnehmbarer Aktionen und Reaktioneneiner technischen Einrichtung, die der Kommunikation mit
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 23
einer technischen Einrichtung, die der Kommunikation mit ihren Benutzern dienen. [VDI3699-1]
Synonyme: Benutzungsoberfläche
Mensch-Maschine-Schnittstelle
HMI (Human Machine Interface)
HSI (Human System Interface)
![Page 24: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/24.jpg)
Elemente der Benutzungsschnittstelle
• Anzeige:
– Wahrnehmbare Darbietung von Daten nacheinander an gleicher Stelle.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 24
gleicher Stelle.
• Bedienung:
– Vorgang, bei dem ein Benutzer durch eine Anweisung die Arbeitsweise einer bereits angewählten technischen Einrichtung (System, Gerät, Maschine) beeinflusst oder die Ausführung einer Funktion veranlasst.
• Dialog:
– Wechselseitiger und schrittweiser Austausch von Daten zw. Benutzer und System, um ein bestimmtes Ziel zu erreichen
[VDI3699-1]
![Page 25: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/25.jpg)
DARSTELLUNG VON INFORMATION –GESTALTUNG VON ANZEIGEN
![Page 26: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/26.jpg)
Information
• Information ist Neuigkeit
– Ist Information im Gedächtnis abgelegt, ist es Wissen
– Um Information zu verstehen, ist Wissen nötig
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 26
– Um Information zu verstehen, ist Wissen nötig
• Information ist individuell
– Was für die eine Person Information ist, gehört für eine andere Person bereits zu deren Wissen
• Information besteht aus einer Codierung, einer Syntax, einer Semantik und einer (individuellen) Pragmatik
[VDI3699-1]
![Page 27: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/27.jpg)
Darstellung
= Strukturierte Organisation und codierte Wiedergabe von Daten zwecks Wahrnehmung durch den Menschen. (VDI3699-1)
• Unterscheidbar nach
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 27
• Unterscheidbar nach - Den angesprochenen Sinnesmodalitäten (visuell, auditiv …)
- Organisation des Dargestellten (linear, hierarchisch, chronologisch)
- Codierung (grafische, textliche, farbliche Darstellung)
- Dynamik (Veränderlichkeit der Wiedergabe)
- Realitätsbezug (Abbild bzw. Sinnbild, Symbol)
- Dimensionalität (2D oder 3D)
• Frage: Für wen und wofür ist was wie darzustellen?
[VDI3699-2]
![Page 28: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/28.jpg)
Charakteristische Eigenschaften dargestellter Informationen
• Klarheit Schnelle und genaue Vermittlung des Informationsinhaltes
• Unterscheidbarkeit Angezeigte Information kann genau unterschieden werden
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 28
werden
• Kompaktheit Nur für die Aufgabenerfüllung notwendige Information wird angezeigt
• Konsistenz Gleiche Darstellungsart für gleichartige Informationen
• Erkennbarkeit Lenkung der Aufmerksamkeit des Benutzers zur relevanten Information
• Lesbarkeit Information ist leicht zu lesen
• Verständlichkeit Bedeutung ist leicht verständlich, eindeutig, interpretierbar und erkennbar
[ISO 9241-12]
![Page 29: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/29.jpg)
GRUNDREGELN DER ANZEIGENGESTALTUNG
![Page 30: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/30.jpg)
Grundsätze bezüglich der Wahrnehmung
• Gestalte Anzeigen leserlich (bzw. vernehmbar)
• Nutze Wiedergaberedundanz zur Verbesserung der Wahrnehmung
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 30
Wahrnehmung
• Nutze klar unterscheidbare Elemente
• Vermeide komplexe Kodierungen von Wertebereichen
• Berücksichtige die Benutzererwartungen und Gewöhnungseffekte bei der Anzeigengestaltung
[Nach Wickens, Lee, Liu, and Gordon Becker. An Introduction to Human Factors Engineering. Second ed., pp. 185–193 ]
![Page 31: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/31.jpg)
Grundsätze bezüglich der Aufmerksamkeit
• Minimiere den Aufwand für den Zugriff auf Informationen
• Verbinde zusammengehörige Informationen
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 31
• Nutze multimodale Informationsquellen simultan, um den Informationsgehalt zu maximieren!
[Nach Wickens, Lee, Liu, and Gordon Becker. An Introduction to Human Factors Engineering. Second ed., pp. 185–193 ]
![Page 32: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/32.jpg)
Grundsätze bezüglich des Gedächtnisses
• Unterstütze Gedächtnisleistung und Wissen durch visuelle Information
• Verringere die Arbeitsbelastung durch Verringerung der
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 32
• Verringere die Arbeitsbelastung durch Verringerung der Informationskomplexität
• Gestalte Anzeigen konsistent zu bisherigen bzw. anderen Anzeigen, um den Lernaufwand zu minimieren
[Nach Wickens, Lee, Liu, and Gordon Becker. An Introduction to Human Factors Engineering. Second ed., pp. 185–193 ]
![Page 33: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/33.jpg)
Grundsätze bezüglich des Denkmodells
• Gestalte die Anzeige so, dass sie die angezeigten Informationen erwartungskonform repräsentiert
• Bewege Elemente in einer Weise und Richtung, die konform
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 33
• Bewege Elemente in einer Weise und Richtung, die konform zum Denkmodell des Benutzers ist
[Nach Wickens, Lee, Liu, and Gordon Becker. An Introduction to Human Factors Engineering. Second ed., pp. 185–193 ]
![Page 34: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/34.jpg)
GESTALTUNG VON BEDIENELEMENTEN
![Page 35: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/35.jpg)
Begriffsdefinition
• Bedienelement
– Vorrichtung, die Informationen vom Menschen zur Maschine überträgt.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 35
überträgt.
– Unterscheidbar nach
- Reale Bedienelemente (direkte und indirekte Bedienwirkung)
- Virtuelle Bedienelemente (keine physischen Bestandteile)
- Kontinuierliche Bedienelemente (kont. Stellbereich)
- Diskrete Bedienelemente (diskreter Stellbereich)
![Page 36: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/36.jpg)
Arten von Bedienelementen
• Direkte Bedienelemente
– Taster, Druckknopf, Wippenschalter, Kippschalter und –hebel
– Drehknopf und- schalter, Schieber, Schiebeschalter…
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 36
– Drehknopf und- schalter, Schieber, Schiebeschalter…
• Tastaturen (real und virtuell)
– Alphanumerische Tastatur, Funktionstastatur
• Koordinatengeber
– Maus, Rollkugel, Steuerknüppel, Touchscreen, Touchpad, Richtungstasten
• Berührschirme (Touch Screen)
• Sonstige Bedienelemente
– Gestenerkennung (AGR), Handschrifterkennung, Spracherkennung
– …
![Page 37: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/37.jpg)
Ergonomische Anforderungen an Bedienelemente
• Berücksichtigung körperlicher Fähigkeiten
– Anthropometrie und Biomechanik
– Muskelstärke und Belastbarkeit (statisch und dynamisch)
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 37
– Muskelstärke und Belastbarkeit (statisch und dynamisch)
– Ausdauer und Ermüdung
• Geeignete Rückmeldung bei Bedienung
– Unterscheidbarkeit verschiedener Bedienelemente
– Unterscheidbarkeit unterschiedlicher Bedienhandlungen
• Bedienbarkeit
– Sinnhaftigkeit und Eignung der Bedienmetapher
– Vermeidung ungewollten Bedienens
![Page 38: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/38.jpg)
Ergonomische Anforderungen an Bedienelemente
• Positionierung
– Erreichbarkeit
• Größe, Form, Oberfläche
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 38
• Größe, Form, Oberfläche
– Kompatibilität mit Größe und Form der Gliedmaßen
– Eignung für die gewünschte Art der Bedienung (Griff, Bewegung)
![Page 39: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/39.jpg)
Auswahlkriterien für Bedienelemente
• Bauweise des Bedienelements
– Eignung für bestimmte Aufgaben, Umgebungen, Nutzer etc.
• Funktionsumfang
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 39
• Funktionsumfang
– Bsp. Schutz gegen unbeabsichtigte Bedienung
• Kompatibilität zum Gesamtsystem
– Kompatibilität zu System, Anzeigeelementen und Nutzern
• Physiologische Anforderungen an den Bediener
– Kraftaufwand, Kraftübertragung, Wiederholung, Bedienhaltung
• Angemessene Beschriftung
– Identifizierung und Selbstbeschreibung des Bedienelements
![Page 40: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/40.jpg)
ADAPTIVE BENUTZUNGSSCHNITTSTELLEN
![Page 41: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/41.jpg)
Adaption von Schnittstellen
• Adaption:
– Prozess der Änderung eines Objektes, so dass es den vorhandenen Anforderungen genügt.
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 41
vorhandenen Anforderungen genügt.
– kann die Änderung oder Neubildung des Objektes oder dessen Teilen beinhalten.
– kann aktiv (vom Objekt selbst ausgehend) oder passiv (durch eine externe Instanz) erfolgen
=> Schnittstellen müssen an verschiedenartige und veränderliche Anforderungen angepasst werden.
![Page 42: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/42.jpg)
Adaptionsmethoden
• sind Anwendungen einer Adaption, die einen einzelnen Aspekt des Adaptionsobjektes berücksichtigen.
• Sie beschreiben, welche Änderungen in Abhängigkeit aller
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 42
• Sie beschreiben, welche Änderungen in Abhängigkeit aller berücksichtigten Anforderungen notwendig sind.
Beispiele:
– Partitionierung und Segmentierung zur adaptiven Darstellung großer Datenmengen
– Farbschemata und Vergrößerung zur Verbesserung der Lesbarkeit
– Zoom zur Navigation in komplexen hierarchischen Strukturen oder Abbildungen
– Belegung von Tastenfeldern in verschiedenen Aufgabenkontexten
![Page 43: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/43.jpg)
Aspekte der Adaption (Beispiele)
• Technische Adaption:
– Anzahl, Art und Mächtigkeit der Eingabegeräte
– Größe, Format und Auflösung des Ausgabegerätes Anzeige
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 43
– Größe, Format und Auflösung des Ausgabegerätes Anzeige
– Anzahl, Art und Mächtigkeit weiterer Ausgabegeräte
– Leistungsfähigkeit des Verarbeitungsgerätes
• Kulturelle Adaption:
– Sprache, Zeichensatz, Textfluss
– Zahlenformate
• Benutzeradaption:
– Farben, Schriftarten, Schriftgröße
– Informationsgehalt
– …
![Page 44: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/44.jpg)
Zusammenfassung
• Gestaltgesetze fördern den Zusammenschluss von Einzelteilen zu einem möglichst einfachen, einheitlichen, geschlossenen, symmetrischen, gleichartigen Ganzgebilde
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 44
• Benutzungsschnittstelle dient der Interaktion zwischen Mensch und Maschine und ermöglicht die Darstellung von Daten und die Bedienung der Maschine
• Dargestellte Informationen sollten klar, unterscheidbar, kompakt, konsistent, erkennbar, lesbar und verständlich sein
• Bedienelemente sollten ergonomisch, aufgabenangemessen, kompatibel und selbstbeschreibungsfähig sein
• Adaptive Schnittstellen passen sich aktiv oder passiv an verschiedenartige und veränderliche Anforderungen an.
![Page 45: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/45.jpg)
Hausaufgabe
• Literaturstudium:
– DIN EN ISO 9241-110: Grundsätze der Dialoggestaltung
– DIN EN ISO 9241-12: Informationsdarstellung
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 45
![Page 46: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/46.jpg)
Literatur
• Fitts, P. (1951): Engineering psychology and equipment design. In S. Stevens (Eds.), Handbook of Experimental Psychology (pp. 1287-1340). New York, NY: Wiley
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 46
• Timpe, K., Jürgensohn, T. & Kolrep, H. (2000): Mensch-Maschine-Systemtechnik. Konzepte, Modellierung, Gestaltung, Evaluation. Düsseldorf: Symposion Publishing.
• Wickens, Ch.D. & Hollands, J.G. (1999): Engineering Psychology and Human Performance. Pearson.
• Wickens, Ch.D. (2003): Introduction to Human Factors Engineering.Pearson.
![Page 47: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/47.jpg)
Begriffsdefinitionen
• Schnittstelle:
– Stellt eine Schicht zwischen zwei Partnern dar und unterstützt deren Interaktion
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 47
deren Interaktion
– Bietet einen wohldefinierten Zugriff auf die Funktionalität eines Objektes von außen
– Ermöglicht den Zugriff auf Funktionalität ohne das Wissen um deren Implementierung
– Aspekte einer Schnittstelle:
- Struktur: Organisation der Schnittstellenobjekte
- Inhalt: verwendete Informationen
- Gestaltung: Präsentation der Schnittstellenobjekte
- Verhalten: notwendige Aktionen im Umgang mit den Schnittstellenobjekten
![Page 48: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/48.jpg)
Begriffsdefinition
• Code:
– Eindeutige Zuordnung zwischen Kategorien von Daten und ihrer wahrnehmbaren Wiedergabe […]. (VDI3699-1)
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 48
ihrer wahrnehmbaren Wiedergabe […]. (VDI3699-1)
– Anforderungen an Codes für Darstellungen:
- Sinnfällig, leicht erlernbar, einprägsam
- Widerspruchsfrei zu bestehenden Konventionen
- Gut unterscheidbar
• Codierung:
– Wählen einer charakteristischen Darstellung durch Zuweisen von Zeichen, Farben, zeitlichen Änderungen, Tönen etc. für eine bestimmte Kategorie oder für einen Zustand. (VDI3699-1)
![Page 49: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/49.jpg)
Anwendungsbeispiel: Darstellung auf kleinen Anzeigen
• Reduzierte Darstellungsmöglichkeiten (Größe, Farbraum) erfordern geschickte Gestaltung der Anzeige
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 49
(Bildquelle: Panasonic GT-Touch Terminals)(Bild: Layout Xing App for iPhone )
![Page 50: User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User](https://reader033.vdokument.com/reader033/viewer/2022041423/5e207dc23e5c41693d7fa378/html5/thumbnails/50.jpg)
Auswahlkriterien für Bedienelemente
• Bauweise des Bedienelements
– Eignung für bestimmte Aufgaben, Umgebungen, Nutzer etc. (z.B. Abmessungen, Material)
• Funktionsumfang
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 50
• Funktionsumfang
– Bsp. Schutz gegen unbeabsichtigte Bedienung
• Kompatibilität zum Gesamtsystem
– Kompatibilität zu dem System, in dem es eingesetzt werden soll
– Kompatibilität zu den Anzeigeelementen, mit dem es interagieren soll
– Kompatibilität zu den Nutzern, die es verwenden sollen
• Physiologische Anforderungen an den Bediener
– Kraftaufwand, Kraftübertragung, Wiederholung, Bedienhaltung
• Angemessene Beschriftung
– eindeutige Identifizierung und Selbstbeschreibung des Bedienelements