Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Prof. Dr.-Ing. Thomas Herrmann Informations- und Technikmanagement Institut für Arbeitswissenschaft, Ruhr-Universität Bochum www.imtm-iaw.rub.de Vorlesung.

Ähnliche Präsentationen


Präsentation zum Thema: "Prof. Dr.-Ing. Thomas Herrmann Informations- und Technikmanagement Institut für Arbeitswissenschaft, Ruhr-Universität Bochum www.imtm-iaw.rub.de Vorlesung."—  Präsentation transkript:

1 Prof. Dr.-Ing. Thomas Herrmann Informations- und Technikmanagement Institut für Arbeitswissenschaft, Ruhr-Universität Bochum Vorlesung Hard- und Software-Ergonomie, WS 2011/ Multimedia – Hard- und Software-Ergonomie Informationsdarstellung und Multimedia

2 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Informationsdarstellung und Multimedia 8.1Klassifizierung von Informationsarten für Multimedia- Design 8.2Klassifizierung nach Dimensionen von Daten und Informationsverarbeitungsaufgaben 8.3spezielle Gestaltungshinweise 8 Beispiel:

3 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 &

4 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Weitere Beispiele Wegbeschreibung Zusammenbau eines Regals Funktion eines Verbrennungsmotors erklären Kiosk-System

5 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Klassifizierung von Information - A Sutcliff 251, Abb oben

6 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Klassifizierung von Information - B Sutcliff 251, Abb unten

7 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Datenarten nach Media Sources differenziert Sutcliff 252, Abb. 12.4

8 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Daten Datenarten - Ergänzung Bild; Art: bewegt/ stehend technische Repräsentation : ErfindungAbbild fließender Übergang Text Kalligraphie Länge:, Grad der Strukturierung : Ton Computerdaten SpracheSignaleGeräusche statischeProgramme Musik

9 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Continuous action Descriptive Discrete action Event Physical Procedure Relation- ship spatial infor- mation State value Sutcliff 253, Table 12.1

10 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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

11 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Ä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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Informationsvisualisierung … ein altes Problem Historische Darstellung des Zugfahrplans Paris Lyon 8.2

16 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Unterscheidung von Daten nach ihren Zusammenhängen untereinander 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ D Daten

19 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Beispiele: 1D-Daten in 3D-Darstellung Shneiderman, 600, 15-4

20 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Beispiele: 3D-Daten in 2D-Darstellung Shneiderman, 602, 15-6

21 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Shneiderman, 604, 15-8 Beispiele: perspektivische Darstellung mit Zeitachse

22 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Beispiele: multidimensionale Daten Shneiderman, 605, 15-9

23 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Beispiele: 3D-Darstellung eines Verzweigungsbaumes Shneiderman, 608, 15-12

24 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Beispiele: Topic Map

25 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Tag cloud (www. Wordle.net)

26 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Verwendung von Farbe

27 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Darstellung von Zusammenhängen Größe: BSP Farbe: BSP / Kopf Pfeillänge: Entfernung Pfeilstärke: Intensität des Austauschs

28 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Farbcodierung + Zeitachse durch Animation

29 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Komplexes Filtern Shneiderman, 609, 15-13

31 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Fenster-Interaktion für Informationsdarstellung 1 Mehrere Fenster können parallel dargestellt werden 8.3

32 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Fenster-Interaktion für Informationsdarstellung 2 Die Fenster können gekoppelt werden Shneiderman, 532, 13-14

33 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Fenster-Interaktion für Informationsdarstellung 3 Text und Diagramme könne gekopplete werden – Beispiel mit transparenten Fenstern

35 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Zoomen und Panning

36 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Kartenmetapher Vorteile Gewohnheit Schnelle Orientierung Zwei Dimensionen dienen der Komplexitätsreduktion Nachteile Keine Höhendarstellung Barrieren nicht erkennbar (etwa Funkwellenausbreitung, Hochwasser)

37 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Magische Linsen

38 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Hervorhebungsstrategien

39 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Diagrammgestaltung - negativ Chirurgie Chefarzt Pflege- stationen Pneumologie Chefarzt Pflegestation OA Stat.- Arzt Pat. Endo Chefarzt O-Arzt Personal OP AnmeldungPlanungstafel erstellen ChefarztO-ArztPersonal Operationen anmelden Zeitkonflikt AnmeldungPlanungstafel erstellen

40 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Diagrammgestaltung – verbessert Chirurgie Pflege- stationen Operationen anmelden Zeit- konflikt OP Anmeldung Chefarzt Pneumologie Pflegestation ChefarztOA Stat.- Arzt Pat. Endo Planungstafel erstellen ChefarztO-ArztPersonal Anmeldung Planungstafel erstellen ChefarztO-ArztPersonal

43 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ Gestaltung von Textseiten - Beispiele Watzman 272

45 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 users 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 users control over the work environment. –Ensures that the message is not accidentally closed through an inadvertent key press. Galitz

46 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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 Vorlesung Hard- und Software-Ergonomie, WS 2011/ 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


Herunterladen ppt "Prof. Dr.-Ing. Thomas Herrmann Informations- und Technikmanagement Institut für Arbeitswissenschaft, Ruhr-Universität Bochum www.imtm-iaw.rub.de Vorlesung."

Ähnliche Präsentationen


Google-Anzeigen