Web X.0 Erfolgreiches Webdesign, professionelle Webkonzepte. Gestaltungsstrategien, Styleguides by MAAS+CO GbR

x.media.press ist eine praxisorientierte Reihe zur Gestaltung und Produktion von MultimediaProjekten sowie von Digital- und Printmedien.

Torsten Stapelkamp

Stapelkamp

Web X.0 Erfolgreiches Webdesign und professionelle Webkonzepte

Mit diesem Buch werden professionelle Webkonzepte für erfolgreiches Webdesign beschrieben und das Zusammenwirken von Designmethodiken, Informationsarchitektur und Designmanagement aufgezeigt. Es werden sowohl Gestaltungs- als auch Planungsaufgaben vorgestellt und die Zusammenhänge einer Designertätigkeit mit Konzeptions- und Unternehmungsberatung detailliert erläutert. Wissenschaftliche Auseinandersetzungen und Analysen übersetzt der Autor dabei in direkt anwendbare medienspezifische Gestaltungsmethodiken und beschreibt geeignete Konzepte und Produktionsabläufe. Servicedesign bzw. Experience Design sind dabei die übergeordneten Themen. In diesem Zusammenhang werden die wesentlichen Strategien und Gestaltungskonzepte beschrieben, die erst mit dem Web 2.0 und Web 3.0 aufkamen: „Mitmach-Internet“, „Semantisches Internet“, „Semantische Suche“, „Metadaten“, „Microformats“, „Augmented Reality“, „Ubiquitous Computing“ etc. Weiterführende Informationen zum Thema Web X.0 finden Sie hier: www.designismakingsense.de

ISSN 1439-3107 ISBN 978-3-642-02071-1

9 783642 020711

›

springer.de

Web X.0

Gestaltungsstrategien, Styleguides und Layouts für stationäre und mobile Medien

Web X.0

Erfolgreiches Webdesign und professionelle Webkonzepte CD-ROM

Gestaltungsstrategien, St yleguides und L ayouts für stationäre und mobile Medien

123

Inhaltsverzeichnis 1 E inführung Form und Funktion 2 Wahrnehmung Gesichtsfeld 22 Räumlichkeit 24 Nähe 25 Geschlossenheit 25 Aufmerksamkeit 26 Erkennbarkeit 27 Kontext 28 Plastizität 28 Figur und Grund 29 Auffälligkeit 30 Intensität 30 Ähnlichkeit 31 Abweichung 31 Mustererkennung 32

3 Farbe

4 Typografie

10 3.1 Wahrnehmung und Farbe 35 3.2 Farbtöne des Spektrums 35 3.3 Additive Farbmischung 39 3.4 Subtraktive Farbmischung 41 3.5 Farbraumsysteme 42 3.6 Farbtiefe 44 Dithering 46 3.7 Auflösung 48 3.8 Farben im Internet 49 3.9 Kontrast mit Farbe 50 Simultankontrast 50 Komplementärkontrast 52 Farbe-an-sich-Kontrast 54 Quantitätskontrast 56 Bunt-Unbunt-Kontrast 58 Hell-Dunkel-Kontrast 60 Kalt-Warm-Kontrast 62 Qualitätskontrast 64 3.10 Farbe und ihre Darstellungsmedien 66 Druckerzeugnisse 67 Fernseh-Röhrenmonitor 68 Plasmamonitor 69 Computer-Röhrenmonitor 69 Liquid Crystal Display (LCD) 70 Anzeigetafeln, Displays 71 Architektur als Medium bzw. Display 72 3.11 Farbe und Kontrast als Mittel zur Benutzerführung 78 3.11.1 Farbkodierung – Farbe als Symbol 78 3.11.2 Farbkodierung – Farbe als Struktur 82 3.11.3 Farbkodierung – Farbe für Funktionsabläufe und Funktionsz ustände 83 3.11.4 Farbkodierung – Farbe zur Benutzerführung 84 3.11.5 Farbkodierung – Farbe und Kontrast 86 3.11.6 Farbbedeutung 88 3.11.7 Farbe, Text und Hintergrund 90 3.11.8 Farbenfehlsichtigkeit 92 3.11.9 Visualisierung von Farbenfehlsichtigkeit 94 Regeln und Tipps zum Gebrauch von Farbe 96

4.1 Schriftarten 99

Antiquaschriften 100 serifenbetonte Schriften 100 Groteskschriften 101 themenspezifische Schriften 101 4.2 Antialiasing 104 4.3 P roportionale und nicht proportionale Schrift 105 4.4 Zeilenabstand 106 4.5 Spaltenbreite 107 4.6 T ext und selbstleuchtende Medien 108 4.7 S chriftarten für das Internet 109 4.8 S chriftgrößen für Webdesign – Einheiten px, pt und em 112 4.9 S chriftgrößen in Abhängigkeit von Darstellungsmedien 116 Fernseh-Monitor 118 Computermonitor 124 Medizinische Geräten 126 Produktionsmaschinen 127 Multimediakioske 128 Mobile Geräte 130 Mobiltelefone 132 e-Paper 133 LED-Informationsdisplays 134 Architekturfassade 135 4.10 Textmenge 136

Inhaltsverzeichnis

5 P rojektentwicklung – Workflow 142 5.1 Briefing/Re-Briefing 145 5.2 Pflichtenheft/Lastenheft 146 5.2.1 Kriterien für das Pflichtenheft 147 5.3 Projektplan 149 5.3.1 Scrum – Projektmanagement auf Basis von Zeitmanagement 150 5.3.2 Designprozess/ Problemlösung 153 5.3.3 Zeitplanung/Tabelle 154 5.3.4 Kostenkalkulation 156 5.3.5 Software für Projektmanagement – CRM, ERP 161 5.3.6 Hilfsmittel für die Projektentwicklung 165 5.4 Benutzerprofil/Zielgruppe 171 5.4.1 Benutzerprofil 171 5.4.2 Polaritätsprofil 172 5.5 Farbe als Konzept 176 5.5.1 Moodboard 176 5.5.2 Farbschema 180 5.6 Flowchart 184 5.6.1 Exemplarische Flowcharts 188 Hinweise und Empfehlungen zur Erstellung eines Flowcharts 200 5.7 Funktionslayout/Wireframe 201 5.8 Erweitertes Funktionslayout 213 Gründe für ein Funktionslayout und seine Vorteile 220 5.9 Drehbuch/Storyboard 221 5.9.1 Drehbuch 221 5.9.2 Exposé 221 5.9.3 Treatment 221 5.9.4 Das literarische und das technische Drehbuch 221 5.9.5 Storyboard 222 5.9.6 Die äußere Form des Drehbuchs 228

6 Screendesignbeispiele 320 5.10 Gestaltungslayout 230 5.10.1 Fläche 230 5.10.2 Format 231 Goldener Schnitt 232 Fibonacci-Zahlenfolge 232 DIN -Format 233 Display-Formate 234 softwarebedingte Formate 236 5.10.3 Raster/ Layout-Framework 238 8 × 8 Pixel Submatrix 242 960- Pixel-System 244 5.10.4 Komposition 248 5.10.5 Dynamik mit System 276 5.11 Styleguide 286 5.11.1 Styleguide für Funktionssoftware 288 Mac OS X 288 GNOME 288 KDE 288 Windows Vista 289 Palm OS 289 Java 289 5.11.2 Styleguide für Informationssoftware 290 Passepartout 290 www.bundesregierung.de 294 5.11.3 Gebote und Kriterien für einen Styleguide 308 Anhaltspunkte zur Erstellung eines Styleguides und mögliche Bestandteile 308 5.12 Barrierefreiheit – eine erweiterte Form der Usability 310 Gebote, Tipps, Eigenschaften und Voraussetzungen barrierefreier Angebote 316 5.12.1 Barrierefreie Automaten und interaktive Multimediakioske 318

6.1 Eigenschaften des Screendesigns 323 6.1.1 Layout 323 6.1.2 Inhalte 324 6.1.3 Orientierung 326 6.1.4 Anreize, Motivation 332 6.1.5 Auswahl- und Interaktionsmöglichkeiten 336 6.2 Screendesign minimal 344 Fernsehfernbedienung 346 Desk Tools 348 6.3 S creendesign – Form mit Funktion 350 JODI 350 shiftcontrol 352 [kleine welt] 354 JetBlue Check-in-Terminal 356 MetroCard 358 Navigationsgeräte 360 Computer-Betriebssysteme 361 6.4 Screendesign für Erzählformen 364 Perspektive und Raumdarstellung 365 Murphys Loch 366 Schöne Heimat 368 1944: Operation Teddybär 372 Myst 374 The Endless Forest 376 6.5 Screendesign für Wissensvermittlung 380 Antizipation 382 Verbrechen der Wehrmacht 384 Made in MTL 386 Nanoreisen 388

Inhaltsverzeichnis

7 Web 1.0

9 Web 3.0

390

8 W eb 2.0 – Das Mitmach-Internet

398

8.1 Web 2.0 – Soziale Netzwerke 400 Wikipedia 400 mySpace 400 del.icio.us 400 flickr 401 YouTube 401 mevio 401 XING 401 8.2 Tagging 418 8.3 Taxonomie 420 8.4 Folksonomie 424 8.5 Mitmach-Kampagnen 425 8.6 Twitter 438 8.7 Personalisierte Startseiten – Internetservice 442 8.8 Web 2.0 – Gefahreneinschätzung 446 8.9 Web 2.0 – Journalismus 463 8.10 Google – Ein MitmachMonopol? 466

476

9.1 Semantische Suche 478 9.2 Open Data 486 9.3 FOAF – Friend Of A Friend 491 9.4 SIOC – Semantically-Interlinked Online Communities 492 9.5 Metadaten 493 9.6 Metadaten-Formate 495 9.7 Microformats 508 9.8 RDF – Resource Description Framework 512 9.9 OWL – Web Ontology Language – WOL 519 9.10 Werkzeuge – Tagging, Semantik, Suche 520 9.11 Web 3.0 – Web3D 527 Active Worlds 549 Protosphere 549 Entropia Universe 549 Forterra OLIVE Plattform 550 OpenSimulator 550 web.alive 550 Qwaq Forums 551 There 551 9.12 Web 3.0 – Augmented Realities 553 9.13 Web 3.0 – Ubiquitous Computing 558

10 Anhang

562

10.1 Danksagung 563 10.2 Rechtshinweise 564 10.2.1 Haftungsausschluss für Dateien und Programme 564 10.2.2 Verweise und Links 565 10.3 Bildernachweis 566 10.4 Literaturverzeichnis 567 10.5 Index 578 10.6 Über den Autor 584

Screendesign Informationsdesign

Einführung Form und Funktion  Einführung

grafikdesign typografie/layout icon/metapher illustration

tapher

fotografie text

film animation

1 Einführung Form und Funktion

video

Bewegtbild

musik ton sounddesign

Audio

film

ion Screendesign Informationsdesign grafikdesign typografie/layout icon/metapher illustration fotografie

stimme

text

film animation video

ton

design

Bewegtbild musik

stimme ton

sounddesign

Audio

EinfĂźhrung Form und Funktion ď&#x20AC;´

Form

Screendesign Informationsdesign grafikdesign typografie/layout icon/metapher illustration fotografie text

film animation video

Bewegtbild

musik

stimme ton

Bewe

sounddesign

Audio

Einführung Form und Funktion 

Funktion

Interactiondesign Screendesign Informationsdesign grafikdesign typografie/layout icon/metapher illustration fotografie film

text

Usability

animation video

Bewegtbild musik

stimme

Screendesign Informationsdesign

ton sounddesign

grafikdesign typografie/layout

Audio

icon/metapher illustration fotografie text

film animation video

Bewegtbild

Screendesign Informationsdesign

musik

stimme ton

grafikdesign

sounddesign

typografie/layout icon/metapher illustration

Audio

fotografie text

film animation video

Bewegtbild musik

stimme ton

sounddesign

Audio

Interfacedesign

Abb. 1 Ein interaktives Produkt er gibt sich aus der Gestaltung von Form und Funktion. Die sechs Gestaltungsaspekte a) Screendesign, b) Informations design, c) Interfacedesign, d) Interactiondesign, e) Film-/Video-/ Animationdesign und f ) Ton/ Musik/Sounddesign wirken direkt aufeinander und stärken bzw. schwächen sich gegenseitig. Je nach Absicht können deren Prioritäten und Mengenverteilung stark variieren und je nach Produkt überschneiden sich die ein -zelnen Aspekte mehr oder weniger und bewegen sich eher im Bereich der Form oder der Funktion. Dies ließe sich am besten mit einem dynamischen Diagramm darstellen, dessen Elemente sich den Zuordnungen und den Eigenschaften des jeweiligen Produkts entsprechend im Diagramm verschieben würden. (Grafi k: Torsten Stapelkamp).

Wahrnehmung ď&#x20AC;´

2 Wahrnehmung

Wahrnehmung

»Die Umwelt, so wie wir sie wahrnehmen, ist unsere Erfi ndung.« Heinz von Foerster

Um Wahrnehmung beurteilen zu können, ist zu berücksichtigen, dass das Wahrgenommene nicht nur im Ganzen zu betrachten ist, sondern stets auch die Elemente im Einzelnen, die das Ganze bilden und unterschiedlich wahrnehmbar machen, je nachdem, wie sich die einzelnen Elemente gegenseitig beeinflussen. In der Gestaltpsychologie führte diese Einschätzung zur Aufstellung der Grundregel: »Das Ganze ist mehr als die Summe seiner Teile«, einem Zitat, das Aristoteles zugeschrieben wird. Nicht das Auge sieht, sondern das Gehirn konstruiert Wahrnehmung. Das Auge wird durch physikalische Lichtereignisse gereizt und reicht die empfangenen Daten unbewertet an das Gehirn. Dadurch, dass mit zwei Augen betrachtet wird, können die durch das Augenpaar aufgenommenen Daten im Gehirn zudem nicht nur zu einer Bild-, sondern auch zu einer Raumwahrnehmung verarbeitet werden. Ob, wie und warum eine Wahrnehmung so wahrgenommen wird, wie sie wahrgenommen wird, hängt von der kulturellen Prägung und von der Erfahrung ab, die mit vorherigen Wahrnehmungen gesammelt werden konnten. Dies drückt sich insbesondere in der Leserichtung von Text, in der Interpretation und Bedeutung von Farbe und in der Wahrnehmung von Räumlichkeit aus. Die angelernte Leserichtung von Text stellt ein Verhalten dar, welches sich auch auf das Betrachten von Bildern und auf das alltägliche Wahrnehmen der Umwelt überträgt. Farben und Raumdarstellungen können durch Intensität und Größenverhältnisse ergänzend zum Ausdruck und zur Differenzierung von Bedeutungen genutzt werden. Unabhängig aller kulturellen und erfahrungsbedingten Einflüsse zeigt sich in der Wahrnehmung eine grundlegende Gemeinsamkeit im Bestreben aller Menschen, Elemente, die sich auf einer gemeinsamen Fläche befinden, in Beziehung zueinander setzen zu wollen. Wahrnehmung bedeutet, nach kausalen Zusammenhängen zu suchen und einzelne Elemente auf Grund ihrer Farbe, Form oder Größe zu gruppieren, in der Hoffnung, dadurch in den Elementen bzw. aus der Kombination dieser Elemente heraus, bekannte Strukturen bzw. Abbilder interpretieren zu können. Dies bedeutet auch, dass dem Gesehenen bewusst bzw. unbewusst Elemente gedanklich hinzugefügt werden, die tatsächlich gar nicht vorhanden sind. Dieses Phänomen bzw. diese Fähigkeit führt dazu, in Bildern mehr sehen zu können als nur das Abgebildete. Dies bedeutet, dass differenzierte Wahrnehmung zur Interpretation und somit zur Einschätzung von Situationen und Möglichkeiten befähigt. Diese Fähigkeit war für den Menschen stets überlebenswichtig. Sie ermöglicht, Vorteile zu erkennen und dadurch vorausschauend zu handeln. Übertragen auf die heutige Zeit und auf die Nutzung von Interfaces bedeutet dies, dass ein Anwender stets versucht, die einzelnen Elemente eines Interfaces zu interpretieren und in Beziehung zu setzen. Er versucht, die Möglichkeiten und Eigenschaften eines Produkts zu antizipieren. Interfaces sollten daher in ihrer Funktion und Bedeutung antizipierbar sein.

Farbe ď&#x20AC;´

3 Farbe

3.3 Additive Farbmischung

Mit einer additiven Farbmischung ist das Mischen von farbigem Licht gemeint, das entweder durch Reflexion oder mittels direkter Bestrahlung zum Auge gelangt. Eine additive Farbmischung ergibt sich über Reflexion, indem Licht z. B. über farbige Druckerzeugnisse abgelenkt ins Auge des Betrachters leuchtet und die Farbpunkte des farbigen Druckrasters als additive Farbmischung neue Farbwahrnehmungen entstehen lassen. Am besten ist dies bei Plakaten zu erkennen, da deren Raster sehr grob ist. Sobald man sich ihnen nähert, sind selbst mit bloßem Auge die einzelnen Bildpunkte zu erkennen, die sich erst bei entsprechender Distanz zur Mischfarbe addieren. Interessant ist, dass die einzelnen Bildpunkte eines solchen Plakates nach subtraktiver Farbmischung gemischt sind. Das optische farbliche Zusammenwirken dieser einzelnen Punkte erfolgt allerdings nach der additiven Farbmischung. Eine Farbfläche, deren Farbe sich z. B. aus der subtraktiven Farbmischung von Blau und Gelb zu einem satten Grün ergab, wird in Kombination mit gelben Punkten in additiver Farbmischung optisch als eine hellgrüne Fläche wahrgenommen. Eine direkte Bestrahlung von Licht ins Auge des Betrachters erfolgt bei selbstleuchtenden Medien, wie z. B. durch Projektoren, Fernseher, Computerröhrenmonitore, Flachbildschirme oder Displays von mobilen Endgeräten (Mobiltelefon, PDA , etc.). Die additive Farbmischung kann sowohl außerhalb als auch erst im Auge stattfinden, wenn z. B. unterschiedliche Farbbereiche so eng beieinander liegen, dass sie auf Grund von Distanz oder der geringen Größe vom bloßen Auge nicht mehr differenziert werden können und daher direkt als Mischung dieser Farbbereiche wahrgenommen werden.

Abb. 22 Je nachdem, welche der drei Farbpunkte innerhalb des Farbtripels (RGB) leuchten, ergibt sich ein so genannter Pixel-Farbpunkt, der vom Betrachter als entsprechende additive Farbmischung wahrgenommen wird. Wenn z. B. alle drei Farben (Rot, Grün, Blau) gemeinsam leuchten, ergibt sich Weiß, wenn Rot und Grün leuchten, ergibt sich Gelb, wenn Grün und Blau leuchten, ergibt sich Cyan und wenn keine der drei Farben innerhalb des Farbtripels leuchten, ergibt sich Schwarz. Bei Röhrenmonitoren mit Lochmaske sind die Farbtripel im Dreieck angeordnet und bei Röhrenmonitoren mit Streifenmaske horizontal, also neben einander.

3.10 Farbe und ihre Darstellungsmedien

Darstellungsmedien lassen sich bezüglich der Farbdarstellung und Farbmischung in die folgenden beiden Kategorien einteilen: • •

nicht selbstleuchtende und selbstleuchtende Medien

Druckerzeugnisse, Farbpulver oder farbige Gegenstände sind z. B. nicht selbstleuchtende Objekte bzw. Medien. Monitore oder diverse Displaytechnologien sind hingegen selbstleuchtende bzw. hintergrundbeleuchtete Objekte. Bei den selbstleuchtenden bzw. hintergrundbeleuchteten Medien sind zahlreiche Unterschiede festzustellen. Bereits die Monitortechnologie bietet mindestens drei wesentliche Medientypen, die jeweils individuelle Eigenschaften und Vorteile haben. Röhrenmonitore geben Farben noch am besten wieder, LCD -Monitore können Abbildungen am schärfsten darstellen und Plasmamonitore ermöglichen eine hellere und kontrastreichere Wiedergabe. Plakatleuchtkästen und farbige Glasmalerei sind ebenso als Darstellungsmedien zu berücksichtigen, wenn es darum geht, die farblichen Eigenschaften von hintergrundbeleuchteten Medien zu beschreiben. Seitdem es interaktive Plakate gibt, die sich per SMS ansteuern lassen oder sogar Daten zum Herunterladen auf ein Mobiltelefon zur Verfügung stellen, werden selbst Plakate interessant für die Thematik Screen- und Interfacedesign. Daneben gibt es noch zahlreiche weitere Darstellungstechnologien in Form von Displays und Anzeigetafeln für öffentliche Verkehrsmittel, in Stadien oder als selbstleuchtende Werbeflächen. Grundsätzlich ist neben der hardwareseitigen Darstellungstechnologie auch das Umgebungslicht und die daraus resultierenden Reflexionen zu beachten und bei Computeranwendungen das benutzte Betriebssystem. Das Betriebssystem MacOS verwendet einen Gammawert von 1,8 und das von Windows in der Regel einen von 2,2. Das führt dazu, dass Bilddateien, die an einem Apple-Computer erstellt wurden, an einem PC heller und kontrastärmer erscheinen. Wurden sie an einem PC erstellt, so erscheint die Bilddatei an einem Apple-Computer entsprechend dunkler und kontrastreicher. Je nachdem, welche Darstellungsmedien und welche Betriebssysteme von der jeweiligen Zielgruppe verwendet werden, sind Einflussfaktoren bezüglich der Farbgenauigkeit, der Helligkeit, der Farbbrillanz und der Kontraststärke zu beachten, die sich nur sehr bedingt voraussagen lassen und denen man als Gestalter bzw. Produzent nur sehr bedingt begegnen kann. Es ist daher zu empfehlen, die Zielgruppe so gut es geht zu ermitteln und, wenn möglich, gezielt für deren Nutzerverhalten und den damit zusammenhängenden Darstellungstechniken angepasst zu produzieren.

3.11 Farbe und Kontrast als Mittel zur Benutzerführung

Ein bewusster Einsatz von Farbe und die Berücksichtigung von Kontrasten tragen dazu bei, Leitsysteme oder Hard- und Software-Produkte mit Bedienfeldern zu entwickeln, deren Absicht erkannt und deren Benutzerführung verstanden wird. Farbe hilft, Themengruppen zu differenzieren, Inhalte zu gliedern, Leitsysteme zu strukturieren oder Funktionszustände zu definieren. Die zuvor beschriebenen Kontraste (S. 50–64) unterstützen diese Vorhaben und helfen, sie zu verstärken.

3.11.1 Farbkodierung – Farbe als Symbol Es erscheint nahe liegend, Farben zur Bildung von Farbsystemen zu nutzen, um mit den einzelnen Farben Bereiche oder Themen zu gliedern und auf diesem Wege Ordnung und Orientierung zu schaffen. Eigentlich wird damit die gute Absicht verfolgt, mit solchen Konzepten eine nachvollziehbare, systematische Struktur anzubieten. Farbe eignet sich aber nur sehr bedingt zur Kodierung und Gliederung von Themen und Inhalten. Jede einzelne Farbe würde dann als Symbol eingesetzt werden, obwohl mittlerweile kaum mehr eine Farbe eine eindeutige, unmissverständliche Symbolwirkung darstellt. Dass z. B. Purpur (Violett) einst unumstößlich und eindeutig die Farbe der Macht war, nur von den Mächtigen genutzt werden durfte und auch nur von diesen bezahlt werden konnte, da 12000 Purpurschnecken erforderlich sind, um 1,4 Gramm Purpurfarbe zu erhalten, ist vielen bekannt. Dennoch hat selbst diese Farbe, wie viele andere Farben auch, ihre eindeutige Symbolwirkung und damit ihren Alleinvertretungsanspruch längst verloren oder zumindest stark eingebüßt. Die Zuordnung einzelner Farben hat sich im Laufe der Kulturgeschichte ständig geändert. Die Farbe Purpur steht nicht mehr für Macht, sondern eher für schwülstig, schwer, beladen, magisch, Sexualität, Dekadenz, Kreativität oder einfach nur für Schokolade, wobei Lila allerdings ein durch Weiß geschwächtes Violett ist. Bestenfalls das Militär und die Feuerwehr können zumindest regional behaupten, Farben zu verwenden, die eindeutige Symbolwirkungen haben. Hierbei ist auch zu beachten, dass einige Farben erst in Kombination mit weiteren Farben eine bestimmte oder sogar von der Eigenfarbassoziation abweichende Bedeutung erhalten. So steht die Farbe Rot z. B. in Kombination mit Rosa für Liebe und in Kombination mit Schwarz für Zorn. Auch dies wäre zu berücksichtigen, wenn man Farben zur Kodierung von Struktur und Inhalt nebeneinander als Farbsystem verwenden will. Keine dieser Farben dürfte sich dann gegenseitig stören. Sie müssten aber dennoch zueinander passen, um als Einheit, als Reihung verstanden zu werden. Und dennoch muss jede Farbe für sich genug Individualität besitzen, um einen eigenen Bereich definieren bzw. ein einzelnes Thema repräsentieren zu können. Wenn mit der jeweiligen Farbe keine Symbolwirkung erzielt werden kann, wäre die gesamte Farbsystematik und die Wahl der einzelnen Farbe nur beliebig und die vermeintliche Systematik nur eine Struktur ohne Funktion. Es ist bereits schwer genug, unmissverständliche und aussagefähige Symbole aus Zeichen, Formen und Linien zu entwickeln. Bei einer Farbkodierung bliebe nur die Farbe selbst als Symbol, was schon bereits an der vielseitigen Interpretierbarkeit einer Farbbedeutung scheitert und eine eindeutige Symbolwirkung unmöglich macht, selbst dann, wenn man länderspezifische und kulturell bedingte Interpretationsabweichungen außer Acht ließe (siehe Farbbedeutung in diesem Kapitel, S. 88). Die meisten Menschen können sich zudem im Schnitt nicht mehr als fünf bis sieben

MINISTR ATIO N

NA OM TIO NA L TELEC N

U.S .

E RC

UN IC RM ATIO NS & INF O

TIO

6HFRQGDU\

6(59,&( (;$03/( '(6&5,37,21

3ULPDU\

),;('

&DSLWDO /HWWHUV

3HUPLWWHG %52$'&$67,1* &DSLWDO /HWWHUV EHWZHHQ REOLTXH VWURNHV

0RELOH

ENT OF CO MM RTM PA E DE

8 6 '(3$570(17 2) &200(5&(

0DUFK

$//2&$7,21 86$*( '(6,*1$7,21

VW &DSLWDO ZLWK ORZHU FDVH OHWWHUV

1DWLRQDO 7HOHFRPPXQLFDWLRQV DQG ,QIRUPDWLRQ $GPLQLVWUDWLRQ 2IILFH RI 6SHFWUXP 0DQDJHPHQW 02%,/(

),;('

(;&(37 $(52 02%,/(

Ă&#x201A;Ă&#x201A; %$1' 72 %( '(6,*1$7(' )25 0,;(' 86(

%$1' $//2&$7(' 72 3(5621$/ &20081,&$7,216 6(59,&(6 3&6

),;(' 6$7(//,7( 6 (

%52$' &$67,1*

%52$' &$67,1* 6$7(//,7(

%$1' '(6,*1$7,216 :$9(/(1*7+

)5(48(1&< $&7,9,7,(6 ),;(' 6$7(//,7( ( 6

,QIUD VRQLFV [ P

+] 02%,/(

),;('

[ P

9(5< /2: )5(48(1&< 9/)

$XGLEOH 5DQJH 6RQLFV

N+]

N+] ,17(5 6$7(//,7(

5$',2 $6752120< ($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

63$&( 5(6($5&+ 3DVVLYH

02%,/(

*+] ($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

[ P P

N+] ),;('

$0 %URDGFDVW 8OWUD VRQLFV

N+] P ,17(5 6$7(//,7(

7+( 5$',2 63(&7580 0+] 5$',2 /2&$7,21

02%,/(

),;('

0) +) P

0+]

Abb. 99 Farbkodierung eignet sich zur Differenzierung von Daten in Informationsgrafiken besser, als zur Strukturierung von Orientierungssystemen bzw. zur interaktiven BenutzerfĂźhrung. Bei Informationsgrafiken wird Farbe in der Regel nur als Gestaltungsmittel zur Differenzierung und Visualisierung von Daten eingesetzt. (U.S. Department of Commerce, 1996). 5$',2 1$9,*$7,21

),;('

02%,/( 6$7(//,7(

)0 %URDGFDVW

0+]

9+) 8+)

3/6

0$*1,),(' $%29(

02%,/( 6$7(//,7( ( 6

),;(' 6$7(//,7( ( 6

;

*+] FP

0LFURZDYHV

*+] FP 5$',2 /2&$7,21

6+) (+)

5DGDU 5DGDU %DQGV

*+] FP

7+] ),;('

,1)5$5('

6XE 0LOOLPHWHU

+] 63$&( 5(6($5&+ 3DVVLYH

[ c

,QIUDUHG 5$',2 $6752120<

[ c

9,6,%/(

9LVLEOH 02%,/( 6$7(//,7(

02%,/(

[ c

+] +]

[ c

8/75$9,2/(7 ; 5$<

8OWUDYLROHW [ c

,60 Â˛ Â&#x201C; *+] *+] ,6 '(6,*1$7(' )25 81/,&(16(' '(9,&(6

[ c

5$',2 $6752120<

[ [ c ),;('

[ c

02%,/(

),;('

[ 02%,/( 6$7(//,7(

02%,/(

*DPPD UD\ ; UD\

*$00$ 5$<

+] c [

),;('

,60 Â˛ Â&#x201C; *+]

&RVPLF UD\

&260,& 5$<

+] 02%,/( 02%,/(

02%,/( 6$7(//,7( 02%,/(

),;(' 63$&( 5(6($5&+ 3DVVLYH

5$',2 $6752120<

$0$7(85 6$7(//,7(

5DGLR ORFDWLRQ

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

,60 Â˛ Â&#x201C; *+]

(;&(37 $(52 02%,/( 5

[ c 3/($6( 127( 7+( 63$&,1* $//27(' 7+( 6(59,&(6 ,1 7+( 63(&7580 6(*0(176 6+2:1 ,6 127 3523257,21$/ 72 7+( $&78$/ $02817 2) 63(&7580 2&&83,('

,60 Â˛ Â&#x201C; *+]

*+]

5$',2 5$',2 1$9,*$7,21 $6752120< 6$7(//,7(

02%,/( 6$7(//,7( 02%,/(

02%,/( ),;('

*+]

0(7(252/2*,&$/ $,'6

$(521$87,&$/ 5$',21$9,*$7,21

5DGLRORFDWLRQ

0+]

),;(' 6$7(//,7( 6 (

02%,/(

),;('

5DGLRORFDWLRQ 5DGLRORFDWLRQ

5DGLR ORFDWLRQ

$PDWHXU

0RELOH $0$7(85 6$7(//,7(

02%,/(

),;('

$0$7(85

),;('

/$1' 02%,/( ),;(' ),;('

02%,/(

$0$7(85 6$7(//,7(

/$1' 02%,/(

),;(' 02%,/(

%52$'&$67,1* 0$5,7,0( 02%,/( /$1' 02%,/(

/$1' 02%,/( 0$5,7,0( 02%,/( /$1' 02%,/( ),;(' 02%,/( 5$',2 $6752120<

$0$7(85 67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

6SDFH 5HVHDUFK 67$1'$5' )5(4

$0$7(85 6$7(//,7(

),;('

),;(' ),;(' 0RELOH $(521$87,&$/ 02%,/( 25

0$5,7,0( 02%,/(

%52$'&$67,1* ),;(' $(521$87,&$/ 02%,/( 5

),;(' $0$7(85

0+]

),;('

/$1' 02%,/(

0$5,7,0( 02%,/(

0$5,7,0( 02%,/( 7(/(3+21<

02%,/( ',675(66 $1' &$//,1*

0$5,7,0( 02%,/( 7(/(3+21<

02%,/(

0$5,7,0( 02%,/( 7(/(3+21<

02%,/(

),;('

6SDFH 5HVHDUFK 67$1'$5' )5(4 $1' 7,0( 6,*1$/

67$1'$5' )5(4

67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

$(521$87,&$/ 02%,/( 5

02%,/(

0$5,7,0( 5$',21$9,*$7,21

/DQG 0RELOH

N+]

,60 Â˛ Â&#x201C; 0+]

02%,/(

/$1' 02%,/( $0$7(85

)L[HG

0$5,7,0( 5$',21$9,*$7,21 5$',2 %($&216

$(521$87,&$/ 5$',21$9,*$7,21

$HURQDXWLFDO 0RELOH

$(521$87,&$/ 5$',21$9,*$7,21

0DULWLPH 5DGLRQDYLJDWLRQ 5DGLR %HDFRQV

$HURQDXWLFDO 5DGLRQDYLJDWLRQ 5DGLR %HDFRQV

$HURQDXWLFDO 0RELOH

02%,/( 6$7(//,7( ( 6

0$5,7,0( $HURQDXWLFDO 0RELOH 02%,/(

02%,/(

),;('

($57+ (;3/25$7,21 6$7 3DVVLYH

),;('

5DGLRORFDWLRQ

63$&( 5(6($5&+ 3DVVLYH

%52$' &$67,1* 6$7(//,7(

),;('

02%,/( 6$7(//,7( 6 (

5DGLRORFDWLRQ

$PDWHXU

)L[HG

%52$'&$67,1* 6$7(//,7(

63$&( 5(6($5&+ 63$&( 72 ($57+

5$',2 $6752120<

(DUWK 6SDFH ([SORUDWLRQ 5DGLR 6DW $VWURQRP\ 5HVHDUFK 3DVVLYH

3DVVLYH

%52$'&$67,1* 6$7(//,7(

5$',2'(7(50,1$7,21 6$7 6 (

02%,/(

5$',2/2&$7,21

$0$7(85

%52$'&$67,1*

67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

$(521$87,&$/ 5$',21$9,*$7,21

),;(' 6$7(//,7( ( 6

$PDWHXU

5$',2/2&$7,21 $0$7(85 $PDWHXU $0$7(85

5DGLR )L[HG ORFDWLRQ

5DGLRORFDWLRQ

),;('

0RELOH 02%,/(

02%,/(

,60 Â˛ Â&#x201C; 0+]

(DUWK ([SORUDWLRQ 6DWHOOLWH 6 6

02%,/(6

02%,/(

75$9(/(56 ,1)250$7,21 6(59,&( $7 N+]

$0$7(85 6$7(//,7(

($57+ (;3/ 6$7 3DVVLYH

02%,/(

5DGLR (DUWK ([SO 5$',2 $PDWHXU 6DWHOOLWH $FWLYH

/2&$7,21 ORFDWLRQ 5$',2/2&$7,21 5$',21$9,*$7,21 ,17(5 6$7(//,7( 6$7(//,7( ( 6

(DUWK 6WDQGDUG ([SORUDWLRQ )UHTXHQF\ DQG 02%,/( ),;(' 6DWHOOLWH 7LPH 6LJQDO 6 6

6DWHOOLWH ( 6

$0$7(85

02%,/( ,17(5 6$7(//,7( ,17(5 6$7(//,7(

),;('

63$&(

),;('

($57+ 63$&( 63$&( 5(6($5&+ 23(5$7,21 (;3/25$7,21 V ( V V

V ( V V 6$7 V ( V V

6SDFH 5HVHDUFK

02%,/(

5DGLRORFDWLRQ

02%,/(

63$&( 5(6 3DVVLYH

02%,/(

5$',2 5(6($5&+ ($57+ (;3/ 02%,/( $6752120< 3DVVLYH 6$7 3DVVLYH

),;('

5$',2 $6752120<

),;('

02%,/( /26

),;('

),;(' 0$5,7,0( 02%,/( ),;('

67$1'$5' )5(4

6SDFH 5HVHDUFK 67$1' )5(4 7,0( 6,* 67$1'$5' )5(48(1&< 7,0( 6,*1$/ .+=

/$1' 02%,/(

),;(' /26

63$&( 5(6($5&+ V ( GHHS VSDFH RQO\

),;('

%52$'&$67,1* $(521$87,&$/ 02%,/( 5

$(521$87,&$/ 02%,/( 25

),;(' $0$7(85 $0$7(85 6$7(//,7( 0RELOH ),;(' 0$5,7,0( 02%,/(

0$5,7,0( 02%,/(

63$&( 5(6 3DVVLYH

5DGLR ORFDWLRQ ($57+ (;3/ 6$7 3DVVLYH

,60 Â˛ Â&#x201C; *+]

$PDWHXU

$1' 0+] $5( $//2&$ 7(' 72 3&6 0+] ,6 '(6,*1$7(' )25 81/,&(16(' 3&6 '(9,&(6

$0$7(85

),;(' 6$7(//,7( 6 (

%52$'&$67,1*

),;('

$PDWHXU 6DWHOOLWH

($57+ (;3/ 6$7 3DVVLYH

02%,/( 6$7(//,7( 6 (

),;('

0RELOH

0$5,7,0( 02%,/(

02%,/(

),;(' 63$&( 5(6 6$7(//,7( 6 ( 3DVVLYH

),;(' 6$7(//,7( 6 (

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

02%,/(

),;(' 6$7(//,7( ( 6

02%,/(

),;('

02%,/(

63$&( 5(6 3DVVLYH

),;(' 6$7(//,7( 6 (

02%,/(

%52$'&$67,1* 79 &+$11(/6

),;('

02%,/(

02%,/( Â&#x201A;Â&#x201A;

/DQG 0RELOH 02%,/(

),;('

67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

6SDFH 5HVHDUFK 67$1'$5' )5(4 $(521$87,&$/ 02%,/( 25

N+]

02%,/(

5$',2 1$9,*$7,21

),;('

),;(' Â&#x201A;Â&#x201A;

),;('

02%,/(

02%,/( 02%,/( 6$7(//,7( ( 6

$0$7(85 6$7(//,7( $0$7(85

5$',2 /2&$7,21

),;('

$0$7(85

0$5,7,0( 02%,/( 0$5,7,0( 02%,/( 0$5,7,0( 02%,/( /$1' 02%,/( 0$5,7,0( 02%,/( /$1' 02%,/( 0$5,7,0( 02%,/(

/$1' 02%,/(

5$',21$9,*$7,21 6$7(//,7( ),;('

02%,/( 6$7(//,7( ( 6

$0$7(85 6$7(//,7(

$0$7(85

),;('

02%,/(

),;('

02%,/( 6$7(//,7( 6 (

02%,/( 6$7(//,7( 5 ( V

0(7(252/2*,&$/ $,'6 5DGLRVRQGH

0(7(252/2*,&$/ $,'6 5$',2621'(

0(7(252/2*,&$/ $,'6 5DGLRVRQGH Â&#x201A;Â&#x201A;

$(52 02%,/( 6$7 5 ( 6

63$&( 5(6($5&+ 3DVVLYH

),;('

0(7(252/2*,&$/ 6$7(//,7( V (

0(7(252/2*,&$/ 6$7(//,7( V ( Â&#x201A;Â&#x201A;

5$',2 $6752120<

5$',2 $6752120< 5$',2 $6752120<

$(521$87,&$/ 02%,/( 6$7(//,7( 5 ( V

$0$7(85

),;('

5$',2 /2&$7,21

5$',2 1$9,*$7,21 6$7(//,7(

63$&( 5(6 3DVVLYH

6WDQGDUG )UHTXHQF\ DQG 7LPH 6LJQDO 6DWHOOLWH 6 (

),;(' 6$7(//,7( 6 (

),;(' 6$7 6 (

),;(' 6$7(//,7( 6 (

63$&( ($57+ (;3/ 5(6($5&+ 6$7 3DVVLYH 3DVVLYH

),;('

0RELOH 6DWHOOLWH ( V

0(7 6$7 V (

02%,/( 6$7(//,7( ( V

02%,/( 6$7(//,7( ( 6

)L[HG

5DGLR ORFDWLRQ

02%,/(

$(521$87,&$/ 02%,/( 6$7(//,7( 5 VSDFH WR (DUWK

$(521$87,&$/ 5$',21$9,*$7,21 5$',21$9 6$7(//,7( 6SDFH WR (DUWK

$(52 5$',21$9,*$7,21 5$',2 '(7 6$7 ( 6

02%,/( 6$7 6 (

$(52 5$',21$9 5$',2 '(7 6$7 ( 6 02%,/( 6$7 ( 6 5$',2 $6752120< 0RELOH 6DW 6 (

$(52 5$',21$9 5$',2 '(7 6$7 ( 6 02%,/( 6$7 ( 6

0$5,7,0( 02%,/( 6$7(//,7( ( V

$(521$87,&$/ 02%,/( 6$7(//,7( 5 ( V

$(521$87,&$/ 02%,/( 5

0(7 6$7 6 (

$(521$87,&$/ 02%,/( 25

$(521$87,&$/ 02%,/( 5

5$',2 $6752120< ),;(' 0RELOH %52$'&$67,1* ),;(' 0RELOH

02%,/(

($57+ (;3/25$7,21 6$7 3DVVLYH

,17(5 6$7(//,7(

5DGLR ORFDWLRQ

5DGLRORFDWLRQ

),;('

5DGLRORFDWLRQ

5$',2 /2&$7,21

6SDFH 5HVHDUFK ( 6 GHHS VSDFH

6SDFH 5HV $FWLYH

),;('

02%,/(

5$',2 /2&$7,21

5$',2/2&$7,21

02%,/(

),;(' 6$7 ( 6 6 (

),;(' 6$7(//,7( ( 6

(DUWK ([SO 6DWHOOLWH $FWLYH

6SDFH 2SHUDWLRQV 6 (

63$&( 5(6 6 ( 63$&( 231 6 (

0HW 6DWHOOLWH 6 (

),;('

6SDFH 5HVHDUFK

6SDFH 5HVHDUFK ($57+ (;3/ 6$7 3DVVLYH

5DGLRORFDWLRQ

6SDFH 5HVHDUFK 6 (

02% 6$7 6 (

0RE 6DW 6 (

02% 6$7 6 (

0RE 6DW 6 (

02%,/(

($57+ 63$&( 5(6($5&+ (;3/25$7,21 3DVVLYH

6$7(//,7( 3DVVLYH

,17(5 6$7(//,7(

)L[HG 0RELOH

$(521$87,&$/ 5$',21$9,*$7,21

5$',2/2&$7,21

02%,/( 6$7(//,7( 6SDFH WR (DUWK

0RELOH 6DWHOOLWH 6 (

02%,/( 6$7(//,7( 6 (

$(521$87,&$/ 02%,/( 6$7(//,7( 5

VSDFH WR (DUWK

$(521$87,&$/ 02%,/( 6$7(//,7( 5

VSDFH WR (DUWK

5$',21$9,*$7,21 5DGLRORFDWLRQ

),;('

,17(5 6$7(//,7(

63$&( 5(6 3DVVLYH

02%,/(

),;('

02%,/(

),;(' /DQG 0RELOH 6$7 ( 6 6DWHOOLWH ( 6 6SDFH 5HVHDUFK

/DQG 0RELOH 6DWHOOLWH ( 6

0RELOH

5(6($5&+ 5$',2 $6752120< 63$&( 3DVVLYH

0RELOH

02%,/(

02%,/( $(521$87,&$/ 7(/(0(7(5,1*

),;('

0RELOH 02%,/( 6$7 0$5,7,0( 02%,/( 6$7 $HUR 7/0

6SDFH WR (DUWK

0$5,7,0( 02%,/( 6$7(//,7( 02%,/( 6$7(//,7( 6 (

VSDFH WR (DUWK

$(521$87,&$/ 02%,/( 5

0$5,7,0( 02%,/( 0$5,7,0( 02%,/(

),;('

02%,/(

63$&( ($57+ ,17(5 (;3/25$7,21 5(6($5&+ 3DVVLYH 6$7(//,7( 6$7 3DVVLYH

),;('

)L[HG

),;(' 6$7(//,7( ( 6

),;('

02%,/( 5$',2 $6752120<

($57+ (;3/ 6$7 63$&( 5(6 3DVVLYH

3DVVLYH

),;(' 6$7 ( 6

/DQG 0RELOH 7/0 7/&

)L[HG 7/0 /DQG 0RELOH 7/0 7/&

)L[HG

)L[HG 7/0 /DQG 0RELOH 7/0 7/&

02%,/(

$(521$87,&$/ 02%,/( 5

),;('

%52$'&$67,1*

),;('

$(521$87,&$/ 02%,/( 25

$(521$87,&$/ 02%,/( 5

67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

0$5,7,0( 02%,/(

),;('

5DGLR ORFDWLRQ /DQG 0RELOH 6DWHOOLWH ( 6

5$',2 /2&$7,21

),;('

),;(' Â&#x201A; 02%,/( Â&#x201A;

63$&( 23(5$7,21 ( 6

),;(' 67$1'$5' )5(4 $1' 7,0( 6,*1$/ N+]

6SDFH 5HVHDUFK 67$1'$5' )5(4 $(521$87,&$/ 02%,/( 5

$0$7(85

%52$'&$67,1*

),;('

02%,/(

$PDWHXU 6DWHOOLWH

),;(' 6$7(//,7( 6 (

0$5,7,0( 02%,/(

5$',2 $6752120<

5DGLR ORFDWLRQ

),;(' 6$7(//,7( 6 (

5$',2 1$9,*$7,21

,60 Â˛ Â&#x201C; 0+]

02%,/(

5$',2 1$9,*$7,21

$0$7(85 6$7(//,7(

5$',2 1$9,*$7,21 6$7(//,7(

$PDWHXU

02%,/(

),;('

5$',2 /2&$7,21

02%,/(

),;('

,17(5 6$7(//,7(

02%,/(

6SDFH 5HVHDUFK

),;('

6SDFH 5HVHDUFK ( 6

63$&( 5(6($5&+ 3DVVLYH

5$',2/2&$7,21 Â&#x201A;

$(521$87,&$/ 02%,/( 5

$(521$87,&$/ 02%,/( $(521$87,&$/ 02%,/(

$(521$87,&$/ 02%,/( 25

$(521$87,&$/ 02%,/( 5

%52$'&$67,1* $0 5$',2

),;('

,17(5 6$7(//,7(

5DGLRORFDWLRQ

),;('

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

$(521$87,&$/ 5$',21$9 6WDQGDUG )UHT DQG 6SDFH 5HVHDUFK 7LPH 6LJQDO 6DWHOOLWH ( 6

),;('

02%,/( Â&#x201A;

($57+ 5$',2 (;3/25$7,21 $6752120< 6$7(//,7( 3DVVLYH

),;(' Â&#x201A;

,60 Â˛ Â&#x201C; 0+]

),;(' 6$7(//,7( 6 (

63$&( 5(6($5&+ 3DVVLYH

),;(' 6$7(//,7( 02%,/( ( 6

5$',2/2&$7,21

5DGLRORFDWLRQ

$PDWHXU

5$',2/2&$7,21

02%,/(

,60 Â˛ Â&#x201C; 0+]

),;('

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

63$&( 5(6($5&+ 3DVVLYH

0$5,7,0( 02%,/(

),;('

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

),;('

$(521$87,&$/ 5$',21$9,*$7,21

$(521$87,&$/ 5$',21$9,*$7,21 5$',2 %($&216

),;('

$0$7(85

0RELOH

),;(' 02%,/(

),;(' 6$7(//,7( 6 (

),;(' 6$7(//,7( ( 6

),;(' 6$7(//,7( 6 (

5$',2/2&$7,21

5$',21$9,*$7,21 6$7(//,7( 6 (

$(521$87,&$/ 5$',21$9,*$7,21

),;('

%52$'&$67,1* )0 5$',2

%52$'&$67,1* 6$7(//,7(

),;('

$PDWHXU 6DWHOOLWH

($57+ (;3/ 6$7(//,7( 3DVVLYH

5$',2 $6752120<

63$&( 5(6($5&+ 3DVVLYH

0RELOH

63$&( 5(6($5&+ 6 (

'HHS 6SDFH

$PDWHXU

),;('

5$',2/2&$7,21 ($57+ (;3/ 6$7 3DVVLYH

$PDWHXU

),;('

5$',2 $6752120<

63$&( 5(6($5&+ 3DVVLYH

),;(' /$1' 02%,/( ),;(' /$1' 02%,/( 02%,/( ),;(' ),;('

5$',2/2&$7,21

02%,/(

$(521$87,&$/ 5$',21$9,*$7,21 5$',2 %($&216

0$5,7,0( 02%,/(

02%,/( ',675(66 $1' &$//,1*

0$5,7,0( 02%,/( 6+,36 21/<

),;('

$PDWHXU

),;('

0$5,7,0( 02%,/(

5$',21$9,*$7,21

0$5,7,0( 02%,/(

),;('

5DGLR ORFDWLRQ

5DGLRORFDWLRQ

0$5,7,0( 02%,/(

$HURQDXWLFDO 0RELOH

$(521$87,&$/ 5$',21$9,*$7,21

0$5,7,0( 02%,/(

5$',2 /2&$7,21

5$',2 1$9,*$7,21

63$&( 5(6($5&+ 3DVVLYH

),;(' 6$7(//,7( 6 (

5$',2 1$9,*$7,21 6$7(//,7( 02%,/(

5$',2 /2&$7,21 5$',2 /2&$7,21

5$',2/2&$7,21

),;(' $0$7(85 6$7(//,7(

$0$7(85

0RELOH $0$7(85

$(521$87,&$/ 02%,/( 25

$(521$87,&$/ 02%,/( 5

0$5,7,0( 02%,/(

),;('

5DGLRORFDWLRQ

),;('

63$&( 5(6($5&+ 6 (

GHHS VSDFH RQO\

0HWHRURORJLFDO $LGV

),;('

%52$'&$67,1*

N+]

($57+ (;3/ 6$7(//,7( 3DVVLYH

),;(' 6$7(//,7( ( 6

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

5$',2 /2&$7,21

),;('

5$',2/2&$7,21

$(521$87,&$/ 5$',21$9,*$7,21 0$5,7,0( 5$',21$9,*$7,21

63$&( 5(6($5&+ 6 (

/$1' 02%,/(

5$',21$9,*$7,21

%52$'&$67,1* 79 &+$11(/6

02%,/(

),;(' 02%,/(

$(521$87,&$/ 02%,/( 25

02%,/(

0$5,7,0( 02%,/(

),;('

%52$' &$67,1* 6$7(//,7(

%52$' &$67,1*

02%,/(

$PDWHXU ),;(' 02%,/( 6$7(//,7( 6$7(//,7( 6 (

6 (

$PDWHXU 6DWHOOLWH

02%,/(

%52$'&$67,1* 79 &+$11(/6

),;('

$(521$87,&$/ 02%,/( 5

0RELOH

),;(' 0RELOH 0(7 ($57+ (;3/ 6$7(//,7( ),;(' 6$7(//,7( 6DWHOOLWH ( 6

6$7 6 (

( 6

QR DLUERUQH

),;(' 0RELOH 6DWHOOLWH ($57+ (;3/ 6$7(//,7( ),;(' 6$7(//,7( 6 (

( 6 QR DLUERUQH

( 6

0RELOH 6DWHOOLWH ( 6

)L[HG

02%,/(

5$',2 $6752120<

),;(' 02%,/( ),;(' $(521$87,&$/ 5$',21$9,*$7,21 ),;(' 02%,/( ),;(' 02%,/(

),;('

02%,/(

67$1'$5' )5(4 $1' 7,0( 6,*1$/ .+=

6SDFH 5HVHDUFK 67$1'$5' )5(4

),;('

),;(' ),;(' 02%,/( 6$7(//,7( ( 6

6$7(//,7( 6 (

),;(' ($57+ (;3/ ),;(' 6$7(//,7( ( 6 6$7(//,7( 6 (

%52$'&$67,1* 79 &+$11(/6

$(521$87,&$/ 02%,/( 25

0$5,7,0( 02%,/(

0RELOH 6DWHOOLWH 6 (

02%,/(

),;('

$(521$87,&$/ 02%,/( 5

02%,/(

0$5,7,0( 02%,/(

$HURQDXWLFDO 0RELOH

)L[HG

$0$7(85 6$7(//,7(

),;(' ),;('

63$&( 5(6($5&+ ( 6

),;(' )L[HG 0RELOH 6DWHOOLWH 6 (

),;('

02%,/( 6$7(//,7( 6 (

),;('

),;(' 6$7(//,7( ( 6

),;(' 0(7 ),;(' 6$7(//,7( 6 ( 6$7(//,7( 6 (

),;(' ),;(' 6$7(//,7( 6 (

),;(' 6$7(//,7( 6 (

),;('

02%,/(

),;('

02%,/(

5$',2 $6752120<

),;('

$(521$87,&$/ 5$',21$9,*$7,21 5$',2 %($&216

),;('

$0$7(85

),;(' 6$7(//,7( ( 6

02%,/(

$(521$87,&$/ 02%,/( 5

0DULWLPH 5DGLRQDYLJDWLRQ 5DGLR %HDFRQV

5$',21$9,*$7,21

5DGLR ),;(' 6$7 02%,/( 6$7 ( 6 ),;(' 02%,/( $VWURQRP\ ( 6

),;(' 02%,/( 6$7(//,7( 6$7(//,7( ),;(' 02%,/( ( 6

( 6

),;(' 02%,/( ),;(' 6$7(//,7( ( 6

02%,/(

5$',2 1$9,*$7,21 6$7(//,7(

),;('

0RELOH

),;(' 6$7(//,7( ( 6

($57+ (;3/25$7,21 6$7 3DVVLYH

$PDWHXU

/$1' 02%,/(

)L[HG

),;(' 6$7(//,7( ( 6

%52$'&$67,1* 79 &+$11(/6

63$&( 5(6($5&+ 3DVVLYH

5$',2 /2&$7,21

5$',2/2&$7,21

$(521$87,&$/ 5$',21$9

%52$'&$67,1* 79 &+$11(/6

5DGLRORFDWLRQ

5$',2 5DGLR /2&$7,21 ORFDWLRQ 5DGLRORFDWLRQ 5$',21$9,*$7,21 0$5,7,0( 5DGLRORFDWLRQ 5$',21$9,*$7,21 0$5,7,0( 0(7(252/2*,&$/ 5DGLRORFDWLRQ 5$',21$9,*$7,21 $,'6

5$',2/2&$7,21

),;(' 02%,/(

6SDFH 5HVHDUFK 3DVVLYH

02%,/(

$(521$87,&$/ 5$',21$9,*$7,21

$0$7(85

63$&( 5(6($5&+

($57+ (;3/25$7,21 6$7 3DVVLYH

*+]

63$&( 5(6($5&+ 3DVVLYH

),;(' 5$',2 $6752120<

),;('

/$1' 02%,/(

),;('

/$1' 02%,/( 5DGLR $VWURQRP\ /$1' 02%,/(

5$',2 $6752120<

02%,/(

5$',2 $6752120<

),;(' 6$7(//,7( ( 6

),;('

($57+ (;3/25$7,21 6$7(//,7(

0HWHRURORJLFDO 6DWHOOLWH 6 (

/$1' 02%,/( /$1' 02%,/(

02%,/(

127 $//2&$7('

5$',2 $6752120<

$0$7(85 6$7(//,7(

0(7 6$7 6 (

(DUWK ([SO 6DWHOOLWH ( 6

/$1' 02%,/(

($57+ 63$&( (;3/25$7,21 5(6($5&+ 6$7(//,7( ), ;(' 02%,/( 6$7(//,7( ( 6 6$7(//,7( ( 6

),;(' ),;('

02%,/(

02%,/( 02%,/(

6SDFH 2SQ 6 (

0HWHRURORJLFDO 6DWHOOLWH ( 6

),;('

02%,/(

),;('

),;(' 6$7(//,7( 6 (

6 (

63$&( 5(6

),;('

02%,/(

02%,/( 6$7(//,7( ( 6

$0$7(85

)L[HG

02%,/( 6$7 6 (

0(7 $,'6 5DGLRVRQGH

0(7(252/2*,&$/ $,'6 5$',2621'(

02%,/( 6$7(//,7( ( 6

5$',2 ),;(' 02%,/( $6752120< 6SDFH 5HVHDUFK ),;(' 02%,/( 6 (

),;('

0$5,7,0( 02%,/(

),;('

0RELOH 02%,/( 6$7(//,7( ( 6

0(7 $,'6 5DGLRVRQGH

02%,/( 6$7(//,7( ( 6

0(7 $,'6 63$&( 231 0HW 6DWHOOLWH (DUWK ([SO 6DWHOOLWH ( 6

( 6

5DGLRVRQGH 6SDFH WR (DUWK

5$',2/2&$7,21

02%,/(

$(521$87,&$/ 5$',21$9,*$7,21

67' )5(4 7,0( 6,*1$/ 6$7 0+]

5$',21$9,*$7,21 6$7(//,7(

$PDWHXU

5$',2 1$9,*$7,21 6$7(//,7(

02%,/( 6$7(//,7( 6 (

$HURQDXWLFDO 5DGLRQDYLJDWLRQ

),;('

3DVVLYH

63$&( 5(6($5&+

0$5,7,0( 02%,/(

5$',2 1$9,*$7,21

($57+ (;3/25$7,21 6$7(//,7( 3DVVLYH

$(521$87,&$/ 5$',21$9,*$7,21

),;('

),;(' 6$7(//,7( 6 (

5DGLR ORFDWLRQ

$(521$87,&$/ 02%,/( 25

$(521$87,&$/ 02%,/( 5

02%,/(

$0$7(85

),;('

),;(' 6$7 6 (

5DGLR ORFDWLRQ

5DGLR ORFDWLRQ ),;(' 6$7 6 (

5$',2 /2&$7,21

5$',2 /2&$7,21 5$',2 /2&$7,21

5DGLR ORFDWLRQ

5$',2 6$7(//,7( $6752120< ( 6

$(52 5$',2 1$9 *URXQG

02%,/(

),;('

02%,/(

5$',2 /2&$7,21 $(521$87,&$/ 5$',21$9,*$7,21 *URXQG

$HURQDXWLFDO 0RELOH

),;('

67$1'$5' )5(48(1&< $1' 7,0( 6,*1$/ 6$7(//,7( 5$',2 /2&$7,21 $(521$87,&$/ 5$',21$9,*$7,21 5$',2 %($&216

02%,/( 6$7(//,7(

),;(' 6$7(//,7( 5DGLRORFDWLRQ

67$1'$5' )5(48(1&< $1' 7,0( 6,*1$/ $PDWHXU

02%,/( ),;('

),;(' 5DGLRORFDWLRQ

/$1' 02%,/(

02%,/(

63$&( 5(6($5&+

0+]

),;(' 6$7(//,7( 6 (

0(7(252/2*,&$/ 6$7(//,7( 02%,/(

02%,/(

($57+ (;3/25$7,21 6$7(//,7( 02%,/(

0+]

),;('

63$&( 23(5$7,21 02%,/( 6$7(//,7(

02%,/(

5$',21$9,*$7,21 6$7(//,7(

0(7(252/2*,&$/ $,'6 /$1' 02%,/(

),;('

0$5,7,0( 5$',21$9,*$7,21

%52$'&$67,1* 6$7(//,7(

%52$'&$67,1* ),;('

5$',21$9,*$7,21 02%,/( 6$7(//,7(

5$',2/2&$7,21 6$7(//,7(

0$5,7,0( 02%,/( 6$7(//,7(

5DGLRORFDWLRQ

0$5,7,0( 02%,/(

$0$7(85 6$7(//,7( /$1' 02%,/(

,17(5 6$7(//,7(

$0$7(85 02%,/(

0+] ),;('

5$',2/2&$7,21

/$1' 02%,/( 6$7(//,7(

),;('

02%,/(

5$',21$9,*$7,21

$(521$87,&$/ 5$',21$9,*$7,21

5$',2'(7(50,1$7,21 6$7(//,7( ),;('

5$',2 $6752120<

/$1' 02%,/(

5DGLRORFDWLRQ

,17(5 6$7(//,7(

$(521$87,&$/ 02%,/( 6$7(//,7(

0$5,7,0( 5$',21$9,*$7,21

$(521$87,&$/ 02%,/(

02%,/(

02%,/( ),;(' 6$7(//,7( 6$7(//,7( 6 (

6 (

02%,/(

0$5,7,0( 5$',21$9,*$7,21 5$',2 %($&216

5$',2/2&$7,21

*29(510(17 121 *29(510(17 6+$5(' 02%,/( 6$7(//,7( ( 6

81,7('

),;('

121 *29(510(17 (;&/86,9( ($57+ (;3/25$7,21 6$7 3DVVLYH

$HURQDXWLFDO 5DGLRQDYLJDWLRQ 5DGLR %HDFRQV

5$',21$9,*$7,21

*29(510(17 (;&/86,9(

),;('

$&7,9,7< &2'(

),;(' 6$7(//,7( ( 6

5$',2 6(59,&(6 &2/25 /(*(1'

63$&( 5(6($5&+ 3DVVLYH

7+( 5$',2 63(&7580

5$',21$9,*$7,21

$//2&$7,216

5$',2 $6752120<

)5(48(1&<

6WDQGDUG )UHTXHQF\ DQG 7LPH 6LJQDO 6DWHOOLWH 6 (

67$7(6

6WDQG )UHTXHQF\ DQG 7LPH 6LJQDO 6DWHOOLWH 6 (

Farbe ď&#x20AC;´ Farbe und Kontrast als Mittel zurÂ BenutzerfĂźhrung

3.11.2 Farbkodierung â&#x20AC;&#x201C; Farbe als Struktur Im Gegensatz zur Bedeutungs definierung sind Farbkodierungen allerdings sehr wohl und nahezu uneingeschrĂ¤nkt gut geeignet, um Daten in Informationsgrafiken zu differenzieren. Bei Informationsgrafiken wird Farbe nicht als Symbol, sondern als Struktur, als Gestaltungsmittel zur Differenzierung eingesetzt. Werden verschiedene Farben fĂźr Informationsgrafiken angewandt, so bl eibt oft der Ă&#x153;berblick auch bei einer hĂśheren Anzahl an Farbwerten gewahrt, da alle Farben nur im Vergleich zueinander dargestellt werden und zudem in der Regel gleichzeitig zu sehen sind.

/$1' 02%,/(

0$5,7,0( 02%,/(

),;('

,60 Â˛ Â&#x201C; 0+]

0+]

),;(' 02%,/( 6$7(//,7(

02%,/(

),;('

),;(' 5$',2 1$9,*$7,21 6$7(//,7( ( 6

02%,/(

*+]

),;('

Typografie ď&#x20AC;´ Regeln und Tipps

4 Typografie

4.1 Schriftarten

Für Druckmedien stehen, auf Grund der hohen Auflösung, alle Gestaltungsmöglichkeiten mit Typografie zur Verfügung. Es lassen sich sehr filigrane Details darstellen, selbst dann, wenn die Schriftgröße sehr klein gewählt wurde (siehe Auflösung, S. 48, im Kapitel Farbe). Beim Screen- und Interfacedesign sind die Möglichkeiten der typografischen Gestaltung hingegen erheblich eingeschränkt, wenn für Darstellungsmedien gestaltet wird, deren Auflösung in der Regel nicht mehr als 72 bzw. 96 dpi beträgt. Serifenschriften sind insbesondere dann ungeeignet, wenn nur in einer relativ geringen Auflösung dargestellt werden kann und die Darstellungsmedien zudem selbstleuchtende bzw. hintergrundbeleuchtete Medien sind. Die geringe Auflösung kann zum Ausreißen feiner Strichstärken führen. Und der Umstand, dass diese Wiedergabemedien selbst leuchten, kann zum Überstrahlen der dünnen Strichstärken führen. Besonders dann, wenn der Helligkeits- und Buntkontrast zwischen Schrift und Hintergrund nicht ausgewogen ist. Bereits dieser Umstand kann zu einer übermäßigen Belastung der Augen des Betrachters führen. Je nach Darstellungstechnologie kommt eventuell noch ein Flimmern hinzu, bedingt durch Wiederholungsfrequenzen des Bildaufbaus, z. B. bei Röhrenmonitoren. Für die Darstellung auf Bildschirmen sind speziell entwickelte Screenfonts bzw. Pixelschriften geeignet, da deren Strichstärken gleichmäßig auf die Abstände und Winkel der Rasterdarstellungen abgestimmt und jeweils für die passende Schriftgröße entwickelt sind. Je nach Darstellungsmedium und Darstellungstechnologie sind bestimmte Schriftschnitte besser oder weniger gut geeignet. Grundsätzlich sind serifenlose Schriften für die Darstellung von Texten an selbstleuchtenden Medien gut geeignet. Erst ab einer bestimmten Schriftgröße, sobald die Strichstärken groß genug sind, um nicht überstrahlt zu werden, lassen sich auch Serifenschriften gut lesbar einsetzen. Serifenschriften sollten dann aber nicht im Fließtext, sondern in erster Linie für Überschriften Anwendung finden.

Handglove Abb. 114

Oberlänge Mittellänge, x-Höhe Unterlänge

Versalhöhe Grundlinie, Schriftlinie

100

Typografie  Schriftarten

Antiqua

Abb. 115

Weidemann Minion Didot

Clarendon

Abb. 116 Antiquaschriften

Abb. 117 Serifenbetonte Linearantiqua

Antiquaschriften

serifenbetonte Schriften

In der Typografie wird zwischen den Schriftarten Antiqua und Grotesk unter schieden. Antiquaschriften sind im Wesentlichen dadurch gekennzeichnet, dass sie Serifen haben. Dies sind häkchenartige Erweiterungen an den Enden der Buchstaben, die in der Regel die Lesbarkeit verbessern, weshalb Antiquaschriften für Druckmedien bevorzugt Verwendung finden. Wegen dieses sehr entscheidenden Merkmals werden Antiquaschriften auch Serifenschriften genannt. Ein weiteres Merkmal der Serifenschriften sind ihre Unterschiede in den Strichstärken innerhalb eines Buchstaben. Dadurch sind sehr schmückende Schriftgestaltungen möglich, die allerdings bisweilen auch als schnörkelhaft empfunden werden können.

Es sei hier noch die serifenbetonte Linearantiqua erwähnt, bei der, wie die Bezeichnung bereits vermuten lässt, die Serifen sehr betont sind und sich zudem die Strichstärken innerhalb eines Buchstaben nur gering oder gar nicht unterscheiden. Diese Schriftart wird häufig als Auszeichnungsschrift verwendet. Als solche kann sie gut für Druckmedien eingesetzt werden und ab bestimmten Schriftgrößen auch für selbstleuchtende Medien.

Chaparral Rockwell

4.8 Schriftgrößen für Webdesign – Einheiten px, pt und em

112

Die Gestaltung für Internetseiten ist grundsätzlich als Vorschlag zu verstehen, da die Browser unterschiedliche Eigenschaften haben, unterschiedliche Betriebssysteme zum Einsatz kommen und jeder Anwender verschiedene Voreinstellungen am Browser und Rechner vornimmt. In der Standard-Zoom-Einstellung von 100% zeigen die meisten Browser Schriften in der Schriftgröße von 16 Pixel an. Per Prozentangaben kann eine Schrift für das Webdesign in ihrer Größe verändert werden. So steht z. B. die Prozentangabe von 75% für 12 Pixel und die für 62,5% für 10 Pixel. Die Größe eines Pixels ist abhängig von der Auflösung des jeweiligen Darstellungsmediums. Um Probleme mit älteren Browsern zu vermeiden, empfiehlt es sich beim Scripting für die Schriftgröße an Stelle von 100% oder 1em besser 100,01% anzugeben. Wenn man hierbei 1em mit 100,01% gleichsetzt, kann man dann alle weiteren Elemente mit em formatieren. Von Pixel (px) sollte nur im Zusammenhang mit Darstellungen an einem Monitor die Rede sein. Es gibt eine absolute und eine relative Auflösung. Bei der absoluten Auflösung wird entweder die Gesamtzahl der Pixel (z. B. Megapixel bei Digitalkameras) angegeben oder die Anzahl der Pixel pro Spalte (vertikal) und Zeile (horizontal) (TV-Monitor, PAL: 720 × 576 Pixel; Computermonitor mit z. B. 1440 × 900 Pixel etc.). Die relative Auflösung ergibt sich aus der Anzahl der Bildpunkte bzw. Pixel im Verhältnis zu einer physikalischen Längeneinheit (Inch) und wird mit dots per inch (dpi) bzw. pixel per inch (ppi) bezeichnet. Für die Gestaltung von gedruckten Erzeugnissen und von jenen, die für die Darstellung bzw. Betrachtung an Monitoren bestimmt sind, müssen die Einheiten dpi und ppi unterschieden werden. Mit dots per inch (dpi) werden physikalisch messbare Punkte in Verhältnis zu einer Strecke mit vordefinierter Längeneinheit (inch) gesetzt. Dadurch ergibt sich für jeden Punkt eine absolute Größe. Beim Drucken wird die Auflösung stets mit dpi gemessen. Jeder dieser Punkte entspricht einer absoluten Größe, ist mit einer Lupe sichtbar und exakt physikalisch messbar. Es ist sinnvoll für die Printgestaltung absolut messbare Werte zu verwenden, da die an einem Computer erstellten und in Punkt gemessenen Printdaten anschließend im gedruckten Zustand in ein Printerzeugnis mit physikalisch messbaren Werten (gemessen in Millimeter) übertragen wird. Für Erzeugnisse wie Websites, die im Computer erstellt werden und dort zur Nutzung und Darstellung auch verbleiben, spielt die Frage nach der Auflösung keine Rolle mehr, da sie digital verarbeitet und digital angezeigt werden. Die Angabe der Menge an Bildpunkten (dots) in der Einheit dpi ist nur dann erforderlich, wenn beim Ausdrucken die Abmessung des abgedruckten Bildes geklärt werden soll. Um Verwechslungen zu vermeiden, empfiehlt es sich, die Bezeichnung Punkt bzw. die Einheit dpi für Drucker und Belichter und die Bezeichnung Pixel bzw. die Einheit ppi bei Scannern und Monitoren zu verwenden. Mit pixel per inch (ppi) werden Abmessungen eines Pixels im Verhältnis zur Auflösung eines Monitors und seiner Flächengröße beschrieben. Dies bedeutet, dass die Größe eines Pixels von den Eigenschaften eines Monitors abhängen und daher vom Gestalter nicht vorbestimmt werden kann. Die Größe eines Pixels einer Darstellung am Monitor ist demnach relativ. Pixelwerte sind nur in Relation zur Monitorauflösung relevant und die Monitorgrößen sind je nach Darstellungsmedium unterschiedlich groß. Es gibt Monitore, die 1280 Pixel oder 1440 Pixel in einer Breite von ca. 13 Zoll darstellen, das ergibt dann einmal ca. 98 dpi und einmal ca. 110 dpi. Das Display des iPhones von Apple hat auf der schmalen Seite 320 Pixel in einer Ausdehnung von 2 Zoll, woraus sich 160 dpi ergeben. Diese Beispiele zeigen, dass sich hier keine absoluten

Typografie  Schriftgrößen in Abhängigkeit von Darstellungsmedien

130

Mobile Geräte Anhand des Diplomprojekts von Susanne Stage, das an der Hochschule Magdeburg-Stendal entstand, kann die optimale Ausnutzung eines 280 × 280 Pixel großen Displays für mobile Geräte demonstriert werden. Ein bestimmter Teil der Displayfläche wird bereits für funktionale Belange eingenom men. Die Bildschirmgröße hat die Flächenmaße 41,11 × 41,11 mm. Dies entspricht einer Auflösung von 173 Pixel/Zoll (dpi). Mit diesem mobilen Gerät lassen sich der Enhanced Message Service (EMS) und der Multimedia Message Service (MMS) nutzen und formatierte Texte sowie Animationen und Bilder verschicken bzw. empfangen. Im Gegensatz zur SMS (Short Message Service) stehen nicht nur 160, sondern über 400 Zeichen zur Verfügung. Es wird die Pixelschrift Supertext in drei Schnitten und in der Schriftgröße 20 Pixel verwendet. Dies entspricht bei der Displayauflösung von 173 dpi einer Schriftgröße von 9 Punkt.

Abb. 149 Kreisförmige Touchpad-Tastatur; Diplom von Susanne Stage; Betreuung: Prof. Carola Zwick, Prof. Dr. Christine Strothotte; Institut für Industrial Design, Hochschule Magdeburg-Stendal.

Typografie  Schriftgrößen in Abhängigkeit von Darstellungsmedien

Abb. 150 a–g Verteilung von Inhaltsbereich und Menü.

131

Typografie  Schriftgrößen in Abhängigkeit von Darstellungsmedien

Abb. 151 Display des Mobiltelefons ›SonyEricsson P910i‹. Die Auflösung liegt bei 208 × 320 Pixel auf einer Fläche von ca. 45 × 60 mm. Es können bis zu 262144 Farben (18 Bit) dargestellt werden.

Mobiltelefone Da die Darstellungsqualität der Displays von Mobiltelefonen mittlerweile relativ hoch ist und der Betrachtungsabstand nur ca. 30 cm beträgt, genügt eine Schriftgröße von 8 – 11 Punkt. Höhere Schriftgrößen sind allerdings zu empfehlen, lassen sich aber nicht immer anwenden, wenn nicht nur Text, sondern Bilder in Kombination mit Text angezeigt werden sollen. Zudem ist zu berücksichtigen, dass sich die Schriftgröße den unterschiedlichen Moni torgrößen der mobilen Endgeräte anpasst, weshalb keine absolut konkrete Schriftgröße empfohlen werden kann. Dasselbe gilt für den Schrifttyp, der in der Regel vom jeweiligen mobilen Gerät vorgegeben wird.

Abb. 152 Mit Hilfe des Opera SmallScreen Rendering stellt der Opera Mini Browser Internetseiten auf fast allen mobilen Geräten dar. Die Abbildungen hier sind für eine Breite von 208 Pixel optimiert (www.opera.com).

Da Applikationen für mobile Geräte zunehmend mit einer dafür speziell entwickelten Version der Animations- und Autorensoftware Flash um gesetzt werden, sind sie skalierbar für verschiedene Monitorgrößen (siehe z. B. http:// mobile.macromedia.com). Es ist grundsätzlich zu empfehlen, mit vektorbasierten Softwarepaketen und somit auflösungsunabhängig zu produzieren, damit die Entwicklungen, die heute eventuell noch für eine Displaygröße von 208 × 320 Pixel realisiert wurden, trotz Weiterentwicklung der Abspielgeräte mit einhergehender Displayvergrößerung, vom Entwickler mehrere Jahre weiter verwendet werden können und von ihm nur noch neu ausgespielt werden müssen.

132

Typografie  Schriftgrößen in Abhängigkeit von Darstellungsmedien

Abb. 153 Ori-ori Moshi-moshi (o2m2) von Antenna Design New York Inc. (www.antennadesign.com).

e-Paper Die Bezeichnung e-Paper wird noch uneinheitlich genutzt. Bereits die digitalisierte Version einer Zeitung wird oft bereits als ›e-Paper‹ bezeichnet. Hier ist aber eine Technologie gemeint, die fast ausschließlich aus einer display-ähnlichen, hauchdünnen Folie besteht. Namhafte Hersteller wie Siemens, Philips, IBM , E-Ink (www.eink. com) und Polymer Vision sind mit der Entwicklung von Displays befasst, die das haptische Erlebnis einer Zeitung mit den Möglichkeiten digitaler Medien verbinden sollen oder auf Grund der Flexibilität dieser dünnen Displays ganz neue Produkte ermöglichen. Das erste elektronische Papier wurde bereits in den 70er Jahren am kalifornischen Palo Alto Research Center der Firma Xerox entwickelt. Wenn die Darstellungsqualitäten der aktuellen e-Paper-Displays so gut werden, wie von den Entwicklern versprochen, wird man wie bei anderen mobilen Geräten (Mobiltelefon, PDA etc.) mit ähnlich kleinen Schrift größen von 8 – 10 Pixel gestalten können.

133

Abb. 154 Die niederländischsprachige Tageszeitung De Tijd aus Belgien (www.tijd.be) startete am 13.04.2006 als erste Zeitschrift mit einer e-PaperAusgabe, die auf dem iLiad zu lesen ist (Infos zu iLiad: www.irextechnologies.com).

Unter der Bezeichnung ›e-Paper‹ kann auch das Lesegerät iLiad der Firma iRex Technologie eingeordnet werden. Es basiert auf einer von der amerikanischen Firma E-Ink entwickelten Anzeigetechnik. iRex ist ein Spinoff von Philips und hat seinen Sitz auf dem Philips-Hightech-Campus in Eindhoven. Anwender können mittels WLAN , USB -Kabel, Ethernet oder Compact Flash bzw. SD /MMC Memory Card ihre gewünschten Inhalte auf einen acht Zoll großen Monitor laden und dort lesen. Folgende Formate können genutzt werden: PDF , XHTML , TXT , MP3 . Das Display stellt 160 dpi in 16 Graustufen mit einer Auflösung von 1024 × 768 Pixel dar und ist berührungsempfindlich, dient demnach als Bedienfeld, so dass z. B. Textausschnitte ausgewählt werden können. Das Gerät ist 390 g schwer und hat die Maße 155 × 217 × 16 mm, ca. DIN -A5.

Es gibt bereits eine ganze Reihe von Studien, die sich damit beschäftigen, komplexe Produkte auf ein Display zu reduzieren, das man zudem zusammenfalten kann. Am Beispiel des Konzepts Ori-ori Moshi-moshi (o2m2) für das Jahr 2014 von Antenna Design New York Inc. (www.antennadesign.com) wird die Tendenz deutlich. Ein OLED Touchscreen mit integrierten Komponenten soll für unterschiedliche Konfigurationen, wie z. B. Telefonieren, Computerspiele oder Fernsehen, frei faltbar sein. Die dabei gebildeten Faltungen können abgespeichert werden, so dass die gewünschte Funktion erscheint, sobald o2m2 in die geeignete Form gefaltet wird.

Projektentwicklung – Workflow  Textmenge

5 Projektentwicklung – Workflow

142

Projektentwicklung – Workflow

143

Zunächst muss festgelegt bzw. ermittelt werden, was Gegenstand des Projektes ist, welche Eigenschaften und Wünsche der Kunde hat, wer die Zielgruppe ist, ob es mehrere Zielgruppen gibt und welche Absichten mit dem Projekt/Produkt verfolgt werden. All dies sollte nach eingehender Analyse aller Informationen, Vorstudien und Materialien in einem Pflichtenheft formuliert und festgelegt werden. Ein abschließendes Pflichtenheft ist in der Regel das Ergebnis mehrerer Versionen. Im ersten Schritt werden zunächst Aufgaben, Ziele und Themen notiert, deren Festlegung noch ohne vorangegangene Analysen erfolgt. Im Idealfall hat diese Festlegung bereits der Auftraggeber vorgenommen, indem er seine Vorstellungen und Erwartungen beschreibt. In diesem Zusammenhang wird aber nicht von einem Pflichtenheft, sondern von einem Briefing gesprochen. Eigentlich kann der Auftraggeber erst nach einer solchen Planungsphase entscheiden, wen er beauftragen sollte, weil er erst dann weiß, was er überhaupt haben oder erreichen will. Nachdem der Auftragnehmer durch das Briefing feststellen konnte, ob er die gewünschten Leistungen erfüllen kann, folgt eventuell noch ein Re-Briefing mit Korrekturen und Änderungsvorschlägen. Auf dieser Grundlage erstellt dann der Auftraggeber für den Auftragnehmer ein detailliertes Lastenheft. Das Lastenheft ist das Ergebnis einer intensiven hausinternen Planungsphase des Auftraggebers. Auf dieser Basis erstellt der Auftragnehmer – im Idealfall in gemeinsamen Sitzungen mit dem Auftraggeber – ein Pflichtenheft. Die Analysen erfolgen sukzessive mit der Weiterentwicklung des Pflichtenheftes. Zu den Analysen zählt in erster Linie die Ermittlung der Zielgruppe(n), der zu verwendenden Materialien, Assets (Texte, Bilder, Filme, Töne etc.), Funktionen und Farben. Ein nicht zu unterschätzendes Problem in der Kommunikation zwischen Auftraggeber und Auftragnehmer kann darin bestehen, dass sich nicht nur zwei Personen gegenüberstehen. Das Briefing kommt häufig von der Marketingabteilung des Auftraggebers, die Sachinformationen vom Projektleiter und die Kostenkalkulation aus der Buchhaltung. Die allgemeine Kommunikation, das Projektmanagement und bereits die Erstellung des nachfolgenden Lasten- und Pflichtenheftes werden dadurch nicht selten stark beeinträchtigt. Hinzu kommt noch, dass insbesondere Designagenturen von Auftraggebern bisweilen ausschließlich als Dienstleister und nicht auch als Berater verstanden werden. Die schlimmste Folge könnte sein, dass die beauftragte Designagentur weder das Briefing noch das Lastenheft hinreichend hinterfragen darf, dadurch ihre Kompetenz nicht einbringen kann und das Pflichtenheft nur noch eine Kopie des Lastenheftes darstellt. Da stellt sich bisweilen die Frage, ob man Designern, die eine eigene Agentur gründen möchten, nicht dazu raten sollte, als Unternehmensberater mit integrierter Designabteilung aufzutreten. Unternehmensberater werden von Auft raggebern ausschließlich als Berater verstanden, obwohl einige den Auftraggebern sprichwörtlich nur die Uhr abschwatzen, um ihnen dann zu sagen, wie spät es ist. Und

Projektentwicklung – Workflow  Pflichtenheft/Lastenheft

150

5.3.1 Scrum – Projektmanagement auf Basis von Zeitmanagement 17 Scrum wurde von Ken Schwaber, Jeff Sutherland und Mike Beedle erfunden und etabliert. 2003 veröffentlichte Ken Schwaber ein Zertifizierungsprogramm für ScrumMaster, mit der Absicht, Software-Entwicklungen zu professionalisieren. Siehe auch: www.scrumalliance.org; http://agilemanifesto.org; http://scrumy.com

Scrum (engl.: das Gedränge)17 stellt eine Planungs- und Vorgehens-Strategie dar, mit der ein Projekt in mehrere Einheiten zerlegt wird, die in vorgegebenen Zeiteinheiten zu bewältigen sind. Scrum eignet sich insbesondere für kleine überschaubare Teams. Zwar wird Scrum häufig bei der IT-Entwicklung eingesetzt, es lässt sich aber nicht nur dort einsetzen. Scrum hat z. B. auch gewisse Gemeinsamkeiten mit der Produktionsorganisation Lean Management der japanischen Automobilindustrie. Das Managementframework von Scrum kann als agil bezeichnet werden, weil es den Fokus auf Empirie setzt. Die erhobenen Daten werden möglichst häufig in Rückkopplungsprozessen hinterfragt, erneut ausgewertet und der weiteren Arbeitsweise angepasst. Die Projektbeteiligten werden in drei Rollen eingeteilt: Product-Owner, Team und Scrum-Master. Der Product-Owner erfasst die Bedürfnisse des Kunden und fasst diese als Anforderungen in so genannte User-Stories zusammen. Er ist verantwortlich für das Projekt und fällt die Entscheidungen, wie die von ihm ermittelten Anforderungen umzusetzen sind. Das Team ist für die Umsetzung der Vorgaben zuständig, die sich durch die vom Product-Owner ermittelten Anforderungen ergeben. Das Team entscheidet aber selber darüber, wie viele Anforderungen es in den jeweiligen Entwicklungszyklus umsetzt und welche Arbeitsschritte es dafür einplant und wie es seine Aufgaben organisiert. Der Scrum-Master ist dafür zuständig, das Scrum vom Team korrekt genutzt wird und dass das Team die Anwendung von Scrum möglichst schnell verinnerlicht. Der Scrum-Master ist aber auch der Coach und der Gatekeeper des Teams. Er organisiert alles, was das Team benötigt, er unterstützt das Team und schützt es vor Störungen. Ziel ist es, dass sich das Team ausschließlich auf seine Aufgaben konzentrieren kann. Um die Regeln von Scrum nachvollziehen zu können, müssen folgende Struktur-bzw. Ablaufplanungselemente näher erläutert werden. Das Product-Backlog beschreibt was das Ziel ausmacht, das finale Produkt und daher alle Anforderungen an das Produkt und die dafür notwendigen Arbeitsschritte. Jeder Projektbeteiligte kann ihm zusätzliche Aufgaben hinzufügen, aber nur der Product-Owner kann Anforderungen konkretisieren und priorisieren. Die Einträge im Product-Backlog werden bezüglich ihres Aufwandes geschätzt und für den nächsten Entwicklungszyklus eingeplant. Dazu werden die Arbeitsschritte aus dem Product-Backlog in das Sprint-Backlog übertragen. Mit Sprint wird ein Zeitabschnitt von ein bis vier Wochen bezeichnet. Das Ergebnis eines Sprints stellt ein in sich abgeschlossenes Teilprojekt dar. Und das Sprint-Backlog ist das Strukturplanungselement, das alle Arbeitsschritte für den aktuellen Entwicklungszyklus erfasst. Das Product-Increment bzw. Increment ist das fertige Zwischenergebnis eines jeden Sprints. Und der Release-Plan dokumentiert Termine, den Projektfortschritt und die Entwicklungsgeschwindigkeit. Er versetzt den Product-Owner in die Lage, Funktionalität, Zeit und Kosten zu planen und zu harmonisieren. Bei Scrum gibt es nur wenigen Regeln: Der Product-Owner nimmt die Anforderungen des Kunden auf und füllt damit das Product-Backlog. Anschließend werden die Anforderungen priorisiert. Die höher priorisierten Anforderungen werden im Detail erfasst und in kleinere, abschätzbare Arbeitsschritte eingeteilt, die BacklogItems genannt werden. Diese Backlog Items werden bezüglich ihres Aufwandes

Projektentwicklung – Workflow  Pflichtenheft/Lastenheft

156

5.3.4 Kostenkalkulation Eine zuverlässige Kostenkalkulation kann der Auftragnehmer dem Auftraggeber erst nach Fertigstellung des Pflichtenheftes, der Zeitplanungstabelle und des Styleguides ausstellen, weil erst dann alle zu berücksichtigenden Faktoren und offenen Variablen geklärt sein können. Der Aufwand für Präsentationen, z. B. für Pitches, sollte dabei nicht übersehen oder gar unterschätzt werden. Bereits im Vorfeld können allein für die Erstellung der Präsentation eines komplexen Projekts (Corporate Design; Website mit Video und/oder Flashapplikationen und ContentManagementSystem) durchaus 200 Stunden erforderlich werden. Erfahrene Auftragnehmer werden auf die Kalkulationen vorheriger Projekte zurückgreifen und so zuverlässige Schätzungen ableiten können. Weniger erfahrenen Auftragnehmern ist grundsätzlich zu empfehlen, sich durch Beratungsstellen der entsprechenden Verbände (Gewerkschaft, Designvereine, Interessensvertretungen), durch einen Steuerberater und durch befreundete und erfahrene Kollegen bei der Berechnung von Kalkulationen beraten zu lassen. Gerade die gestalterische Phase, die Konzeptfindungsphase verunsichert viele Auftraggeber, wenn das gegenseitige Vertrauen noch nicht gefestigt ist und weil es ihnen häufig an Mitsprachekompetenz in gestalterischen Fragen fehlt. Die gemeinsame Erarbeitung des Pflichtenheftes wird dazu beitragen, den Entstehungsprozess des Projektes transparent zu machen und dem Auftraggeber die Gewissheit verschaffen, im Ergebnisfindungsprozess entscheidend eingebunden zu sein. Spätestens nach der ersten gemeinsamen Festlegung des Pflichtenheftes wird der Auftraggeber mehr Einblick in die Arbeit des Auftragnehmers gewonnen haben und bestimme Honorarsätze, die ihm zuvor noch zu hoch oder zumindest schwer nachvollziehbar erschienen, nun besser beurteilen können. Auf Basis des nun erstellten Pflichtenheftes wird es für den Auftragnehmer einfach sein, zumindest eine Skizze eines Styleguides mit Auflistung aller erforderlichen Layouts und Vermaßungen zu erstellen. Daraus wird er die passenden Arbeitsschritte und -zeiten für die Zeitplanungstabelle generieren und dem Auftraggeber eine Kostenkalkulation herleiten können. Ein erster Schritt ist aber die Kalkulation des Mindeststundensatzes, der eingenommen werden muss, um als Unternehmer überhaupt finanziell überleben zu können. Dieser lässt sich auf Grundlage der Ausgaben und des gewünschten Gewinnanteils ermitteln. Die nun folgende Kostentabelle kann aber nur als Anhaltspunkt verstanden werden und ersetzt nicht die Beratung durch einen Steuer- bzw. Finanzberater. Die Tabelle zeigt, dass bereits für ein Einpersonenbüro der durchschnittliche Stundensatz für die erbrachte Leistung mindestens 78,– Euro betragen muss, wenn monatliche Kosten von 2500,– Euro für die privaten und beruflichen Kosten anfallen, 40 Stunden pro Woche gearbeitet und ein Gewinnanteil von 25% angestrebt wird. Der durchschnittliche Stundensatz kann sich aus unterschiedlich hohen, gestaffelten Stundensätzen ergeben, die teilweise weit unter 78,– Euro für einfache Tätigkeiten beginnen können, wenn für bestimmte, anspruchsvollere Tätigkeitsbereiche entsprechend höhere Sätze kalkuliert werden. Die Kalkulation verändert sich entsprechend, wenn Vergütungen für Praktikanten und Stundensätze bzw. Gehälter für Zulieferer bzw. Mitarbeiter berücksichtigt werden müssen. Je nach Konkurrenz, Auftragsmenge und Anzahl der Zulieferer und Mitarbeiter muss der angestrebte Gewinnanteil entsprechend variiert werden. Zusätzliche Einnahmen können sich durch Lizenzvereinbarungen ergeben.

Projektentwicklung – Workflow  Pflichtenheft/Lastenheft

161

5.3.5 Software für Projektmanagement – CRM, ERP Zur Unterstützung des Projektmanagement gibt es verschiedene Softwareangebote. Für die Verwaltung von Kundendaten und deren Kontakt- und Terminmanagement gibt es so genannte Customer Relationship Management Software (CRM) (siehe S. 170) und für die Verwaltung von Projekten spezielle Projektmanagementsoftware, auch Enterprise Resource Planning (ERP) genannt. ERP verfolg die Absicht, Daten und Prozesse in einem einzigen System zu integrieren. Im Zusammenhang mit Designagenturen bzw. Entwicklerbüros für Websitekonzepte, Applikationen und entsprechende Datenbanklösungen sollte eher von Projektmanagementsoftware die Rede sein. ERP kann erheblich komplexere Systeme beinhalten und z. B. in einem einzigen Softwarepaket Personalwesen, Supply Chain Management (SCM), Customer Relations Management, Finanzverwaltung, Industriefunktionen und Warehouse-Management-Funktionen integrieren. Mit Projektmanagementsoftware für Agenturen ist hier eher die Integration von Produktionsabläufen, Projektmanagement, Projektkostenübersicht, Personalverwaltung, Adressen- und Kundenmanagement gemeint. Ab wann eine Anschaffung notwendig wird und ob sie sich lohnt, lässt sich pauschal nicht beantworten. CRMSoftwaresysteme sind bereits ab 50,– Euro zu erwerben. Da hält sich eine Fehlinvestition in Grenzen. Professionelle Projektmanagementsoftwarepakete sind da schon erheblich teurer. Es gibt allerdings auch kostenfreie Open-Source-Lösungen (siehe Auflistung weiter unten). Wem es nur darum geht, innerhalb eines verteilten Arbeitsablaufs mit Mitarbeitern an unterschiedlichen Standorten Informationen, projektbezogene E-mails, Notizen, ToDo-Listen, Termin- und Kalenderdaten kollaborativ abzugleichen, kann auf webbasierte Lösungen wie Backpack (www.backpackit.com) zurückgreifen. ZOHO (www.zoho.com, Abb. 164) bietet ähnliches, kann aber auch enorm erweitert werden. Viel gravierender als potenzielle Anschaffungskosten oder die Frage, für welche Software bzw. für welche Nutzungsart man sich entscheiden sollte, kann das Ungleichgewicht an Befürchtungen und Erwartungen sein. Die Entscheidung für den Einsatz einer Projektmanagementsoftware muss sich nicht zwangsläufig positiv auswirken, da eine solche Software bisweilen eine Verbesserung des eigenen Workflows nur suggeriert und dem Anwender Ordnungsstrukturen aufzwingt, die von den eigenen Vorstellungen in ungünstiger Weise stark abweichen könnten. Die Entscheidung, genau die für die eigene Agentur passende Software zu finden, ist zudem nicht einfach und die Gefahr ist groß, dass die Anwender mit der Vielfalt an Möglichkeiten, die ein solches Verwaltungssystem bieten kann, überfordern werden. Die Folge könnte sein, dass sich die Anwender mehr mit der Software als mit dem Projekt beschäftigen und die Software, die eigentlich die Prozesse vereinfachen sollte, vom Projektleiter und auch vom Team eventuell nicht wirklich angenommen wird. Eine Projektverwaltungssoftware könnte zudem suggerieren, die Projektverwaltung wäre mit der Existenz der Software beinahe bereits erledigt und somit leicht zu bewältigen. Oft verschleiert sie Vorgänge und Arbeitsprozesse und hält den Projektverantwortlichen unter Umständen so davon ab, selbst über die geeigneten Prozesse nachzudenken. Als Folge schenken einige Projektleiter und Entwickler ihrer Verwaltungssoftware mehr Zeit, Glauben und Vertrauen als der eigenen Kompetenz,

Projektentwicklung – Workflow  Pflichtenheft/Lastenheft

Abb. 164 www.zoho.com

162

Projektentwicklung – Workflow  Pfl ichtenheft/Lastenheft

Abb. 165 OmniPlan von omnigroup.com

Abb. 166 Ein Gantt-Diagramm ist ein Instrument des Projektmanagements und dient der grafi schen Darstellung einer zeitlichen Abfolge von Aufgaben. Es ist

nach dem amerikanischen Berater Henry L. Gantt (1861– 1919) benannt. Das Diagramm zeigt ein Projekt von Anke Harms und ihrem Team, Feldmann Media Group.

167

5.4 Benutzerprofil/Zielgruppe

171

Um das Themenumfeld und die Eigenschaften einer Zielgruppe optimal erfassen zu können, empfiehlt es sich, ein Benutzerprofil und ein Polaritätsprofil zu erstellen.

5.4.1 Benutzerprofil Mit Benutzerprofilen lassen sich Wissenstiefe bzw. Verhaltensmuster definieren bzw. ermitteln. Ein Benutzerprofil kann unabhängig von der Benutzergruppe individuellere Informationen über einen Anwender beinhalten. Exemplarische Profile: • Zielgruppe • Schwierigkeitsgrad, Kompetenzgrad • bevorzugte Lernmethode, Lernverlauf • Persönlichkeitseigenschaften • Auswahlverhalten, K auf verhalten • Finanzieller Status

Die Eigenschaften sind entweder explizit vom Anwender selbst spezifiziert oder aus dem Benutzerverhalten abgeleitet worden. Der Lernverlauf des Anwenders oder seine Interaktionsweise und Interaktionsreihenfolge könnten z. B. automatisch verfolgt und gespeichert werden, oder der Anwender macht auf einem Fragebogen vorab selbst Angaben. Die eingegebenen Daten ergeben ein Profil, das analysiert werden kann, um benutzerspezifische Inhalte oder Interaktions- bzw. Erzählformen bereitzustellen. Ein Benutzerprofil wird nach sehr ähnlichen Kriterien klassifiziert und auch auf ähnlichen Wegen ermittelt wie das Anwenderverhalten, nämlich mit einem Usability-Test, den man stets parallel zur Gestaltung interaktiver Produkte durchführen sollte. Wer demnach bereits den Usability-Test zur Verifizierung der Gestaltung einsetzt, wird auch gleich alle wesentlichen Benutzerprofile erhalten, allerdings nur jene, die man abgefragt hat. Das Tracking des Benutzerverhaltens nach der Publizierung des Produkts dient ausschließlich der Ermittlung von bisher nicht bekannten Benutzerprofilen. Diese dient aber nicht immer der Qualität des Produkts bzw. den Interessen des potentiellen Anwenders, sondern häufig auch nur dem Sammeln von Verbraucherdaten in Hinsicht auf das Kaufverhalten und die Gewohnheiten und Vorlieben.

Projektentwicklung – Workflow  Farbe als Konzept

180

5.5.2 Farbschema Nachdem Benutzerprofil, Polaritätsprofil und Moodboard erstellt wurden, hat man die erforderlichen Anhaltspunkte, um ein geeignetes individuelles Farbschema erstellen zu können. Für ein Farbschema sollten pro Internetseite nicht mehr als 7 Farben verwendet werden. Die Farben sollten einer Logik folgen, so dass im Idealfall die Absicht der jeweiligen Farbe vom Anwender erkannt und behalten werden kann. Soll der Einsatz von Farbe ein Konzept repräsentieren, so dient die Farbe zum Auszeichnen von Form und Funktion. Das heißt, mit der Farbe werden Hintergrund, Schrift und Gestaltungselemente unterschieden und funktionale Zustände der Bedienelemente abgebildet. Je nach gestalterischer Absicht und Zielgruppe können die bereits im Kapitel Kontrast mit Farbe (S. 50) vorgestellten Farbkontraste und die dort gezeigten Beispiele als Anregung herangezogen werden. Die Suche nach einem geeigneten Farbschema kann mit bereits bestehenden Farbschemata ergänzt werden. Im Internet sind zahlreiche Internetseiten zu finden, auf denen man sich endlos viele Farbschemata anzeigen lassen kann. Diese kann man dort auch selbst anlegen und mit anderen Anwendern im Internet austauschen. So bilden sich unterschiedliche Toplisten, durch die man Vermutungen anstellen kann, welche Farbkombinationen für die eigene Absicht am besten geeignet ist.

Abb. 175 Mit colorblender.com lässt sich eine Palette von sechs zueinander passenden Farben aus einer einzigen Basisfarbe erstellen. Die Farben der Palette harmonisieren z. B. in der Kombination von Text, Hintergrund, Links und Rahmen: http://colorblender.com

5.6 Flowchart

184

Ein Flussdiagramm, allgemein als Flowchart bezeichnet, repräsentiert die inhaltlichen bzw. funktionalen Elemente eines Produkts und ist die visuelle Darstellung der Navigations- bzw. Funktionsstruktur, wodurch die Zusammenhänge und Verknüpfungen der inhaltlichen Elemente, Kapitel und Unterverzeichnisse bzw. die der funktionalen Elemente deutlich werden. Werden in erster Linie die funktionalen Elemente eines Produktes dargestellt, so wird das Flowchart Funktionsstrukturdiagramm genannt. Hauptmenü Mit der Darstellung eines Flowcharts lassen sich entweder gezielt die Abhängigkeiten der einzelnen Kapitel und Unterkapitel zueinander, aber auch deren ZusammenKapitel 1 Kapitel 2 hänge aufzeigen. Die Kapitel selbst und deren Gestaltung und Interaktionen werden allerdings nicht mit einem Flowchart, sondern mit einem Funktionslayout (S. 201) und einem Storyboard (S. 221) beschrieben. Unterkapitel 1 Unterkapitel 2 Unterkapitel 3

UnterUnterkapitel 1

UnterUnterkapitel 2

Hauptmenü

Kapitel 1

Unterkapitel 1

UnterUnterkapitel 1

Kapitel 1

Kapitel 2

Unterkapitel 2

UnterUnterkapitel 2

Unterkapitel 3

UnterUnterkapitel 3

Hauptmenü

Abb. 182 Hierarchische Darstellung von Zusammenhängen. Kapitel 1

Unterkapitel 1

UnterUnterkapitel 1

UnterUnterkapitel 2

UnterUnterkapitel 3

Unterkapitel 1

UnterUnterkapitel 1

UnterUnterkapitel 2

Abb. 183 Darstellung der Zusammenhänge in Bezug zueinander. Kapitel 2

Unterkapitel 2

UnterUnterkapitel 3

Unterkapitel 3

Kapitel 2

Unterkapitel 2

UnterUnterkapitel 3

Unterkapitel 3

5.7 Funktionslayout/Wireframe Exemplarische Funktionslayouts/Wireframes: • aus Papier www.alistapart.com/articles/ paperprototyping www.youtube.com/ watch?v=OT3yYXkafy8 www.youtube.com/ watch?v=oITeUEjrY3Q www.youtube.com/watch?gl =BR&hl=pt&v=RTwfz9x98A8 • aus Papier mit Magnetfläche www.adaptivepath.com/ blog/2008/11/17/magnetic prototyping • als PDF-Datei www.boxesandarrows.com/ view/pdf-prototypes • PowerPoint Prototyping Toolkit www.boxesandarrows.com/ view/interactive www.istartedsomething.com/ 20071018/powerpointprototype-toolkit-01 www.youtube.com/ watch?v=JjbeCkn0bJg • mit Visio und Word www.interakt.nu/home/visio • mit Adobe Fireworks CS3 www.adobe.com/devnet/ fi reworks/articles/ rapid_prototyping.html • Verschiedenes http://wireframes.linowski.ca www.guuui.com/issues/ 03_05.php

Abb. 197 a–b Die Studentinnen Claudia Schick, Jasmin Breckenkamp und Andrea Schreiber erstellten für die Entwicklung einer Internetseite der Hochschule für Musik Detmold ein sprichwörtliches Papier-Klickmodell.

201

Mit einem Flowchart (siehe vorheriges Kapitel) werden einerseits die inhaltlichen Abhängigkeiten einzelner Kapitel und Unterkapitel voneinander aufgezeigt und gezielt deren Zusammenhänge dargestellt und andererseits funktionale Abhängigkeiten visualisiert. Je nach Produkt müssen entweder mehr die inhaltlichen oder mehr die funktionalen Aspekte verdeutlicht werden. Außerdem zeigt ein Flowchart die Menge der Kapitel bzw. Funktionselemente an. Es verschafft Überblick, ohne zu sehr ins Detail zu gehen. Die detaillierte Darstellung der Funktionen eines Produktes und die Visualisierung aller einzelnen Funktionselemente erfolgt mit Hilfe eines Funktionslayouts. Es wird auch gerne ›Papier-Klickmodell‹ oder ›Papier-Prototyp‹ oder auch Wireferame genannt. Auf Basis einer korrekten Beschriftung lässt sich ein einfaches Funktionslayout mit Papierschnipseln legen. Dies stellt auch eine geeignete Übung dar, um sich im Dialog mit dem Team die inhaltlichen und funktionalen Absichten eines Produktes klar zu machen. Mit einem Funktionslayout werden die einzelnen Funktionselemente, ihre Eigenschaften und Positionen visualisiert, ohne dass man sich bereits im Vorfeld für eine Gestaltung festlegen müsste.

Projektentwicklung – Workflow  Funktionslayout/Wireframe

Abb. 199 OmniGraffle (Mac): http://urlgreyhot.com/personal/ resources/omnigraffl e_ wireframe_palette http://urlgreyhot.com/personal/ weblog/creating_prototypes_ with_omnigraffl e

203

Projektentwicklung – Workflow  Funktionslayout/Wireframe

Abb. 207 a–c Das Funktionslayout der mobilen Applikation des Projekts Passepartout mit detaillierten Angaben.

Abb. 208 Das Screendesign der mobilen Applikation wurde auf Basis der Funktionslayouts erstellt.

212

5.8 Erweitertes Funktionslayout

213

Rein formal besteht ein Funktionslayout aus einem Layout, in dem Funktionsbereiche und deren Funktionselemente bzw. Menüpunkte definiert und platziert sind. Zu berücksichtigen ist dabei selbstverständlich auch das Proportionalverhältnis. Je nachdem, wie viel Fläche für ein Bedienfeld zur Verfügung steht und in welchem Verhältnis die Höhen- zur Quervermaßung steht, wird das Layoutmaß des Funktionslayouts angelegt. Bei dem Display eines Mobiltelefons sind demnach andere Vermaßungen und Seitenverhältnisse zu berücksichtigen als bei dem Display eines Fahrkartenautomaten oder für die Darstellung auf einem Computermonitor bzw. am Fernseher. Dasselbe gilt für Hardware-Produkte und deren Bedienfelder (Tasten, Hebel, Drehknöpfe, Schieberegler etc.). Wenn innerhalb des produkteigenen, korrekten Seitenverhältnisses alle Navigations- und Auswahlelemente dargestellt sind, ist bereits ein wesentlicher Teil des Funktionslayouts erfüllt. Da das Funktionslayout aber insbesondere für das Produktionsteam ein wichtiges Kommunikationsmittel und zudem Gestaltungs- und Umsetzungsgrundlage ist, empfiehlt es sich, auf dem Funktionslayout auch weitere wichtige Informationen zu vermerken. So ist es z. B. sinnvoll, neben einer Betitelung bzw. Durchnummerierung des Funktionslayouts auch eine kurze Information zu vermerken, welche Aktionen durch das Bedienen welcher Funktionselemente (Menüpunkte, Softwarebzw. Hardware-Tasten) ausgelöst werden, welche Verzweigungen möglich sind und in welcher Form die Interaktion eingeleitet bzw. ausgeführt wird. Zudem sollte vermerkt sein, welche Grafiken, Töne, Videos und Fonts für die Darstellung verwendet werden sollen, wie deren Bezeichnungen lauten und wo sich die Dateien bzw. Bauteile befinden. Zusammen mit diesen Zusatzinformationen entspricht ein solches Funktionslayout den Aussagen und Möglichkeiten, die sonst Storyboards und Drehbücher bieten, und es kann dann als ›erweitertes Funktionslayout‹ bezeichnet werden. Demnach könnte das erweiterte Funktionslayout ebenso im folgenden Kapitel Drehbuch/Storyboard (S. 221) beschrieben werden, wenn es ausschließlich für Erzählformen Anwendung fände und nicht auch noch für die Produktionsplanung von Hardware-Produkten. Das erweiterte Funktionslayout ist für die Produktionsplanung und Projektvisualisierung eines jeden Hard- oder Softwareprodukts gleichermaßen anwendbar. Die Bezeichnungen ›Drehbuch‹ und ›Storyboard‹ sind traditionell dem Film und demnach der linearen Erzählform vorbehalten. Ein erweitertes Funktionslayout ist demgegenüber ein Drehbuch inklusive Storyboard, das zusätzlich mit detaillierten Produktions- und Interaktionshinweisen versehen ist, die über Regiehinweise für lineare Erzählformen weit hinausgehen. Außerdem können für Programmierer, Gestalter, Textautoren, Sprecher oder Ingenieure jeweils individuell erweiterte Funktionslayouts erstellt oder zumindest nur die jeweils erforderlichen Hinweise dargestellt werden. Ein Sprecher benötigt z. B. ausschließlich Abbildungen der zu sprechenden Szenen und den dazugehörigen Text. Somit würde für ihn das Feld ›Font – Text – Datei‹ im erweiterten Funktionslayout entsprechend größer ausfallen und einige andere Felder könnten zu dessen Gunsten entfernt oder stark verkleinert werden. Die Darstellungsfläche ist allerdings für alle Projektbeteiligten gleichermaßen wichtig.

Projektentwicklung – Workflow  Funktionslayout/Wireframe

216

234

Projektentwicklung – Workflow  Gestaltungslayout

Abb. 220 Mit einer 8 × 8 Pixel Submatrix, die mit nur 1 × 1 Pixel kleinen Punkten im Abstand von jeweils 8 Pixel gebildet wird, lassen sich alle Display-Formate elektronischer Medien abbilden, da deren Abmessungen in Höhe und Breite stets durch 8 teilbar sind. Ausnahmen gibt es nur bei SXGA+ (1400 × 1050) und Wide SXGA+ (1680 x 1050).

Display-Formate

1280 × 720 px HDTV 720p

1440 × 900 px WXGA

1680 × 1050 px WSXGA

1920 × 1080 px HDTV 1080

Die meisten Display-Formatgrößen sind auf Grund des horizontalen Gesichtsfelds horizontal ausgerichtet. Eine Ausnahme machen die Displays mobiler Geräte wie z. B. Mobiltelefon oder PDA . Dieses Hochformat ist wohl dem Umstand geschuldet, dass diese Geräte schmal und hochkant in die Hosentasche passen sollen. Bei vielen dieser Geräte lässt sich das Betrachtungsformat des Displays aber auch in ein Querformat umschalten.

128 × 128 px Mobiltelefon

240 × 320 px Smartphone

480 × 320 px PDA

768 × 576 px PAL

800 × 600 px SVGA

1024 × 768 px EVGA

Projektentwicklung – Workflow  Gestaltungslayout

235

Projektentwicklung – Workflow  Gestaltungslayout

238

5.10.3 Raster/Layout-Framework Ein Raster kann entscheidend dazu beitragen, dass die Gliederung von Flächen und die Größen und Positionierungen einzelner Elemente durchgehend konsistent sind. Insbesondere bei komplexen Produktionen mit einer hohen Funktionsvielfalt, die eine unüberschaubare Anzahl an Oberflächen, Seiten bzw. eine hohe Varianz an Funktionalitäten und Möglichkeiten zur Folge hat, ist es hilfreich, dank des Gestaltungslayouts einer einheitlichen Struktur folgen zu können. Ein Raster stellt nicht zwangsläufig eine Einschränkung dar und ist beim Endergebnis auch nicht zwangsläufig erkennbar. Mit einem Raster gewährleistet und behält man den Überblick und vereinfacht somit den Gestaltungsprozess, sowohl für das Screendesign als auch für das Interfacedesign. Gerade bei der Gestaltung und der damit einhergehenden Strukturierung der funktionalen Elemente hilft das Raster, ein funktionales, nachvollziehbares Interface zu entwickeln.

Projektentwicklung – Workflow  Gestaltungslayout

960-Pixel-System Da es nicht darum gehen sollte, öglichst viel Fläche im Browser zu m füllen, sondern die vorhandene Fläche möglichst sinnvoll zu nutzen, muss im Zusammenhang mit softwarebedingten Formatgrößen unbedingt das 960- Pixel-System erwähnt werden. Danach wird die maximale Breite von 960 Pixel für ein Webdesign empfohlen, da sich diese Breite gut durch viele Zahlenwerte (3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24 …) teilen und somit für viele unterschiedliche Spaltenlayouts nutzen lässt: http://960.gs/demo.html

Im Gegensatz zur Bezeichnung Layoutraster, die bei Printdateien üblich ist, spricht man bei der Gestaltung von Internetseiten von Layout-Frameworks. Diese lassen sich zudem in Grid-Frameworks und CSS-Frameworks unterteilen. Grid-Frameworks sind direkt mit den Layoutrastern im Printbereich zu vergleichen, da sie mit der gleichen Absicht für Struktur und differenzierte Unterteilung sorgen und im Aufbau in der Regel unverändert bleiben. Neben dem 960 Grid System von Nathan Smith sind da noch das 24-Spalten-Grid Blueprint CSS30, das Reset-Stylesheet von Eric Meyer31und das YUI Grid von Yahoo erwähnenswert. Das YUI Grid32 stellt hier die Ausnahme dar, da es nicht ausschließlich fix ist, sondern auch dynamische Layouts ermöglicht, indem es neben den drei festen Breiten von 750, 950 und 974 Pixel auch einen skalierbaren Prozentwert für die Gesamtbreite vorsieht. Darüber hinaus bietet aber auch das YUI Grid keine weiteren dynamischen Funktionalitäten. 30 www.blueprintcss.org 31 http://meyerweb.com/ eric/thoughts/2007/05/01/ reset-reloaded 32 http://developer.yahoo.com/ yui/grids

244

Projektentwicklung â&#x20AC;&#x201C; Workflow ď&#x20AC;´ Gestaltungslayout

Abb. 228 12-Spalten-Raster (Variante nach dem 960 Grid System von Nathan Smith).

245

Projektentwicklung – Workflow  Gestaltungslayout

248

5.10.4 Komposition Inhaltliche Bestandteile • Logo • Symbole • Produktgrafik • Titel • Text im Inhalts bereich • Bild im Inhaltsbereich • Text in Marginalspalte • Bild in Marginalspalte • Tabellen • Formulare • Werbe bereich • rechtliche Hinweise • AGB etc. Funktionale Bestandteile • Hauptmenü • Untermenüverzeichnisse • Bedienfelder oder Schalter • Schieberegler • Drehräder etc.

Je nach Produkt, Produkttyp und Produktabsicht ist zu klären, welche inhaltlichen und funktionalen Bestandteile im Layout wo positioniert werden und welche Bedeutung, Funktion, Größe und Anzahl sie jeweils haben. Mit Hilfe eines Funktionslayouts – auch Wireframe genannt – erfolgt die detaillierte Darstellung der Funktionen eines Produktes und die Visualisierung aller einzelnen Funktionselemente. Auch gerne ›Papier-Klickmodell‹ oder ›Papier-Prototyp‹ genannt, dient es der Evaluierung der Funktionen und deren Abläufen und kann bereits mit einfachen Mitteln prototypisch visualisiert werden. Ein solches Funktionslayout ermöglicht die Visualisierung und die Bestimmung der Positionen aller funktionalen Aspekte, ohne dass man sich bereits im Vorfeld für eine bestimmte Gestaltung festlegen müsste. Dies ändert selbstverständlich nichts daran, dass die Entscheidungen, die mit einem Funktionslayout erprobt bzw. gefällt werden, nicht bereits Bestandteil des Gestaltungsprozesses sind. Mit dem Gestaltungslayout werden die gestalterischen Aspekte erprobt und letztendlich festgelegt. Die durch das Funktionslayouts ermittelten Erkenntnisse, Bedingungen, Möglichkeiten und eventuellen Einschränkungen fließen in die Erstellung des Gestaltungslayouts mit ein. Auch wenn die Grenzen zwischen Gestaltungslayout und Funktionslayout bisweilen fließend sind, steht dennoch die Reihenfolge fest. Bevor mit der Gestaltung der formalen und semantischen Punkte begonnen wird, müssen die funktionalen Aspekte geklärt sein, um sicherzustellen, unter welchen Möglichkeiten, Vorgaben oder gar Einschränkungen entwickelt und gestaltet wird. Hier geht es nicht darum, den technischen Vorgaben sklavisch zu folgen. Auch hier gilt, dass eine Idee mehr zählt, als tausend Features, und dass man die technologischen Aspekte nicht deswegen abklären sollte, um in Abhängigkeit subjektiver Erkenntnisse eingeschränkt zu gestalten. Das Funktionslayout schafft allerdings Klarheit und kann helfen, aus den dadurch selbst gewonnenen Erkenntnissen neue, eigene Ideen in Bezug auf Gestaltung und Konzept abzuleiten. Ein Funktionslayout wird gerade dann immer wichtiger, je komplexer das Produkt und der Umgang mit ihm ist. So ist bereits mit dem Funktionslayout ein erster Usabilitytest möglich, um zu erproben, ob Funktionsabläufe vom Anwender erkannt werden und ob die jeweiligen Abhängigkeiten voneinander überhaupt sinnvoll sind. Fehlende Kenntnisse über Usabilitytests bzw. die Befürchtung, keine Zeit oder kein Budget für Tests zu haben, führt häufig zu standardisierten Layouts. Gerade beim Layout von Internetseiten besteht die Gefahr, sich in vermeintlichen Standards zu verlieren, die die Positionierung der Bestandteile festgelegt zu haben scheinen: Logo oben links, Titel oben Mitte, Hauptmenü oben quer, Untermenüverzeichnis tabellarisch links, Inhalt rechts mittig neben Untermenüverzeichnis, rechtliche Hinweise und AGB unten. Auch für Terminals (Multimediale Kiosksysteme, POS, POI, interaktive Infopoints etc.) werden häufig diese klassischen Gliederungsstrukturen unreflektiert angewandt, in der Annahme, Erfahrungen aus dem Gebrauch von Internetangeboten ungeprüft nutzen und unverändert übernehmen zu können. Dass man sich an diese Form der Komposition und der Strukturierung gewöhnt zu haben scheint, ist allerdings noch kein Indiz dafür, dass sie grundsätzlich geeignet ist. Solche Kompositionen und Strukturierungen ergaben sich schließlich

Projektentwicklung – Workflow  Gestaltungslayout

258

Positionierungs-Erwartungen Das Marktforschungs- und Beratungsunternehmen eResult GmbH ermittelte 2004 mittels einer mehrseitigen Online-Befragung mit 40 Untersuchungsfragen Positionierungs-Erwartungen bezüglich der Gliederung einer Internetseite. Es wurden über 500 erfahrene Internet-Nutzer befragt, in welchen Bereichen eines Layouts ihrer Ansicht nach zentrale Internet seitenElemente, wie z. B. Sucheingabefeld, Kontakt-Link, Home-Button, Link zu einer Sitemap, Navigationsleiste etc. platziert sein sollten. Den Untersuchungsteilnehmern wurde eine inhaltslose Internetseite präsentiert, die in 25 nummerierte, gleichgroße Felder unterteilt war. Durch Nennung einer (bzw. mehrerer) Feldnummer(n) konnten die Untersuchungsteilnehmer die betreffenden Elemente der Internetseiten positionieren und somit ihre Platzierungserwartungen definieren. Ein Element konnte mehreren Feldern zugeordnet werden, wobei die meisten Elemente den Umfang von einem Feld hatten. Es erstreckten sich nur wenige Elemente über zwei bis drei Felder (z. B. Navigationsleiste, Werbung). Da sich auch die Zyklen der Kompetenzunterschiede zunehmend verkürzen, sind solche Untersuchungsergebnisse ständigen Änderungen unterworfen. Bei den Untersuchungen in den Jahren 2004 zeigte sich, dass sich bereits nach einem Jahr signifikante Unterschiede in den Erwartungen ergaben. In der vermutlich Ende 2006 erscheinenden aktuellen Untersuchung werden sicher weitere Veränderungen festzustellen sein. Die befragten Internet-Nutzer wurden in drei Gruppen eingeteilt: • • •

Fortgeschrittener Anfänger (Webnutzung in Jahren: 1 bis < 3) Fortgeschrittener (Webnutzung in Jahren: 3 bis 5) Experte (Webnutzung in Jahren: > 5).

Projektentwicklung – Workflow  Gestaltungslayout

261

Gliederung des Layouts Eine Komposition ist gleichbedeutend mit der Gliederung eines Layouts. Je nach Aufteilung einer Fläche, der Größe der daraus resultierenden Parzellen, deren Farbe und deren Platzierung kann man die Bedeutung einzelner Bereiche bewusst steuern. Und je nach Verteilung der auf diesen Bereichen angeordneten Elemente können Zusammenhänge visualisiert bzw. ebenso Bedeutungsreihenfolgen dargestellt werden. Mit Elementen sind folgende Bestandteile gemeint: Logo, Symbole, Produktgrafik, Titel, Text im Inhaltsbereich, Bild im Inhaltsbereich, Text in Marginalspalte, Bild in Marginalspalte, Tabellen, Formulare, Werbebereich, rechtliche Hinweise, AGB, Hauptmenü bzw. Bedienfelder oder Schalter, Untermenüverzeichnis etc. Die Proportionen der Bereiche und der Elemente untereinander aber auch zueinander dienen demnach nicht nur einer ausgewogenen Komposition, sondern sind wesentlicher Bestandteil der Kommunikation, die sich z. B. in Chaos, Struktur, Dynamik oder Überzeugungskraft ausdrücken kann. Im Folgenden werden exemplarisch einige Gliederungen gezeigt. Es wird deutlich, dass ein Raster nicht zwangsläufig einschränkt, sondern bei der Gliederung der Komposition behilflich ist oder sogar zum Stilmittel werden kann. Bei einigen Beispielen erscheint die Verteilung beliebig, keinem Raster folgend. Dennoch können die Verteilung der einzelnen Elemente und die Proportionen zueinander ausgewogen sein. Eine asymmetrische Verteilung kann z. B. dazu beitragen, dass sie nicht zu unflexibel wirkt. Mit so genannten Topologien lässt sich das Layout in die bereits erwähnten inhaltlichen und funktionalen Bestandteile farblich gliedern. Bezeichnungen wie ›Logo‹, ›Navigation‹, ›Headline‹, ›Text‹, ›Bild‹ etc. ergänzen die farblichen Markierungen und gewährleisten eine sichere Zuordnung. Bei den hier dargestellten Topologie-Beispielen definiert eine rote Fläche den Bereich des Logos, grüne Flächen den Navigations- bzw. Funktionsbereich, Orange die Headlines bzw. Beschriftungen und blaue Flächen definieren die Bereiche für Inhalte wie z. B. Bilder, Videos und Texte.

Projektentwicklung – Workflow  Gestaltungslayout

Abb. 240 a–d www.aec.at

262

5.11 Styleguide

286

Die Planung eines interaktiven Produkts beginnt in der Regel mit Skizzen und endet, was die Planung anbetrifft, mit dem Styleguide. Aus den Skizzen ergeben sich erste gestalterische Ideen, Flowcharts und eine Hierarchisierung der Inhaltsstruktur. Daraus lassen sich erste Funktionslayouts, die Festlegung funktionaler Aspekte im Sinne ihrer Positionierung und Funktionalität herleiten und eventuelle Drehbücher erstellen. Innerhalb eines Gestaltungslayouts und seines Rasters werden all diese Ideen zu einer den Anforderungen entsprechenden Gestaltung zusammengefasst. Die Details dieser Gestaltung werden dann in einem Styleguide festgehalten. Dies geschieht u.a. in Form einer präzisen Vermaßungen aller Bestandteile und des gesamten Layouts und all seiner Varianten unterschiedlicher Layout-Schemata. Des Weiteren werden im Styleguide alle verwendeten Farben, Schrifttypen und -schnitte und sonstige Formatierungsangaben dokumentiert. Zudem erfolgt dort die Beschreibung aller Interaktionsmuster. Daher sind das Flowchart, die Funktions- und Gestaltungslayouts, das erweiterte Funktionslayout, das Storyboard und das eventuelle Drehbuch Bestandteile des Styleguides. Im Styleguide werden aber auch alle Eigenschaften formuliert, die die Corporate Identity eines Produkts ausmachen. Ein Styleguide kann in seiner Endfassung mehrere hundert Seiten stark sein. Dies alles erscheint sehr aufwändig. Aber je präziser der Styleguide formuliert ist, umso weniger Fragen bleiben offen und umso unwahrscheinlicher wird es, dass er unterschiedlich interpretiert wird. Grundsätzlich gilt, dass es für die Erstellung eines Styleguides keine allgemeingültigen Antworten gibt und dass für jedes Produkt und jeden Medientyp die eigene unverwechselbare Lösung gefunden werden muss. Dies gilt auch für die Frage, wie umfangreich ein Styleguide formuliert sein muss. Mit einem Styleguide werden sämtliche Einzelheiten der Produktion detailliert beschrieben und dokumentiert. Je genauer ein Styleguide erstellt wird, umso komplikationsfreier wird die Umsetzung eines Projekts. Er stellt für die jeweilige Produktion die auf sie zugeschnittene Design- und Umsetzungsrichtlinie dar. Dies ist besonders dann wichtig, wenn bereits bestimme Vorgaben, wie z. B. die Einhaltung von Barrierefreiheit, definiert wurden, die nun für alle Beteiligten kommunizierbar vorbereitet werden müssen. Der Styleguide ist die Produktionsvorgabe und dient der Kommunikation innerhalb des Produktionsteams und gegenüber dem Kunden. Außerdem entlastet er den Projektleiter, der mit einem Styleguide als Planungsvorgabe das Team besser einteilen und ansteuern kann und auch alle einzelnen Produktionsabschnitte besser unter Kontrolle hat. Wodurch nicht zuletzt alle Arbeitsschritte sicherer und schneller durchgeführt werden können. Ein Styleguide stellt Wissenskapital dar. Mit ihm wird nicht nur das Projekt selbst, sondern auch die bei einem Projekt gesammelten Erfahrungen dokumentiert. Vom Erstellungsprozess abgesehen wird der Styleguide insbesondere dann wichtig, wenn nach längerer Zeit – manchmal nach Monaten – Veränderungen bzw. Ergänzungen an einem Projekt vorgenommen werden sollen. Der Styleguide liefert den Bauplan und die Leitlinien, nach denen die Arbeit fortgesetzt werden kann. Ohne Styleguide wäre diese Fortsetzung um ein Vielfaches aufwändiger oder sogar beinahe unmöglich. Es kann z. B. vorkommen, dass nicht mehr alle damals beteiligten Teammitglieder zur Verfügung stehen und das Wissen über die jeweilige Produktion somit abgewandert ist. Aus Sicht der Gestaltung und auch aus Sicht der Usability liegt zudem ein wesentliches Ziel des Styleguides in der Wahrung eines einheitlichen Erscheinungsbil-

Projektentwicklung – Workflow  Styleguide

293

Abb. 255 Format: 740 × 416 Pixel.

Die Website von Passepartout teilt sich in drei Bereiche, den Navigationsbereich, den der untergeordneten Navigation und dem Bühnenbereich, der von dem Navigationsbereich umschlossen wird. Das Raster und die Vermaßungen für das Layout der PDA -Applikationen sind, aufgrund der kleinen Aktionsfläche, je nach Funktion variabel gestaltet. Alle Variationen beinhalten jedoch die auf der rechten Seite befindliche Navigationsleiste.

Abb. 256 Format: 320 × 480 Pixel. Je nach Funktion variiert die Größe der Aktionsfläche von 288 × 230 bis 316 × 476 Pixel.

5.12 Barrierefreiheit – eine erweiterte Form der Usability »Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauung benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden.« Grundgesetz der BRD, § 3, Abs. 3.

Barrieren können sich in folgenden Kontexten ergeben: • Alter • Behinderung • Lernschwierigkeiten • Gender • Kultur, Sprache • sozio-kulturelle Bedingungen

310

»Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.« Quelle: Abschnitt 1, § 4 BGG (Gesetz zur Gleichstellung behinderter Menschen). Barrierefreiheit sollte man nicht als Bezeichnung eines Teilbereiches sehen, sondern als einen allgemeinen und alternativen Begriff für ›Usability‹, ›Gebrauchstauglichkeit‹ oder ›Benutzerfreundlichkeit‹. Barrierefreiheit bezieht sich auf alle Menschen, die auf Grund einer motorischen Behinderung, durch fehlende bzw. eingeschränkte Sprachkenntnisse, oder bedingt durch ihr Alter auf Barrieren stoßen, sowie auf alle anderen Menschen, deren Möglichkeiten, sich in ihrem Alltag zu bewegen, durch irgendeine Form oder irgendwelche Umstände eingeschränkt sind – und sei es eine Behinderung, die sich aus der geringen Qualität eines Produkts ergibt. Eine Behinderung kann also auch ausschließlich vom Produkt selbst ausgehen. Dass die Qualität eines Produkts, insbesondere eines interaktiven Produkts, in einem wesentlichen Maße durch seinen Gebrauchswert bestimmt wird, erscheint naheliegend. Dieser Gebrauchswert wird in erster Linie durch gute Gestaltung möglich, die sich aus dem Zusammenwirken der Gestaltung von Form und Funktion ergibt. Umso offensichtlicher sollte es sein, dass der Umgang mit Produkten und der Zugang zu den Inhalten, die durch das Anwenden solcher Produkte erstellt, aufbereitet und ermöglicht werden, selbstverständlich ohne Barrieren anzubieten sind. Dennoch wurde für diese Selbstverständlichkeit parallel zu den bisher bekannten Begriffen mit ›Barrierefreiheit‹ ein weiterer Begriff hinzugefügt, als gebe es etwas hervorzuheben. Der ursprüngliche Gedanke zur Barrierefreiheit beruht auf der Berücksichtigung von Personen, die auf Grund einer Behinderung in ihren motorischen oder sensorischen Fähigkeiten im Gebrauch von Produkten und Dienstleistungen in verschiedenster Art gehemmt sind. Der Umstand, dass Barrierefreiheit seit einigen Jahren stark diskutiert wird, resultiert aber hauptsächlich daraus, dass man das Internet endlich auch für Behinderte zugänglich machen wollte. Seitdem gilt sie sogar bereits als Modebegriff für die Internet-Branche. Deshalb ist es nicht verwunderlich, dass ›Barrierefreiheit‹ vorrangig auf digitale Informationsmedien bezogen wird. Der Begriff ›Barrierefreiheit‹ ist aber geeignet, sich nicht nur auf das Umfeld von Internetangeboten und auf die berechtigten Interessen Behinderter beziehen zu lassen, sondern auf alle Anwender, Anwendungsformen und -arten. ›Usability‹ bzw. ›Gebrauchstauglichkeit‹ oder ›Benutzerfreundlichkeit‹ sind bereits häufig angewandte Begriffe. Die Bezeichnung ›Barriere freiheit‹ wäre ergänzend zu ›Ergonomie‹ geeignet, all jene Begriffe zu subsumieren, die bisher eine Verbesserung des Gebrauchswertes im Sinne der Wahrnehmung und der Bedienbarkeit beschreiben. ›Barrierefreiheit‹ schließt zusätzlich Verständlichkeit und Nachhaltigkeit mit ein. Wenn in Zusammenhang mit Barrierefreiheit in erster Linie nur an Behinderte gedacht würde, übersähe man die aktuell in unserem Kulturraum steigende Anzahl an älteren Menschen, die ja nicht nur krankheits-, sondern in erster Linie altersbedingt im Umgang mit Produkten und Dienstleistungen ähnlich gehindert sein könnten. Daher sollte ›Barrierefreiheit‹ nicht unter dem Aspekt der Be-,

Projektentwicklung – Workflow  Barrierefreiheit – eine erweiterte Form der Usability

312

Alltagsprodukte lassen sich kombiniert mit zusätzlichen Geräten in ihrer Barrierefreiheit verbessern. So gibt es Hard- und Software-Produkte, die alleine für sich oder in Kombination mit anderen Produkten betroffene Personen im Alltag unterstützen können, obwohl diese Produkte ursprünglich nicht gezielt für eine barrierefreie Nutzung entwickelt wurden. Diese Produkte werden mit dem Begriff ›Assistive Technologien‹ zusammengefasst. Dazu zählen im Bereich der Hardware z. B. Rollstühle, Lesegeräte, Geräte zum Greifen etc. und im Bereich der Software so genannte Screenreader zum Vorlesen von Internetseiten oder Software zum Vergrößern bzw. Verändern der Bildschirmdarstellung. Des Weiteren gibt es Sprachgeneratoren und Spracheingabe-Software sowie Hard-Software-Lösungen, mit denen Texte in Blindenschrift (Braille) und umgekehrt gewandelt werden können. Zudem können mithilfe spezieller Software z. B. Mobiltelefon bzw. PDA oder Fernseher, DVD -Player oder die gesamte Haustechnik sprachgesteuert bedient werden. Dies kann für behinderte wie nicht behinderte Personen gleichermaßen hilfreich sein. So können z. B. mit einer Software für Mobiltelefone bzw. PDAs standortbezogene Dienste wie Echtzeit-Nachrichten und Verkehrsmeldungen, Klingelton-Downloads oder Webinhalte abgerufen werden. GPS-Navigationssysteme könnten zur Suche nach Straßenkarten, zum Anhören von Wegbeschreibungen sowie zur Vorbereitung einer Wanderroute eingesetzt werden. So genannte Landmarks könnten behindertenspezifisch gelistet sein, damit sie auch tatsächlich je nach Behinderungsart und -grad als Orientierungspunkte erkannt und genutzt werden können. Zusätzlich könnten bei einem barrierefreien GPS-Navigationssystem auch Hindernisse und spezielle Schwierigkeiten genannt werden, die sich auf dem Weg befinden.

Abb. 283 Kennung der Tastatur von ›DataHand‹.

Abb. 284 Mit der ›DataHand‹ können Anwender mit geringen motorischen Fähigkeiten alle Vorgänge eines Computers und die von Softwarepaketen steuern. Computer-Maus-Bewegungen sind ebenso möglich. (www.datahand.com)

Screendesignbeispiele ď&#x20AC;´ Barrierefreiheit â&#x20AC;&#x201C; eine erweiterte Form der Usability

320

6 Screendesignbeispiele

Screendesignbeispiele

37 Wie schnell bei der Beurteilung durch einen Betrachter über die Qualität entschieden wird, zeigen unterschiedliche Untersuchungen. So wird z. B. laut einer Studie der kanadischen Forscherin Gitte Lindgaard, Professorin am ›Department of Psychology‹ an der Carleton University und Direktorin des ›Human Oriented Technology Lab‹ (HOTLab) (www.carleton.ca) das Urteil über die Qualität von Screendesign zumindest bei Internetseiten bereits nach 50 Millisekunden gefällt. Das ist gerade einmal halb so lang wie ein Augenblinzeln. Nachdem die kanadische Forscherin 35 Probanden 125 verschiedene Internetseiten in zufälliger Reihenfolge zunächst 500 Millisekunden lang gezeigt hatte, verkürzte sie erst im dritten Durchgang die Darstellungszeit auf 50 Millisekunden. Unabhängig davon, wie lange die Probanden eine Internetseite anschauen durften, kamen sie mit einer Genauigkeit von 94 – 98 % bei der Beurteilung der Qualität zum selben Ergebnis wie bereits nach 50 Millisekunden.

321

Screendesign beschreibt die Form, Interfacedesign die Funktion, wobei sich beides nicht immer deutlich voneinander trennen lässt. Je nach Absicht tritt mehr das eine oder das andere in den Vordergrund. Interfacedesign umschreibt vordergründig die Gestaltung von Benutzeroberflächen. Dabei geht es aber vielmehr um das Antizipieren von Verhaltensformen und -bedürfnissen und den Erwartungen, die ein Anwender an ein Produkt richtet. Das Interfacedesign definiert, steuert und ermöglicht den Dialog und die Dialogfähigkeit zwischen Mensch und Maschine bzw. zwischen Sender und Empfänger. Dies gilt für analoge wie digitale Produkte gleichermaßen. Sender und Empfänger können wechselseitig Menschen und Maschinen, aber auch ausschließlich Menschen sein, die mit Hilfe von Maschinen kommunizieren. Interfacedesign dient nicht nur dazu, Kommunikation und Information auf Basis einer formalen Gestaltung zu ermöglichen, sondern auch dazu, selbst Verhalten auszulösen und dynamisch darauf reagieren zu können. Dies hat in vereinzelten Fällen zur Folge, dass ein Produkt bei Bedarf nicht nur ein vorher bestimmbares Verhalten zeigt, so wie es eigentlich nur bei einem Dialog zwischen Lebewesen üblich ist, sondern dass das Produkt auch in der Lage ist, dazuzulernen und sich weiterzuentwickeln. Interfacedesign wird dann über die Information und den Dialog hinaus zur Erlebnisumgebung und kann wesentlich dazu beitragen, dass ein Produkt und sein Interaktionsangebot vom Anwender im Idealfall als ein am Menschen orientiertes System wahrgenommen werden. Im Laufe dieses und der nächsten Kapitel wird man feststellen, wie alltäglich und allgegenwärtig Screendesign ist und dass es mehr ist, als nur die Illustration vorgegebener Konzepte. Screendesign kann mehr leisten, als nur die Repräsentation der äußeren Form. Häufig wird mit Screendesign zwar ausschließlich eine rein ästhetische oder rein geschmäcklerische bzw. schmückende Absicht verfolgt, es kann aber zusätzlich auch die funktionalen Aspekte eines Produkts verdeutlichen und unterstützen. Wenn das Augenmerk bei der Erstellung eines Produkts nur auf die gute Bedienbarkeit ausgerichtet ist, erhält man unter Umständen zwar ein gut bedienbares Produkt, aber nicht unbedingt eines, das Freude an der Benutzung auslöst oder dem Besitzerstolz schmeichelt. Achtet man bei der Erstellung eines interaktiven Produkts allerdings nur auf die Gestaltung der äußeren Form, vernachlässigt man die Absicht und die Möglichkeiten der an diesem Produkt anwendbaren und von diesem Produkt ausgehenden Interaktivität. Die Qualität von Screendesign hängt demnach entscheidend davon ab, inwiefern es die Absichten eines Produkts unterstützt und das Erscheinungsbild des Interfacedesign prägt. Zumindest wird deutlich, wie sehr die Qualität eines Produkts vom Zusammenwirken des Screendesigns und des Interfacedesigns abhängt und dass beide miteinander in Abstimmung zu gestalten sind.37

Screendesignbeispiele  Barrierefreiheit – eine erweiterte Form der Usability

332

6.1.4 Anreize, Motivation Anreize dienen zunächst dazu, über den Inhalt hinaus, mit Hilfe des Screendesigns Interesse für ein Produkt zu wecken. Dann gilt es, dem Anwender Freude am Gebrauch zu bereiten, ihn neugierig auf die Möglichkeiten und die Inhalte zu machen und Erwartungen zu wecken. Hier zeigt sich einmal mehr, wie sehr Screendesign und Interfacedesign miteinander verwoben sind. Sowohl die kleinen runden Abbildungen rechts im Screenshot der Internetseite ›www.interactions.de‹ (siehe Abbildung), als auch das Wort ›mehr‹ unterhalb der Themeneinführungstexte wecken die Erwartung, dass diese durch Anklicken Zugang zu weiteren, ergänzenden Inhalten bieten. Über Motivation nachzudenken bedeutet zunächst, sich zu fragen, was Menschen dazu bewegt, zu handeln. Das Nachdenken über diese Frage kann helfen, sich über neue Themen oder neue Zielgruppen im Klaren zu werden oder darüber, wie das Screendesign verbessert werden kann, indem bereits vorhandene Motivationen befriedigt oder neue geweckt oder als Anreize eingesetzt werden. In der Psychologie stellt man so genannte ›Motivtaxonomien‹ auf. Dies sind Auflistungen, die beschreiben, welche Motivationen es gibt, was sie bewirken, welche Folgen sie haben, mit welchen Absichten sie verknüpft sind und wodurch sie in Gang gesetzt werden. Eine Auswahl an Motivationen 1. Bequemlichkeit, Faulheit 2. Misserfolge vermeiden 3. Sex 4. Dialogbereitschaft, Interesse an der Kontaktaufnahme und an neuen Kontakten 5. Unterhaltung 6. Neugier 7. Lust auf Abwechslung 8. Interesse an Bildung, an Information 9. Vorteile erlangen, z. B. durch Information und Ratgeber 10. Ehrgeiz und Erfolg 11. Streben nach Kontrolle über sich und andere 12. Für andere Fürsorge und Unterstützung leisten 13. Selber beschützt werden wollen 14. Ordnung, das Bestreben nach Vereinfachung und Überschaubarkeit 15. Risiko, Spannung, Aufregung, z. B. mit Spielen 16. Zeitersparnis 17. Ansehen erlangen

6.3 Screendesign – Form mit Funktion

38 Die Übergänge von Screenund Interfacedesign sind z. B. bei der Internetseite http://wwwwwwwww.jodi.org des holländischbelgischen Künstlerduos JODI (Joan Heemskerk, Dirk Praesmans) oder bei der CD-ROM shiftcontrol von ›audiorom interactive music‹, an der u. a. Paul Hopton arbeitete, fließend.

350

Screendesign kann wesentlicher Bestandteil der Funktion sein und somit unterstützend für das Interfacedesign wirken. Gerade weil Produkte auch funktionale Aspekte beinhalten, muss nicht nur ein Layout gestaltet werden, sondern auch die Funktion und ihre Repräsentanz. Es ist demnach nicht immer einfach, die Gestaltung der Form von der einer Funktion zu trennen. Oft ist dies zudem weder erforderlich noch gewünscht. Wird lediglich die Funktion und ihre Inszenierung gestaltet, so handelt es sich dabei um Interactiondesign. Wird die Gestaltung der Interaktivität zum Bestandteil der Repräsentation des Inhalts bzw. der Erzählform, so handelt es sich dabei um einen Teilaspekt des Screendesigns. Screendesign wird dann zur Form mit Funktion. Interactiondesign ist dann Teil des Screendesigns und deren Kombination mehr als nur ein Interface für Funktionalitäten. Screendesign ist dann nicht nur eine illustrierte Oberfläche und nicht unbedingt nur ein festgelegtes Ergebnis eines vorgefertigten Konzepts. Es ist dann mehrdimensional und sogar dynamisch veränderbar, je nachdem, wie es genutzt und interpretiert wird. Je nach Absicht, steht mal der funktionale und mal der gestalterische Aspekt eines interaktiven Produkts im Vordergrund, oder die anzusprechende Zielgruppe macht eine entsprechende Priorität erforderlich. Wenn die Übergänge von Screen- und Interfacedesign beginnen fließend zu werden, begibt man sich entweder ins Chaos oder ist auf dem besten Weg, ein Projekt mit interessanten Herausforderungen zu entwickeln, und zwar hinsichtlich der Interaktivität und ihrer Integration in die Gestaltung und Erzählstruktur eines interaktiven Produkts.38

JODI Bei den Arbeiten von JODI wird dem Anwender kein klar abgegrenztes Steuerelement angeboten. Das Interfacedesign ist so sehr in das Screendesign übergegangen, dass der Anwender zunächst Schwierigkeiten hat, sich zurechtzufinden. JODI beabsichtigt allerdings auch, Interfaces und den Umgang mit Computern schlechthin als vermeintlich zuverlässige Steuereinheiten zu hinterfragen.

Screendesignbeispiele  Screendesign – Form mit Funktion

353

Screendesignbeispiele  Screendesign – Form mit Funktion

Abb. 320 a–d JetBlue Check-in-Terminal (Industrial-, Screen- und Interfacedesign: Masamichi Udagawa, Sigi Moeslinger; Antenna Design New York Inc.; Foto: Ryuzo Masunaga).

JetBlue Check-in-Terminal Selbst bei Automaten gibt es seltene Beispiele, bei denen das Screendesign so gelungen ist, dass ihre Anwendung sogar Freude macht. Die Agentur Antenna Design New York Inc. gestaltete für die Checkin-Automaten von JetBlue ein Screendesign, das Form und Funktion und somit Screen- und Interfacedesign untrennbar miteinander verschmelzen ließ. Eine vergleichbare Qualität gelang dieser Agentur auch bei den Fahrkartenautomaten für die Metro von New York City. Diese hohe Qualität in Form und Funktion war nicht zuletzt deshalb möglich, weil die Agentur sowohl die Hardware, sprich den Automaten, als auch die Software gestaltete und somit alle Eigenschaften des Screen- und Interfacedesigns perfekt aufeinander abstimmen konnte.

Mit dem JetBlue Check-in-Terminal können Fluggäste das Einchecken vor dem Flug selbst durchführen. Bereits der Auftraggeber JetBlue entschied, dass die Gestaltung der Hardware und die des Screen- und Interfacedesigns gemeinsam von einer einzigen Agentur erfolgen sollte, um eine durchgängige Gebrauchstauglichkeit zwischen Hard- und Software sicherzustellen. Antenna Design New York Inc. gelang es, dem gesamten Check-in-Prozess eine reduzierte Eleganz zu verleihen. Das Screendesign dient der Form und der Funktion gleichermaßen und unterstützt das Interface darin, mit dem Anwender in einen Dialog zu treten.

356

362

Screendesignbeispiele  Screendesign – Form mit Funktion

Abb. 324 Apple II, GS OS 5.0.4

Abb. 325 Mac OS 7.0

Abb. 326 Mac OS 9.0

Abb. 327 Windows 1.01 Abb. 328 Windows 3.1

Abb. 329 Windows 2000 Pro

Abb. 330 Amiga OS, Workbench 1.0

1985

1987

1991

1992

1999

2000

363

Screendesignbeispiele  Screendesign – Form mit Funktion

Abb. 331 Mac OS X 10.1 Puma

Abb. 333 Mac OS X 10.6 Snow Leopard

Abb. 332 Mac OS X 10.4 Tiger

Abb. 336 Windows 7

Abb. 334 Windows XP Pro

Abb. 335 Windows Vista

Abb. 337 GNOME 2.2.0 in RedHat 9

2001

2002

2005

2007

2009

Web 1.0  Screendesign für Wissensvermittlung

7 Web 1.0

390

Web 1.0

43 www.google.com/trends

44 http://conferences. oreillynet.com

391

Erst in Folge der Definitionen für Web 2.0 (Mitmach-Internet) und Web 3.0 (Semantisches Internet) ergab sich eine äquivalente Kurzbezeichnung für das ›ursprüngliche‹ World Wide Web. Zur klaren Abgrenzung von Web 2.0 und Web 3.0 kann es Web 1.0 bzw. Dokumenten- oder Download-Internet genannt werden. Als ursprüngliches World Wide Web ist nicht etwa das Internet gemeint. Das World Wide Web (WWW) ist ein Hypertext-System, das über das Internet abrufbar ist. Der Ursprung des Internet kann mit dem 07.02.1958 datiert werden. Das World Wide Web ist die multimediale Plattform des Internets, die 1991 entstand aber erst seit 1993 den Eindruck des WWW prägte, so wie man es heute mit einer Kombination aus Bild-, Text- und audiovisuellen Darstellungen kennt. Diese multimediale Darstellung wurde erst mit dem WWW-Browser Mosaic möglich. Dieses Web 1.0 basiert fast ausschließlich auf (X)HTML-Dokumente und ist in der Regel hierarchisch als Baumstruktur aufgebaut. Die Bezeichnung ›Web 1.0‹ kann einerseits als etabliert gelten, da es bei Google immerhin ungefähr 1.020.000 Treffer für ›Web 1.0‹ gibt. Andererseits scheint kaum jemand mit diesem Begriff zu suchen. ›Google Trends‹43 meldet bei entsprechender Suche: »Your terms – web 1.0 – do not have enough search volume to show graphs.«. Die Trendüberprüfung für ›Web 2.0‹, ›Web 3.0‹ und ›Semantic Web‹ ergibt zwar ein lebhafteres Interesse an diesen Begriffen bei der Suche über Google ( Abb. 354). Das Diagramm zeigt aber deutlich, dass ›Web 2.0‹ eindeutig der am häufigsten gesuchte dieser vier Begriffe ist. Im Vergleich dazu sind ›Web 3.0‹ und ›Semantic Web‹ nur sehr wenig gefragt und dies mit offensichtlich abnehmender Tendenz. Nicht zuletzt durch Tim O’Reilly wird der Begriff ›Web 2.0‹, den er 2004 selbst forcierte und durch seine Konferenzen (Web 2.0 Summit, Web 2.0 Expo, Gov 2.0 Summit)44 bekannt machte, aktiv und unaufhörlich im Diskurs gehalten. Von einem Trend, der wieder vergehen wird, kann aber dennoch nicht die Rede sein. Die Begriffe ›Web 1.0‹, ›Web 2.0‹ und ›Web 3.0‹ lassen sich leicht begründen und sie helfen sehr, die drei wesentlichen Nutzungsarten des Internets zu klassifizieren. Da das Web 2.0 ein aktives Partizipieren ermöglicht und somit das erfüllt, was bereits in den Anfängen vom Web 1.0 erhofft und erwartet wurde, ist das Interesse bzw. die Begeisterung für Web 2.0 eigentlich nicht so sehr verwunderlich. Dass die Begriffe ›Web 3.0‹ bzw. ›Semantic Web‹ bei weitem nicht so stark diskutiert werden, liegt nicht zuletzt daran, dass diese Themen nicht so sehr mit Spaß und Mitmachen in Verbindung gebracht werden können und im Gegensatz zum ›Web 2.0‹ eher dann am erfolgreichsten sind, wenn deren Eigenschaften leise und beinahe unbemerkt ihre Vorteile entfalten. Wurde früher ›Semantic Web‹ teilweise noch mit dem Begriff ›Web 2.0‹ in Verbindung gebracht, so kann man ihn heute eindeutig dem ›Web 3.0‹ zuordnen. Das ›Web 2.0‹ kann aber als Vorstufe des ›Web 3.0‹ bezeichnet werden. Schließlich basiert das Semantic Web auf klar strukturierte Taxonomien (siehe S. 420). So klassifiziert es Daten und Informationen, um daraus Beziehungen und Bedeutungen zu generieren. Das Web 2.0 ist hingegen durch eine freie Partizipation

Web 1.0

392

Abb. 354 Suchstatistik der Begriffe ›Web 1.0‹, ›Web 2.0‹, ›Web 3.0‹ und ›Semantic Web‹ bei Google Trends (www.google.com/ trends).

geprägt, durch die sich eine erheblich geringer strukturierte Folksonomie (siehe S. 424) ergibt. Die daraus resultierenden Annotationen könnten einzeln betrachtet zwar die klare Struktur der Taxonomie des Web 3.0 gefährden, aber als Ergänzung gesehen kann die Folksonomie des Web 2.0 auch eine gute Basis für das Web 3.0 bilden. Der gelenkte Zufall durch die freien Annotationen beim Web 2.0 wird sich bei einer Klassifizierung von Daten und Inhalten und für eine automatisierte Ontologie (siehe S. 519) durch maschinenlesbare Datenmodelle für das Web 3.0 noch als Vorteil erweisen. Zudem wird die kollektive Intelligenz des Mitmach-Internets auch für das Web 3.0 Anwender, Bastler und Entwickler zusammenbringen, die gemeinsam im Sinne des Semantic Web Großes schaffen werden. Der Wunsch nach deutlicher Abgrenzung der Begriffe bzw. nach Differenzierung ist einerseits verständlich, aber im Bezug auf Web 2.0 und Web 3.0 nicht zielführend, sondern er führt nur in die Sackgasse des eigenen Vorstellungsvermögens. Die Übergänge zwischen ›Web 2.0‹, ›Web 3.0‹ und ›Semantic Web‹ werden unscharf bleiben.

Web 1.0

Abb. 355 Diese Grafik zeigt die Interpretation von Nova Spivack, wie er die Entwicklung des Internets sieht. Seine Internetseite www.twine.com zeigt, dass er bereits aktiv im Web 3.0 angekommen ist (Spivack, Nova (09.02.2007). How the WebOS Evolves? In: Minding the Planet. http://novaspivack.typepad. com/nova_spivacks_weblog/ 2007/02/steps_towards_a.html). Eigentlich müssten die Graphen für ›Web 1.0‹, ›Web 2.0‹ und ›Web 3.0‹ ab einem gewissen Zeitpunkt zwar mit Abständen, aber parallel verlaufen.

393

Die Grafik von Nova Spivack (Abb. 355) möchte ich daher eher als Beispiel und nicht als endgültige Feststellung verstanden wissen. Eigentlich müssten die Graphen für ›Web 1.0‹, ›Web 2.0‹ und ›Web 3.0‹ ab einem gewissen Zeitpunkt zwar mit Abständen und jeweils mit unterschiedlicher Dynamik, aber parallel verlaufen, da sich Web 1.0, Web 2.0 und Web 3.0 nicht gegenseitig ersetzen, sondern sich ergänzen und in Anteilen sogar aufeinander aufbauen. Zum Verständnis kann ein historischer Rückblick helfen. Seinen Anfang nahm das Internet 1958 mit dem ARPAnet, benannt nach der Behörde Advanced Research Projects Agency. Sie wurde am 7. Februar 1958 von dem US-amerikanischen Verteidigungsministerium gegründet, um den USA eine Überlegenheit im technologischen Fortschritt zu sichern. Der Umstand, dass die damalige UdSSR am 4./5. Oktober 1957 mit Sputnik den ersten Satelliten in eine Umlaufbahn schickte und von nun an zumindest in der Weltraumfahrttechnologie nicht nur technisch überlegen schien, sondern die USA dem Anschein nach auch noch vom Weltraum aus angreifen konnte, löste in den USA Ängste aus, die seitdem als Sputnikschock bezeichnet werden. Die seit 1972 verwendete Bezeichnung Defense Advanced Research Projects Agency (DARPA) macht den Verteidigungsaspekt noch deutlicher.

Web 2.0 – Das Mitmach-Internet 

398

8 Web 2.0 – Das Mitmach-Internet

Web 2.0 – Das Mitmach-Internet

399

Mit den Möglichkeiten und Eigenschaften, die Web 2.0 bietet, wird die Bedeutung von Interactiondesign noch deutlicher, und bisweilen drängt sich der Verdacht auf, dass zumindest in diesem Fall die Interaktion und deren Gestaltung wichtiger sind, als der Inhalt selbst. Mit den folgenden Beispielen wird deutlich, dass die durch Web 2.0 eröffneten Möglichkeiten eine interaktive Wertschöpfung darstellen, da die Angebote individualisierbar werden und der Anwender bisweilen sogar in die Produktentwicklung einbezogen wird. Die folgenden Beispiele zeigen auch, dass mit dem Interfacedesign zwar der Dialog zwischen Produkt und Anwender ermöglicht wird und ein Image vermittelt werden kann, dass aber erst das Interactiondesign die Schaffung einer Beziehung zwischen Produkt und Anwender eröffnet. Die mit Web 2.0 bezeichnete Weiterentwicklung der Angebote und Möglichkeiten im Internet machen zumindest deutlich, wie wesentlich die Interaktion als solche sein kann.

8.1 Web 2.0 – Soziale Netzwerke

400

Die Bezeichnung Web 2.0 wurde 1999 von Darcy DiNucci geprägt und im Februar 2004 von Dale Dougherty während der Planung einer Konferenz genannt, aus der damals die ›Web 2.0 Conference‹ hervorging, die von Tim O’Reilly initiiert und organisiert wurde und seitdem regelmäßig stattfindet (www.web2con.com). Mit der Versionsnummer soll die Weiterentwicklung des Internets an sich unterstrichen werden. Die Grundlage zur Prägung des Begriffes liegt selbstverständlich an Angeboten, die dem Mitmachprinzip des Web 2.0 bereits vor 2004 gerecht wurden. Hier eine kleine Auswahl:

delicious Wikipedia

mySpace

del.icio.us

Wikipedia ist ein von Jimmy Wales gegründetes Wissensportal, dessen Inhalte von den Nutzern selbst erstellt werden und dessen Artikel durch alle Nutzer bewertet und geändert werden können. Die deutsche Version wurde im März 2001 gegründet.

mySpace bietet seinen Nutzern die Gestaltung eines persönlichen Weblogs und die Teilnahme an einer Online-Community, die sich in erster Linie mit dem Erstellen und dem Hören von Musik beschäftigt und mit der man sich gegenseitig auf Neuerscheinungen und Konzerte hinweist und einlädt. Die Nutzer können Informationen, Bilder, Musik und Videos öff entlich oder einem vordefi nierbaren Kreis an Anwendern zur Betrachtung und zum Herunterladen bereitstellen. mySpace wurde 2003 von Tom Anderson und Chris DeWolfe gegründet und 2006 von Ruport Murdoch für 580 Millionen Dollar gekauft.

del.icio.us dient dazu Bookmarks zu teilen, die einzelnen Links mit Tags zu versehen, um so gezielt Links, Themen und Zusammenhänge fi nden zu können. del.icio.us wurde 2003 entwickelt und Dezember 2005 von Yahoo gekauft.

http://de.wikipedia.org Wikimedia Foundation, San Francisco, USA

www.myspace.com MySpace, Los Angeles, USA

www.del.icio.us.com Yahoo, Sunnyvale, USA

Web 2.0 – Das Mitmach-Internet  Soziale Netzwerke

405

Abb. 356 a–b MASHME – eine Bachelorarbeit von Marc Neumeyer. Sie entstand im Sommersemester 2009 an der MHMK (www.mhmk.de), Betreuung: Prof. Torsten Stapelkamp. Die Arbeit befindet sich im Internet unter: www.mashme.info

Web 2.0 â&#x20AC;&#x201C; Das Mitmach-Internet ď&#x20AC;´ Soziale Netzwerke

Abb. 357 Mit Pipes lassen sich zahlreiche Feeds und andere maschinenlesbare Informationen unterschiedlicher Anbieter miteinander kombinieren, fi ltern, erzeugen und auch eigene Mashups erstellen: http://pipes.yahoo.com/pipes (Siehe S. 411)

Abb. 358 Fundable.org

406

Web 2.0 – Das Mitmach-Internet  Soziale Netzwerke

56 RSS 0.91: www.rssboard.org/rss-0-9-1 RSS 1.0: web.resource.org/rss/1.0/spec RSS 2.0: backend.userland.com/rss blogs.law.harvard.edu/tech/rss RSS 3.0: www.aaronsw.com/2002/rss30 www.rss3.org 57 www.newsgator.com/ Individuals/NetNewsWire 58 www.popurls.com

Abb. 362 Mit xfruits.com kann man sich alle seine RSS-Feeds in einem einzigen RSS-Feed gesammelt ans Mobiltelefon oder als E-mail zusenden oder sich seine RSSFeeds vorlesen lassen. Man kann auch die RSS-Feeds anderer Teilnehmer und die Teilnehmer selbst kennen lernen und zudem erfahren, aus welchen Regionen die Teilnehmer stammen.

412

mit der Version 0.9156. Seit der Version RSS 2.0 wurde dem Dateiformat noch eine Webadresse zugefügt. Auf diese Weise lässt sich jede Nachrichtenmeldung im Internet bzw. jede Datei z. B. PODcasts mit RSS 2.0 referenzieren und abonnieren. Der Vorgang des Abonnierens ist hierbei allerdings nicht mit dem für das Bestellen von Zeitschriften vergleichbar. Mit dem RSS-Feed wird nur festgelegt, was man gezielt empfangen möchte, besser gesagt, welche Inhalte zugeschickt werden sollen, ohne dass man dabei eine postalische Adresse angeben muss. Die Anonymität bleibt somit gewahrt. Um eine Übersicht seiner RSS-Feeds zu erhalten gibt es so genannte RSS-Aggregatoren. NetNewsWire57 ist z. B. eine Software für Mac OS X und Popurls58 ist eine rein webbasierte Anwendung. Um all die verfügbaren RSS-Feeds nach Kategorien auswählen zu können, bietet sich die Internetseite feedage.com an.

8.2 Tagging

418

Mit Tagging bezeichnet man die Annotation von Daten (Texte, Bilder, Töne, Musik, Video etc.). Diese Tags sind wesentliche Bestandteile des Social Web und des Semantic Web, da sich erst mit ihnen valide, sinnvolle und assoziative Verknüpfungen zwischen Personen, Dateien, Medien, Inhalten und Maschinen (Rechnern) ergeben. Das Tagging macht ein Identifizieren von Zusammenhängen oft erst möglich. Mit Jiglu lassen sich sogar ganz automatisch Tagmaps sowie Personen-, Themen-, Link- und Eventlisten unkompliziert in bereits vorhandene Internetseiten einbinden (www.jiglu.com). Außerdem gibt es Portale, die nur dem einen Zweck dienen, Ressourcen mit Annotationen versehen zu können. So lassen sich Begriffe, Inhalte, Dateien, URLs und vieles andere miteinander in Beziehung setzen. 63 64 65 66

http://del.icio.us www.diigo.com www.stumbleupon.com http://digg.com

67 http://books.google.de 68 www.spiegel.de/netzwelt/ web/0,1518,602149,00.html (stand: 19.01.2009; betrachtet am 07.04.09) 69 www.sueddeutsche.de/ computer/942/305907/text (stand: 11.08.2008; betrachtet am 07.04.09)

Die bekanntesten Social Tagging Portale im Internet sind del.icio.us63, diigo64, StumbleUpon65 und digg66. Das Setzen von Tags ohne geregelte Einschränkung erweitert Taxonomien (siehe weiter unten) um den Faktor der Unverbindlichkeit und Mehrfachnennung. So interessant und hilfreich das Tagging ohne Zweifel ist, so können multilinguale Beschreibungen, grammatikalische Unterschiede und der Unterschied zwischen linguistischem und enzyklopädischem Wissen aber auch verschiedene oder irreführende Begrifflichkeiten, Verwechslungen und Fehldeutungen zur Folge haben. Ein wichtiger Vorteil des Tagging z. B. gegenüber der Annotation in Bibliotheken besteht aber gerade darin, dass es frei von Regeln und nicht ausschließlich von (vermeintlichen) Experten erfolgt. Das Tagging spiegelt so viel eher die Meinung der Nutzer im Internet wieder, was nicht zwangsläufig zu einer Trivialisierung führen muss. Das Korrektiv liegt hier oft gerade bei der Vielzahl an Nutzern, so dass Querschläge statistisch nicht von Belang sind. Zudem wollen diejenige, die die Tags setzen, passende Zusammenhänge bzw. Anschlüsse zu entsprechenden Inhalten erreichen und möglichst viele relevante Nutzer auf sich und ihre Inhalte aufmerksam machen. Da die Tags in der Regel von denen gesetzt werden, die die Ressourcen erzeugt haben, ist die Wahrscheinlichkeit, dass diese zutreffen bzw. übergeordnete Assoziationen ermöglichen, oft höher als bei so manchen Annotationen in Karteikästen bzw. Datenbanken von Bibliotheken. Ein Bibliothekar kann unmöglich den Inhalt eines jeden Buches in seiner Gesamtheit erfassen. Und so kann es passieren, dass einige geeignete Schlagworte bisweilen nicht erkannt und nicht gesetzt werden, weshalb sich in klassischen Bibliotheken so einige Bücher befinden werden, die aufeinander verweisen oder in einem geeigneten Zusammenhang – gemeinsam gelesen – neue Erkenntnisse ermöglichen würden, wenn der Zusammenhang nur ersichtlich würde. Aus dieser Perspektive betrachtet wird auch das Potenzial von Google Books67 deutlich, dass bereits sieben Millionen Bücher aus den USBibliotheken68 digitalisiert hat und kostenfrei zum Lesen und Recherchieren zur Verfügung stellt. Google Books ermöglicht nämlich ein automatisches Vergleichen von Buchinhalten. Und es werden nicht nur aktuelle Bücher digitalisiert, sondern auch historische. So haben bereits weltweit 29 Bibliotheken (7 aus Europa) ihre Archive zur Digitalisierung freigegeben69. Zitate werden auf der Internetseite von Google Books bereits automatisch erkannt, auf der Internetseite des jeweiligen Buches vermerkt und es wird dargestellt, ob ein Zitat auch in weiteren Büchern auftritt. So lassen sich im Idealfall Bücher aus einer Zeitspanne von 500 Jahren inhaltlich vergleichen.

Web 2.0 – Das Mitmach-Internet  Taxonomie

Abb. 368 Die 6 Stufen der Bloom’schen Taxonomie im kognitiven Bereich, revidierte Fassung nach Krathwohl. Das Bloom’s Wheel. Die bekannteste Taxonomie sind für den kognitiven Bereich die von Benjamin Bloom (1913–1999) beschriebenen sechs Lernzielstufen, die häufig mit Bloom’sche Taxonomie bezeichnet wird. Er war ein US-amerikanischer Psychologieprofessor, der an der University of Chicago Erziehungswissenschaften lehrte. Die Grafik stammt von John M. Kennedy, http://upload. wikimedia.org/wikipedia/commons/2/24/Blooms_rose.svg (Multilizens mit GFDL und Creative Commons CC-BY 2.5).

422

Web 2.0 – Das Mitmach-Internet  Mitmach-Kampagnen

Abb. 381 Mit JuiceCaster.com kann man alles machen, was man bereits vom Computer aus mit z. B. Anbietern wie Flickr.com, Twitter.com und Facebook.com machen konnte, nur diesmal ausschließlich mobil.

437

8.6 Twitter

438

Jack Dorsey und Biz Stone entwickelten Twitter im März 2006 und starteten Juli 2006 mit einer internen Nutzung bei obvious (http://obvious.com). In einem Interview vom 15.Oktober 2007 mit Eric Enge beschreibt Jack Dorsey sehr ausführlich seine Beweggründe: www.stonetemple.com/articles/interview-jack-dorsey.shtml Dieser Dienst bietet den Anwendern die Möglichkeit, mit maximal 140 Zeichen themenbezogene Nachrichten zu übermitteln. Es ist vorgesehen, dass man sich zu einem Thema oder für eine bestimme Gruppierung (Agentur, Projektteilnehmer, Stammtisch etc.) bei Twitter anmeldet. Nun können Nachrichten versandt werden, ähnlich wie es mit einer SMS möglich ist, nur mit dem Unterschied, dass endlos viele Abonnenten, die sich zu dem jeweiligen Thema angemeldet haben, gleichzeitig und unmittelbar informiert werden können. So kann man z. B. zu den Schlüsselthemen des eigenen Blogs oder der eigenen Internetseite oder denen seiner Kunden jeweils einen oder mehrere Accounts bei Twitter einrichten und all jene Interessenten, die die Nachrichten mit entsprechenden Erwartungen abonniert haben, regelmäßig mit einer ›Twitter-SMS‹ über die aktuellen themenzentrierten Veränderungen, die sich im Blog oder auf der Website ereignet haben, informieren. Mit sehr geringem Aufwand kann so z. B. auf für die Empfänger zugeschnittenen Ausstellungen, Kongresse oder Dienstleistungen hingewiesen werden. Die Twitterbotschaften können auch per SMS empfangen werden, was den besonderen Reiz ausmacht. So können mit einer einzigen Nachricht so viele SMS ausgelöst werden, wie es Follower gibt. Barack Obama hat bereits über 300000 Followers. Bei Twitter.com sind z. B. für die Internetseite www.designismakingsense.de die Begriffe ›designismaking‹, ›Interfacedesign‹, ›Screendesign‹, ›Produktdesign‹ und ›Medientheorie‹ eingerichtet worden. Die URL sieht dann z. B. wie folgt aus: www.twitter.com/designismaking Sobald die Internetseite www.designismakingsense.de ihren Betrieb aufgenommen hat, können Interessenten mittels Twitter-Abonnements auf unterschiedliche Aktualisierungen gleichzeitig und themengenau hingewiesen werden. Ab einer gewissen Anzahl an Followers wird es schwierig, zumindest einigen seiner Followers ebenso zu folgen. Damit das Nutzen von Twitter nicht zu zeitaufwändig wird, sondern eine effektive Informationsquelle bleibt, sollte man alle seine Twitter-Aktivitäten z. B. über tweetdeck.com verwalten. Die Nutzung von Tweetdeck setzt die Installation von Adobe AIR voraus (www.adobe.com/de/products/air). Mit twitterdeck lassen sich seine Twitter-Kontakte in Gruppen aufteilen und sortieren. Zudem ist die Suche nach Themengebieten oder Schlagwörtern, ›Hashtags‹ genannt, dort sehr praktisch. Mit Tweetdeck lassen sich zudem mehrere Twitter-Accounts gleichzeitig nutzen. Tweetdeck lässt sich außerdem direkt mit seinem iPhone aktualisieren und synchronisieren. Es gibt eine ganze Reihe von Diensten, die einem bei der Nutzung der Möglichkeiten von Twitter behilflich sein können. Um z. B. aktuelle Weblogeinträge über Twitter bekannt geben zu können, bietet es sich an, bei Twitterfeed.com eine automatische Weiterleitung einzurichten, indem man dort seinen Twitter-Account und den Blog-Feed einträgt. Wer zu seinen Wunschthemen bei Twitter informiert werden möchte, kann mit Twollow.com diese suchen und sich gleich automatisch bei allen passenden Micro-Blogs eintragen lassen. Wer während der Nutzung des Firefox-Browsers über aktuelle Einträge bei seinen bevorzugten Twitter-MicroBlogs informiert sein möchte, sollte sich das Add-on Twitterfox installieren.

8.8 Web 2.0 – Gefahreneinschätzung

446

Das Mitmach-Internet hinterlässt bisweilen den Eindruck, dass es üblich oder gar erforderlich sei, persönliche Daten zu hinterlassen und dass man als Nutzer den Diensteanbietern bzw. Serverbetreibern blind vertrauen kann bzw. muss. Ein unkontrollierter oder gar krimineller Missbrauch der Möglichkeiten von Web 2.0 Angeboten kann sowohl vom Serverbetreiber als auch von den Nutzern der Angebote ausgehen. So lässt sich z. B. Twitter.com offensichtlich von Seiten der Nutzer auch für kriminelle Machenschaften nutzen. Das 304. Military Intelligence Batallion stellte in einer Studie fest, wie GPS-basierte Location Based Services in Verbindung mit Twitter.com für die Koordinierung von Anschlägen z. B. von Terroristen der al Qaida genutzt werden kann. GPS-Koordinaten können über das ExIF-Format (siehe S. 497) in Bilddateien gespeichert und so zusammen mit visuellen Eindrücken digital weitergereicht werden. Da diese Studie als »For official use only« ausgewiesen ist, kann sie in diesem Buch nur erwähnt, aber nicht publiziert werden. Sie steht aber in einem offiziellen Verzeichnis der amerikanischen Behörden zum Download bereit: www.fas.org/irp/eprint/mobile.pdf Auch wenn Entwicklungen bisweilen beängstigende Züge annehmen können, sollte nicht übersehen werden, dass sich sehr vieles missbräuchlich anwenden lässt, dessen Gebrauch oder Weitergabe deswegen aber nicht gleich vermieden oder gar untersagt werden sollte. Die seit vielen Jahren diskutierte Medienkompetenz gilt eben gleichermaßen für Entwickler wie für Anwender. Jede Anwendung setzt mehr oder weniger Verantwortungsbewusstsein und Reife voraus. Durch fehlende Erfahrung oder durch mutwillige Absicht kann man sich und andere schließlich bereits mit Alltagsgegenständen wie einem Küchenmesser oder einem Auto gefährden. Und zu den analogen Gebrauchsgegenständen sind in den letzten 15–20 Jahren zahlreiche virtuelle, oft onlinebasierte Produkte hinzugekommen. Wenn man bedenkt, dass 1962 das erste grafische Computerspiel (Spacewar! von Steve Russell) vorgestellt wurde, kann man sogar im Umfeld entsprechender Spezialisten von einer fast 50jährigen Nutzung virtueller Produkte und Dienstleistungen ausgehen. Dennoch fehlt es beim Gebrauch der Möglichkeiten des Internets und der Mobiltechnologie in allen Bildungs- und Altersschichten noch immer an der erforderlichen Sorgfalt – sich und anderen gegenüber. Anstatt nach dem gesunden Menschenverstand zu urteilen und auch einmal vorsichtig zu sein oder den Mut zu haben Misstrauen zu zeigen, wird manchmal lieber von der Gefahr gesprochen, die angeblich von den Medien ausgeht, anstatt sich darüber bewusst zu werden, dass sich die meisten nur selbst gefährden, indem sie sich nicht hinreichend informieren oder lieber ihrer Gier oder Faulheit nachgeben. Gewiss gibt es Täuscher und gar Kriminelle, die mit Verlockungen im Internet das schnelle Geld machen. Dies gelingt ihnen aber in erster Linie nur, weil sie genug Mitspieler finden, die geradezu freiwillig und bereitwillig die Rolle des Verlockten übernehmen. Wenn man die ›Opfer‹ nur aus dem Blickwinkel eines Betroffenheitslyrikers betrachtet, verfälscht und verwässert man nur unnötig den Blick auf die eigentlichen Zusammenhänge und die Mitverantwortung vieler Nutzer. Im Leben außerhalb des Internets kann man Trickdieben zum Opfer fallen, da sie darin geübt sind, die Wahrnehmung ihrer Opfer zu täuschen. Diese Opfer sind demnach in der Regel unschuldig daran, in solch eine Lage geraten zu sein. Dasselbe gilt für jene, die Opfer von verborgenen Attacken durch Viren und Trojanern werden. Hier helfen selbst hoher Sachverstand und aktive Vorsichtsmaßnahmen

8.9 Web 2.0 – Journalismus

97 www.sueddeutsche.de/ computer/28/426784/text 98 www.faz.net; Weblogs – Immer schön sachlich bleiben, 12. Dezember 2007 99 www.heise.de/tp/r4/ artikel/26/26825/1.html 100 www.euroblog2007.org

101 http://pewresearch.org

463

Bereits die Möglichkeiten des Web 2.0 und gerade die Eigenschaften des Web 3.0 könnten das Publizieren von Nachrichten noch weiter demokratisieren und professionellen Journalisten Konkurrenz bescheren. Ob dadurch die journalistischen Aufgaben bzw. die Qualität von Nachrichten grundsätzlich trivialisiert werden, lässt sich nicht ausschließen, sollte aber auch nicht gleich unterstellt werden. Die Süddeutsche berichtete auf ihrer Internetseite am 07.12.2007 unter dem Titel Die neuen Idiotae – Web 0.0 eher mit Bedenken97 und die FAZ98 folgte ihr mit einem unterstützenden Artikel. Darauf wurde in verschiedenen Weblogs darüber diskutiert, ob das Feuilletion der Frankfurter Allgemeinen und die Journalisten der Süddeutschen Zeitung überhaupt noch über aktuelle Ereignisse nachdenken und diese kommentieren können. Telepolis konterte z. B. mit dem Artikel Der Süddeutschen wird das Internet zuviel99. Dass die FAZ und die SZ Journalisten Ende 2007 nicht repräsentativ waren, konnte die Euroblog 2007-Studie100 bereits im März 2007 unter Beweis stellen. Laut dieser Studie nutzte in den 24 untersuchten Ländern jeder zweite PR-Verantwortliche RSS-Feeds zur Beobachtung von Weblogs, während die FAZ und die SZ Journalisten womöglich mit Blick auf ihre Zettelkästchen und Papierarchive noch damit beschäftigt waren, herauszufinden, was wohl RSS bedeutet. So mancher Journalist träumt weiterhin davon, der wichtige Gatekeeper zu sein, möchte aber vor Veränderungen verschont bleiben. Wer sich zu wichtig nimmt und glaubt, zu Ende gelernt zu haben, wird Veränderungen ab einer bestimmten Zeit zwangsläufig als Bedrohung empfinden, weil sie den eigenen Realitätsverlust direkt deutlich machen. Nicht zuletzt deswegen übernehmen Blogger eher eine qualitätsfördernde Aufgabe, da sie durch ihre Konkurrenz die studierten Kolleginnen und Kollegen zu Höchstleistung bringen. Bereits jetzt kann jeder über Blogs und Soziale Netze selbst Inhalte publizieren. Die Akzeptanz bei den Lesern entscheidet über den Erfolg. Über Qualität wird differenzierter entschieden. Der Jahresbericht 2009 des Pew-Forschungsinstituts101 zur Lage der US-Medien vermeldete im Rahmen des ›Project for Excellence in Journalism‹, dass den USBürgern Nachrichten zwar wichtig sind, sie allerdings immer weniger bereit sind, dafür zu bezahlen. Laut Bericht informierten sich 2008 erstmals mehr Amerikaner im Internet als in den gedruckten Nachrichten. Die in den Blogs publizierten Inhalte werden immer mehr Leser anziehen, die den klassisch journalistischen Erzeugnissen teilweise verlorengehen. Die wesentliche Kompetenz der Journalisten, aus den großen Informationsmengen der Presseagenturen und den lokalen und internationalen Ereignissen zu selektieren, kann durch kollaborative Systeme wie Digg, Friendfeed, Rivva, Techmeme und Twitter nun von jedem ohne spezielle journalistische Ausbildung praktiziert werden. Die klassischen Medien werden sowohl Leser bzw. Nutzer als auch an Reichweite verlieren. Die Werbetreibenden werden ihre Werbung teilweise in die neuen Blogs und Sozialen Netze verlagern. Die Frage ist nur, wie mit rein technologischen Mitteln und raffinierten Algorithmen eine Bewertung und Beurteilung von Meinungen, Zusammenhängen und Fakten erfolgen soll.

8.10 Google – Ein Mitmach-Monopol?

Marktanteile der SmartphoneBetriebssysteme (3. Quartal 2008/Quelle: Canalys): • Symbian: 47% • Apple: 17% • RIM (BlackBerry): 15% • Microsoft: 14% • sonstige: 7%

103 http://maps.google.de

466

Wer zahlreiche Angebote von Google nutzt, seine E-mails über Gmail verschickt, seine Termine und Adressen über sein individuelles Googleportal iGoogle verwaltet und ausschließlich über Google im Internet sucht oder sogar den Googleeigenen Browser Chrome nutzt, gibt einem einzigen Anbieter einen sehr umfassenden Überblick über seine Interessen, Gewohnheiten, Tages- und Bewegungsabläufe. Google wird sogar einschätzen können, welche Krankheiten eine Person hat. Google rühmt sich bereits, eine Grippewelle und deren geografische Verbreitung anhand der Suchdaten der erkrankten Nutzer nach Grippemedikamenten voraussagen zu können. Dies klingt einerseits erschreckend, lässt aber auch das Positive an diesem Potenzial erahnen. Google hat ein Problem. Google ist darauf angewiesen, möglichst personenbezogene Hinweise und Daten über die Suchenden zu erhalten, um zu vermeiden, bei den Treffern nur noch den Massengeschmack anzuzeigen. Da Google bereits zahlreiche Portale aufgekauft hat und immer mehr neue Dienste entwickelt, verweisen immer mehr Internetangebote von Google gegenseitig aufeinander. So bestehen viele Suchtreffer aus Einträgen der Bildersuche von Google, den GoogleNews, dem von Google aufgekauften Videoportal YouTube oder der Buchsuche von Google. Außerdem fehlt Google eine Echtzeitsuche. Deshalb ist es nicht verwunderlich, dass sich Google momentan um Twitter bemüht. Laut Techcrunch.com befindet sich Google mit Twitter in Übernahmeverhandlungen (stand: 03. Mai 2009). Wer individuelle Treffer wünscht und sich nicht mit massenkompatiblen Standardtreffern zufrieden geben möchte, wird in Zukunft entweder auf spezialisierte Suchmaschinen zurückgreifen oder Google möglichst viele Daten über sich preisgeben müssen. Das heißt, je mehr Angebote man von Google nutzt, umso wahrscheinlicher wird es, über die Googlesuche relevante Treffer zu erhalten, die sich wirklich auf die eigenen, individuellen Interessen beziehen. Ganz nebenbei kann Google dann auch noch präzisere Werbung anbieten, dadurch seine wirtschaftliche Position ausbauen, mehr Geld verdienen und weiter wachsen. Dies sind wesentliche Gründe, weshalb Google ein eigenes Betriebssystem – das Android – für Mobiltelefone herausgebracht hat. Google hat gleich das passende Mobiltelefon G1 dazu entwickelt, damit sich das Android trotz großer Konkurrenz durch Apple, Microsoft, Symbian und Blackberry verbreiten kann. Bei aller Sammelwut behauptet Google nach wie vor, keine Bewegungsprofile zu erstellen. Aber wer kontrolliert das? Schließlich werden die Daten, die Google von jedem Nutzer sammelt, noch wertvoller, wenn Google weiß, wo sich ihre Nutzer aufhalten, wie lange sie dort verbleiben und was sie dort machen oder gar kaufen. Es ist somit kein Zufall, dass Google mit Latitude einen neuen Dienst entwickelt hat, mit dem sich die Nutzer des G1 Mobiltelefons anzeigen lassen können, wo sich die Freunde gerade aufhalten. Noch geschieht dies nicht automatisch. Noch müssen auch die Freunde ein G1 besitzen und sich bei dem Dienst anmelden. Google macht sehr deutlich, dass das Mitmach-Internet dann am besten funktioniert, wenn möglichst viele mitmachen. Die dadurch resultierenden Vorteile sind nicht zu leugnen. Aber dennoch bereitet es Unbehagen, wenn Google selbst die Krankheiten, den Krankheitsverlauf und viele individuelle, persönliche Eigenschaften verfolgen und speichern kann. Da Google Maps103 als MashUp bereits von zahlreichen Web 2.0 Anbietern eingesetzt wird, können die Bewegungsmuster der Nutzer nicht nur durch Google Maps selbst, sondern auch mit Hilfe der vielen MashUps präzisiert

Web 3.0  Google – Ein Mitmach-Monopol?

9 Web 3.0

476

Web 3.0

477

Am 5. Juni 2008 definierte der Leiter des Deutschen Forschungszentrums für Künstliche Intelligenz (DFKI) Professor Wolfgang Wahlster auf dem 3. Dresdner Zukunftsforum die Zukunftsversion des Internets mit den Worten: »Das Web 3.0 ist das Web 2.0 plus semantische Technologien«. Dies ist zwar eine sehr vereinfachte Darstellung, aber gerade deshalb sehr hilfreich. Eine scharfe Trennung zwischen Web 2.0 und Web 3.0 ist genauso wenig möglich wie zwischen Web 1.0 und Web 2.0. Wie bereits beschrieben, bilden Web 2.0 und Web 3.0 keine ersetzenden Alternativen zum Web 1.0, sondern nur Ergänzungen zum Kernangebot und zu den Möglichkeiten des World Wide Web, wie es sich seit 1993 darstellt. Die Versionsnummern helfen zudem, deutlich zu machen, über welchen Technologiestatus bzw. über welche Möglichkeiten diskutiert wird.

9.1 Semantische Suche

111 Foundations of the Theory of Signs, Charles William Morris, The University of Chicago Press, 1938.

478

Semantik (griechisch semantikos: zum Zeichen gehörend) steht allgemein für die Lehre von den Zeichen. Wobei mit ›Zeichen‹ nicht nur visuelle Zeichen an sich, sondern auch die Beziehungen gemeint sind, die Zeichen zwischen sich, ihren Anwendern/Betrachtern und ihren Interpretationen ermöglichen. Charles William Morris (1901–1979) ordnete Semantik als Teilbereich der Semiotik (griechisch semeion: Kennzeichen), der allgemeinen Lehre von den Zeichen, zu und etablierte so den Begriff Semantik in der Semiotik111. Er prägte die Aufteilung der Semiotik in: 1. Semantik – die Beziehung zwischen dem Zeichen und dem Bezeichneten 2. Pragmatik – die Beziehung zwischen dem Zeichen und seinem Verwender 3. Syntax – die Beziehung zwischen den Zeichen selbst Zeichen treten vielerorts auf, werden aber oft nicht mit derselben Bedeutung und zudem bisweilen in vollkommen unterschiedlichen Kontexten genutzt, selbst wenn sie sich sehr ähnlich sind. Ein Kreuz hat in einer Kirche, in roter Farbe auf weißem Grund, auf einer Landesfahne, auf einem Warnhinweis oder auf einem Verbotsschild jeweils absolut unterschiedliche Bedeutungen. Die jeweilige Übersetzung bzw. Interpretation bildet sich für den Empfänger aus seiner Wahrnehmung, den Konventionen oder seiner Erfahrung, aber auch aus dem Kontext bzw. der Situation von Sender und Empfänger (siehe semiotisches Modell). Der Ursprung einer modernen Definition von Semiotik geht eigentlich von Charles Sanders Peirce (1839–1914) aus. Es gibt aber neben seiner auch noch die linguistische Sicht und auch noch weitere Interpretationen der Zeichentheorie. Bezogen auf das Internet steht Semantik für die Absicht, Daten durch zusätzliche Hinweise in Informationen zu wandeln und diesem Ergebnis durch das Darstellen innerhalb bestimmter Zusammenhänge eine Eigenschaft bzw. Bedeutung zu geben und so wiederum neue Zusammenhänge und/oder Assoziationen zu ermöglichen (siehe z. B. : www.semantic-mediawiki.org).

Syntax Zeichen

Zeichen

Bedeutung

Benutzer/ Situation

Pragmatik

Semantik Abb. 393 Semiotik nach Charles William Morris, 1938.

Wahrnehmung

Erfahrung

Konzept

Erfahrung Erfahrung

Abb. 394 Das Semiotische Modell.

9.2 Open Data

117 www.zemanta.com 118 www.linkedfacts.com

119 http://dig.csail.mit.edu/ 2007/03/01-ushouse-future-ofthe-web.html

120 http://drupal.org/project/ semanticsearchc

Abb. 399 Mit dieser Grafik demonstrieren die Entwickler von Zemanta, welchen Bereich der Recherche ihr Plug-In übernimmt (www. zemanta.com).

486

Um Sinnzusammenhänge der einzelnen Daten maschinenlesbar erkennen und auswerten zu können, müssen die verfügbaren Daten entweder aufeinander referenzieren oder Metadaten in sich tragen, die ein Identifizieren von Zusammenhängen ermöglichen. Zudem sind offene Standards erforderlich, damit sich ein solches, frei verlinkendes System überhaupt und geradezu von selbst bilden kann. Dieses Zusammenwirken offener Daten wird unter den Bezeichnungen Open Data bzw. Open Dataset zusammengefasst. Das Open Dataset bildet sich aus den Daten zahlreicher großer Datenbanken und vieler kleinen Quellen. So kann man z. B. mit Zemanta117 bzw. mit LinkedFacts118 Inhalte semantisch anreichern lassen. Beim Schreiben von Blogs (z. B. über Blogger, Wordpress etc.), von Inhalten in ContentManagementSystemen (z. B. Drupal) oder in Plattformen wie Myspace bietet Zemanta passende Informationen aus anderen Plattformen (Amazon, Facebook, Wikipedia, YouTube etc.) an und schlägt zudem korrespondierende Tags vor. LinkedFacts versucht Hintergrundinformationen zu den in Artikeln erwähnten Inhalten aufzuspüren und darzustellen. Dazu nutzt es die Semantikfunktionen von OpenCalais.com (siehe unter SemanticProxy.com auf S. 488). Open Datasets sind nicht durch Dokumente oder durch HTML-Links definiert, sondern durch Ressourcen bzw. durch ein so genanntes RDF (Resource Description Framework, siehe unter RDF auf S. 512). RDF Links beinhalten semantische Informationen zu der verlinkten Ressource. Tim Bernes-Lee umschreibt es so: … »RDF which is to data what HTML is to documents, and the Web Ontology Language (OWL) which allows us to express how data sources connect together …«119 Personennamen können z. B. mit den Metadaten zu Exponaten oder Buchtiteln verbunden sein, Orte mit den Namen bekannter Personen, Produktbezeichnungen mit ihren Designern, Musikstile mit Musikern etc. Die Anwendung von RDF macht z. B. auch bei Content Management Systemen (CMS), wie z. B. Drupal120, und bei Customer Relationship Management (CRM) Sinn, da die Absicht dieser Systeme schon immer darin bestand, Dateien und personenbezogene Informationen in einen Sinnzusammenhang zu bringen und entsprechend darzustellen.

9.3 FOAF – Friend Of A Friend 132 www.foaf-project.org FOAF-Spezifikationen: http://xmlns.com/foaf/0.1

133 www.ldodds.com/foaf/ foaf-a-matic.de.html

Weitere Informationen über FOAF: • Ein Beispiel einer foaf:Person, konzipiert nach dem FOAFSchema: www.semantic-web.at/ people/blumauer/card#me • Eine kurze aber umfassende Zusammenfassung über FOAF: http://was-ist-foaf.de • Eine umfangreiche, aber auch hilfreiche Linkliste zum Thema FOAF: http://delicious.com/danbri/ foaf

491

Mit dem FOAF-Community-Projekt132 wird bereits der Versuch unternommen, Personen zu motivieren, ›Facetten‹ ihrer Persönlichkeit, persönliche Daten und Informationen über sich, ihre Vorlieben, Hobbies, Kontakte, URLs, sozialen Beziehungen in RDF-Dateien (siehe S. 512) maschinenlesbar zu veröffentlichen. Mit FOAF können Personen, deren Eigenschaften und die Interaktion untereinander beschrieben werden. Ausgearbeitet wurde die Idee im Jahr 2000 von den britischen Software-Entwicklern Libby Miller und Dan Brickley. So können z. B. Personen mit den von ihnen publizierten Büchern und den entsprechenden Inhalten in Zusammenhang gebracht werden, inklusive der Personen, die im Buch erwähnt oder zitiert werden. Dasselbe gilt für Projekte und deren Teammitglieder. Die z. B. mit Foaf-a-matic133 erstellte FOAF-Datei kann auf unterschiedliche Weise für Suchmaschinen auffindbar publiziert werden. Benennen Sie dazu die Datei mit dem Namen ›foaf.rdf‹ und speichern Sie sie im oberen Verzeichnis Ihrer Internetseite oder zeigen Sie den HTML Link Tag zur FOAF Beschreibung, so wie Blogger auf ihre RSS Einträge verweisen: <link rel="meta" type="application/rdf+xml" title="FOAF" href="foaf.rdf" />

Eine kleine Auswahl bisheriger FOAF-Anwendungen Piggy Bank, eine Firefox-Erweiterung, um Informationen im Web automatisch zu sammeln und in Beziehung zu setzen

http://simile.mit.edu/wiki/Piggy_Bank

livejournal.com nutzt FOAF für die eigene Community

www.livejournal.com/community/ communityname/data/foaf

Mit qdos seinen Status in der digitalen Welt selbst definieren

http://qdos.com http://qdos.com/apps http://foaf.qdos.com

Flock basiert auf Mozilla und ist ein Browser, der den FOAF-Gedanken konsequent auf das Austauschen von Daten und Informationen bezieht

http://flock.com

Microbloggingdienst Identi.ca von Control Yourself, Inc.

http://identi.ca

Generatoren zum Erstellen eigener FOAF-Dateien Foaf-a-matic

www.ldodds.com/foaf/foaf-a-matic.de. html

FOAF-a-Matic Stufe 2

www.ldodds.com/wordtin/ Wiki.jsp?page=FOAFaMaticMark2

FoaFMe

http://foafme.opendfki.de

FOAF maker

http://peoplesdns.com/make

9.6 Metadaten-Formate

138 www.ietf.org/rfc/rfc2426.txt www.imc.org/pdi/vcardwhite.html www.w3.org/TR/vcard-rdf, www.w3.org/2006/vcard/ns 139 www.ietf.org/rfc/rfc2445.txt www.kanzaki.com/courier/ ical2rdf http://torrez.us/ics2rdf 140 www.ietf.org/rfc/rfc4287.txt www.atompub.org/rfc4287.html 141 http://zeitkunst.org/bibtex/0.1

142 www.w3.org/2001/sw 143 www.iptc.org 144 www.iptc.org/IIM

495

Es gibt bereits spezifizierte und standardisierte Metadaten-Formate, die teilweise als gesonderte Dateien, als Export- und Verteilungsformate alltäglichen Einsatz z. B. für digitale Adressbücher und Kalender finden und sich zudem für die Nutzung in semantischen Netzen einsetzen lassen, sobald sie maschinenlesbar sind. Es folgen nun einige Beispiele, wie sich Dateien mit Metadaten beschreiben lassen und mit welchen Verfahren diese Informationen ausgelesen werden können. Die bekanntesten Formate sind vCard138 für die Adressenverwaltung, iCalendar139 für die Kalenderverwaltung, Atom (The Atom Syndication Format)140, vergleichbar mit RSS, und BibTeX141, ein in LaTeX entwickeltes Format zur Verwaltung bibliographischer Daten. Bei einer semantischen Suche geht es auch darum, Hinweise, Anregungen und Assoziationen zu erhalten und nicht nur um komplett ausformulierte und fertig aufbereitete Daten, Fakten oder Informationen. Die Hinweismöglichkeiten, die z. B. ein RSS-Feed bietet, sind bereits ein wichtiger Bestandteil des Web 2.0 (siehe S. 411), der sowohl zum Mitmachen anregt, als auch durch die vermittelten Inhalte dazu anregen kann, zusätzliche, assoziativ gebildete Zusammenhänge erkennbar zu machen. RSS ist ein wichtiges Element der Entwicklung zum semantischen Internet, denn neben der Möglichkeit, Informationen zu abonnieren, bieten das RSS-Format und die damit verbundenen Feeds sehr einfach anwendbare Internetdienste, die die Partizipation steigern. RSS ist außerdem eine von mehreren XML-Sprachen und XML die geeignete Basis für ein Semantisches Internet. XML allein ist für eine semantische Suche aber nicht ausreichend, da es nur die Syntax definiert, aber nicht die Semantik. Außerdem ist XML hinsichtlich einer maschinellen Auswertung nicht eindeutig. Deswegen wurde unter anderem das Datenmodel RDF entwickelt, das maschinenverarbeitbare Beschreibungen ermöglicht, die einheitlich und standardisiert sind. Wenn Namen, Orte, Straßen etc. bestimmten Feldern in einer Datenbank oder ihnen bestimmte Bedeutungen zugewiesen werden können, kann die aus den daraus definierten Zusammenhängen gebildete Faktensammlung eher als Information und nicht nur als lose Datensammlung identifiziert werden. Neben den bereits genannten gibt es noch weitere, bereits etablierte Standards zur geordneten Datenerfassung. Die Metadaten, die man bereits jetzt z. B. mit dem XMP-Standard (Extensible Metadata Platform Standard) in seinen Text- und Bild-Dateien abspeichern kann, werden für eine semantische Suche im Internet genauso zur Anwendung kommen können, wie z. B. Metadaten, die sich mit dem ID3-Tag-Standard in Audiodateien und ab dem Standard MPEG-7 in Videodateien nutzen lassen. Die Metadaten stehen also längst zur Verfügung bzw. nehmen immer mehr zu. Nun müssen diese Formate aber noch als automatisch auswertbare Datenmodelle bzw. als eine Standardsprache bereitgestellt werden, mit der für eine semantische Suche Informationen repräsentiert und ausgewertet werden können. XMP (Extensible Metadata Platform) trägt den Hinweis auf Metadaten bereits im Namen. Dieses Format wurde von Adobe auf der Grundlage der Semantic Web Initiative des W3C142 entwickelt und ist ebenso wie RSS eine XML-Sprache. Zuvor unterstützte Adobe IPTC (IPTC-NAA-Standard)143, der seit 1990 als IIM (Information Interchange Model)144 definiert ist und mit dem nahezu Ähnliches möglich ist wie mit XMP. Da Adobe diesen Standard nicht mehr unterstützt, ist wohl damit zu rechnen, dass sich IPTC als Standard nicht mehr halten wird. Adobe konnte durch seine marktbeherrschende Position XMP quasi zum Standard erheben.

9.7 Microformats 174 http://microformats.org http://mikroformate.de/2006/ 12/16/einfuehrung-in-mikroformate http://mikroformate.de/grundlagen/s5/ 175 hCard creator: http://microformats.org/code/hcard/creator http://microformats.org/wiki/ hcard-authoring 176 hCalendar creator: http:// microformats.org/code/hcalendar/creator http://microformats.org/wiki/ hcalendar 177 http://microformats.org/ wiki/hatom 178 hReview creator: http:// microformats.org/code/hreview/ creator http://microformats.org/wiki/ hreview 179 hResume creator: http:// hresume.weblogswork.com/ hresumecreator http://microformats.org/wiki/ hresume

508

Damit kein externes Dateiformat erforderlich ist und die Daten maschinenlesbar im Internet ausgewertet werden können, gibt es Formate, bei denen die Daten in (X)HTML bzw. XML eingebettet werden können. Diese werden Microformats174 genannt. Zur Unterscheidung wird den Bezeichnungen einiger Formate ein kleines ›h‹ vorangestellt. Ihre Grundfunktionen bleiben dieselbe, sind dann aber wegen der Einbettung in (X)HTML bzw. XML maschinenlesbar. Sie lauten dann z. B. hCard175, hCalendar176, hAtom177, hReview178, mit dem es möglich ist, Dienstleistungen, Waren, Bücher, Filme etc. zu bewerten und hResume179, mit dem Firmenhistorie, Lebensläufe, Fähigkeiten und Expertenwissen dargestellt werden kann. Die Einbindung von Microformats in HTML erfolgt über das class-Attribut: <div class="Name des Microformates">...</div>

Für das Microformat hCard gilt dann: <div class= "vcard">...</div>

Um die für eine hCard relevanten Daten angeben zu können, sind weitere HTMLElemente (bspw. <span> oder <p>) zu definieren, die zur jeweiligen Unterscheidung in unterschiedliche HTML-Elemente angegeben werden können. Dabei ist die entsprechende Styleklasse (z. B. ›adr‹) zu beachten. Ähnliches gilt für die weiteren Microformats. <address class="vcard"> <span class="adr"> <span class="fn org">maas+co</span><br /> <span class="street-address">Münsterer Strasse 55</span><br /> <span class="postal-code">51063</span> <span class="locality">Köln</span> </span><br /> Telefon: +49 (0)221 6406741<br /> Fax: +49 (0)221 6406774<br /> E-Mail: <a href="mailto:info@getit.de">stapelkamp@maas-co.com</a><br /> Web: <a href="http://www.maas-co.com/">www.maas-co.com</a> </address>

Bereitstehende Elemente-Definitionen für hCard: "country-name" "email" "fn" "locality" "org" "postal-code" "region" "street-address" "tel" "url" 180 http://technorati.com/ contacts

= Land = E-Mail = vollständiger Name (Vor- und Nachname) = Stadt = Firma = Postleitzahl = Bundesland = Straße inkl. Hausnummer = Telefonnummer = Websiteadresse

Technorati bietet einen hCard-to-VCF-Service180 zur Generierung einer Visitenkarte im VCF-Format aus dem hCard-Microformat.

9.9 OWL – Web Ontology Language – WOL

205 www.w3.org/TR/ owl-semantics

519

Ergänzend zu den Informationen einer Ressource, die das RDF Datenmodell bereitstellt, können mit OWL die Klassen und Relationen beschrieben werden. Die im RDF beschriebenen Informationen sind in einer genau festgelegten Struktur abgelegt, wodurch diese mithilfe von OWL (Web Ontology Language)205 maschinell erfasst und in Beziehung gebracht werden können. Ein WWW-Dokument lässt sich in drei Ebenen von Mark-up-Sprachen einteilen, denen jeweils konkrete Funktionen zugeordnet werden können OWL –

Inhalte

XML

Struktur

–

HTML –

206 http://lists.w3.org/Archives/ Public/www-webontwg/2001Dec/ 0169.html

Form

Semantisches Web Syntaktisches Web

OWL ist eine Sprache, die der Modellierung von Ontologien dient und daher in wichtigen Anteilen zur Entwicklung des Semantischen Internets beiträgt, indem es komplexe Funktionen zum Beschreiben von Beziehungen und Zusammenhängen bietet. Eigentlich hätte das Akronym WOL heißen müssen. Der Vorschlag ›OWL‹ basiert offensichtlich auf einer E-mail von Tim Finin, dem die Bezeichnung für Eule (engl. Owl) besser gefiel, da die Eule für Weisheit steht und sich auch gut für eine Darstellung als Logo eignet206. Das ›O‹ im Akronym steht für Ontologie. Der Begriff Ontologie (griech. »on«: »sein«; »logos«: »Lehre«) stammt aus der Philosophie. Bei Aristoteles wird mit diesem Begriff das Studium der Wissensrepräsentation und des Schlussfolgerns bezeichnet. In der Informatik wird der Begriff ähnlich genutzt. Dort stellt Ontologie nicht nur ein Datenformat dar, sondern eine Repräsentation von Wissen und in dem Zusammenhang ein formal definiertes System von Konzepten und Relationen. Semantic Web Ontologien werden aus einer Taxonomie und diversen Regeln gebildet, die ein Aufdecken und Darstellen von Zusammenhängen und Kontexten auf Basis maschinenlesbarer Syntaxen ermöglichen. Mit OWL können Begriffe, Eigenschaften und Instanzen differenziert definiert werden, denen wiederum die im RDF formulierten Inhalte zugewiesen werden können. Ob OWL eine hinreichende Lösung für eine semantische Suche im Internet darstellt, muss sich allerdings erst noch herausstellen.

Web 3.0  Web 3.0 – Web3D

Abb. 427 Eine Szene nach einer OnlineBattle von Enrico Reinsdorf (www.re-design.de) und seinem internationalen Team aus Mitstreitern bei World of Warcraft (www.wow-europe.com). Sein Charaktername ist Plarti (Untote Hexenmeisterin) und er sitzt in der ersten Reihe als dritter von links.

237 www.wow-europe.com/ de/community/machinima/ index.html www.machinima.com

238 z. B. www.saleveling.com www.bestwowpowerleveling.com

537

Diese Metaversen dienen dem Spielespaß und der Gemeinschaftsbildung innerhalb des Spieles und während der Fan-Treffen in der realen Welt. Das Spiel wird allerdings auch unabhängig von den Regeln des Spieles als Grundlage von Kreationen genutzt, die einzelne Spieler für sich bzw. für die Community erstellen. Es werden z. B. Hörspiele und kleine Videos aus bestimmten Szenen selbst zusammengestellt und geschnitten. Die Filmsequenzen werden als Machinima237 bezeichnet. Eine Wortkombination aus ›Machine‹, ›Cinema‹ und ›Animation‹. So erhalten die Spieler die Illusion, aktiv an der Entwicklung teilzunehmen, obwohl sie nur die bereits vorhandenen Elemente, Abläufe und Muster in selbst bestimmten Abfolgen neu sortieren. Die Figuren, die Umgebung, die Aufgaben und die Lösungen sind aber unveränderbar und vorgegeben. Dafür ist die Spielestruktur so angelegt, dass der Spieler ständig Neues erleben und so mehrere Wochen und Monate mit dem Spiel beschäftigt sein kann. Da das Spiel online gespielt wird und sich auf dem Server der Entwickler befindet, können diese das Spiel endlos erweitern und ergänzen, so dass für die Spieler rein theoretisch nie ein Ende in Sicht ist. Wer selbst keine Lust oder keine Zeit hat, mit seinem Avatar Abenteuer zu durchleben, kann sich einen fertig konfektionierten Helden bestellen, der bereits den gewünschten Level erreicht hat und dessen Ausstattung man sich eigentlich nur durch wochen- oder monatelanges aktives Spielen erarbeiten könnte. Dieser Vorgang wird auch Powerleveling238 genannt und ist bei den ehrlichen Spielern nicht gerade beliebt.

Web 3.0  Web 3.0 – Web3D

543

Abb. 431 Metaversen-Medien: Kongresse, Seminare, Vorlesungen, Kino (Abb.: von Hanspeter Füllemann, www.flickr.com/people/hampi, Creative Commons-Lizenz).

Abb. 432 Metaversen-Medien: Museumsbesuch (Abb.: von Hanspeter Füllemann, www.eduversa.ch).

Abb. 433 Metaversen-Medien: Browser in Second Life (www.exitreality.com; http://secondlife.com/ support/downloads.php), (Abb.: www.realtime-collaboration.de).

Abb. 434 Metaversen-Medien: Feste feiern, Konzerte, Ausstellungen etc. (Abb.: von Hanspeter Füllemann, www.flickr.com/people/hampi, Creative Commons-Lizenz).

Abb. 435 Metaversen-Medien: Bücher. Animationen und Geräusche beim Umblättern sind möglich. Es wird massiv versucht, die äußere Realität nachzubilden (Abb.: www.realtime-collaboration.de).

Abb. 436 Metaversen-Medien: Verlage präsentieren auch in SecondLife einige ihrer Bücher (Abb.: www.sltalk.de).

Abb. 437 Metaversen-Medien: Texte. Die Notecard ist zum Lesen von Texten geeignet, stellt allerdings kein Layout, keine Formatierung und auch keine Bilder dar. Notecards können aber vom Leser kopiert und bearbeitet werden (Abb.: www.realtime- collaboration.de).

Abb. 438 Metaversen-Medien: Büchereien können in Metaversen simuliert und Bücher verliehen werden. (Abb.: www.realtimecollaboration.de).

Abb. 439 Metaversen-Medien: Data Gloves. Haptisches Empfinden kann für Metaversen simuliert werden. (Abb.: Haptic Workstation mit VRML Anwendung; von Immersion Corporation www.immersion.com/3d).

9.12 Web 3.0 – Augmented Realities

553

Pervasive Computing (siehe S. 560) und Ubiquitous Computing (siehe S. 558) sind nicht nur in einer Richtung, von Computerintegration in die reale Welt möglich, sondern auch umgekehrt. Die reale Welt kann auch in die Computerwelt, in die virtuelle Welt hineingetragen werden, um so Augmented Realities zu ermöglichen. Bei der Augmented Reality haben Eingriffe bzw. Handlungsabläufe in der realen Welt Veränderungen in einer virtualisierten Darstellung zur Folge. Es gibt z. B. Systeme, bei denen auf einer Arbeitsfläche Elemente projiziert werden, die Dank eines Trackingsystems vom Nutzer mit seinen Händen ›angefasst‹ und verschoben werden können, obwohl diese virtuell sind. In der Regel wird diese Arbeitsfläche dabei ständig mit einer Kamera gescannt, über die festgestellt wird, wo sich die Hände des Nutzers befinden. Da Hände von einem Trackingsystem nicht immer einwandfrei identifiziert werden können, werden in der Regel leicht identifizierbare Hilfsmittel eingesetzt. Dazu bietet es sich an, z. B. einen präparierten Ring am Finger oder einen präparierten Stift einzusetzen. Ring oder Stift haben dann entweder eine auffallende Farbe (z. B. Neongrün), die im sonstigen Umfeld nicht auftritt, oder sie beinhalten eine andere zusätzliche Ausstattungseigenschaft, die je nach Art des Trackingsystems erkannt werden kann. Die dadurch ermittelten Koordinaten werden an den Computer übermittelt und dort verarbeitet, was wiederum zu einer entsprechenden Änderung der Darstellung in der Projektion führt. Es kann so die Illusion entstehen, dass der Nutzer die projizierten, virtuellen Elemente verschieben kann. Damit der Computer erkennen kann, welches Element der Nutzer in der realen bzw. in der projizierten Welt anfasst und verschiebt, müssen bestimmte Konventionen festgelegt werden. Wenn der Nutzer also seine mit Ring oder Stift ergänzte Hand z. B. zwei Sekunden über ein projiziertes oder reales Objekt hält, könnte das Trackingsystem davon ausgehen, dass der Nutzer das Objekt anfasst. Wenn der Nutzer dann seine Hand und somit den zu trackenden Ring bzw. Stift bewegt, verschiebt der Rechner das ›angefasste‹ virtuelle Objekt oder eine virtuelle Entsprechung des realen Objekts. Dazu muss im System ebenso festgelegt werden, welche Objekte verschoben werden können und ob der Bewegungsraum bestimmter Objekte eventuell eingeschränkt sein soll. Im Rahmen dieser Konventionen kann das System z. B. auch feststellen, ob Objekte (reale oder virtuelle) sich berühren bzw. übereinander gelegt wurden. Mit Trackingsystemen werden ähnliche Abläufe gesteuert wie man sie von der Computermaus und dem Pfeilcursor her kennt. Das heißt, es werden Positionen und die Funktionen ›Anklicken‹, ›Anfassen‹ und ›Verschieben‹ identifiziert und bei Bedarf simuliert. Zusätzlich kann noch ein ›Berühren‹ und ›Überlagern‹ der realen und virtuellen Objekte erkannt werden. Einige Trackingsysteme können die realen Objekte, die sich auf der Arbeitsfläche befinden, auf die zugleich projiziert wird, individuell durch ihre Form bzw. durch Erkennungsmerkmale (z. B. Farbe, Icon, Barcode) identifizieren und im jeweiligen Nutzungsszenario entsprechend zuordnen. Diese identifizierten Objekte können sogar vordefinierbare Eigenschaften (z. B. Magnetismus, Abstossungskraft, Ordner- oder Papierkorbeigenschaften) erhalten. Mit solchen Augmented RealtyVerfahren können z. B. Mediziner Operationen simuliert durchführen, Ingenieure und Chemiker nutzen solche Verfahren, um Werkstücke und deren Beschaffenheiten virtuell zu erproben. Übertragen auf Mediendesign, Webkonzeptionen und vergleichbare Themen kann Augmented Reality für Games (z. B. Wii) für Edutainment, zur Wissensvermittlung und für alle weiteren Projektthemen eingesetzt werden, bei denen ein haptisches Erleben Teil des Nutzungskonzeptes ist.

Anhang  Web 3.0 – Ubiquitous Computing

10 Anhang

562

10.1 Danksagung

563

Ich danke allen, die an der Entstehung dieses Buches unterstützend mitwirkten, indem sie Bild- und Informationsmaterial zur Verfügung stellten, und all jenen, die mich motivierend und geduldig begleiteten. Vielen Dank an Frank Hegel für die Gestaltung zahlreicher Grafiken und an Martin Mellen für seinen unermüdlichen Einsatz bei der Gestaltung und Umsetzung des Layouts und der Fertigstellung der Druckdateien. Sabine Brand danke ich für die Unterstützung bei der Einpflege der Textkorrekturen. Ein besonderer Dank gilt den Studierenden aus meinen Seminaren im Fachbereich Gestaltung an der Fachhochschule Bielefeld, im Studiengang ›Medieninformatik und Gestaltung‹ der Universität Bielefeld, den Studierenden der MHMK und den Studierenden meiner Seminare in den Studienrichtungen ›Kommunikationsdesign‹ und ›Industrial Design‹ an der Universität Wuppertal. Mit den studentischen Seminarergebnissen wurde das Buch enorm bereichert. Außerdem danke ich den Mitarbeitern des Verlags, insbesondere Herrn Hermann Engesser, Frau Gabriele Fischer und Dorothea Glaunsinger, für ihre Unterstützung und Geduld.

10.2 Rechtshinweise

564

Alle in diesem Buch, unter www.designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign enthaltenen Angaben und Informationen wurden nach bestem Wissen sorgfältig recherchiert und geprüft. Dennoch sind Fehler nicht ganz auszuschließen. Daher sind die im vorliegenden Buch und unter www. designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Haftungsansprüche gegen den Autor oder gegen den Verlag, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen. Dies gilt auch für die Verletzung von Patentrechten, die dadurch resultieren könnten. Autor und Verlag übernehmen zudem nicht die Gewähr, dass die beschriebenen Beispiele, Vorgänge und Strategien usw. frei von Schutzrechten Dritter sind. Alle innerhalb des Buches, unter www.designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign genannten und ggf. durch Dritte geschützten Handelsnamen, Marken- und Warenzeichen unterliegen uneingeschränkt den Bestimmungen des jeweils gültigen Kennzeichenrechts und den Besitzrechten der jeweiligen eingetragenen Eigentümer. Allein aufgrund der bloßen Nennung ist nicht der Schluss zu ziehen, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung nicht durch Rechte Dritter geschützt sind!

10.2.1 Haftungsausschluss für Dateien und Programme Eventuell über www.designismakingsense.de/Daten_WebX.zip und http://vimeo. com/interfacedesign herunterladbare bzw. nutzbare Dateien und Programme wurden einer sorgfältigen Virusprüfung unterzogen und sind nach bestem Wissen und Gewissen des Überprüfers virenfrei, funktionstüchtig und enthalten keine schädlichen Teile. Dennoch kann keinerlei Haftung für jedweden eventuell direkt oder indirekt aus der Benutzung oder Nichtbenutzung der Dateien oder Programme entstandenen Schaden übernommen werden. Die Dateien und Programme werden ohne jegliche Gewährleistung, Zusicherungen von Eigenschaften oder Haftung angeboten, gleichgültig ob ausdrücklich oder stillschweigend. Das gesamte Risiko bezüglich der Ergebnisse oder Leistungen der Dateien und Programme wird vom Anwender getragen. Weder der Autor noch der Verlag haften gegenüber dem Anwender, dem Benutzer oder einer sonstigen natürlichen oder juristischen Person für Schäden jeglicher Art, einschließlich entgangener Einnahmen oder entgangenen Gewinns, verlorener oder beschädigter Daten oder sonstiger geschäftlicher oder wirtschaftlicher Schäden, die mittelbar oder als Folgeschäden durch die Nutzung dieser Dateien bzw. Programme entstehen.

Anhang  Rechtshinweise

565

10.2.2 Verweise und Links Bei direkten oder indirekten Verweisen auf Internetseiten (›Links‹), Zeitschriften, Bücher, Bilder, Video- oder Audiodaten, Fernseh- oder Radiosendungen oder jede sonstige Art von Publikationen, ist eine Haftungsverpflichtung ausgeschlossen. Der Autor erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Link-Nennung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat weder der Autor noch der Verlag Einfluss. Deshalb distanzieren sich der Autor und der Verlag hiermit ausdrücklich von allen Inhalten aller genannten Internetseiten bzw. der empfohlenen Publikationen, die nach der Link-Bekanntgabe verändert wurden. Für illegale, fehlerhafte, unvollständige, qualitativ minderwertige oder missverständliche Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Inhalte, auf welche verwiesen wurde, nicht derjenige, der über Links oder Hinweise auf die jeweilige Veröffentlichung lediglich verweist. Diese Feststellung gilt für alle innerhalb dieses Buches und unter www. designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign gesetzten bzw. genannten Links, Verweise und Empfehlungen.

10.3 Bildernachweis

566

Alle Autoren und Rechteinhaber werden ausdrücklich im Text bzw. direkt bei den Abbildungen genannt. Der Autor ist bestrebt, in diesem Buch und auf www.designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign die Urheberrechte Dritter zu achten. Sollte sich aber dennoch trotz aufwändiger Recherche, unzähligen Gesprächen mit Rechteinhabern, zahlreichen Übersetzungen und Studium der Rechtslage ein Rechteinhaber nicht ausreichend informiert fühlen, bittet der Autor das zu entschuldigen. Sollte solch ein Ausnahmefall eintreten, bittet der Autor darum, sich an der Veröffentlichung in diesem Buch zu erfreuen und sich in bester Gesellschaft der international interessantesten und wichtigsten Teilnehmer im Themenbereich ›Screen- und Interfacedesign‹ gut aufgehoben zu fühlen. Alle Mitwirkenden verzichteten auf Honorare, Freiexemplare oder andere Formen der Vergütung. Anders wäre solch ein aufwändiges Buch auch gar nicht realisierbar. Sollten Änderungen oder Ergänzungen in den Angaben zu den Bildnachweisen gewünscht sein, die in den Folgeauflagen berücksichtigt werden können, mögen die Betroffenen bitte Kontakt mit dem Autor aufnehmen: stapelkamp@interactions.de

10.4 Literaturverzeichnis

567

Corporate Identity / Corporate Design Birkigt, K.; Stadler, M.; Funck, H.J.: Corporate Identity. Grundlagen – Funktionen – Fallstudien. 11. Aufl., Landsberg, Lech, 2003. Buck, Alex: Markenästhetik 2000; Brand aesthetics 2000. Birkhäuser, 2000. Daldrop, Norbert W. (Hrsg.): Kompendium Corporate Identity und Corporate Design. 2. Aufl. Av Edition, Stuttgart, 2004. Düllo, Thomas; Liebl, Franz: Cultural Hacking. Kunst des strategischen Handelns. Springer, 2005. Steffen, Dagmar (Hrsg.); Bürdek, Bernhard E.; Fischer, Volker; Gros, Jochen: Design als Produktsprache. Birkhäuser, Frankfurt/M, 2000.

Farben, Farbwirkung, Farbbedeutung Braem, Harald: Die Macht der Farben. Wirtschaftsverlag Langen Müller/Herbig, München, 1998. Heller, Eva, Wie Farben wirken. Rowohlt, 2004. Hunt, R. W. G.: Measuring Colour. Ellis Horwood Ltd, Chichester, 1987. Jan-Peter Homann: Praxis Digitales Colormanagement. Springer, Berlin, 2006. Küppers, Harald: Harmonielehre der Farben. Theoretische Grundlagen der Farbgestaltung. DuMont, Köln, 1999. Küppers, Harald: Schule der Farben. Grundzüge der Farbentheorie für Computeranwender und andere. DuMont, Köln, 2001. Küthe, Erich; Venn, Axel: Marketing mit Farben. DuMont, Köln, 1996. Nees, Georg: Formel, Farbe, Form – Computerästhetik für Medien und Design. Springer, Berlin, Auflage 1, 1995. Smith, Wanda; Thorell, Lisa; Thorell, L. G.; Smith, W. J.: Using Computer Color Effectively: An Illustrated Reference to Computer Color Interface. Prentice Hall, Inc., 1990.

Informationdesign, Leiten und Orientieren Bertin, Jacques: Graphics and Graphic Information-Processing. 1981. Brückner, Hartmut: Information gestalten. Einblicke in das Arbeitsfeld ›Informationsgestaltung und Typografie‹ am Fachbereich Münster. Verlag H.M. Hauschild, Münster, 2004. Card, Stuart K.; Mackinlay, Jock D.; Shneiderman, Ben (Hrsg.): Readings in information visualization. Using vision to think. San Mateo, CA , Morgan Kaufmann, 1999. Coyne, Richard: Designing information technology in the postmodern age. Cambridge MA , MIT Press, 1995. Dodge, Martin; Kitchi, Rob: Mapping Cyberspace. Routledge, an imprint of Taylor & Francis Books Ltd, 2000. Foerster, Heinz von; Glasersfeld, Ernst von: Wie wir uns erfinden. Eine Autobiographie des radikalen Konstruktivismus. 2. Aufl, Carl-Auer-Systeme Verlag, 1999.

Anhang  Literaturverzeichnis

568

Holmes, Nigel: The Best in Diagrammatic Graphics, Rotovision, 1994. IIIDj Institute for Information Design Japan (Hrsg.): Information Design Source Book Recent Projects/Anwendungen heute. Birkhäuser, 2005. Maeda, John: Maeda@Media. Bangert, 2000. Maeda, John: Creative Code. Thames & Hudson Ltd, 2004. McCloud, Scott: Understanding Comics. Harper Perennial, 1994. McCloud, Scott: Reinventing Comics: How Imagination and Technology Are Revolutionizing an Art Form. HarperCollins Publishers, 2000. Mollerup, Per: Wayshowing, A Guide to Environmental Signage Principles and Practices. Springer, 2005. Needham, Josef: Science and Civilization in China. Cambridge University Press, 1962. Shedroff, Nathan: Information Interaction Design. A Unified Field Theory of Design. In: Jacobson, Bob (Hrsg.): Information Design. MIT Press, 2000. Shedroff, Nathan: Experience Design. New Riders Publishing, Indiana, 2001. Tufte, Edward R.: Envisioning Information. Graphics Press, 1990. Tufte, Edward R.: Visual Explanations. Graphics Press, 1997. Tufte, Edward R.: The Visual Display of Quantitative Information. Graphics Press, 2001. van Dijck, Peter: Information Architecture for Designers. RotoVision, Mies/ Switzerland, 2003. Wildbur, Peter; Burke, Michael: Information Graphics. Schmidt, 1998. Wurman, Richard Saul; Jacobson, Robert: Information Design. MIT Press, 2000. Zajonc, R. B.: The attutidinal effects of mere exposure. In: Journal of Personality & Social Psychology, Monograph Supplement 9 (1968), Nr. 2, Pt. 2. Zec, Peter: Informationsdesign. Die organisierte Kommunikation. Edition Interfrom, Zürich/Osnabrück, 1988. Zec, Peter: Orientierung im Raum. red dot edition, 2002.

Interactiondesign, Interaktivität Bürdek, Bernhard E.: Künstler und Navigator. Der Designer als Führer durch Raum und Zeit. In: Frankfurter Allgemeine Magazin (14. Juni 1996) Nr. 850. Buurman, Gerhard M. (Hrsg.): Total Interaction, Theory and Practice of a New Paradigm for the Design Disciplines. Birkhäuser, 2005. Cooper, Alan: About Face 2.0. The Essentials of Interaction Design. 1. Aufl., John Wiley & Sons, 2003. Hagebölling, Heide: Interactive Dramaturgies. New Approaches in Multimedia Content and Design. Springer, 2004. Kerres, M.: Multimediale und telematische Lernumgebungen. 2. Aufl., Oldenbourg, München, 2001. Kracke, Bernd: Crossmedia-Strategien. Dialog über alle Medien. Gabler Verlag, 2001. Lissitzky, El: Topographie der Typographie. In: El Lissitzky Maler Architekt Typograf Fotograf. Dresden, VEB Verlag der Kunst, 1976 (1923), S. 360.

Anhang  Literaturverzeichnis

569

May, J.; Barnard, P.J.: Modelling Multimodal Interaction. A theory-based technique for design analysis and support. In: S. Howard; J. Hammond; G. Lindegaard (Hrsg.): Human-Computer Interaction INTERACT ’97. Chapman & Hall, London, 1997, S. 667–668. Shedroff, Nathan: Information Interaction Design. A Unified Field Theory of Design. In: Jacobson, Bob (Hrsg.): Information Design. MIT Press, 2000. Salm, Christiane zu: Zaubermaschine interaktives Fernsehen? TV-Zukunft zwischen Blütenträumen und Businessmodellen. Gabler, 2004. Schwabe, Gerhard: Theorien zur Mediennutzung bei der Gruppenarbeit. In: Schwabe, Gerhard; Streitz, Norbert; Unland, Rainer (Hrsg.): CSCWKompendium. Lehr- und Handbuch zum computerunterstützten kooperativen Arbeiten. Berlin/Heidelberg, Springer, S. 54–65, 2001. Sharp, Hellen: Interaction Design: Beyond Human Computer Interaction. John Wiley and Sons Ltd, 2006. Shedroff, Nathan: Experience Design 1, New Riders, 2001 Stapelkamp, Torsten: DVD-Produktionen: gestalten, erstellen und nutzen, DVD interaktiv: Erzählformen, Wissensvermittlung und e-Learning mit DVD, Blu-ray Disc und HD DVD. Springer, 2006. Trogemann, Georg; Viehoff, Jochen: CodeArt. Eine elementare Einführung in die Programmierung als künstlerische Praktik. Springer, Wien, 2004. Winograd, Terry: The Design of Interaction. In: Denning, Peter J.; Metcalfe, Robert, M.: Beyond Calculation. The Next Fifty Years of Computing. New York, Copernicus, Springer, 1997.

Interfacedesign Bonsiepe, Gui: Interface – An Approach to Design. Jan Van Eyck Akad. Maastricht, 1999. Bürdek, Bernhard E.: Design. Geschichte, Theorie und Praxis der Produktgestaltung. DuMont, Köln, 1991. Bürdek, Bernhard E.: Human Interface Design. In: form 142 II. Zeitschrift, Birkhäuser, 1993. Bürdek, Bernhard E.: Der digitale Wahn. Suhrkamp, 2001. Bush, Vannevar: As We May Think. In: Interactions 3 (März 1996), Nr. 2, S. 35– 46. Nachdruck von Atlantic Monthly 176, Juli 1945. Bush, Vannevar: From Memex to Hypertext. Academic Press, 1992. Crawford, Chris: Understanding Interactivity. Eigenpublikation, 2000. Fisher, Scott S.: Wenn das Interface im Virtuellen verschwindet. 1991. In: Waffender, Manfred (Hrsg.): Cyberspace. Rowohlt Taschenbuch Verlag, Hamburg, 1991, S. 35 – 51 Gaver, W. W.: Auditory Icons: Using sound in computer interfaces, 1986. In: Kramer, G. (Hrsg.): Auditory Display: Sonification, Audification and Auditory Interfaces. Santa Fe Institute Studies in the Sciences of Complexity, Proceedings Volume XVIII. Reading MA: Addison-Wesley Publishing Company, 1994. Gorny, Peter: GUIs für Blinde – die Umsetzung der interaktiven grafischen Elemente von Webseiten in eine auditive Virtual Reality. In: IM. Die Fachzeitschrift für Information Management & Consulting 14. Jahrgang (August 1999).

Anhang  Literaturverzeichnis

570

Hesse, Friedrich W.; Garsoffky, Bärbel; Hron, Aemilian: InterfaceDesign für computerunterstütztes kooperatives Lernen. In: Issing, Ludwig J.; Klimsa, Paul (Hg.): Information und Lernen mit Multimedia. 2. überarb. Aufl. Weinheim, Psychologie Verlags Union, 1997. Kracke, Bernd: Crossmedia-Strategien. Dialog über alle Medien. Gabler Verlag, 2001. Kramer, Gregory: Auditory Display: Sonification, Audification, and Auditory Interfaces (Proceedings Volume 18, Santa Fe Institute Studies in the Sciences of Complexity, Proceedings Volume XVIII), Perseus Books, 1994. Laurel, Brenda (Hrsg.): The art of human-computer interface design. Reading, MA: Addison-Wesley, 1990. Liebowitz, Stan; Margolis, Stephen: The Fable of the Keys. Journal of Law & Economics vol. XXXIII, April 1990. Mullet, Kevin; Sano, Darrell: Designing visual interfaces. Communication oriented techniques. Mountain View, CA, SunSoft Press, 1995. Norman, Donald A.: The invisible computer. Cambridge, MA; MIT Press, 1998. Norman, Donald A.: The Design of Everyday Things. Basic Books, Reprint, 2002. Norman, Donald A.: Emotional Design. Why We Love (or Hate) Everyday Things. Basic Books, 2004. Raskin, Jeff: The Human Interface. Addison-Wesley, 2000. Sherman, Claire R.: Writing on Hands: Memory and Knowledge in Early Modern Europe. Ausstellungskatalog zur gleichnamigen Ausstellung in der Dickinson College’s Trout Gallery in Pennsylvania und der Folger Shakespeare Library in Washington, D.C., University of Washington Press, 2001. Shneiderman, Ben: Designing the User Interface: Strategies for Effective HumanComputer Interaction. 4. Aufl, Allyn & Bacon, 2004. Steffen, Dagmar (Hrsg.); Bürdek, Bernhard E.; Fischer, Volker; Gros, Jochen: Design als Produktsprache. Birkhäuser, Frankfurt/M, 2000. Wenzel, Horst: An fünf Fingern abzulesen. Schriftlichkeit und Mnemotechnik in den Predigten Bertholds von Regensburg. In: Bea Lundt; Helma Reimöller (Hrsg.): Von Aufbruch und Utopie. Perspektiven einer neuen Gesellschaftsgeschichte des Mittelalters. Für und mit Ferdinand Seibt aus Anlass seines 65. Geburtstages. Köln/Weimar/Wien 1992, S. 235–247. Wenzel, Horst; Beck, C. H.: Hören und Sehen, Schrift und Bild. Kultur und Gedächtnis im Mittelalter. C. H. Beck, 1995. Williams, Sheila M.: Perceptual Principles in Sound Grouping, 1992. In: Kramer, G. (Hrsg.): Auditory Display: Sonification, Audification and Auditory Interfaces. Santa Fe Institute Studies in the Sciences of Complexity, Proceedings Volume XVIII. Reading MA: Addison-Wesley Publishing Company, 1994. Winograd, Terry; Flores, Fernando: Erkenntnis Maschinen Verstehen. Zur Neugestaltung von Computersystemen. 2. Auflage, Rotbuch Verlag, Berlin, 1989. Winograd, Terry: Bringing Design to Software. Addison Wesley, 1996.

Anhang  Literaturverzeichnis

571

Konzeptentwicklung Kelley, Tom; Littman, Jonathan: The Art of Innovation. Profile Books, 2001. Pahl, Gerhard; Beitz, Wolfgang: Konstruktionslehre – Grundlagen erfolgreicher Produktentwicklung. Springer, 2003 Trogemann, Georg; Viehoff, Jochen: CodeArt. Eine elementare Einführung in die Programmierung als künstlerische Praktik. Springer, Wien, 2004. Weinberg, Gerald M.: An Introduction to General Systems Thinking. Dorset House, 2001. Winograd, Terry; Flores, Fernando: Erkenntnis Maschinen Verstehen. Zur Neugestaltung von Computersystemen. 2. Auflage, Rotbuch Verlag, Berlin, 1989.

Lehr-/Lerntheorie Issing, L. J.; Strzebkowski, R.: Multimedia und Hypermedia – Aktives Lernen mit Spaß. In: S. Aufenanger; R. Schulz-Zander; D. Spanhel (Hrsg.): Jahrbuch Medienpädagogik 1. Leske + Budrich, Opladen, 2001, S. 301 – 316 Kerres, M.: Multimediale und telematische Lernumgebungen. 2. Aufl., Oldenbourg, München, 2001. Riser, U.; Keuneke, J.; Freibichler, H.; Hoffmann, B.: Konzeption und Entwicklung interaktiver Lernprogramme. Kompendium und multimedialer Workshop. Springer, Berlin, 2002. Schulmeister, R.: Grundlagen hypermedialer Lernsysteme. Theorie – Didaktik – Design. 3. Aufl., Oldenbourg, München, 2002. Stapelkamp, Torsten: DVD-Produktionen: gestalten, erstellen und nutzen, DVD interaktiv: Erzählformen, Wissensvermittlung und e-Learning mit DVD, Blu-ray Disc und HD DVD. Springer, 2007. Tergan, S.-O.: Hypertext und Hypermedia. Konzeption, Lernmöglichkeiten, Lernprobleme und Perspektiven. In: Issing, L. J.; Klimsa, P.: Information und Lernen mit Multimedia und Internet. 3. überarb. Aufl., Psychologische Verlags Union, Weinheim, 2002, S. 98 – 112 Thissen, Frank: Lerntheorien und ihre Umsetzung in multimedialen Lernprogrammen – Analyse und Bewertung. URL: www.frank-thissen.de/lernen.pdf (Stand: 28.10.02). Thissen, Frank: Das Lernen neu erfinden – Konstruktivistische Grundlagen einer Multimedia-Didaktik. URL: www.frank-thissen.de/lt97.pdf (Stand: 30.10.02). Wohlfromm, Anja: Museum als Medium – Neue Medien in Museen – Überlegungen zu Strategien kultureller Repräsentation und ihre Beeinflussung durch digitale Medien. 2. Aufl., Halem, Köln, 2005.

Marketing Goldmann, Heinz M.: Wie man Kunden gewinnt. Das weltweit erfolgreichste Leitbuch moderner Verkaufspraxis. 14. Aufl., Cornelsen, 2005. Gassmann, Oliver: Wachstumsmarkt Alter. Innovationen für die Zielgruppe Fünfzig Plus. Hanser Wirtschaft, 2006.

Anhang  Literaturverzeichnis

572

Gröppel-Klein, Andrea: Konsumentenverhaltensforschung im 21. Jahrhundert. Deutscher Universitätsverlag, 2004. Küthe, Erich; Venn, Axel: Marketing mit Farben. DuMont, Köln, 1996. Opalka, Ralf: Kids-Marketing. Grundlagen – Zielgruppe – Kommunikation. Vdm Verlag Dr. Müller, 2003. Osswald, Kerstin: Konzeptmanagement. Interaktive Medien – Interdisziplinäre Projekte. Springer, X.media.press, Berlin, 2002. Schubert, Petra: Digital erfolgreich. Fallstudien zu strategischen E-BusinessKonzepten. Springer, Berlin, 2002. Warschburger, Volker: Nachhaltig erfolgreiches E-Marketing. Online-Marketing als Managementaufgabe: Grundlagen und Realisierung. Vieweg Verlag, 2001. Wenzlau, Andreas: KundenProfiling. Die Methode zur Neukundenakquise. Publicis Mcd, 2003. Zajonc, R.B.: The attutidinal effects of mere exposure. Journal of Personality & Social Psychology. Monograph Supplement 9 (2, Pt. 2), 1968. Zollondz, Hans-Dieter: Grundlagen Marketing. Von der Vermarktungsidee zum Marketingkonzept. Cornelsen, 2003.

Medientheorie Bentele, Günter; Rühl, Manfred: Theorien öffentlicher Kommunikation. Ölschläger München, 1993. Bonsiepe, Gui: Über die unerquickliche Beziehung von Theorie und Praxis. In: formdiskurs – Zeitschrift für Design und Theorie 2, I/97, S. 6ff. Bonsiepe, Gui: Design as a Cognitive Tool: the Role of Design in the Socialisation of Knowldege. In: Silvia Pizzocaro, Amilton Arruda, Dijon De Moraes (Hrsg.): Design Plus Research – Proceedings of the Politecnico di Milano Conference, May 18–20, 2000, Mailand, 2000. Eco, Umberto: Das offene Kunstwerk. Suhrkamp Frankfurt/M., 1977. Faulstich, Werner: Medientheorien. Vandenhoeck Göttingen, 1991. Flusser, Vilém: Die Revolution der Bilder. Der Flusser-Reader zu Kommunikation, Medien und Design, Bollmann Vlg., Köln 1995. Flusser, Vilém: Medienkultur. 4. Aufl., Fischer (Tb.), Frankfurt, 1997. Frieling, Rudolf: Medien, Kunst, Aktion. Die 60er und 70er Jahre in Deutschland. Springer, Wien, 1997. Frieling, Rudolf: Medien Kunst Interaktion. Die 80er und 90er Jahre in Deutschland. Springer, Wien, 2000. Holzer, Horst: Medienkommunikation. Westdeutscher Verlag Opladen, 1994. Johnson, Steven: Interface Culture: How New Technology Transforms the Way We Create and Communicate. HarperSanFrancisco, 1997. Maser, Siegfried: Grundlagen der allgemeinen Kommunikationstheorie. Verlag Berliner Union, Stuttgart, 1971. Rötzer, Florian (Hrsg.): Digitaler Schein – Ästhetik der elektronischen Medien. Suhrkamp, Frankfurt a. M., 1991. Shannon, Claude E.; Weaver, Warren: The Mathematical Theory of Communication. University of Illinois Press Urbana, 1963.

Anhang  Literaturverzeichnis

573

Völz, Horst: Information 1, 2. Akademie-Verlag Berlin, 1982. Völz, Horst: Grundlagen der Information. Akademie-Verlag Berlin, 1991. Winograd, Terry; Flores, Fernando: Erkenntnis Maschinen Verstehen. Zur Neugestaltung von Computersystemen. 2. Auflage, Rotbuch Verlag, Berlin, 1989.

Ontologie Mika, Peter: Ontologies Are Us. A Unified Model of Social Networks and Semantics. In: Gil, Yolanda; Motta, Enrico; Benjamins, Richard V.; Musen, Mark (Eds.). The Semantic Web – Proceedings of the 4th International Semantic Web Conference. New York: Springer, 2005. Noy, N. F. & McGuinness, D. L.: Ontology Development 101: A Guide to Creating Your First Ontology. 2008 Sowa, J.: Ontology, Metadata and Semiotics. 2000.

Projektmanagement Kerres, M.: Multimediale und telematische Lernumgebungen. 2. Aufl., Oldenbourg, München, 2001. Kessler, Heinrich, Winkelhofer, Georg: Projektmanagement, Leitfaden zur Steuerung und Führung von Projekten. 4., überarbeitete Aufl., Springer, 2004. Maser, Siegfried: Zur Planung gestalterischer Projekte. Verlag Die Blaue Eule, Essen, 1993. Rinza, Peter: Projektmanagement. Planung, Überwachung und Steuerung von technischen und nichttechnischen Vorhaben. 4., neubearb. Aufl., Springer, 1998. Schifman, Richard S.; Heinrich, Günther: Multimedia-Projektmanagement. Von der Idee zum Produkt. 3., überarb. Aufl., Springer, X.media.press, 2001. Stapelkamp, Torsten: DVD-Produktionen: gestalten, erstellen und nutzen, DVD interaktiv: Erzählformen, Wissensvermittlung und e-Learning mit DVD, Blu-ray Disc und HD DVD. Springer, 2006.

Screendesign Brody, Neville: Multi Media Graphics. Schmidt Hermann, Mainz, 1999. IIIDj Institute for Information Design Japan (Hrsg.): Information Design Source Book Recent Projects/Anwendungen heute. Birkhäuser, 2005. Schumann, Heidrun; Müller, Wolfgang: Visualisierung. Grundlagen und allgemeine Methoden. Springer, 2000. Shneiderman, Ben: Designing the User Interface: Strategies for Effective HumanComputer Interaction. Allyn & Bacon, 4. Aufl, 2004. Thissen, Frank: Screen-Design. Effektiv informieren und kommunizieren mit Multimedia. 3., überarb. u. erw. Aufl., Springer, X.media.press, Heidelberg, 2003. Velthoven, Willem: Website Graphics. Schmidt (Hermann), Mainz, 2001.

Anhang  Literaturverzeichnis

574

Semantic Web Berners-Lee, T. & Hendler, J.: The Semantic Web. A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities. Scientific American Magazine, 34–43, 2001. Berners-Lee, T. & Miller, P.: Sir Tim Berners-Lee Talks with Talis about the Semantic Web (transcript of an interview on 7 February 2008). 2008. Birkenbihl, K.: Standards für das Semantic Web. In: Andreas Blumauer & Tassilo Pellegrini (Hrsg.): Semantic Web. Wege zur vernetzten Wissensgesellschaft. Springer-Verlag, Berlin, Heidelberg, S. 73–88, 2006. Blumauer, A. & Fundneider, T.: Semantische Technologien in integrierten Wissensmanagement Systemen. In: Andreas Blumauer & Pellegrini Tassilo (Hrsg.): Semantic Web. Webe zur vernetzten Wissensgesellschaft. SpringerVerlag, Berlin, Heidelberg, S. 228–239, 2006. Geyer-Hayden, B.: Wissensmodelierung im Semantic Web. In: Andreas Blumauer & Tassilo Pellegrini (Hrsg.): Social Semantic Web. Web 2.0 – Was nun?. Springer-Verlag, Berlin, Heidelberg, S. 127–146, 2009. Hausenblas, M.; Halb, W. & u. a.: What is the Size of the Semantic Web?. 2008. Hausenblas, M.: Exploiting Linked Data For Building Web Applications. 2009. Hitzler, P.; Krötsch, M.; Rudolph, S. & Sure, Y.: Semantic Web. Grundlagen. Springer Verlag , Berlin, Heidelberg, 2008 . Pellegrini, T.: Semantic Web Awareness 2009. A Comperative Study on Approaches to Social Software and the Semantic Web. Technical report, Semantic Web Company Vienna, 2009. Pellegrini, T. & Paschke, A.: Semantic Web Awareness Barometer 2008. presentation, 2009. Tochermann, K. & Maurer, H.: Semantic Web – Geschichte und Ausblick einer Vision. In: Tassilo Pellegrini & Andreas Blumauer (Hrsg.): Semantic Web – Wege zur vernetzten Wissensgesellschaft. Springer-Verlag, Berlin, Heidelberg, S. 1–6, 2006.

Semiotik Eco, Umberto: Semiotik – Entwurf einer Theorie der Zeichen. München, Fink, 1991. Eco, Umberto: Einführung in die Semiotik. München, Wilhelm Fink, 1994. Eco, Umberto: Im Labyrinth der Vernunft. Texte über Kunst und Zeichen. Reclam, 1999. Eco, Umberto: Zeichen: Einführung in einen Begriff und seine Geschichte. Suhrkamp, 2004. Jakobson, Roman; Holenstein, Elmar (Hrsg.): Semiotik: ausgewählte Texte 1919 – 1982. Frankfurt am Main, Suhrkamp-Taschenbuch-Verl., 1992. Nadin, Mihai: Anticipation. The End is Where We Start From. Lars Müller, 2003. Nadin, Mihai: Zeichen und Wert. Tübingen, Gunter Narr Verlag, 1981. Nake, Frieder (Hrsg.): Die erträgliche Leichtigkeit der Zeichen: Ästhetik, Semiotik, Informatik. Baden-Baden, Agis-Verl., 1993. Peirce, Charles S.: Naturordnung und Zeichenprozess: Schriften über Semiotik und Naturphilosophie. Frankfurt am Main, Suhrkamp, 1991.

Anhang  Literaturverzeichnis

575

Typografie, Layout Bellatoni, Jeff; Woolman, Matt: Type in motion. Schmidt, Mainz, 1999. Bollwage, Max: Typografie kompakt. Vom richtigen Umgang mit Schrift am Computer. 2. Aufl., Springer, X.media.press, 2005. Böhringer, Joachim; Bühler, Peter; Schlaich, Patrick: Kompendium der Mediengestaltung für Digital- und Printmedien. 3., vollst. überarb. u. erw. Aufl., Springer, X.media.press, 2006. Lupton, Ellen: thinking with type. Princeton Architectural Press, New York, 2004. Müller-Brockmann, Josef: Rastersysteme für die visuelle Gestaltung. Niggli AG, 1996. Spiekermann, Erik: ÜberSchrift. Schmidt (Hermann), Mainz, 2004. Stankowski, Anton: Visuelle Kommunikation. Ein Design-Handbuch. 2. Aufl., Reimer, 1994.

Usability Beier, Markus; Gizycki, Vittoria von (Hrsg.): Usability. Nutzerfreundliches Web-Design. Springer, X.media.press, 2002. Sarodnick, Florian: Methoden der Usability Evaluation. Wissenschaftliche Grundlagen und praktische Anwendung. Huber, Bern, 2006. Stary, Christian: User-Centered Interaction Paradigms for Universal Access in the Information Society. Springer, Berlin, 2004. Nielsen, Jacob: Usability engineering. Academic Press, Chestnut Hill, 1993. Nielsen, Jacob: Designing Web Usability. The Practice of Simplicity. New Riders Publishing, 2000.

Visualisierung Card, Stuart K.; MacKinlay, Jock D.; Shneiderman, Ben (Hrsg.): Readings in Information Visualization: Using Vision to Think (The Morgan Kaufmann Series in Interactive Technologies). Morgan Kaufmann, 1999. Gaede, Werner: Vom Wort zum Bild: Kreativ-Methoden der Visualisierung. Langen/Müller; Auflage: 2., verb. A., 1992. Hartmann, Frank; Bauer Erwin K.: Bildersprache. Otto Neurath – Visualisierungen. Facultas Universitätsverlag, 2006. Horn, Robert E.: Visual Language: Global Communication for the 21st Century. Macrovu Inc., 1999. IIIDj Institute for Information Design Japan (Hrsg.): Information Design Source Book Recent Projects/Anwendungen heute. Birkhäuser, 2005. Maeda, John: Maeda@Media. Bangert, 2000. Maeda, John: Creative Code. Thames & Hudson Ltd, 2004. Schumann, Heidrun; Müller, Wolfgang: Visualisierung. Grundlagen und allgemeine Methoden. Springer, 2000. Woolman, Matt: Seeing Sound. Schmidt, Mainz, 2000. Ware, Colin: Information Visualization: Perception for Design (Morgan Kaufmann Interactive Technologies Series). Morgan Kaufmann, 2000.

Anhang  Literaturverzeichnis

576

Wahrnehmung Brandes, Uta (Red.): Welt auf tönernen Füssen: Die Töne und das Hören. Kunstund Ausstellungshalle der Bundesrepublik Deutschland. Göttingen: Steidl, 1994. Brandes, Uta (Red.): Sehsucht: über die Veränderung der visuellen Wahrnehmung. Kunst- und Ausstellungshalle der Bundesrepublik Deutschland GmbH. Göttingen: Steidl, 1995. Dewitz, Bodo von; Nekes, Werner: Sehmaschinen und Bilderwelten. Die Sammlung Werner Nekes, Ausstellungskatalog zur Ausstellung ›Ich sehe was, was Du nicht siehst – Sehmaschinen und Bilderwelten‹. Steidl, Göttingen, 2002. Fisher, Scott S.: Wenn das Interface im Virtuellen verschwindet, 1991. In: Waffender, Manfred (Hrsg.): Cyberspace. Rowohlt Taschenbuch Verlag, Hamburg, 1991, S. 35 – 51 Foerster, Heinz von: Wahrnehmen wahrnehmen, 1990. In: Barck, Karlheinz; Gente, Peter; Paris, Heidi; Richter, Stefan: Aisthesis. Wahrnehmung heute oder Perspektiven einer anderen Ästhetik, Reclam, Leipzig, 1990, S. 197 – 213 Hoffman, Donald D.: Visuelle Intelligenz. Wie die Welt im Kopf entsteht. Dtv, 2003. Ware, Colin: Information Visualization: Perception for Design. 2. Aufl., Morgan Kaufmann Publishers, 2004. Williams, Sheila M.: Perceptual Principles in Sound Grouping, 1992. In: Kramer, G. (Hrsg.): Auditory Display: Sonification, Audification and Auditory Interfaces. Santa Fe Institute Studies in the Sciences of Complexity, Proceedings Volume XVIII. Reading MA: Addison-Wesley Publishing Company, 1994. Wilson, Frank R.; Petruschat, Jörg; Bruttel, Till: Wohin mit den Händen? How to Handle Hands?. 2. Aufl., form+zweck Verlag, 2001. Zenner, Hans Peter: Physiologie der Sinne. Heidelberg Spektrum. Akad. Verl, 1994. Zimmer, H. D.: Sprache und Bildwahrnehmung. Die Repräsentation sprachlicher und visueller Informationen und deren Interaktion in der Wahrnehmung. Haag & Herchen, Frankfurt/M., 1983.

Web 2.0 Back, Andrea; Baumgartner, Horst; Gronau, Norbert; Tochtermann, Klaus (Hrsg.): Web 2.0 in der Unternehmenspraxis. Grundlagen, Fallstudien und Trends zum Einsatz von Social Software. Oldenburg Wissenschaftsverlag, 2008. DiNucci, Darcy: Fragmented Future. Print 53 (4): 32, 1999. Gscheidle, C.; Fisch, M.: Onliner 2007: Das »Mitmach-Netz« im Breitbandzeitalter. In: Media Perspektiven 8/2007. Haas, M. & Trump, T.: Web 2.0: Nutzung und Nutzertypen. Media Perspektiven (4), 215–222, 2007. Raabe, A.: Social Software im Unternehmen. Wikis und Weblogs für Wissensmanagement und Kommunikation. VDM Verlag Dr. Müller, Saarbrücken, 2007. Stocker, Alexander; Tochtermann, Klaus: (Virtuelle) Communities und soziale Netzwerke. In: Back, Andrea u. a. (Hrsg.): Web 2.0 in der Unternehmenspraxis. Grundlagen, Fallstudien und Trends zum Einsatz von Social Software. Oldenburg: Wissenschaftsverlag, 2008.

Anhang  Literaturverzeichnis

577

Surowiecki, James: Die Weisheit der Vielen. C. Bertelsmann Verlag, 2005. Tochtermann, K. & Schachner, W.: Corporate Web 2.0. Web 2.0 und Unternehmen Band II – Wie passt das zusammen?. Vol. II, Shaker Verlag, Aachen, 2008. Zerfass, A.; Boelter, D.: Die neuen Meinungsmacher: Weblogs als Herausforderung für Kampagnen, Marketing, PR und Medien. Nausner & Nausner, Graz, 2005.

Web 3.0 Berners-Lee, T. & Hendler, J.: The Semantic Web. A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities. Scientific American Magazine, 34–43, 2001. Berners-Lee, T.; Hall, W. & Shadbolt, N.: The Semantic Web Revisited. IEEE Intellligent Systems 21 (3), 96–101, 2004. Berners-Lee, T. & Miller, P.: Sir Tim Berners-Lee Talks with Talis about the Semantic Web (transcript of an interview on 7 February 2008), 2008. Blumauer, A. & Tassilo, P.: Semantic Web und semantische Technologien: Zentrale Begriffe und Unterscheidungen. In: Andreas Blumauer & Pellegrini Tassilo (Hrsg.): Semantic Web. Webe zur vernetzten Wissensgesellschaft. Springer Verlag, Berlin, Heidelberg, S. 9–25, 2006. Hitzler, P.; Krötsch, M.; Rudolph, S. & Sure, Y.: Semantic Web. Grundlagen. Springer Verlag, Berlin, Heidelberg, 2008. Khare, Rohit: Microformats: The Next (Small) Thing on the Semantic Web. In: IEEE Web Computing, Volume 10, Issue 1, January, 2006. Montola, Markus; Strenros, Jaakko; Waern, Annika: Pervasive Games – Theory and Design. Morgan Kaufmann, 2009.

Zeichen, Symbole, Icons Frutiger, Adrian; Heiderhoff, Horst: Der Mensch und seine Zeichen. Schriften, Symbole, Signete, Signale. Marixverlag, 2004. Frutiger, Adrian; Schenkel, Ronald: Formen und Gegenformen. Niggli, 1999. Hartmann, Frank; Bauer Erwin K.: Bildersprache. Otto Neurath – Visualisierungen. Facultas Universitätsverlag, 2006. Internationales Forum für Gestaltung Ulm (Hrsg.): Form und Zeichen. Globale Kommunikation. Birkhäuser, 2003. Jansen, Angela: Handbuch der Infografik. Visuelle Information in Publizistik, Werbung und Öffentlichkeitsarbeit. Springer, Berlin, 1999. Nadin, Mihai: The Civilization of Illiteracy. Dresden University Press, 1997. Nadin, Mihai: Jenseits der Schriftkultur. Dresden University Press, 1999. Neurath, Otto: Graphic Communication through Isotype. The University of Reading: Reading, 1975.

10.5 Index 8 × 8 Pixel Submatrix 234, 242 2D-Barcodes 555 1Passwd 447 280slides 429 960-Pixel-System 244

Abbild 17 Abstand 48, 71, 99, 105, 106, 116, 124 Abweichung 31 Achromatopsie 92 Additive Farbmischung 39 Ähnlichkeit 31 AJAX (Asynchronous Javascript And XML) 276, 309, 403, 429, 445 Alpha World 528 American Typewriter 101 Analyse 172, 185, 488 Anfänger 8, 206, 258 Animation 222 Anker 136 Anreize 332 → Motivation Antialiasing 102, 104 Antiquaschriften 100 Antizipation 19, 382 Anwender 9 → Nutzer → Konsument → Zuschauer Anzeigetafel 44, 66, 71 → Display API (Application Programming Interface) 407, 429 Apple Human Interface Guidelines 288 Architekturfassaden 72 Aristoteles 17, 519 ARPAnet (Advanced Research Projects Agency Net) 393 Atom 495, 508, 509, 510 Auffälligkeit 30 Auflösung 48, 70, 99, 108, 112, 231, 236, 242 Aufmerksamkeit 18, 26, 31, 50, 83, 96, 252 Aufmerksamkeitsanalyse 258 Aufmerksamkeitssteuerung → Steuerung von Aufmerksamkeit Aufteilung 231, 233, 261, 296, 478 Augmented Reality 532, 544, 553 Augmentionisten 532, 536 Ausstellung 277, 384, 509, 543 Auswahl vs. Interaktion 336 Automaten 84, 127, 128, 318,m 356, 358 Avatar 426, 527, 530, 542

Balázs, Béla 531 Barcode 553, 555 Barrierefreie Automaten 318 Barrierefreie interaktive Multimediakioske 318 Barrierefreiheit 94, 310, 318 Baumgarten, Alexander Gottlieb 19 Bedeutung von Farben 78, 88 → Farbbedeutung Bedeutungsgrößen 62, 83 Bedienbarkeit 310, 321 Benutzerführung 78 Benutzeroberfläche 11, 12, 84, 96, 126, 207, 247, 321, 350, 356, 361, 497 → Interface Benutzerprofil 149, 171 Berührung 133, 337 Beschauliche Zugang 206 → Zugangskategorien Betriebssysteme 288, 361, 466 Beuth Verlag 146 Bewertungen im Internet 452 BibTeX 495 Bildröhre 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 → Monitor Bildschirm 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 → Monitor Bildschirmauflösung 48, 66, 99, 112, 117, 132, 231, 236 → Auflösung Bildschirmschrift 99, 102, 109 → Screenfont Bildsprache 177, 294 Bildwortmarke 296, 299 → Marke BiM-Format (Binary Format for MPEG-7) 503 Bit (Binary digit) 44, 49, 132 Blau 35, 39, 42, 62, 88, 93, 96 Blau-Blindheit 93 Blicksteuerung 258 → Tracking blinkx 505 Blocksatz 292 Branding 428 Briefing 145 Brock, Bazon 380 Brockhaus 402 Bunt-Unbunt-Kontrast 50,56, 58, 97, 99, 108

Chat 128, 528, 532, 538, 544, 551 Checklisten, Tipps und Hinweise 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533

578

→ Tabellen Chrome (Google) 457, 466, 472 CIE-Farbsystem 42 CIELab 42 CIELuv 42 Clarendon 100 Cloud Computing 429, 472 CMYK-Farben 38, 41, 42, 44, 296 Comic 222, 256, 372 Computer-Maus 312, 316, 553 Computer-Röhrenmonitor 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 Computerspiel 128, 446, 528, 530, 559 Corporate Design 109, 144, 153, 176, 286, 306, 415 Corporate Identity 109, 144, 153, 176, 286, 306, 415 Courier New 102, 105, 111 Crossmedial 276, 290 Crowdsourcing 404, 413, 415 CSS (Cascading Style Sheets) 104, 114, 244, 246, 403, 445 Cyan 36, 38, 39, 41, 42, 44, 67, 296 → CMYK Cyberspace 530

DARPA (Defense Advanced Research Projects Agency) 393 Darstellung 20, 49, 83, 90, 109, 112, 113, 139, 166, 200, 213, 222, 230, 289, 337, 360, 380, 528, 544 Darstellungsmedien 8, 66, 113, 116, 315 Daten 121, 148, 169, 392, 395, 407, 408, 443, 455, 459, 480, 493, 521, 560 Definitionen 96, 508, 511, 532 → Tabellen Descriptors 503, 509 Description Schemes 503, 509 Description Definition Language (DDL) 503, 509 Designprozess 142, 153 → Projektentwicklung Deubel, Heiner 20 Deutanopie (Grün-Blindheit) 93, 95 → Farbenfehlsichtigkeit Dewey Decimal Classification (DDC) 420 Dialog 202, 321, 399, 542 Didot 100, 113 DIN-Format 233 → halbierenden Aufteilung Discoursedb 403

Display 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 → Anzeigetafel → Automaten → Display von medizinischen Geräten → Display von mobilen Geräten → Display von Produktionsmaschinen → Interaktive Multimediakioske → LCD (Liquid Crystal Displays) → LED (Light Emitting Diode) → Monitor → OLED (Organische Licht Emittierende Dioden) → Plasmamonitor Distanz 86, 134 Dithering 46, 47 dmbh 137 DPI (dots per inch) 112 Download-Internet → Web 1.0 Dramaturgie 364, 374 Drehbuch 11, 149, 154, 221, 228 Druckerzeugnisse 39, 67 DVD 68, 118, 173, 228, 323, 382 Dynamik 176, 276

›echte‹ Interaktion 530 Edler, Jan 73 Edler, Tim 73 Einfachheit 344 → Klarheit Einheit 112, 532 → Maßeinheit Elemente 17, 24, 31, 184, 227, 230, 252, 261, 323, 347, 420 E-Mail 394 Emotionen 9, 35, 324 Empfehlungen und Fragen 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen EMS (Enhanced Message Service) 130 em-Wert 112, 114, 298 → Maßeinheit → Pixel Entwurf 154 → Skizze e-Paper 133 EPG (Electronic Programm Guide) 119, 121 Erkennbarkeit 23 Erwartungskonformität 259, 260

579

Anhang  Index

Erzählformen 213, 227, 364 → Lineare Erzählform → Nonlineare Erzählform Eskapismus 532 → Interaktive Erzählform Evaluierung 220, 248 Evernote 419 ExIF (Exchangeable Image File) 446, 497 Experte 92, 258 Expertenzugang 206 → Zugangskategorien Exposé 221

Facebook 395, 408, 417, 442, 449, 450, 486 ›falsche‹ Interaktion 530 Farbbedeutung 78, 88 → Internationalisierung Farbdarstellung 66, 68 Farbe 17, 35, 78, 82, 88, 90, 92, 176, 296 Farbe-an-sich-Kontrast 54 Farben-Blindheit 93 → Farbenfehlsichtigkeit Farbenfehlsichtigkeit 92, 94 Farben im Internet 49 Farbkodierung 78, 82, 83, 84, 86 Farbkontrast 86 → Kontrast Farbkreis 36, 42, 52, 62 Farbmischung 39, 41 → Additive Farbmischung → Subtraktive Farbmischung Farbpalette 45, 46, 49 Farbraumsysteme 42 Farbschema 180 Farbsättigung 36 Farbsysteme 42 Farbtiefe 44, 49 Farbton 42, 50, 64 Farbtöne des Spektrums 35 Farbwert 42, 49 Feedback-Link 259 Fernbedienung 346, 366 Fernseh-Röhrenmonitor 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 Fibonacci-Zahlenfolge 232 Figur und Grund 24, 29 Fläche 25, 29, 213, 230, 233, 256 Flowchart 11, 165, 185, 429 FOAF (Friend Of A Friend) 479, 491, 516 Foerster, Heinz von 17 Fokus, Fokussierung 356 Folksonomie 392, 424 Font 105, 109 → Schriftart Form 11, 173, 180, 231, 310, 321, 346, 350

Format 231, 233, 276, 495 Fragen und Empfehlungen 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Fragestellungen und Definitionen 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Framework 238, 244, 246, 403, 429, 486, 512, 523 FTP (File Transfer Protocoll) 394 Funktion 11, 180, 310, 321, 350, 364 Funktionale Aspekte 56, 350 Funktionale Bestandteile 248 → Bestandteile Funktionsabläufe 79, 83, 248 Funktionsbereiche 79, 213 Funktionskategorien 206 → Zugangskategorien Funktionslayout 11, 14, 153, 169, 201, 213, 248 → Wireframe Funktionssoftware 124, 276, 288 Funktionszustände 78, 83

Galactic Network 394 Game 374, 555 Garamond 111 Gebote, Kriterien, Tipps und Hinweise 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Gefahreneinschätzung 446 Gefühle 19 → Emotionen Geleitete Navigation Geleiteter Zugang 206 → Zugangskategorien Gelb 38, 41, 42, 44, 296 Gemeinsamkeiten 150 Geocaching 498 Georgia 109, 111 Geotagging 436, 498 Geschlossenheit 25 Gesichtsfeld 22 Gestaltgesetze 22-33 Gestaltungsfläche 81, 296, 299 Gestaltungslayout 230, 248 Gestaltungsprozess 142, 153 → Projektentwicklung Gibson, William 530 Gliederung 78, 230, 249, 261, 230, 249 Gliffy 429

GNOME 288, 363 Goethe, Johann Wolfgang von 21 Goldene Schnitt 231, 232 Google 344, 391, 416, 418, 432, 457, 466, 474, 479, 498, 505, 520, 548, 552, 559 Google Chrome → Chrome Google Earth 468 GPS 312, 360, 436, 446, 467, 497, 498, 558 Graustufen 44 GRDDL (Gleaning Resource Descriptions from Dialects of Languages) 518 Groteskschrift 101, 106 Grün 35 Grün-Blindheit 92, 93 → Farbenfehlsichtigkeit Grundfarben 35, 40, 49, 96 Gruppierung 249, 438 GUI (Graphical User Interface) 11, 12, 84, 96, 126, 207, 247, 321, 350, 356, 361, 497

Halbierende Aufteilung 233 → DIN-Format Handlung 222, 354 Handy 346, 432 → Mobiltelefon Harmonie 89 hAtom → Atom hCard 479, 508 hCalendar 479, 508 HD DVD 173 HDTV-Norm 48, 118 Headline 261 → Überschrift Hegel, Frank 26, 196, 383 (und alle Grafiken, wenn nicht anders ausgezeichnet) Hegel, Georg Wilhelm Friedrich 19 Hell-Dunkel-Kontrast 50, 60, 97 Helligkeitswert 42 Hexadezimal-Code 49 Hierarchie 200 Hintergrund 29, 35, 60, 90, 99, 180 → Vordergrund Hinweise und Tipps 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen hResume 479, 508 hReview 479, 508

HTML (Hypertext Markup Language) 102, 297, 508, 517, 519, 527 HTML-Elemente 508, 510 HTML 4.x 517 HTML 5.x 517 Hyperlink 411 Hypertext 391

iCalendar 495, 509 Icon 12, 553, 557 → Logo → Piktogramm ID3 (Identify an MP3) 466, 497, 502 Identifikation 299, 488, 516 Identitätsbereich 79, 299 IIM (Information Interchange Model) 495 Image 153, 413 Immersion 531, 536 Immersionismus 532 Immersionisten 532 Immersiv 227, 530, 536 Individualisierbarkeit 413 Information 90, 249, 321, 380 Informationdesign 11, 14 Informationssoftware 290 Inhalt 138, 228, 236, 276, 324, 399, 418 Inhaltsbereiche 80, 83, 136, 323 Integrierte Publikation 9 Intensität 17, 30, 56 Interactiondesign 11, 13, 350, 399, 403, 411 Interaktion 11, 198, 213, 318, 336, 399, 530 Interaktionsformen 311, 354, 380 Interaktionsmöglichkeiten 336, 364, 411, 527 Interaktivität 227, 321, 336, 350, 366, 380 Interaktive Wertschöpfung 399 Interface 11, 12, 84, 96, 126, 207, 247, 321, 350, 356, 361, 497 → Benutzeroberfläche Interlacing 118 Internetseite 88, 94, 109, 116, 157, 176, 236, 258, 282, 290, 323, 344, 404, 454, 473, 504 Interview 438, 542 Intuition 18, 19 IPTC (IPTC-NAA-Standard) 495 IPTV (Internet Protocol Television) 122 IPv4 394 IPv6 394

580

Anhang  Index

Java Look and Feel Design Guidelines 289 Jiglu 418 JODI 350 Joystick 54, 136 jQuery 403

Kalkulation 156 Kalte Farben 62 Kalt-Warm-Kontrast 62, 97 Kant, Immanuel 19 KDE 288 Key Visual 179 Klarheit 32, 344 → Einfachheit Körperfarben 41, 42 Kompetenzgrade 206 Komplementärfarben 52, 108 Komplementärkontrast 52, 97 Komposition 248, 250, 261, 380 Konstruktionsorgel 250 Konsument 9, 453 Kontext 19, 28, 554 Kontrast 29, 50, 54, 56, 60, 62, 64, 78, 86, 97 → Farbkontrast Kontrastverlust 86 Konzept 176, 248, 322, 512 Kostenkalkulation 156 Kreisförmiges Popup-Menü 131 Kreisförmige Touchpad-Tastatur 131 Kriterien, Gebote, Tipps und Hinweise 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Küppers, Harald 36, 52

Landmarks 312 Lastenheft 146 → Pflichtenheft Layout 12, 213, 230, 238, 248, 276, 323, 350 Layoutraster 244, 322 LCD (Liquid Crystal Displays) 66, 69, 70, 122 → Display LED (Light Emitting Diode) 44, 48, 71, 108, 134 Leitsystem 79, 277 Lem, Stanislav 530 Lernen 380, 549, 552 Lesbarkeit 96, 100, 106, 118 Leserichtung 17, 253, 256 → Fotoreading

Lexikon 402 Lichtfarben 40, 42 Lichtmatrix 73, 135 Linearantiqua 100 Lineare Erzählform 213, 227, 364 → Interaktive Erzählform → Nonlineare Erzählform Linie 25, 29, 152, 250, 298 Link 258, 491, 565 → Hyperlink Location Based Services 128, 432, 443, 445 Logo 157, 248, 519 → Icon → Piktogramm Logobereich 79, 299 LSO (Latent Semantic Optimization) 505 Lucida Grande 103, 111 Lupe 40, 102

Maas, Stefan 196, 348, 383 Maas + Co 348 Machinima 537 Maeda, John 512, 516, 568 Magenta 35, 37, 38, 41, 42, 44, 67, 296 → CMYK Manipulation 109, 423 Marke 153, 428 → Bildwortmarke Mashup 403, 404, 434, 466, 479 Mass Customization 413, 453 Maßeinheit 112, 114, 298, 532 → em-Wert → Pixel May, John 26 Medien 39, 99, 108, 133, 254, 276, 291, 380, 415, 446, 458, 463, 543 Medienkompetenz 446 Meilensteine 146, 149, 154 Mellen, Martin 239, 255, 563 Menü 124, 130, 236, 259, 326, 336, 380, 402 Metapher 12, 343, 372 Meta Plus 101 Metadaten 486, 493 Metadaten-Formate 495 Metaversen 528, 530, 532, 543, 548, 552 Methodischer Zugang 206 → Zugangskategorien Meyer-Hayoz Design 126, 127, 247 MHP (Multimedia Home Plattform) 119, 123 Microformats 497, 508, 518 Microsoft Vista 289 Minion 100

Mitspieler 9, 315, 364, 374, 428, 446 Mitmach-Internet → Web 2.0 Mitmach-Kampagnen 425 Mittellänge 99, 106 MMOG (Massive Multiplayer Online Game) 536 MMS (Multimedia Message Service) 130 Mnemotechnik 570 Mobile Geräte 8, 44, 130, 289, 360, 411, 443 Mobiltelefon 39, 66, 113, 230, 235, 276, 451, 466, 561 Mobiltelefon-optimierte Farbpalette 47 Moholy-Nagy, Làszló 250 Monitor 39, 42, 44, 48, 66, 68, 108, 112, 116, 118, 124, 128, 231 → Computer-Röhrenmonitor → Fernseh-Röhrenmonitor → Plasmamonitor → Display Moodboard 176, 180, 290 Motivation 332, 396 MPEG-7 466, 497, 502 Müller, Karl 250 MUDs (Multi-User-Dungeons) 528 Multimediakiosk 128, 356 → POI (Point of Information) Multimodal 545 Museum 277 MUSHs (Multi-User Shared Hack) 528 Mustererkennung 32 Myriad 117

Nachbilder 36 Nachhaltigkeit 310 Nadin, Mihai 382 Nähe 25 Navigation 249, 256, 300 Navigationsbereich 79, 295, 300, 305 Navigationsgeräte 70, 360 Navigationshinweis 83 Navigationspfad 457 Navigationssysteme 312 Nekes, Werner 33, 576 Netzwerk 394, 408, 456 Neugier 277, 332 Neuromancer 530 Nicht proportionale Schrift 105 → Proportionale Schrift Nietzsche, Friedrich 19 Nonlineare Erzählform 213, 227, 364 → Interaktive Erzählform → Lineare Erzählform

Nova Spivack 473 NTSC -Norm 118 Nutzer 9, 109, 136, 258, 311, 364, 296, 400, 424, 442, 446, 450, 505, 530, 553

Office 12 289 OLED (Organische Licht Emittierende Dioden) 70, 108, 133 Ontologie 392, 420, 516, 519 Open Calais 480, 486, 488 Open Data 486, 487 Open Data Set 486, 487 Open Data Definition 487 Orange 36, 38, 261 Ordnung 32, 78, 176, 202, 420 Orientierung 21, 78, 176, 249, 326, 497, 542 Ort 442, 472, 532 OWL – Web Ontology Language 519 0xdb 503

Palm OS 289 PAL -Norm 48, 118 Parasument 453 Paterva Maltego 449 PDA (Personal Digital Assistant) 39, 70, 119, 234, 276, 290 Permalink 411 Pervasive Computing 553, 554, 560 Pflichtenheft 146 → Lastenheft Phantomatik 530 Phishing 448 Pipes (pipes.yahoo.com) 406 Pixel 112, 114, 298, 532 → em → Maßeinheit Pixelschrift 99, 102, 109 → Screenfont Plasmamonitor 69 → Display Plastizität 28 PODcasting 415 POI (Point of Information) 128, 356 → Multimediakiosk Poken 408 Polaritätsprofil 172 Positionierungserwartungen 206, 258 Powerleveling 537 Präsentation 155, 318 Primärfunktion 206 Produktentwicklung 142, 153 → Projektentwicklung

581

Anhang  Index

Projektabsicht 146, 151 Projektentwicklung 142, 153 Projektplanung 142, 149, 154, 161, 166, 215 Proportion, proportional 114, 118, 120, 222, 298 Proportionale Schrift 105 → Nicht proportionale Schrift Prosument 453 Protanopie (Rot-Blindheit) 93, 95 → Farbenfehlsichtigkeit Pulldown-Menü 316 → Menü

Qualitätskontrast 64, 97 Quantitätskontrast 56, 58, 97

Raster 39, 41, 67, 178, 230, 240, 244, 261, 293, 298 Ratschläge und Hinweise 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Räumlichkeit 17, 24, 62, 227 RDF (Resource Description Framework) 419, 429, 479, 486, 488, 491, 493, 495, 503, 512 RDFa 515, 517 realities:united 73 Regeln, Hinweise und Tipps 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Reihe 123, 133 Reihenfolge 185, 297, 314, 420, 545 Reflexion 39, 86 Relative Vermaßung 112, 114, 298 → em-Wert Retrievr 479 Revyu.com 489 RFC 2396 516 RFID (Radio Frequency Identification) 560 RGB -Modell 42 Rich Internet Applications (RIA) 428 Rich Web Clients (RWC) 429 Rockwell 100 Rollover 139 Rot 35, 39, 42, 85, 89, 93, 296 Rot-Blindheit 93, 94 → Farbenfehlsichtigkeit

Rot-Grün-Blindheit 92 → Farbenfehlsichtigkeit RSS 404, 411, 463, 495 Rythmus 168

Sans Serif 111, 297 Sättigung 42 → Farbsättigung Schieberegler 213, 248 Schnellzugang 206 → Zugangskategorien Schriftart 100, 109, 118, 503 Schriftschnitte 99, 103, 291 Schriftgrößen 8, 100, 104, 112, 116, 298 Schwarz 39, 41, 67, 78, 89, 94, 297 Screendesign 11, 12, 31, 215, 230, 238, 320, 364, 380, 402, 438 Screenfont 99, 102, 109 Scrollen 301 Scrollbalken 136, 236 Scrum 150 Second Life 528, 533, 538, 540, 543 Sehen 35, 88, 92 Sekundärfunktion 206 Selbstleuchtende Medien 41, 66, 100, 108 Semager 505 Semantik 478, 486, 489, 503, 518, 520, 559 Semantic Discovery System 489 Semantic Web Initiative 495 Semantisches Internet 479 → Web 3.0 Semantische Suche 479, 493, 505, 512, 520 Semiotik 478 Serifenlose Schrift 99, 101, 291 Serifenschrift 99, 100, 104, 109, 111, 118, 291 Servicebereich 79, 84, 299, 301 Silverscreen 102 Sitemap 258, 308 Simultankontrast 50, 97 SIOC – Semantically-Interlinked Online Communities 492, 515 Skizze 158, 185 Smartphone 109, 235, 284 Smashing Magazine 403 Software as a Service 429 → Rich Internet Applications (RIA) → Rich Web Clients (RWC) Smartball 561 SMS (Short Message Service) 66, 123, 130, 276, 438 Snow Crash 530 Social-Software 407, 413, 415, 418, 494, 549

Soziale Netzwerke 376, 400, 407, 413, 549 Spalte 107, 112 Spaltenabstand 107 Spaltenbreite 107 Spannung 332, 354 SPARQL (SPARQL Protocol and RDF Query Language) 518 Spationierung 104 Spiele 123, 315, 536, 559, 561 Sprache 292, 310, 404, 479, 490, 502, 519 Steuerung von Aufmerksamkeit 258 Stephenson, Neil 530 Stil, Stilmittel 176, 261, 330, 337, 342, 352 Stone Sans 101 Storyboard 184, 213, 221, 286 Strich 25, 29, 152, 250, 298 → Linie Struktur 14, 78, 82, 163, 165, 176, 256 Styleguide 11, 153, 286, 322 Submatrix 231, 234, 242 Subtraktive Farbmischung 41, 67 Suche 391, 454, 472, 479, 493, 512, 520, 561 Suchfunktion 411, 451 Suchmaschinenmarketing (SEM) 505 Suchmaschinenoptimierung (SEO) 505 Sukzessivkontrast 50, 97 → Simultankontrast Summa technologiae 530 Sustainable Media 384 Swarming 415 Symbol 78, 82 Syntax 101, 114, 291, 478, 503, 51 System 156, 161, 244, 276, 321, 416, 519, 553

Tabellen 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 Tag-Cloud 419 Tagging 396, 418, 436, 498, 520 Tastatur 58, 84, 116, 312, 447 Taxonomie 332, 391, 416, 418, 420, 424, 492, 519 TCP (Transmission Control Program) 394 TCP/IP (Transmission Control Program/Internet Protocol) 394 Teletext 120, 242 → Videotext Tertiärfunktion 206

Textdarstellung 116 Textmenge 136 Thissen, Frank 571 Tiefe 70, 502 Tipps und Hinweise 11, 48, 89, 93, 96, 154, 160, 200, 220, 308, 311, 316, 319, 403, 416, 474, 480, 491, 533 → Tabellen Titel 248, 261, 326, 493, 512 → Überschrift Topology Map 261 Tor (Software) 457 Tracking 171, 457, 490 Transparent 146, 156 Treatment 221 Trebuchet 103, 109, 111 triplenine dynamic media GmbH 384 Tritanopie (Blau-Blindheit) 93, 95 → Farbenfehlsichtigkeit Twine 429 Twitter 417, 438, 442, 446, 463, 466 Typetester 115 Typografie 8, 12, 98, 176

Überlagerung 24, 41 Überprüfung 309, 461 Überschrift 248, 261, 326, 493, 512 Ubiquitous Computing (Ubicom) 558 Univers 101, 111 Unschärfe 134 Unterlänge 99 URI (Uniform Resource Identifier) 516 Usability 8, 12, 171, 249, 289, 310, 359 Usability-Test 171, 309 User 9, 127, 288, 450, 528 → Nutzer → Konsument → Zuschauer

vCard 495, 508, 511 Verdana 103, 109, 111, 117, 295, 297 Vergrößerung 336 Verknüpfung 81, 296, 518 Verlauf 104 Vermaßung 304, 323 Verständlichkeit 147, 402 Video 11, 123, 148, 169, 221, 366, 382, 418, 502, 530, 548 Videotext 118, 120, 242

Anhang  Index

Visualisierung 11, 64, 147, 201, 230, 319 Visualisierung von Farbenfehlsichtigkeit 94, 319 Vordergrund 9, 419 → Hintergrund

Wahrnehmbarkeit 19 Wahrnehmung 16, 62, 92, 252, 310, 442, 459, 478 Wahrnehmung und Farbe 35 Wand, Eku 324 Web 1.0 390, 393, 416, 453, 477, 559 Web 2.0 391, 392, 395, 398, 416, 477, 495, 528, 554, 559 Web 2.0 – Journalismus 463 Web 3.0 391, 476, Web 4.0 429 Web-TV 505 Web3D 527 WebOS 393, 429 Website 156, 277, 291, 323, 557 → Internetseite Websichere Farbpalette 56 → Internetoptimierte Farbpalette Wenzel, Horst 570 Werbung 90, 108, 158, 258, 361, 455, 463, 503 Wertschöpfung 399 Wiederholung 343 Wii (Nintendo) 559 Wiki 402, 416, 487 Wikipedia 400, 402, 416, 432, 475, 480, 487 Winograd, Terry 573 Wireframe11, 14, 153, 169, 201, 213, 248 → Funktionslayout Wissensvermittlung 9, 365, 380 wpMapsPlugin 403 WOL → OWL WolframAlpha 473 World of Warcraft (WOW) 536

xfruits.com 412 XHTML 133, 445, 508, 515, 517 XML (EXtensible Markup Language) 276, 309, 411, 493, 495, 503, 508, 519 XMP (Extensible Metadata Platform) 493, 495

Yellow 38, 41, 42, 44, 67, 296 → CMYK → Gelb

Zadeh, Lofti 558 Zahl 49, 93, 449 Zeichen 27, 107, 130, 114, 439, 448, 478 → Icon → Logo → Piktogramm Zeilenabstand 106, 114, 316 Zeilenlänge 106 Zeit 68, 151, 164, 166, 395, 417, 458, 536 Zeitplanung 149, 154, 156, 163, 165, 166, 222 Zielgruppe 54, 66, 101, 143, 147, 171, 311, 350 Zielgruppenanalyse 185 Zielgruppenansprache 14, 322, 384 Zielsetzung 146 Zoom 112 Zufall 392, 466 Zugangskategorien 206 Zuschauer 9, 123, 188, 346, 561

582

Anhang ď&#x20AC;´ Index

583

10.6 Über den Autor

584

Prof. Torsten Stapelkamp ist mit einer breiten gestalterischen Ausrichtung in den Bereichen digitale Produkte, Interface Design und Informationsdesign tätig. Er studierte Industrial Design an der Universität Wuppertal und Mediendesign an der Kunsthochschule für Medien Köln. Er gestaltet Websites und interaktive Dienstleistungen, analysiert dabei die Eigenschaften der analogen und der digitalen Medien und entwickelt mit medienadäquaten Verknüpfungen projekt- und adressatenspezifische Konzepte. Der wesentliche Teil seiner Arbeit ist es, Kommunikation zu gestalten. Torsten Stapelkamp erstellte eigene Methodiken und Strategien zur Konzeption und Gestaltung interaktiver Medien und wendet seine Erkenntnisse nicht nur unter Einbeziehung aktueller Usability-Strategien an. Er berücksichtigt ebenso das Erleben am Produkt und die Freude beim Benutzen (Joy of Use) und entwickelt so User Experience Design bzw. Servicedesign. Wissenschaftliche Auseinandersetzungen und Analysen sind ihm dabei genauso bedeutsam wie Autorenschaft und angewandte Gestaltung. Mit seinen Büchern greift Torsten Stapelkamp auf die Erfahrungen und Ergebnisse sowohl aus seinen Agentur-Tätigkeiten, als auch aus seiner Forschung und Lehre an Hochschulen zurück. Zusätzlich stützt und demonstriert er seine Erkenntnisse anhand von zahlreichen erfolgreichen Projekten von Agenturen und Unternehmen. Torsten Stapelkamp schöpft aus seiner Forschung und Lehre als Professor und aus seiner Tätigkeit als Partner von ›Maas + Co‹ in Köln (Designagentur für Produkt- und Markenentwicklung; Produkt-, Interface-, Corporate Design; www.maasco.com) Weitere Informationen zum Autor und zu den Themen dieses Buches: www.designismakingsense.de Kontakt: ts@maas-co.com