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
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
Warum Schnittstellengestaltung?
WS 2013/14 MMST © Urbas, Ziegler, Graube, Pfeffer Folie 3
ELEMENTARE GESTALTGESETZE
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
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 )
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 )
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 )
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 )
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 )
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)
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.
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)
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 )
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 )
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
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)
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
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)
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
DIE BENUTZUNGS-SCHNITTSTELLE
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)
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)
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]
DARSTELLUNG VON INFORMATION –GESTALTUNG VON ANZEIGEN
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]
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]
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]
GRUNDREGELN DER ANZEIGENGESTALTUNG
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 ]
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 ]
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 ]
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 ]
GESTALTUNG VON BEDIENELEMENTEN
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)
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
– …
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
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)
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
ADAPTIVE BENUTZUNGSSCHNITTSTELLEN
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.
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
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
– …
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.
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
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.
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
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)
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 )
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