Informationsdarstellung und Multimedia

Präsentation zum Thema: "Informationsdarstellung und Multimedia"—  Präsentation transkript:

1 Informationsdarstellung und Multimedia

2 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:

3 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

4 Weitere Beispiele Wegbeschreibung Zusammenbau eines Regals
Funktion eines Verbrennungsmotors erklären Kiosk-System

5 Klassifizierung von Information - A
Sutcliff 251, Abb oben

6 Klassifizierung von Information - B
Sutcliff 251, Abb unten

7 Datenarten nach Media Sources differenziert
Sutcliff 252, Abb. 12.4

8 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

9 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

10 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

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

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

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

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

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

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

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

18 1-D Daten

19 Beispiele: 1D-Daten in 3D-Darstellung
Shneiderman, 600, 15-4

20 Beispiele: 3D-Daten in 2D-Darstellung
Shneiderman, 602, 15-6

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

22 Beispiele: multidimensionale Daten
Shneiderman, 605, 15-9

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

24 Beispiele: Topic Map

25 Tag cloud (www. Wordle.net)

26 Verwendung von Farbe

27 Darstellung von Zusammenhängen
Größe: BSP Farbe: BSP / Kopf Pfeillänge: Entfernung Pfeilstärke: Intensität des Austauschs

28 Farbcodierung + Zeitachse durch Animation

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

30 Komplexes Filtern Shneiderman, 609, 15-13

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

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

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)

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

35 Zoomen und Panning

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

37 Magische Linsen

38 Hervorhebungsstrategien

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

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.

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

42 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

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

44 Gestaltung von Textseiten - Beispiele
Watzman 272

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

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

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