Transcript Kapitel 8 - Lehrstuhl für Informations

Multimedia – 16.1.2012
Hard- und Software-Ergonomie
Informationsdarstellung und Multimedia
Prof. Dr.-Ing. Thomas Herrmann
Informations- und Technikmanagement
Institut für Arbeitswissenschaft, Ruhr-Universität Bochum
www.imtm-iaw.rub.de
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
1
8
Informationsdarstellung und Multimedia
8.1
8.2
8.3
Klassifizierung von Informationsarten für MultimediaDesign
Klassifizierung nach Dimensionen von Daten und
Informationsverarbeitungsaufgaben
spezielle Gestaltungshinweise
Beispiel: http://www.spiegel.de/flash/flash-15385.html
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
2
8.1
Multimedia Design
Systematische Vorgehensweise:
• Informationsanalyse, media selection, media integration
• Problem: time-to-market Druck lässt wenig Zeit für
sorgfältiges Design
• Aesthetic Appeal – zwischen Science und Kunst
Aufgaben beim Multimedia-Design
• Matching the media to the message
• Managing users attention
• Navigation and control
• Storyboards as means of informal design
Sutcliff 246 & 249
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
3
Weitere Beispiele
•
•
•
•
Wegbeschreibung
Zusammenbau eines Regals
Funktion eines Verbrennungsmotors erklären
Kiosk-System
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
4
Klassifizierung von Information - A
Sutcliff 251, Abb. 12.3 - oben
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
5
Klassifizierung von Information - B
Sutcliff 251, Abb. 12.3 - unten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
6
Datenarten nach Media Sources differenziert
Sutcliff 252, Abb. 12.4
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
7
Datenarten - Ergänzung
Daten
Text  Kalligraphie
Länge:,
Grad der Strukturierung:
Ton
Sprache
Bild;
Art: bewegt/ stehend
technische Repräsentation:
Abbild
Musik
Signale Geräusche
Computerdaten
statische
Programme
Erfindung
fließender Übergang
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
8
•
•
•
•
•
•
•
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
•
•
•
•
•
•
•
•
•
Realistic audio
Non-realisticaudio
Speech
Real. still image
Non-real. still
image
Text
Real. Moving
imag.
Non-real. Moving
imag.
Language based
•
•
•
•
•
Causation
Conceptual
Continuous
action
Descriptive
Discrete
action
Event
Physical
Procedure
Relationship
spatial information
State
value
Matrix für Media selection
Sutcliff 253, Table 12.1
9
Matrix für Media selection
•
•
•
•
•
•
•
•
•
Realistic audio
Non-realisticaudio
Speech
Real. still image
Non-real. Still
image
Text
Real. Moving
imag.
Non-real. Moving
imag.
Language based
Click of ON-Switch
Histogram of aging
population
Photograph of a start of a
race
Report of the properties of
a storm
Video of engine
assembling sequence
•
•
•
•
•
•
•
Event
Physical
•
•
Procedure
Relationship
spatial information
State
value
•
Video of person sleeping
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Causation
Conceptual
Contin-uous
action
Descriptive
Discrete
action
•
•
10
Detaillierte Media-Selection Rules - A
• Physikalische I: realistische stehende oder bewegte
Bilder, mit overlayed Captions für Detailbetrachtung
• Konzeptuelle I: Text oder gesprochene Sprache,
Diagramme bei komplexen Relationen
• Beschreibungen: Text oder gesprochene Sprache, ggf.
mit einem Bild verbinden
• Räumlich-bildliche Information: Stehendes Bild, bei
komplexen Pfaden, Leitung mit Bewegtbild entlang des
Pfades
• Quantitative Werte: Text und Tabellen; Graphen und
Charts zu Text und Tabellen kombinieren, um Trends
darzustellen – k e i n e gesprochen Sprache
Sutcliff 254
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
11
Detaillierte Media-Selection Rules - B
• Diskrete Aktion: Serien stehender Bilder; gesprochene
Sprache oder Text für abstrakte Aktion
• Kontinuierliche Aktion: bewegte Bilder
• Ereignisse: gespr. Sprache oder Sound, Bild als
Kontext
• Zustandsinformation: stehendes Bild oder Sprache
• Prozeduren: Bilderserie mit Überschriften. Erklärung
kann durch eine abschließende Animation der
Bildersequenz vertieft werden
• Kausale Zusammenhänge: Bewegtbilder mit textueller
Erklärung, zum Teil mit gesprochenen Kommentaren
Sutcliff 254
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
12
Ästhetische Richtlinie
• Dynamische Darstellung, insbesondere Video wirkt anregend –
muss aber immer sofort abstellbar sein
• Gesprochen Sprache zieht mehr Aufmerksamkeit,
insbesondere weibliche Stimme; männliche vermittelt Autorität
und Respekt
• Bilder als Hintergrund können bei geeigneter Wahl die
Wichtigkeit des im Vordergrund Gezeigten betonen. Schatten
und wenig saturierte Farben erhöhen das Interesse.
• Musik spricht Menschen emotional an, aber ist sehr
kulturabhängig, altersbezogen,...
• Natürliche Geräusche: beruhigend, Gemütlichkeit
• Bilder mit Menschen oder Gesichtern ziehen mehr
Aufmerksamkeit.
• Handzeichnung zieht mehr Aufmerksamkeit als maschinell
Sutcliff 255
Gezeichnetes
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
13
Medien-Integration und
Aufmerksamkeitssteuerung
• Festlegung des gesamten Verlaufs der Vermittlung der
Botschaft
• Die Aufmerksamkeit muss immer auf die wichtige Information
gelenkt werden
• Klare Lese und Bild-Betrachtungsabfolgen etablieren
• Kontaktpunkt zwischen den Medienarten herstellen (z.B.
Hervorheben der Bildstellen, auf die sich das aktuell
Gesprochene bezieht.
• Gesprochene Sprache kann Text ergänzen, aber die
Koordination zwischen beidem muss gelingen
Sutcliff 257ff
http://www.stereostil.de/jo/panopticom/swf/index.htm
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
14
Informationsvisualisierung
8.2
… ein altes Problem
Historische Darstellung des Zugfahrplans Paris Lyon
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
15
Unterscheidung von Daten nach ihren
Zusammenhängen untereinander - 1
• 1-D linear: Textdokumente, Programmquellcodes,
alphabetische Listen, kann durch zusätzliche Wertebalken
ergänzt werden (Aktualität einer Zeile etc.)
• 2-D Kartendaten: geographische Daten, Pläne und
Zeitungslayouts; Karten können in mehrere Layers
untergliedert werden
• 3-D Welt: Moleküle, menschliche Körper, Gebäude;
komplexe 3-d-Beziehungen müssen abgebildet werden
• Zeitliche Daten: medizinische Berichte,
Projektmanagement, historische Bericht, (Start- und
Shneiderman, 596
Endpunkte; Items können sich überlappen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
16
Unterscheidung von Daten nach ihren
Zusammenhängen untereinander - 2
• Multidimensionale Daten: Inhalte relationaler oder
statistischer Datenbanken; Wechsel der Attributwerte in
einer Zusammenschau darstellen.
• Verzweigungsbaumdaten einzelne Items habe
Verbindungen zu übergeordneten Items (mit Ausnahme
der Wurzeln). Items und ihre Verbindungen können
vielfältige Attribute haben
• Netzwerkdaten: Diagramme für komplexe technische
oder organisatorische Zusammenhänge
Shneiderman, 596
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
17
1-D Daten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
18
Beispiele: 1D-Daten in 3D-Darstellung
Shneiderman,
600, 15-4
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
19
Beispiele: 3D-Daten in 2D-Darstellung
Shneiderman,
602, 15-6
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
20
Beispiele: perspektivische Darstellung mit
Zeitachse
Shneiderman, 604, 15-8
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
21
Beispiele: multidimensionale Daten
Shneiderman,
605, 15-9
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
22
Beispiele: 3D-Darstellung eines
Verzweigungsbaumes
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Shneiderman, 608, 15-12
23
Beispiele: Topic Map
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
24
Tag cloud (www. Wordle.net)
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
25
Verwendung von Farbe
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
26
Darstellung von Zusammenhängen
Größe: BSP
Farbe: BSP / Kopf
Pfeillänge:
Entfernung
Pfeilstärke: Intensität
des Austauschs
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
27
Farbcodierung + Zeitachse durch Animation
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
28
Typische Aufgaben im Umgang mit
Informationsdarstellung
• Übersicht: Man kann nachvollziehen, welche Daten zu
finden sein werden
• Zoomen: Bestimmte Daten/Datenarten werden in den
Vordergrund geholt, Kontext bleibt erhalten
• Filtern: ausblenden nicht interessierender Daten
• Details ansehen: Konzentration auf ausgewählte Daten
• Beziehungen nachvollziehen: Filtern mit Hinblick auf
zusammenhänge
• Aufzeichnung von Abläufen
• Extrahierung von Daten
• Ein-Ausblende-Mechanismen: Filtern und Andeutung
Shneiderman, 612ff
von Kontext
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
29
Komplexes Filtern
Shneiderman,
609, 15-13
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
30
8.3
Fenster-Interaktion für Informationsdarstellung 1
Mehrere Fenster können parallel dargestellt werden
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
31
Fenster-Interaktion für Informationsdarstellung 2
Die Fenster können gekoppelt werden
Shneiderman, 532, 13-14
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
32
Formen der Koordination zwischen Fenstern
• Synchronisiertes Scrollen
• Hierarchische Relationen zwischen gekachelten
Fenstern
• Direkte Auswahl – Aufblenden eines Fensters, das an
ausgewählter Stelle Detailinformationen gibt
• Zweidimensionales Durchsuchen (mit Sichtfeldrahmen)
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
33
Fenster-Interaktion für Informationsdarstellung 3
Text und Diagramme könne gekopplete werden
– Beispiel mit transparenten Fenstern
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
34
Zoomen und Panning
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
35
Kartenmetapher
Vorteile
• Gewohnheit
• Schnelle Orientierung
• Zwei Dimensionen
dienen der
Komplexitätsreduktion
Nachteile
• Keine Höhendarstellung
• Barrieren nicht
erkennbar (etwa
Funkwellenausbreitung,
Hochwasser)
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
36
Magische Linsen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
37
Hervorhebungsstrategien
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
38
Diagrammgestaltung - negativ
Chirurgie
Chefarzt
Pneumologie
Endo
Chefarzt
O-Arzt
Personal
Chefarzt
erstellen
Pflegestationen
Anmeldung
Pflegestation
Planungstafel
OA
Stat.Arzt
Pat.
Zeitkonflikt
anmelden
OP
Anmeldung
Planungstafel
erstellen
Operationen
Chefarzt
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
O-Arzt
Personal
39
Diagrammgestaltung – Regeln
• Gleichförmigkeit: Stelle alle Subelemente, die sich auf
gleicher Einbettungstiefe befinden, gleich groß dar
• Äquidistanz: Stelle alle Subelemente eines Elementes
mit dem gleichen Abstand zum Rand des Elementes dar
• Symmetrie: Stelle ein Element durch entsprechende
Darstellung seiner Subelemente möglichst symmetrisch
bezüglich einer horizontalen und vertikalen Teilung dar
• Alignment-Minimierung: Richte Modellelemente so aus,
dass möglichst wenige horizontale und vertikale
Ausrichtungslinien entstehen.
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
40
Diagrammgestaltung – Regeln
• Kreuzungspunktminimierung: Stelle Relationen mit
möglichst wenigen Kreuzungspunkten dar
• Knickpunktminimierung: Stelle Relationen mit
möglichst wenigen Knickpunkten dar
• Kurze Relationen: Versuche Relationen möglichst kurz
darzustellen
• Voraussagbarkeit: Ordne Rollen möglichst oben,
Aktivitäten im mittleren Teil und Entitäten unten an
• Relationsverlauf: Stelle Relationen so dar, dass der
erste (letzte) Relationsabschnitt in Richtung des
Zielelements (Startelements) weist
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
41
Diagrammgestaltung – verbessert
Chirurgie
Pneumologie
Pflegestation
Chefarzt
Stat.Arzt
OA
Chefarzt
anmelden
Pflegestationen
Pat.
Operationen
OP
Endo
Chefarzt
O-Arzt
Personal
Chefarzt
erstellen
Planungstafel
O-Arzt
Personal
erstellen
Zeitkonflikt
Anmeldung
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Planungstafel
Anmeldung
42
Gestaltung von Textseiten
• Gruppierung verwenden und die Hierarchie des Textes
grafisch sichtbar machen
• Filterung anwenden, indem weniger Wichtiges zurücktritt
• Text mit anderen Darstellungsarten mischen
• Weiße Flächen zur Einteilung und Aufmerksamkeitssteuerung
nutzen
• Grids einsetzen und eine Struktur für die Seiten festlegen
Watzman 272
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
43
Gestaltung von Textseiten - Beispiele
Watzman 272
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
44
Gestaltungshinweise zu Aufmerksamkeit
• Attract attention by flashing when an application is inactive but must
display a message to the user.
– If a window, flash the title bar.
– If minimized, flash its icon.
• To provide an additional message indication, also provide an
auditory signal (one or two beeps).
– Very useful if:
• The window or icon is hidden.
• The user’s attention is frequently directed away from the screen.
• When the application is activated, display the message.
• Do not display the message until requested by the user.
– Preserves the user’s control over the work environment.
– Ensures that the message is not accidentally closed through an
Galitz
inadvertent key press.
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
45
Use of Sound (1)
• Always use in conjunction with a visual indication.
• Use no more than six different tones.
– Assure that people can discriminate among them.
• Do not use:
– Jingles or tunes.
– Loud signals.
• Use consistently.
– Provide unique but similar tones for similar situations.
• Provide signal frequencies between 500 and 1,000 Hz.
• Allow the user to adjust the volume or turn the sound off altogether.
Galitz
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
46
Use of Sound (2)
• Test the sounds with users over extended trial periods.
• Use sparingly because sounds:
– Are annoying to many people, including users and nonusers in
the vicinity.
– Can easily be overused, increasing the possibility that they will
be ignored.
– Are not reliable because:
• Some people are hard of hearing.
• If they are not heard, they leave no permanent record of having
occurred.
• They can be turned off by the user.
Galitz
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
47