prof. dr.-ing. thomas herrmann informations- und technikmanagement institut für...

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


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

http://www.spiegel.de/flash/flash-15385.html


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


Weitere Beispiele

• Wegbeschreibung• Zusammenbau eines Regals• Funktion eines Verbrennungsmotors erklären• Kiosk-System


Klassifizierung von Information - A

Sutcliff 251, Abb. 12.3 - oben


Klassifizierung von Information - B

Sutcliff 251, Abb. 12.3 - unten


Datenarten nach Media Sources differenziert

Sutcliff 252, Abb. 12.4


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


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


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


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


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


Ä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


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

http://www.stereostil.de/jo/panopticom/swf/index.htm


Informationsvisualisierung… ein altes Problem

Historische Darstellung des Zugfahrplans Paris Lyon

8.2


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


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


1-D Daten


Beispiele: 1D-Daten in 3D-Darstellung

Shneiderman, 600, 15-4


Beispiele: 3D-Daten in 2D-Darstellung




Beispiele: perspektivische Darstellung mit Zeitachse


Beispiele: multidimensionale Daten



Beispiele: 3D-Darstellung eines Verzweigungsbaumes Shneiderman, 608, 15-12


Beispiele: Topic Map


Tag cloud (www. Wordle.net)


Verwendung von Farbe


Darstellung von Zusammenhängen

Größe: BSP

Farbe: BSP / Kopf

Pfeillänge:Entfernung

Pfeilstärke: Intensität des Austauschs


Farbcodierung + Zeitachse durch Animation


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


Komplexes Filtern



Fenster-Interaktion für Informationsdarstellung 1

Mehrere Fenster können parallel dargestellt werden

8.3



Die Fenster können gekoppelt werden



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)



Text und Diagramme könne gekopplete werden – Beispiel mit transparenten Fenstern


Zoomen und Panning


Kartenmetapher

Vorteile

•Gewohnheit•Schnelle Orientierung•Zwei Dimensionen dienen der Komplexitätsreduktion

Nachteile•Keine Höhendarstellung•Barrieren nicht erkennbar (etwa Funkwellenausbreitung, Hochwasser)


Magische Linsen


Hervorhebungsstrategien


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


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.


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


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


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


Gestaltung von Textseiten - Beispiele

Watzman 272


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


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


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

prof. dr.-ing. thomas herrmann informations- und technikmanagement institut für...

Documents