Mediendesign für DVD Übersicht. Softwareengineering. Softwareergonomie Überblick. Mediendesign für DVD. Mediendesign für DVD

Transkript

1 Übersicht Systematik Design-Konzepte Besonderheiten DVD-Design Interaktionskonzepte für DVD Navigationskonzepte für DVD DVD-Design-Essentials Typische Fehler FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 2 FHTW Berlin»Studiengang Angewandte Informatik«Doz. Hübener 1 Softwareergonomie Überblick Softwaredesign Dialogtechniken, Dialogparadigmen, Unterstützungssysteme, Softwareengineering Computerwissenschaften Hardwaredesign Arbeitswissenschaften Arbeitsplatzgestaltung, Arbeitspsychologie Humanwissenschaften Physiologie Psychologie Wahrnehmungspsychologie, Kognitionspsychologie Softwaredesign SOFTWARE- ERGONOMIE Computerwissenschaften Humanwissenschaften Arbeitswissenschaften Physiologie Dialogtechniken Dialogparadigmen Unterstützungssysteme Software- Engineering Hardwaredesign Arbeitsplatzgestaltung Arbeitspsychologie Wahrnehmungspsychologie Informationsdarstellung Interaktionsformen Dialogabläufe Menüs und Masken Kommandos Direkte Manipulation Hypermedia Hilfesysteme Historykomponenten Individualsierungsysteme Aktivitätenmanagement Tutorielle Systeme Analyse Modellierung Entwurf Prototyping Tools Bildschirm Tastatur Zeigeinstrument akustische Ein-/Ausgabe taktile Ein-/Ausgabe Möbel Anordnung Raumgestaltung Beleuchtung Geräusche Arbeitsorganisation Schulung Benutzerpartizipation Evaluation Arbeitssicherheit Sensorik Motorik Körperhaltung visuelle Wahrnehmung akustische Wahrnehmung taktile Wahrnehmung Softwareengineering Analyse Benutzer (Zielgruppe) Computer (Laufzeitumgebung) Arbeitsumfeld (Einsatzgebiet) Modellierung Aufgaben Ziele Entwurf Systemfunktionalität Benutzerschnittstellen Prototyping Psychologie Kognitionspsychologie Gedächtnis Verstehen Lernen Handeln Problemlösung FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 3 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 4

2 Mensch-Computer-Interaktion (HCI) Erweiterung des Software-Engineerings um Benutzerzentrierung (-partizipation) Interdisziplinäres Wissen iterativen Entwicklungszyklus Zusammenfassung Softwareergonomie HCI Integration nicht-informatischer Fachgebiete in die Software- Entwicklung (Software-Ergonomie) Erweiterung des Software-Entwicklungszyklus um interdisziplinäre Aspekte & Benutzerpartizipation (Human Computer Interaction) FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 5 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 6 Nielsen-Norman-Group Dr. Jakob Nielsen Pabst des Webdesigns Web-Design für Sun Microsystems Donald A. Norman ehemals Vizepräsident von Apple Computer ehemaliger Leiter der Apple Research Labs Professor für kognitive Wissenschaft und Psychologie Bruce Tognazzini Mitbegründer der Apple Human Interface Design Group Engineer für»strategic Technology«bei Sun Microsystems Designer von WebMD (medizinisches Online-Portal) Welchen Weg gehen wir?!? FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 7 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 8

3 Besonderheiten der DVD allgemein Besonderheiten DVD-Design I Wiedergabesystem TV-Gerät, Laptop, Desktop-Computer Auswirkung auf die Gestaltung Bildschirmdarstellung, Schriften, Farben,... Zielgruppen kaum eingegrenzte Benutzergruppe (Alter, Bildung,...) Auswirkung auf die Navigation Navigationskonzept, Anwendungsstruktur, Konsistenz in der Bedienung Eingeschränkte Interaktion mit dem Medium Fernbedienung, Scripting,... Pull-Medium FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 9 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 10 Besonderheiten DVD-Design II DVD ist ein langsames Medium! Interaktionen brauchen Zeit bis das neue Menu/Kapitel angesteuert ist Navigationsfunktionen Menüsteuerung ermöglicht Auswahl von... Filmteilen, Kapiteln Zusatzmaterial z. B. Making-of, Filmographien, Mediendesign... für DVD Verschiedenen Versionen von Filmen Navigation über Steuerelemente Wippe an Fernbedienung/Abspieler Titel-Taste Menü-Taste Sprachauswahl Untertitel Technische Besonderheiten der DVD... bis die Aktion auf der Fernbedienung»gefunden«und ausgelöst ist Entwicklungsumgebung Rapid Prototyping (DVD Studio Pro) eingebauter Preview Simulation der fertigen DVD Test des DVD-Images mit dem Software DVD-Spieler DVD-Video Seite 35 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 11 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 12

4 Bildschirmdesign I Overscan-Modus für TV Sichtbare Fläche 5%-15% kleiner Anordnung von Schrift und Navigationselemente innerhalb der»safe Area«Bildaufbau durch Interlacing Darstellung von Halbbildern Harte Kontraste/Muster meiden (Moiré) overscan Bildschirmdesign II PAL/NTSC-Design Unterschiedliche Menüs für PAL 720 x 576 NTSC 720 x 480 Verschiedene Sprachmenus Unterschiedliche Menüs für die verschiedenen Sprachen einer DVD Videoformat 4:3/16:9 ggf. unterschiedliche Menüs für die verschiedenen Fernsehformate underscan FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Bildschirmdesign III Auswahl der Farben TV-gerechte Farbkombinationen, ruhige, kontrastarme Hintergründe Wahl der Schriften Serifenlose, schlichte Schriften für TV-Design verwenden Bildschirmdesign IV Quadratische/Rechteckige Pixel Computer: Quadratische Pixel TV: rechteckige Pixel Problematik: Festes Seitenverhältnis (4:3), unterschiedliche Auflösungen Skalieren von 768 x 576 auf 720 x 576 Pixel (PAL), um Verzerrungen zu kompensieren FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 15 16

5 Interaktionskonzepte zur DVD Main Menu Online Interaktionskonzepte I Interaktion über Fernbedienung Kein Mouse-Over! Navigation über Pfeiltasten Konsistenz Einheitliches Verhalten der Fernbedienung Title- und Menu-Taste haben IMMER das gleiche Verhalten Pfeiltasten-Navigation ist einheitlich Crew Das Rad nicht noch einmal neu erfinden! Highlights RandomPlay Mapping... O!Beat Scenes Scene menu Views FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Grundlegende Design-Konzepte I Mapping Beziehung zwischen Objekten eines Systems oder zwischen Steuerungselementen und den damit erzielten Resultaten natürliches Mapping physische Analogien kulturelle Standards Beispiel: Herdflammen und Regler Grundlegende Design-Konzepte I Beispiel Mapping FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 20 19

6 Grundlegende Design-Konzepte II Konsistenz Gleichartigkeit von Objekten und damit verbunden Interaktionen vorhersehbares, einheitliches Systemverhalten (Erwartungskonformität) innere, äußere und metaphorische Konsistenz Grundlegende Design-Konzepte III Feedback Reaktion auf die Interaktion eines Benutzers positives/negatives Feedback schnelle Antwortzeiten Information über Durchführung Dauer Ende einer Operation FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Interaktionskonzepte II Feedback Welche Taste ist gedrückt? Welcher Menüpunkt wurde ausgewählt? Was war die letzte Aktion? Wo bin ich? Woher komme ich? Wo kann ich hin? Navigationskonzepte zur DVD Main Menu Online Crew Normal Highlights RandomPlay O!Beat Scenes Selected Scene menu Activated Views FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 23 24

7 Navigationskonzepte I mehrdimensionale Navigation hierarchische Navigation flache Navigation tiefe Navigation Matrix-Struktur Netzartige Navigation Navigationskonzepte II Orientierungshilfe für den Benutzer Wo bin ich? Woher komme ich? Wohin kann ich? Was kann ich hier tun? Wie kann ich aussteigen? Wie bekomme ich Hilfe? FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Navigationskonzepte III (Navigations)- Symbole Icons Pictogramme Texte Probleme Eindeutigkeit/ Mehrdeutigkeit der Methaper!!! Kulturelle Befangenheit!!! Grundlegende Design-Konzepte IV Konzeptionelles Modell geistiges Bild oder Simulation eines Objektes Abbildung auf Bekanntes definiert die Möglichkeiten, Einschränkungen und Fähigkeiten eines Objektes daher Vorhersage über das Verhalten und die Möglichkeiten eines Objektes möglich FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 27 28

8 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Grundlegende Design-Konzepte V Konzeptionelles Modell Beispiel: Kühlschrank Grundlegende Design-Konzepte VI Konzeptionelles Modell Beispiel: Kühlschrank FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Grundlegende Design-Konzepte VII Metaphorik beruht auf vorhandenem, computerunabhängigem Wissen praktische Ausprägung eines konzeptionellen Modelles Beispiele Desktop Metapher Fenster-Systeme Verkehrszeichen Menus??? Grundlegende Design-Konzepte VIII Sichtbarkeit (visibility) Die Möglichkeiten eines Objekts erschließen sich unmittelbar durch die Betrachtung durch den Benutzer Gesamt-/Teilmetapher! Anwendbarkeit, Konsistenz, Gehalt an Struktur, Erweiterbarkeit einer Metapher? Kulturelle Befangenheit FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 31 32

9 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Grundlegende Design-Konzepte VIII Sichtbarkeit Beispiel Grundlegende Design-Konzepte IX Einfachheit I Design auf das Wesentliche konzentrieren weniger ist mehr (KISS: Keep It Small and Simple) keine Featuritis 33 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 34 Grundlegende Design-Konzepte XIV Einfachheit II die magische Sieben (sieben Buttons, sieben Bereiche, sieben Objekte) Zusammenfassung Design-Konzepte Grundkonzepte der Gestaltung Konzeptionelles Modell Metaphorik Grundprinzipien der Gestaltung Sichtbarkeit Mapping Feedback Konsistenz Einfachheit (KISS) FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 35 36

10 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Sechs Punkte für (gutes) DVD-Design 1. Gib mehr Informationen! Anzeige von Optionen (z. B. Einstellungen für Audio/Video/Untertitel) im Menü 2. Beschleunige die Übergänge! z. B. Animationen nur einmal zeigen (Verwendung von Variablen) z. B. Sequentialisierung von Zusatzmaterial (keine Umwege über Menüs) 3. Gib Feedback! - was wurde ausgewählt? - wie komme ich zurück? - was passiert gerade? 4. Verwende (Industrie-)Standards! - z. B. die Funktion/Belegung von Tasten nicht immer wieder neu erfinden 5. Teste das Ergebnis durch Anwender! - wie komme ich zu einer bestimmten Szene? - wie ändere ich Voreinstellungen? 6. Designe für eine allgemeine Zugänglichkeit! kann die DVD benutzt werden von Leuten, die nicht gut sehen/hören können, die Sprache nicht verstehen? Typische Fehler beim DVD-Design unübersichtliche Navigationsstruktur - wo bin ich? - wo komme ich her? - wohin kann ich? langwierige Intros und Übergänge/Effekte sind nicht abbrechbar/überspringbar Buttons der Fernbedienung sind gar nicht oder inkonsistent belegt z. B.»Zurück«geht ins Hauptmenü,»Titel«geht gar nicht,»menü«geht nur einen Titel zurück inkonsistente/unlogische Navigation in der Menüauswahl z. B. Auswahl der Menü-Punkte von oben nach unten, links nach rechts, im Kreis Bildschirm-Design nicht für TV-Wiedergabe entwickelt z. B. Bildinhalte fehlen (Overscan), Schrift zu klein, Farben ungünstig gewählt, Navigation funktioniert nur für Mausbedienung FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Literatur (1)»Designing the User Interface«Ben Shneiderman, Gebundene Ausgabe, englisch, 650 Seiten, Januar 1998, 3. Auflage, Addison Wesley, ISBN , ca. 65,00!»User Interface Design«Ben Shneiderman, Gebundene Ausgabe, deutsch, 704 Seiten, Dezember 2001, 1. Auflage, mitp, ISBN , ca. 50,00!»Entwicklung interaktiver Systeme«Grundlagen, Fallbeispiele und innovative Anwendungsfelder (Springer-Lehrbuch) von Bernhard Preim, 2000, 349 Seiten - 2. Auflage - Niggli AG Verlag, ISBN , ca. 45,00!»Screen-Design-Handbuch«Effektiv informieren und kommunizieren mit Multimedia (X.media.press) Frank Thissen, 2000, gebundene Ausgabe Seiten - 2., überarb. u. erw. Aufl Springer Verlag, ISBN , ca. 50,00! Literatur (2)»Mediendesign. Zeitungen, Magazine, Screendesign«Ralf Turtschi, 2000, gebundene Ausgabe Seiten - 2. Aufl. - Niggli AG Verlag. ISBN , ca. 79,00!»Webdesign und -publishing«grundlagen und Designtechniken, mit CD-ROM Ralf Lankau, München 2000, gebundene Ausgabe Seiten - 2., aktualis. Aufl. - Carl Hanser Fachbuch»Multimedia Interface Design«Blattner, Dannenberg, gebundene Ausgabe, englisch, 438 Seiten, ACM Press 1992, ISBN FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 39 40

11 FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener Literatur (2)»Kompendium der Mediengestaltung für Digital- und Printmedien«Böhringer et.al. Heidelberg 2000, Korr. Nachdruck 2001, Gebundene Ausgabe Seiten, (X.media.press) Springer-Verlag Berlin, ISBN , ca. 50,00!»The Design of Everyday Things«Donald A. Norman, Taschenbuch Seiten - The MIT Press, Oktober 1998, ISBN , ca. 22,00!»Things That Make Us Smart: Defending Human """ Attributes in the Age of the Machine«Donald A. Norman, Taschenbuch - Reprint - Addison Wesley Publishing Company, Mai 1994, ISBN , ca. 21,00 e Links Website der»nielsen Norman Group«, Informationen & Links zu Web-Page-Usability, Workable Technology, Software Design HCI Bibliography Website mit Materialien zu HCI und Softwareergonomie FHTW Berlin»Studiengang Angewandte Informatik«Herzog Hübener 41 42