Upload
luitpold-stuenkel
View
224
Download
3
Embed Size (px)
Citation preview
Prof. Dr.-Ing. Thomas HerrmannInformations- und TechnikmanagementInstitut für Arbeitswissenschaft, Ruhr-Universität Bochumwww.imtm-iaw.rub.de
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 1
Multimedia – 16.1.2012
Hard- und Software-Ergonomie
Informationsdarstellung und Multimedia
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 2
Informationsdarstellung und Multimedia
8.1 Klassifizierung von Informationsarten für Multimedia- Design
8.2 Klassifizierung nach Dimensionen von Daten und Informationsverarbeitungsaufgaben
8.3 spezielle Gestaltungshinweise
8
Beispiel: http://www.spiegel.de/flash/flash-15385.html
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 3
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
8.1
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 4
Weitere Beispiele
• Wegbeschreibung• Zusammenbau eines Regals• Funktion eines Verbrennungsmotors erklären• Kiosk-System
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 5
Klassifizierung von Information - A
Sutcliff 251, Abb. 12.3 - oben
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 6
Klassifizierung von Information - B
Sutcliff 251, Abb. 12.3 - unten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 7
Datenarten nach Media Sources differenziert
Sutcliff 252, Abb. 12.4
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 8
Daten
Datenarten - Ergänzung
Bild;Art: bewegt/ stehendtechnische Repräsentation:
ErfindungAbbild
fließender Übergang
Text KalligraphieLänge:,Grad der Strukturierung:
Ton
Computerdaten
Sprache Signale Geräusche
statische Programme
Musik
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 9
Matrix für Media selection
• Realistic audio• Non-realistic-
audio• Speech• Real. still image• Non-real. still
image• Text• Real. Moving
imag.• Non-real. Moving
imag.• Language based
•C
ausa
tion
•C
once
ptua
l •
Con
tinuo
us
actio
n•
Des
crip
tive
•D
iscr
ete
actio
n•
Even
t•
Phys
ical
•Pr
oced
ure
•R
elat
ion-
ship
•
spat
ial i
nfor
-m
atio
n •
Stat
e•
valu
e
Sutcliff 253, Table 12.1
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 10
Matrix für Media selection
• Realistic audio• Non-realistic-
audio• Speech• Real. still image• Non-real. Still
image• Text• Real. Moving
imag.• Non-real. Moving
imag.• Language based
• Causation• Conceptual • Contin-uous
action• Descriptive• Discrete
action
• Event• Physical
• Procedure • Relation-
ship • spatial infor-
mation • State• value
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
Video of person sleeping
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 11
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 12
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 13
Ä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
Gezeichnetes Sutcliff 255
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 14
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 15
Informationsvisualisierung… ein altes Problem
Historische Darstellung des Zugfahrplans Paris Lyon
8.2
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 16
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 Endpunkte; Items können sich überlappen Shneiderman, 596
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 17
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 18
1-D Daten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 19
Beispiele: 1D-Daten in 3D-Darstellung
Shneiderman, 600, 15-4
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 20
Beispiele: 3D-Daten in 2D-Darstellung
Shneiderman, 602, 15-6
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 21
Shneiderman, 604, 15-8
Beispiele: perspektivische Darstellung mit Zeitachse
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 22
Beispiele: multidimensionale Daten
Shneiderman, 605, 15-9
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 23
Beispiele: 3D-Darstellung eines Verzweigungsbaumes Shneiderman, 608, 15-12
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 24
Beispiele: Topic Map
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 25
Tag cloud (www. Wordle.net)
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 26
Verwendung von Farbe
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 27
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 28
Farbcodierung + Zeitachse durch Animation
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 29
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
von Kontext Shneiderman, 612ff
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 30
Komplexes Filtern
Shneiderman, 609, 15-13
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 31
Fenster-Interaktion für Informationsdarstellung 1
Mehrere Fenster können parallel dargestellt werden
8.3
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 32
Fenster-Interaktion für Informationsdarstellung 2
Die Fenster können gekoppelt werden
Shneiderman, 532, 13-14
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 33
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 34
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 35
Zoomen und Panning
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 36
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 37
Magische Linsen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 38
Hervorhebungsstrategien
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 39
Diagrammgestaltung - negativChirurgie
Chefarzt
Pflege-stationen
Pneumologie
Chefarzt
Pflegestation
OA
Stat.-Arzt
Pat.
Endo
Chefarzt
O-Arzt Personal
OP Anmeldung Planungstafel
erstellen
Chefarzt O-Arzt PersonalOperationen
anmelden Zeitkonflikt
Anmeldung Planungstafel
erstellen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 40
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 41
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 42
Diagrammgestaltung – verbessert Chirurgie
Pflege-stationen
Operationen
anmelden
Zeit-konflikt
OP
Anmeldung
Chefarzt
Pneumologie
Pflegestation
ChefarztOAStat.-Arzt
Pat.
Endo
Planungstafel
erstellen
Chefarzt O-Arzt Personal
Anmeldung
Planungstafel
erstellen
Chefarzt O-Arzt Personal
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 43
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 44
Gestaltung von Textseiten - Beispiele
Watzman 272
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 45
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
inadvertent key press. Galitz
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 46
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 47
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