User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User

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?


ELEMENTARE GESTALTGESETZE

Gestaltgesetz

• Deskriptive Theorie zum visuellen* Zusammenschluss von Einzelteilen zu einer Ganzheit:


"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.


(Bildquelle: http://www.pt-mediengestaltung.de/kug.html )

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.


wahrgenommen.



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,


– Präferenz für die Abbildung in möglichst einfachen Gestalten, z.B. Quadrat, Rechteck, Dreieck, Kreis

(Bildquelle: http://www.e-teaching.org )

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


– An- und Zuordnung von Linien, Feldern, Beschriftung und Fenstern



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


– Erwartungskonforme Ergänzung unvollständiger Anzeigeelemente



Gesetz der Geschlossenheit

• Elemente, die eine einfache Form einschließen, werden als zusammengehörig wahrgenommen.

– Reduktion komplexer Designs, Weglassen von Elementen


– Reduktion komplexer Designs, Weglassen von Elementen

(Bildquelle: http://www.webmasterpro.de) (Bildquelle: www.el-mediaagentur.com)

http://www.webmasterpro.de/

http://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


– 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.


(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.


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.


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]


Anwendungsbeispiel: Bereiche

• Typische Bereichsaufteilung bei Anzeige- und Bedien-geräten


(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)


Bedeutung und Vertrautheit

• Interpretation (optischer) Eindrücke ist abhängig von der individuellen Erfahrungswelt

– Vertrautheit mit den dargestellten Figuren und ihrem aktuellen


– Vertrautheit mit den dargestellten Figuren und ihrem aktuellen Bezugsrahmen

(Bildquelle: http://www.e-teaching.org )(Bildquelle: www.el-mediaagentur.com)


http://www.el-mediaagentur.com/

Anwendungsbeispiel: Adaption physikalischer Metaphern

• Bekannte physikalische Metaphern (Gestalt, Funktionalität) werden auf digitale Anzeigen übertragen

(Bild: Apple „djay“)


DIE BENUTZUNGS-SCHNITTSTELLE

Kontext einer Benutzungsschnittstelle

Maschine

Physikalische Umwelt

Ver-sorgung


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


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.


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


– 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


• 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


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


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


• Nutze multimodale Informationsquellen simultan, um den Informationsgehalt zu maximieren!


Grundsätze bezüglich des Gedächtnisses

• Unterstütze Gedächtnisleistung und Wissen durch visuelle Information

• Verringere die Arbeitsbelastung durch Verringerung der


• Verringere die Arbeitsbelastung durch Verringerung der Informationskomplexität

• Gestalte Anzeigen konsistent zu bisherigen bzw. anderen Anzeigen, um den Lernaufwand zu minimieren


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


• Bewege Elemente in einer Weise und Richtung, die konform zum Denkmodell des Benutzers ist


GESTALTUNG VON BEDIENELEMENTEN

Begriffsdefinition

• Bedienelement

– Vorrichtung, die Informationen vom Menschen zur Maschine überträgt.


ü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…


– 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)


– 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


• 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


• 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.


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


• 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


– 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


• 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


Literatur

• Fitts, P. (1951): Engineering psychology and equipment design. In S. Stevens (Eds.), Handbook of Experimental Psychology (pp. 1287-1340). New York, NY: Wiley


• 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


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)


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


(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


• 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

Documents

User Interface Design 1: RegelnzurGestaltungvon Displays ... · Elektrotechnik und Informationstechnik Institut für Automatisierungstechnik, Professur für Prozessleittechnik User