Screen- und Interfacedesign

Transkript

1 Torsten Stapelkamp Screen- und Interfacedesign Gestaltung und Usability für Hard- und Software Mit 691 Abbildungen und CD-ROM Springer

2 Vorwort i Einführung 4 i Form 1.0 Einführung Form und Funktion Wahrnehmung Farbe Wahrnehmung und Farbe Farbtöne des Spektrums Additive Farbmischung Subtraktive Farbmischung Farbraumsysteme Farbe und ihre Darstellungsmedien Druckerzeugnisse Fernseh-Röhrenmonitor Plasmamonitor Computer-Röhrenmonitor Liquid Crystal Displays Anzeigetafeln, Displays Fa rbtiefe Auflösung Farben im Internet Kontrast m it Fa rbe Simultankontrast Komplementärkontrast Farbe-an-sich-Kontrast Quantitätskontrast Bunt-Unbunt-Kontrast Hell-Dunkel-Kontrast Kalt-Warm-Kontrast Qualitätskontrast 72 v

3 i.2.ii Farbe und Kontrast als Mittel zur Benutzerführung Farbkodierung - Farbe als Symbol Farbkodierung - Farbe als Struktur Farbkodierung - Farbe für Funktionsabläufe und Funktionszustände Farbkodierung - Farbe zur Benutzerführung Farbkodierung - Farbe und Kontrast Farbbedeutung Farbe,Text und Hintergrund Farbenfehlsichtigkeit Visualisierung von Farbenfehlsichtigkeit Regeln und Tipps zum Gebrauch von Farbe beim Screen- und Interfacedesign Typografie Schriftarten Text und selbstleuchtende Medien Schriftgrößen in Abhängigkeit von Darstellungsmedien 97 Videotext, Teletext 99 Internet-Surfen am Fernseher 100 Electronic Programm Guide (EPG) 101 Multimedia Home Plattform (MHP) 102 Fernseh-Röhrenmonitoren, PAL-Norm 105 Fernseh-Röhrenmonitoren, NTSC-Norm 105 Fernseh-Röhrenmonitoren, HDTV-Norm 105 Computermonitor 107 Displays von Produktionsmaschinen 110 Displays von medizinischen Geräten 110 Interaktive Multimediakioske und Automaten 111 Displays von mobilen Geräten 114 Displays von Mobiltelefonen 116 e-paper 118 LED Informationsdisplays 120 Lichtmatrix von Architekturfassaden Proportionale und nicht proportionale Schrift Antialiasing Zeilenabstand Spaltenbreite Textmenge Orientierung planen und strukturieren Orientierung 130 vi

4 Die Suche nach der Ordnung Orientierung erfahren Metaphern Icon Icon - Metapher Icon - Symbol Icon - Symbol als Marke Icon-ISOTYPE Icon - Piktogramm, Icon - Zeichensystem Icon - emoticons Gestaltung von kons Navigation Navigation - Ein Problemlösungsprozess Navigationsstrukturen 186 Lineare Verknüpfung 187 Hyperlink-Verknüpfung 187 Hierarchische Verknüpfung 187 Netzwerkartige Verknüpfung 188 Einzelbildstruktur Navigationsformen 190 Direkte Manipulation 191 Hierarchische Navigationssysteme 194 Sitemap 197 Imagemap 200 Anker-Navigation 203 Suche 204 Alphabetische Index-Navigation 206 Guided Tour 206 Geleitete bzw. manipulierte Navigation 206 Eigenwillige Navigationsformen Exemplarischer Navigationsablauf Wesentliche Eigenschaften einer Navigation Flowchart Exemplarische Flowcharts Hinweise und Empfehlungen zur Erstellung eines Flowcharts Funktionslayout Das erweiterte Funktionslayout Drehbuch/Storyboard Drehbuch Expose Treatment Das literarische und das technische Drehbuch Storyboard Die äußere Form des Drehbuchs 254 vii

5 i.5 Gestaltungslayout Fläche Format Raster Komposition 267 Funktionslayout 267 Gestaltungslayout 267 Leserichtung 272 Proportionsverhältnisse 275 Positionierungserwartungen 276 Gliederung des Layouts Dynamik mit System Styleguide Styleguide für Funktionssoftware Styleguide für Informationssoftware Gebote und Kriterien für einen Styleguide Screendesign Eigenschaften des Screendesigns Layout Inhalte Orientierung Anreize, Motivation Auswahl-und Interaktionsmöglichkeiten Screendesign minimal Screendesign - Form mit Funktion Screendesign für Erzählformen Screendesign für Wissensvermittlung Informationdesign Varianten des Informationdesign 368 Infografiken 368 Inszenierung von Information bzw. Daten 376 Visualisierung von Funktion und System 378 Leit- und Orientierungssystem Informationen schaffen/brauchen Ordnung Ordnungsformen Alphabet Ort Zeit 385 viii

6 Reihenfolge Zahlen Kategorien Zufall Barrierefreies Informationdesign Funktion 2.1 Interactiondesign Menü-Varianten Erzählformen: Lineare, nonlineare, interaktive Erzählformen Web 2.0-Interactiondesign versus Inhalt Spiele- Ein Pool an Erzählformen und Interaktion Unterschiede der Interaktion am Fernseher und am Computer Interaktive Steuerung per Fernbedienung bzw. Player-Software Interaktionsformen Interaktivität-Was ist das? 433 1) Interaktion ist ein Erlebnis 436 2) Passive Interaktion 437 3) Vorgetäuschte Interaktion - >echte< und >falsche< Interaktion ) Interaktion als Partizipation 440 5) Interaktion als Erzählform 442 6) Interaktion als expliziter Bestandteil von Wissensvermittlung Interfacedesign Das Interface als Metapher-Der erzählerische Aspekt Das Interface als Benutzeroberfläche-Der funktionale Aspekt Das Interface als Bedeutungsträger-Image, Branding Das taktile Interface Computer-Maus Joystick Scrollrad, Drehrad Tastatur Texteingabe bei mobilen Geräten Das Sound-Interface Gebote und Kriterien für Interfacedesign Fragestellungen und Definitionen 512 IX

7 2.3 Usability 5M Usability- mehr als nur>use< und >utility< Usability und Design Barrierefreiheit - eine erweiterte Form der Usability Gebote und Tipps für eine barrierefreie Usability Barrierefreie Automaten und interaktive Multimediakioske Allgemeine Gebote und Tipps für Usability Usability-Test Quantitative und qualitative Verfahren Heuristische Evaluation - Inspektionsmethoden Allgemeine Usability-Untersuchungsmethoden ISO-Normen Software-relevante ISO-Norm Hardware-relevante ISO-Norm Weitere ISO-Normen Zielgruppenanalyse und -anspräche 3.1 Zielgruppenanalyse und -anspräche Zielgruppe Projektabsicht Benutzergruppen - Kompetenzgrade Anfänger Fortgeschrittene Experten Benutzergruppen - Funktions-und Zugangskategorien Benutzerprofil Polaritätsprofil Moodboard A.I.D.A.-Prinzip 567 X

8 4 Anhang 4.1 Inhalt der CD Danksagung Rechtshinweise Haftungsausschluss für Dateien und Programme Verweise und Links Bildernachweis Literaturverzeichnis Index Über den Autor 596 xi