Informationsdarstellung und Multimedia

Informationsdarstellung und Multimedia 8 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 Beispiel: http://www.spiegel.de/flash/flash-15385.html

Multimedia Design Systematische Vorgehensweise: 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

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

Datenarten - Ergänzung Text  Kalligraphie Länge:, Grad der Strukturierung: Ton Musik Sprache Signale Geräusche Bild; Art: bewegt/ stehend technische Repräsentation: Computerdaten statische Programme Erfindung Abbild fließender Übergang

Matrix für Media selection Conceptual Continuous action spatial infor-mation Descriptive Procedure Causation Discrete action Physical Relation-ship Event State value 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 Sutcliff 253, Table 12.1

Matrix für Media selection Causation Conceptual Contin-uous action Descriptive Discrete action Event Physical Procedure Relation-ship spatial infor-mation State value Click of ON-Switch Realistic audio Non-realistic-audio Speech Real. still image Non-real. Still image Text Real. Moving imag. Non-real. Moving imag. Language based Histogram of aging population Photograph of a start of a race Report of the properties of a storm Video of person sleeping Video of engine assembling sequence

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

Informationsvisualisierung 8.2 Informationsvisualisierung … ein altes Problem Historische Darstellung des Zugfahrplans Paris Lyon

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 Shneiderman, 602, 15-6

Beispiele: perspektivische Darstellung mit Zeitachse Shneiderman, 604, 15-8

Beispiele: multidimensionale Daten Shneiderman, 605, 15-9

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 Shneiderman, 609, 15-13

Fenster-Interaktion für Informationsdarstellung 1 8.3 Fenster-Interaktion für Informationsdarstellung 1 Mehrere Fenster können parallel dargestellt werden

Fenster-Interaktion für Informationsdarstellung 2 Die Fenster können gekoppelt werden Shneiderman, 532, 13-14

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)

Fenster-Interaktion für Informationsdarstellung 3 Text und Diagramme könne gekopplete werden – Beispiel mit transparenten Fenstern

Zoomen und Panning

Kartenmetapher Vorteile Nachteile Keine Höhendarstellung Gewohnheit Schnelle Orientierung Zwei Dimensionen dienen der Komplexitätsreduktion Nachteile Keine Höhendarstellung Barrieren nicht erkennbar (etwa Funkwellenausbreitung, Hochwasser)

Magische Linsen

Hervorhebungsstrategien

Diagrammgestaltung - negativ Chirurgie Chefarzt Pflege- stationen Pneumologie Pflegestation OA Stat.- Arzt Pat. Endo O-Arzt Personal OP Anmeldung Planungstafel erstellen Operationen anmelden Zeitkonflikt

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 Pneumologie Chefarzt anmelden Pflegestation Stat.- Arzt OA Chefarzt Pflege- stationen Pat. Operationen OP Endo Chefarzt O-Arzt Personal Chefarzt O-Arzt Personal erstellen erstellen Zeit- konflikt Planungstafel Planungstafel Anmeldung Anmeldung

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