Screen- und Interfacedesign

Transkript

1

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

3 Torsten Stapelkamp dmbh Münsterer Straße Köln Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISSN ISBN Springer Berlin Heidelberg New York Dieses Werk ist urheberrechtlich geschützt. Die dadurch begründeten Rechte, insbesondere die der Übersetzung, des Nachdrucks, des Vortrags, der Entnahme von Abbildungen und Tabellen, der Funksendung, der Mikroverfilmung oder der Vervielfältigung auf anderen Wegen und der Speicherung in Datenverarbeitungsanlagen, bleiben, auch bei nur auszugsweiser Verwertung, vorbehalten. Eine Vervielfältigung dieses Werkes oder von Teilen dieses Werkes ist auch im Einzelfall nur in den Grenzen der gesetzlichen Bestimmungen des Urheberrechtsgesetzes der Bundesrepublik Deutschland vom 9. September 1965 in der jeweils geltenden Fassung zulässig. Sie ist grundsätzlich vergütungspflichtig. Zuwiderhandlungen unterliegen den Strafbestimmungen des Urheberrechtsgesetzes. Springer ist nicht Urheber der Daten und Programme. Weder Springer noch der Autor übernehmen die Haftung für die CD-ROM und das Buch, einschließlich ihrer Qualität, Handels- und Anwendungseignung. In keinem Fall übernehmen Springer oder der Autor Haftung für direkte, indirekte, zufällige oder Folgeschäden, die sich aus der Nutzung der CD-ROM oder des Buches ergeben. Springer ist ein Unternehmen von Springer Science+Business Media springer.de Springer-Verlag Berlin Heidelberg 2007 Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Text und Abbildungen wurden mit größter Sorgfalt erarbeitet. Verlag und Autor können jedoch für eventuell verbliebene fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Satz: Druckfertige Daten des Autors Herstellung: LE-TEX, Jelonek, Schmidt & Vöckler GbR, Leipzig Umschlaggestaltung: KünkelLopka Werbeagentur, Heidelberg Gedruckt auf säurefreiem Papier 33/3100 YL

4 Vorwort 1 Einführung 4 1 Form 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 Farbtiefe Auflösung Farben im Internet Kontrast mit Farbe Simultankontrast Komplementärkontrast Farbe-an-sich-Kontrast Quantitätskontrast Bunt-Unbunt-Kontrast Hell-Dunkel-Kontrast Kalt-Warm-Kontrast Qualitätskontrast 72 v

5 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

6 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 Icons 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 Exposé Treatment Das literarische und das technische Drehbuch Storyboard Die äußere Form des Drehbuchs 254 vii

7 1.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

8 Reihenfolge Zahlen Kategorien Zufall Barrierefreies Informationdesign Funktion 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 439 4) 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

9 2.3 Usability 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 -ansprache Zielgruppenanalyse und -ansprache Zielgruppe Projektabsicht Benutzergruppen Kompetenzgrade Anfänger Fortgeschrittene Experten Benutzergruppen Funktions- und Zugangskategorien Benutzerprofil Polaritätsprofil Moodboard A.I.D.A.-Prinzip 567 x

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

11 Vorwort: From Our Minds to the Artificial Digital Mind Gestural interfaces, perception-driven navigation, hybrid control mechanisms these are some of the hot topics in the field known as Human- Computer Interaction (HCI). Will the reader of this book get instantaneous access to all it takes to translate a gesture such as a finger pointing to a place on a museum map into a command show me details of the picture hanging there to be executed by the computer? Or to the know-how how neuronal activity Did I turn off the lights before leaving the house? will translate into the computation Check lights, turn off if they were left on desired? Or how our anticipation of a forthcoming event a child not even in our view abruptly runs across the street can translate into control of the complex system (a fast-moving car, in this case)? Probably No, in the sense of a blueprint. But definitely Yes, in the sense of a conceptual map. Let me explain, and in doing so suggest why this book is not an end in itself but an opening of many paths. In the age of computation, natural language or language as people know it is complemented by a never-ending number of new languages. In the civilization of literacy, language grew with every new form of human activity. Where natural language no longer corresponds to the new nature of computer-based human interaction, each new form of interaction requires its own language. The fact that technology changes very rapidly is evidenced by the immense amount of hardware that all of us have thrown away at one time or another in the process of getting used to faster cycles of change. Even more dramatic is the number of manuals for which there is no other use than to be recycled. Paper can be recycled, the ideas expressed in those tomes serve as testimony to the learning curve associated with new media, new forms of interaction, and new forms of human activity. At the time I became involved in computers the late 1960s computer memory was limited; computation speed was ridiculously slow, and images were transferred to paper by means of rudimentary plotters. That was not yet the time for taking design into consideration, although a few of us computer scientists, artists, designers tried. Guiding us was the desire to imitate what other professionals delivered through the traditional media of the past. I see an element of continuity between those beginnings and the 1 Vorwort

12 sophistication attained today in deploying computers for knowledge acquisition, knowledge dissemination, and the conception of new forms of human activity. I see another line of continuity between the time when iconic interfaces emerged a paradigm inspired by semiotics, and not yet transcended even on the desktop of the most sophisticated computers working today. My own work on the iconic interface of the Lisa Apple Computer s precursor to the Macintosh guided many designers and computer scientists who later came up with more suitable representations (although the desktop metaphor still dominates our interfaces). I make this observation regarding an element of continuity in the development of the new languages embedded in computer applications because the book you have in your hands might suggest that things are simpler and easier to handle than they are in reality. If they are, it is because many of us worked hard to make them easier and simpler. This is what makes Torsten Stapelkamp s book so relevant. He has acquired a great deal of knowledge pertinent to the experience that we computer scientists and designers have accumulated in over 50 years of computation. And he makes this experience available in a very clear manner. Since I had the opportunity of working with Torsten Stapelkamp, I know that his knowledge comes from practical experience. The worldwide first Webcast (cf. Digital Design 2000+) on design issues such as the ones he presents in this book profited from his involvement. The CD-ROM that documented the contributions of internationally known designers and computer scientists was a breakthrough. It connected media: the closed universe of an interactive CD with the open-ended world of the Internet. But as the discussion mentioned above convincingly suggested, new media the DVD, in particular allows for new ways to publish and interact. Ahead of many of his colleagues, Torsten Stapelkamp realized that designers cannot wait for others to develop languages of interaction. Within the broader concept of Computational Design, which he practices as professor and as designer, he has developed a conceptual discipline from which I am sure that the readers of this book will benefit. This is why I believe that his book bridges between the experience of yesterday, the design practice of today, and the new challenges of the future. Although the new languages expressed in user interfaces, in navigation tools, and in interaction procedures make our relation with computers more intuitive, more natural, they remain constructs. Torsten Stapelkamp goes into the details of the work of what is still called an information architect. He deals with the design foundation. He realizes that a new understanding of typography is necessary. Typography is rooted in the experience of printing, but its new condition in the dynamic media is rarely clarified. The same holds true for color and for layout. He deals with the cognitive aspects of multimedia-based forms of interaction. I know how his own learning curve was shaped because we worked together closely during the interval between Digital Design and Anticipation The End Is Where 2 Vorwort

13 We Start From, the hybrid publication (book-dvd-web knowledge portal), in which he was actively involved. The reader will find sufficient reference to the latter work in this book. Absent, however, is the description of the discovery process he went through. All the aspects involved in producing such work involved dealing creatively with new media and new technical possibilities. It also involved overcoming limitations inherent in computerbased activities. What appears in this book as an inventory of navigation forms or a methodology of creating flowcharts, the storyboard to name only three are discoveries made through trial and error over days and nights. He also taught many students and even colleagues professors. Many of his other projects, as well as projects carried out by colleagues all over the world, are documented in this book. Is this book the end of the story? By no means. New media continue to emerge. As I ve stated since 1994, computation will become more and more ubiquitous. That is, it will be embedded in the devices and processes that help us do what we do. We ve transcended the information society model and work within the knowledge society. Games, for example, have taken over many educational and training endeavors. Massively distributed forms of interaction require better languages and more intuitive forms of interaction. If you work in this field, Torsten Stapelkamp s book will be a good guide even for professionals using game engines to build new marketing procedures, for example, or for the simulation of future scientific endeavors. And the next step? Probably anticipatory computing. And with it the expectation of individualized languages that each user can customize to reflect and serve his or her own characteristics. Mihai Nadin Professor Dr.-Ing. Dr. Mihai Nadin ist Experte für Human Computer Interaction und lehrte bis 2003 für die Studienrichtungen Kommunikationsdesign und Industrial Design an der Universität Wuppertal an dem von ihm gegründeten Lehrstuhl Computational Design. Im Jahr 2005 erhielt er die Ashbel Smith- Professur der School of Arts and Humanities an der University of Texas in Dallas (UTD, und wurde zugleich an die Erik Jonsson School of Engineering and Computer Science berufen. An der University of Texas ist Professor Nadin zudem Direktor des von ihm gegründeten Institute for Research in Anticipatory Systems ( Von seinen zahlreichen Publikationen sind Jenseits der Schriftkultur und Antizipation Die Ursache liegt in der Zukunft gerade im Zusammenhang mit diesem Buch besonders erwähnenswert ( books.html). 3 Vorwort