Web X.0 Erfolgreiches Webdesign, professionelle Webkonzepte. Gestaltungsstrategien, Styleguides

123

1

Web X.0Erfolgreiches Webdesign und professionelle Webkonzepte

Web X.0

x.med

ia.pr

ess i

st ein

e pra

xisor

ientie

rte Re

ihe

zur G

esta

ltung

und P

rodu

ktion

von M

ultim

edia-

Proje

kten

sowi

e von

Digi

tal-

und P

rintm

edien

.

Tors

ten

Sta

pel

kam

p

Stapelkam

p

G e s t a l t u n g s s t r a t e g i e n , S t y l e g u i d e s u n d L a y o u t s f ü rs t a t i o n ä r e u n d m o b i l e M e d i e n

Tors

ten

Sta

pel

kam

p

Web X.0Erfolgreiches Webdesign und professionelle WebkonzepteG e s t a l t u n g s s t r a t e g i e n , S t y l e g u i d e s u n d L a y o u t s f ü r s t a t i o n ä r e u n d m o b i l e M e d i e nMit diesem Buch werden professionelle Webkonzepte für erfolgreiches Webdesign beschrieben und das Zusammenwirken von Design-methodiken, 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 Gestaltungs-methodiken und beschreibt geeignete Konzepte und Produktionsabläufe. Servicedesign bzw. Experience Design sind dabei die überge-ordneten 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

1170202463879

› springer.de

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

CD-ROM

5Inhaltsverzeichnis

1 Einführung Form und Funktion 10

2 Wahrnehmung 16

Gesichtsfeld 22Räumlichkeit 24Nähe 25Geschlossenheit 25Aufmerksamkeit 26Erkennbarkeit 27Kontext 28Plastizität 28FigurundGrund 29Auffälligkeit 30Intensität 30Ähnlichkeit 31Abweichung 31Mustererkennung 32

3 Farbe 34

3.1 WahrnehmungundFarbe 353.2 FarbtönedesSpektrums 353.3 AdditiveFarbmischung 393.4 SubtraktiveFarbmischung 413.5 Farbraumsysteme 423.6 Farbtiefe 44

Dithering 463.7 Auflösung 483.8 FarbenimInternet 493.9 KontrastmitFarbe 50

Simultankontrast 50Komplementärkontrast 52Farbe-an-sich-Kontrast 54Quantitätskontrast 56Bunt-Unbunt-Kontrast 58Hell-Dunkel-Kontrast 60Kalt-Warm-Kontrast 62Qualitätskontrast 64

3.10 FarbeundihreDarstellungsmedien 66Druckerzeugnisse 67Fernseh-Röhrenmonitor 68Plasmamonitor 69Computer-Röhrenmonitor 69LiquidCrystalDisplay(LCD) 70Anzeigetafeln,Displays 71ArchitekturalsMediumbzw.Display 72

3.11 FarbeundKontrastalsMittelzur Benutzerführung 783.11.1 Farbkodierung–FarbealsSymbol 783.11.2 Farbkodierung–FarbealsStruktur 823.11.3 Farbkodierung–FarbefürFunktionsabläufeundFunktionszustände 833.11.4 Farbkodierung–FarbezurBenutzerführung 843.11.5 Farbkodierung–FarbeundKontrast 863.11.6 Farbbedeutung 883.11.7 Farbe,TextundHintergrund 903.11.8 Farbenfehlsichtigkeit 923.11.9 VisualisierungvonFarbenfehlsichtigkeit 94RegelnundTippszumGebrauchvonFarbe 96

4 Typografie 98

4.1 Schriftarten 99Antiquaschriften 100serifenbetonteSchriften 100Groteskschriften 101themenspezifischeSchriften 101

4.2 Antialiasing 1044.3 Proportionaleund

nichtproportionaleSchrift 1054.4 Zeilenabstand 1064.5 Spaltenbreite 1074.6 Textundselbstleuchtende

Medien 1084.7 SchriftartenfürdasInternet 1094.8 SchriftgrößenfürWebdesign–

Einheitenpx,ptundem 1124.9 SchriftgrößeninAbhängigkeit

vonDarstellungsmedien 116Fernseh-Monitor 118Computermonitor 124MedizinischeGeräten 126Produktionsmaschinen 127Multimediakioske 128MobileGeräte 130Mobiltelefone 132e-Paper 133LED-Informationsdisplays 134Architekturfassade 135

4.10 Textmenge 136

6Inhaltsverzeichnis

5 Projektentwicklung –Workflow 142

5.1 Briefing/Re-Briefing 1455.2 Pflichtenheft/Lastenheft 146

5.2.1 KriterienfürdasPflichtenheft 147

5.3 Projektplan 1495.3.1 Scrum–ProjektmanagementaufBasisvonZeitmanagement 1505.3.2 Designprozess/Problemlösung 1535.3.3 Zeitplanung/Tabelle 1545.3.4 Kostenkalkulation 1565.3.5 SoftwarefürProjekt-management–CRM,ERP 1615.3.6 HilfsmittelfürdieProjektentwicklung 165

5.4 Benutzerprofil/Zielgruppe 1715.4.1 Benutzerprofil 1715.4.2 Polaritätsprofil 172

5.5 FarbealsKonzept 1765.5.1 Moodboard 1765.5.2 Farbschema 180

5.6 Flowchart 1845.6.1 ExemplarischeFlowcharts 188HinweiseundEmpfehlungenzurErstellungeinesFlowcharts 200

5.7 Funktionslayout/Wireframe 2015.8 ErweitertesFunktionslayout 213

GründefüreinFunktionslayoutundseineVorteile 220

5.9 Drehbuch/Storyboard 2215.9.1 Drehbuch 2215.9.2 Exposé 2215.9.3 Treatment 2215.9.4 DasliterarischeunddastechnischeDrehbuch 2215.9.5 Storyboard 2225.9.6 DieäußereFormdesDrehbuchs 228

5.10 Gestaltungslayout 2305.10.1 Fläche 2305.10.2 Format 231GoldenerSchnitt 232Fibonacci-Zahlenfolge 232DIN-Format 233Display-Formate 234softwarebedingteFormate 2365.10.3 Raster/Layout-Framework 2388×8PixelSubmatrix 242960-Pixel-System 2445.10.4 Komposition 2485.10.5 DynamikmitSystem 276

5.11 Styleguide 2865.11.1 StyleguidefürFunktionssoftware 288MacOSX 288GNOME 288KDE 288WindowsVista 289PalmOS 289Java 2895.11.2 StyleguidefürInformationssoftware 290Passepartout 290www.bundesregierung.de 2945.11.3 GeboteundKriterienfüreinenStyleguide 308AnhaltspunktezurErstellungeinesStyleguidesundmöglicheBestandteile 308

5.12 Barrierefreiheit–eineerweiterteFormderUsability 310Gebote,Tipps,EigenschaftenundVoraussetzungenbarrierefreierAngebote 3165.12.1 BarrierefreieAutomatenundinteraktiveMultimediakioske 318

6 Screendesign-beispiele 320

6.1 EigenschaftendesScreendesigns 3236.1.1 Layout 3236.1.2 Inhalte 3246.1.3 Orientierung 3266.1.4 Anreize,Motivation 3326.1.5 Auswahl-undInteraktionsmöglichkeiten 336

6.2 Screendesignminimal 344Fernsehfernbedienung 346DeskTools 348

6.3 Screendesign–FormmitFunktion 350JODI 350shiftcontrol 352[kleine welt] 354JetBlueCheck-in-Terminal 356MetroCard 358Navigationsgeräte 360Computer-Betriebssysteme 361

6.4 ScreendesignfürErzählformen 364Perspektive und Raumdarstellung 365Murphys Loch 366Schöne Heimat 3681944: Operation Teddybär 372Myst 374The Endless Forest 376

6.5 ScreendesignfürWissensvermittlung 380Antizipation 382Verbrechen der Wehrmacht 384Made in MTL 386Nanoreisen 388

7Inhaltsverzeichnis

7 Web 1.0 390

8 Web 2.0 – Das Mitmach-Internet 398

8.1 Web2.0–SozialeNetzwerke 400Wikipedia 400mySpace 400del.icio.us 400flickr 401YouTube 401mevio 401XING 401

8.2 Tagging 4188.3 Taxonomie 4208.4 Folksonomie 4248.5 Mitmach-Kampagnen 4258.6 Twitter 4388.7 PersonalisierteStartseiten–

Internetservice 4428.8 Web2.0–

Gefahreneinschätzung 4468.9 Web2.0–Journalismus 4638.10 Google–EinMitmach-

Monopol? 466

9 Web 3.0 476

9.1 SemantischeSuche 4789.2 OpenData 4869.3 FOAF–FriendOfAFriend 4919.4 SIOC–Semantically-Interlinked

OnlineCommunities 4929.5 Metadaten 4939.6 Metadaten-Formate 4959.7 Microformats 5089.8 RDF–ResourceDescription

Framework 5129.9 OWL–WebOntologyLanguage–

WOL 5199.10 Werkzeuge–

Tagging,Semantik,Suche 5209.11 Web3.0–Web3D 527

ActiveWorlds 549Protosphere 549EntropiaUniverse 549ForterraOLIVEPlattform 550OpenSimulator 550web.alive 550QwaqForums 551There 551

9.12 Web3.0–AugmentedRealities 553

9.13 Web3.0–UbiquitousComputing 558

10 Anhang 562

10.1 Danksagung 56310.2 Rechtshinweise 564

10.2.1 HaftungsausschlussfürDateienundProgramme 56410.2.2 VerweiseundLinks 565

10.3 Bildernachweis 56610.4 Literaturverzeichnis 56710.5 Index 57810.6 ÜberdenAutor 584

Einführung Form und Funktion Einführung 10

icon/metapher

film

animation

stimmestimme

ton

sounddesign

ScreendesignScreendesignScreendesignInformationsdesignInformationsdesignInformationsdesign

Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik

ton

sounddesignsounddesign

ScreendesignInformationsdesign

Bewegtbild

AudioAudioAudio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimmestimmestimme

tonton

sounddesignsounddesignsounddesign

1 EinführungForm und Funktion

Einführung Form und Funktion 12


Bewegtbild

Audio

Interactiondesign

Interfacedesign

Usability

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign

Form Funktion

Einführung Form und Funktion 13


Bewegtbild

Audio

Interactiondesign

Interfacedesign

Usability

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign


Bewegtbild

Audio

typografie/layout

grafikdesign

icon/metapher

illustration

fotografie

text

video

film

animation

musik stimme

ton

sounddesign

Form Funktion

Abb.1EininteraktivesProduktergibtsichausderGestaltungvonFormundFunktion.DiesechsGestaltungsaspektea)Screen-design,b)Informationsdesign,c)Interfacedesign,d)Interac-tiondesign,e)Film-/Video-/Animationdesignundf )Ton/Musik/Sounddesignwirkendirektaufeinanderundstärkenbzw.schwächensichgegensei-tig.JenachAbsichtkönnenderenPrioritätenundMengen-verteilungstarkvariierenundjenachProduktüberschneidensichdieein-zelnenAspektemehroderwenigerundbewe-gensicheherimBereichderFormoderderFunktion.DiesließesichambestenmiteinemdynamischenDiagrammdar-stellen,dessenElementesichdenZuordnungenunddenEigenschaftendesjeweiligenProduktsentsprechendimDiagrammverschiebenwürden.(Grafik:TorstenStapelkamp).

Wahrnehmung 16

2 Wahrnehmung

17Wahrnehmung

Um Wahrnehmung beurteilen zu können, ist zu berücksichtigen, dass das Wahrge-nommene 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 beeinfl ussen.

In der Gestaltpsychologie führte diese Einschätzung zur Aufstellung der Grund-regel: »Das Ganze ist mehr als die Summe seiner Teile«, einem Zitat, das Aristoteles zugeschrieben wird. Nicht das Auge sieht, sondern das Gehirn konstruiert Wahr-nehmung. 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 Ge-hirn 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ößen-verhältnisse ergänzend zum Ausdruck und zur Diff erenzierung 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 befi nden, in Beziehung zueinan-der setzen zu wollen. Wahrnehmung bedeutet, nach kausalen Zusammenhängen zu suchen und einzelne Elemente auf Grund ihrer Farbe, Form oder Größe zu gruppie-ren, in der Hoff nung, 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 Abge-bildete. Dies bedeutet, dass diff erenzierte Wahrnehmung zur Interpre tation und so-mit 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 Eigenschaft en eines Produkts zu antizipieren. Interfaces sollten daher in ihrer Funk-tion und Bedeutung antizipierbar sein.

»DieUmwelt,sowiewirsiewahrnehmen,istunsereErfindung.«

HeinzvonFoerster

Farbe 34

3 Farbe

39

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, Computer-röhrenmonitore, Flachbildschirme oder Displays von mobilen Endgeräten (Mobil-telefon, 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 Farb-bereiche wahrgenommen werden.

3.3 Additive Farbmischung

Abb.22Jenachdem,welchederdreiFarbpunkteinnerhalbdesFarbtripels(RGB)leuchten,ergibtsicheinsogenannterPixel-Farbpunkt,dervomBe-trachteralsentsprechendeadditiveFarbmischungwahr-genommenwird.Wennz.B.alledreiFarben(Rot,Grün,Blau)gemeinsamleuchten,ergibtsichWeiß,wennRotundGrünleuchten,ergibtsichGelb,wennGrünundBlauleuchten,ergibtsichCyanundwennkeinederdreiFarbeninnerhalbdesFarb-tripelsleuchten,ergibtsichSchwarz.BeiRöhrenmonitorenmitLochmaskesinddieFarb-tripelimDreieckangeordnetundbeiRöhrenmonitorenmitStreifenmaskehorizontal,alsonebeneinander.

66

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

• nicht selbstleuchtende und• selbstleuchtende Medien

Druckerzeugnisse, Farbpulver oder farbige Gegenstände sind z. B. nicht selbstleuch-tende Objekte bzw. Medien. Monitore oder diverse Displaytechnologien sind hin-gegen 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 Ab-bildungen am schärfsten darstellen und Plasmamonitore ermöglichen eine hellere und kontrastreichere Wiedergabe. Plakatleuchtkästen und farbige Glasmalerei sind ebenso als Darstellungs medien zu berücksichtigen, wenn es darum geht, die farbli-chen Eigenschaft en 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 in-teressant für die Thematik Screen- und Interfacedesign. Daneben gibt es noch zahl-reiche 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 je-weiligen Zielgruppe verwendet werden, sind Einflussfaktoren bezüglich der Farbge-nauigkeit, der Helligkeit, der Farbbrillanz und der Kontraststärke zu beachten, die sich nur sehr bedingt voraussagen lassen und denen man als Gestalter bzw. Produ-zent 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.10 Farbe und ihre Darstellungsmedien

783.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 Bedien feldern zu ent-wickeln, deren Absicht erkannt und deren Benutzerführung verstanden wird. Farbe hilft, Themengruppen zu differenzieren, Inhalte zu gliedern, Leitsysteme zu struk-turieren 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, Far ben zur Bildung von Farbsystemen zu nutzen, um mit den einzelnen Farben Bereiche oder Themen zu gliedern und auf diesem Wege Ord-nung 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 The-men 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 ein-deutig die Farbe der Macht war, nur von den Mächtigen genutzt werden durfte und auch nur von diesen bezahlt werden konnte, da 12000 Purpurschnecken erforder-lich 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 be-stimmte 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 gegen seitig stören. Sie müssten aber den-noch 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 vermeintli-che Sys tematik 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 Interpretierbar-keit einer Farbbedeutung scheitert und eine eindeutige Symbolwirkung unmöglich macht, selbst dann, wenn man länderspezifische und kulturell bedingte Interpreta-tionsabweichungen 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

Farbe FarbeundKontrastalsMittelzur Benutzerführung 82

3.11.2 Farbkodierung – Farbe als Struktur

Im Gegensatz zur Bedeutungs definierung sind Farbkodierungen allerdings sehr wohl und nahezu unein geschrä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 verschie-dene Farben für Informationsgrafiken angewandt, so bl eibt oft der Ü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.

Abb.99FarbkodierungeignetsichzurDifferenzierungvonDateninInformationsgrafikenbesser,alszurStrukturierungvonOrientierungssystemenbzw.zurinteraktivenBenutzerführung.BeiInformationsgrafikenwirdFarbeinderRegelnuralsGe-staltungsmittelzurDifferen-zierungundVisualisierungvonDateneingesetzt.(U.S.Depart-mentofCommerce,1996).

U.S. D

EPARTM

ENTOF COMMERCENATIO

NALTELEC

OMM

UNICATIONS & INFORM

AT

IONADMINISTR

ATIO

N

Typografi e RegelnundTipps 98

4 Typografi e 4 Typografi e

99

Für Druckmedien stehen, auf Grund der hohen Aufl ösung, alle Gestaltungsmög-lichkeiten mit Typografi e zur Verfügung. Es lassen sich sehr fi ligrane Details dar-stellen, selbst dann, wenn die Schrift größe sehr klein gewählt wurde (siehe Aufl ö-sung, S. 48, im Kapitel Farbe).

Beim Screen- und Interfacedesign sind die Möglichkeiten der typografi schen Gestaltung hingegen erheblich eingeschränkt, wenn für Darstellungsmedien gestal-tet wird, deren Aufl ösung in der Regel nicht mehr als 72 bzw. 96 dpi beträgt. Seri-fenschrift en sind insbesondere dann ungeeignet, wenn nur in einer relativ geringen Aufl ösung dargestellt werden kann und die Darstellungsmedien zudem selbstleuch-tende bzw. hintergrundbeleuchtete Medien sind. Die geringe Aufl ösung kann zum Ausreißen feiner Strichstärken führen. Und der Umstand, dass diese Wiedergabe-medien 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 Wiederholungsfrequen-zen des Bild aufb aus, z. B. bei Röhrenmonitoren. Für die Darstellung auf Bildschir-men sind speziell entwickelte Screenfonts bzw. Pixelschrift en geeignet, da deren Strichstärken gleichmäßig auf die Abstände und Winkel der Rasterdarstellun gen abgestimmt und jeweils für die passende Schrift größe entwickelt sind.

Je nach Darstellungsmedium und Darstellungstechnologie sind bestimmte Schrift schnitte besser oder weniger gut geeignet. Grundsätzlich sind serifenlose Schrift en für die Darstellung von Texten an selbstleuchtenden Medien gut geeignet. Erst ab einer bestimmten Schrift größe, sobald die Strichstärken groß genug sind, um nicht überstrahlt zu werden, lassen sich auch Serifenschrift en gut lesbar einset-zen. Serifenschrift en sollten dann aber nicht im Fließtext, sondern in erster Linie für Überschrift en Anwendung fi nden.

4.1 Schriftarten

Abb.114

Oberlänge

Mittellänge,x-Höhe

Unterlänge

Versalhöhe

Grundlinie,Schriftlinie

Handglove

Typografie Schriftarten 100

Abb.115

Antiqua

WeidemannMinionDidot

Clarendon Chaparral Rockwell

Abb.116Antiquaschriften

Abb.117SerifenbetonteLinearantiqua

Antiquaschriften

InderTypografiewirdzwischendenSchriftartenAntiquaundGroteskunterschieden.AntiquaschriftensindimWesentlichendadurchgekenn-zeichnet,dasssieSerifenhaben.DiessindhäkchenartigeErweiterungenandenEndenderBuchstaben,dieinderRegeldieLesbarkeitverbessern,weshalbAntiquaschriftenfürDruck-medienbevorzugtVerwendungfinden.WegendiesessehrentscheidendenMerkmalswerdenAntiquaschriftenauchSerifenschriftengenannt.EinweiteresMerkmalderSerifenschriftensindihreUnterschiedeindenStrich-stärkeninnerhalbeinesBuchstaben.DadurchsindsehrschmückendeSchriftgestaltungenmöglich,dieallerdingsbisweilenauchalsschnör-kelhaftempfundenwerdenkönnen.

serifenbetonte Schriften

Esseihiernochdieserifenbetonte Linearantiquaerwähnt,beider,wiedieBezeichnungbereitsvermutenlässt,dieSerifensehrbetontsindundsichzudemdieStrichstärkeninnerhalbeinesBuchstabennurgeringodergarnichtunterscheiden.DieseSchriftartwirdhäufigalsAuszeichnungsschriftverwendet.AlssolchekannsiegutfürDruckmedieneingesetztwerdenundabbestimmtenSchriftgrößenauchfürselbstleuchtendeMedien.

112

Die Gestaltung für Internetseiten ist grundsätzlich als Vorschlag zu verstehen, da die Browser unterschiedliche Eigenschaften haben, unterschiedliche Betriebssys-teme 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 Pro-zentangaben 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 Darstellungs-mediums. 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% anzuge-ben. 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 Moni-tor 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 Digitalkame-ras) 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 Print-daten 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 An-gabe 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 vor-bestimmt 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

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

Typografie SchriftgrößeninAbhängigkeitvonDarstellungsmedien 130

Mobile Geräte

AnhanddesDiplomprojektsvonSu-sanneStage,dasanderHochschuleMagdeburg-Stendalentstand,kanndieoptimaleAusnutzungeines280×280PixelgroßenDisplaysfürmobileGerätedemonstriertwerden.Einbe-stimmterTeilderDisplayflächewirdbereitsfürfunktionaleBelangeein-genommen.DieBildschirmgrößehatdieFlächenmaße41,11×41,11mm.DiesentsprichteinerAuflösungvon173Pixel/Zoll(dpi).

MitdiesemmobilenGerätlassensichderEnhancedMessageService(EMS)undderMultimediaMessageService(MMS)nutzenundformatierteTextesowieAnimationenundBilderverschickenbzw.empfangen.ImGegen-satzzurSMS(ShortMessageService)stehennichtnur160,sondernüber400ZeichenzurVerfügung.EswirddiePixelschriftSupertextindreiSchnittenundinderSchriftgröße20 Pixelverwen-det.DiesentsprichtbeiderDisplayauf-lösungvon173dpieinerSchriftgrößevon9 Punkt.

Abb.149KreisförmigeTouchpad-Tastatur;DiplomvonSusanneStage;Betreuung:Prof.CarolaZwick,Prof.Dr.ChristineStrothotte;InstitutfürIndustrialDesign,HochschuleMagdeburg-Stendal.


Abb.150a–gVerteilungvonInhaltsbereichundMenü.


Mobiltelefone

DadieDarstellungsqualitätderDis-playsvonMobiltelefonenmittlerweilerelativhochistundderBetrachtungs-abstandnurca.30cmbeträgt,genügteineSchriftgrößevon8 – 11 Punkt.HöhereSchriftgrößensindallerdingszuempfehlen,lassensichabernichtimmeranwenden,wennnichtnurText,sondernBilderinKombinationmitTextangezeigtwerdensollen.Zudemistzuberücksichtigen,dasssichdieSchrift-größedenunterschiedlichenMonitor-größendermobilenEndgerätean-passt,weshalbkeineabsolutkonkreteSchriftgrößeempfohlenwerdenkann.DasselbegiltfürdenSchrifttyp,derinderRegelvomjeweiligenmobilenGerätvorgegebenwird.

DaApplikationenfürmobileGerätezunehmendmiteinerdafürspeziellentwickeltenVersionderAnimations-undAutorensoftwareFlashumgesetztwerden,sindsieskalierbarfürverschie-deneMonitorgrößen(siehez.B.http://mobile.macromedia.com).Esistgrund-sätzlichzuempfehlen,mitvektorba-siertenSoftwarepaketenundsomitauflösungsunabhängigzuproduzieren,damitdieEntwicklungen,dieheuteeventuellnochfüreineDisplaygrößevon208×320Pixelrealisiertwurden,trotzWeiterentwicklungderAbspiel-gerätemiteinhergehenderDisplay-vergrößerung,vomEntwicklermehrereJahreweiterverwendetwerdenkön-nenundvonihmnurnochneuaus-gespieltwerdenmüssen.

Abb.151DisplaydesMobiltelefons›So-nyEricssonP910i‹.DieAuflösungliegtbei208×320PixelaufeinerFlächevonca.45×60mm.Eskönnenbiszu262144Farben(18 Bit)dargestelltwerden.

Abb.152MitHilfedesOperaSmall-ScreenRenderingstelltderOperaMiniBrowserInternet-seitenauffastallenmobilenGerätendar.DieAbbildungenhiersindfüreineBreitevon208Pixeloptimiert(www.opera.com).


e-Paper

DieBezeichnunge-Paperwirdnochuneinheitlichgenutzt.Bereitsdiedigi-talisierteVersioneinerZeitungwirdoftbereitsals›e-Paper‹bezeichnet.HieristabereineTechnologiegemeint,diefastausschließlichauseinerdis-play-ähnlichen,hauchdünnenFoliebesteht.NamhafteHerstellerwieSie-mens,Philips,IBM,E-Ink(www.eink.com)undPolymerVisionsindmitderEntwicklungvonDisplaysbefasst,diedashaptischeErlebniseinerZeitungmitdenMöglichkeitendigitalerMe-dienverbindensollenoderaufGrundderFlexibilitätdieserdünnenDisplaysganzneueProdukteermöglichen.DasersteelektronischePapierwurdebe-reitsinden70erJahrenamkaliforni-schenPaloAltoResearchCenterderFirmaXeroxentwickelt.

WenndieDarstellungsqualitätenderaktuellene-Paper-Displayssogutwerden,wievondenEntwicklernver-sprochen,wirdmanwiebeianderenmobilenGeräten(Mobiltelefon,PDAetc.)mitähnlichkleinenSchriftgrößenvon8 – 10 Pixelgestaltenkönnen.

UnterderBezeichnung›e-Paper‹kannauchdasLesegerätiLiadderFirmaiRexTechnologieeingeordnetwerden.Esbasiertaufeinervonderamerikani-schenFirmaE-InkentwickeltenAn-zeigetechnik.iRexisteinSpinoffvonPhilipsundhatseinenSitzaufdemPhilips-Hightech-CampusinEindho-ven.AnwenderkönnenmittelsWLAN,USB-Kabel,EthernetoderCompactFlashbzw.SD/MMCMemoryCardihregewünschtenInhalteaufeinenachtZollgroßenMonitorladenunddortlesen.FolgendeFormatekönnenge-nutztwerden:PDF,XHTML,TXT,MP3.DasDisplaystellt160dpiin16Graustu-fenmiteinerAuflösungvon1024×768Pixeldarundistberührungsempfind-lich,dientdemnachalsBedienfeld,sodassz.B.Textausschnitteausgewähltwerdenkönnen.DasGerätist390gschwerundhatdieMaße155×217×16mm,ca.DIN-A5.

EsgibtbereitseineganzeReihevonStudien,diesichdamitbeschäftigen,komplexeProdukteaufeinDisplayzureduzieren,dasmanzudemzusam-menfaltenkann.AmBeispieldesKon-zeptsOri-ori Moshi-moshi (o2m2)fürdasJahr2014vonAntennaDesignNewYorkInc.(www.antennadesign.com)wirddieTendenzdeutlich.EinOLED-TouchscreenmitintegriertenKompo-nentensollfürunterschiedlicheKon-figurationen,wiez.B.Telefonieren,ComputerspieleoderFernsehen,freifaltbarsein.DiedabeigebildetenFal-tungenkönnenabgespeichertwerden,sodassdiegewünschteFunktioner-scheint,sobaldo2m2indiegeeigneteFormgefaltetwird.

Abb.153Ori-ori Moshi-moshi (o2m2)vonAntennaDesignNewYorkInc.(www.antennadesign.com).

Abb.154DieniederländischsprachigeTageszeitungDe TijdausBelgien(www.tijd.be)starteteam13.04.2006alsersteZeitschriftmiteinere-Paper-Ausgabe,dieaufdemiLiadzulesenist(InfoszuiLiad:www.irextechnologies.com).

Projektentwicklung – Workfl ow Textmenge 142

5 Projektentwicklung –Workfl ow

5 Projektentwicklung –Workfl ow

143Projektentwicklung – Workfl ow

Zunächst muss festgelegt bzw. ermittelt werden, was Gegenstand des Projektes ist, welche Eigenschaft en 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 Pfl ichtenheft formuliert und festgelegt werden. Ein ab-schließendes Pfl ichtenheft ist in der Regel das Ergebnis mehrerer Versionen. Im ersten Schritt werden zunächst Aufgaben, Ziele und Th emen notiert, deren Festle-gung noch ohne vorangegangene Analysen erfolgt. Im Idealfall hat diese Festlegung bereits der Auft raggeber vorgenommen, indem er seine Vorstellungen und Erwar-tungen beschreibt. In diesem Zusammenhang wird aber nicht von einem Pfl ichten-heft , sondern von einem Briefi ng gesprochen. Eigentlich kann der Auft raggeber erst nach einer solchen Planungsphase entscheiden, wen er beauft ragen sollte, weil er erst dann weiß, was er überhaupt haben oder erreichen will.

Nachdem der Auft ragnehmer durch das Briefi ng feststellen konnte, ob er die gewünschten Leistungen erfüllen kann, folgt eventuell noch ein Re-Briefi ng mit Korrekturen und Änderungsvorschlägen. Auf dieser Grundlage erstellt dann der Auft raggeber für den Auft ragnehmer ein detailliertes Lastenheft . Das Lastenheft ist das Ergebnis einer intensiven hausinternen Planungsphase des Auft raggebers. Auf dieser Basis erstellt der Auft ragnehmer – im Idealfall in gemeinsamen Sitzungen mit dem Auft raggeber – ein Pfl ichtenheft . Die Analysen erfolgen sukzessive mit der Weiterentwicklung des Pfl ichtenheft es. 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 Auf-traggeber und Auft ragnehmer kann darin bestehen, dass sich nicht nur zwei Perso-nen gegenüberstehen. Das Briefi ng kommt häufi g von der Marketingabteilung des Auft raggebers, die Sachinformationen vom Projektleiter und die Kostenkalkulation aus der Buchhaltung. Die allgemeine Kommunikation, das Projektmanagement und bereits die Erstellung des nachfolgenden Lasten- und Pfl ichtenheft es werden dadurch nicht selten stark beeinträchtigt. Hinzu kommt noch, dass insbesondere Designagenturen von Auft raggebern bisweilen ausschließlich als Dienstleister und nicht auch als Berater verstanden werden. Die schlimmste Folge könnte sein, dass die beauft ragte Designagentur weder das Briefi ng noch das Lastenheft hinreichend hinterfragen darf, dadurch ihre Kompetenz nicht einbringen kann und das Pfl ich-tenheft nur noch eine Kopie des Lastenheft es darstellt.

Da stellt sich bisweilen die Frage, ob man Designern, die eine eigene Agentur grün-den 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 Auft raggebern sprich-wö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

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 Produk-tionsorganisation Lean Management der japanischen Automobilindustrie. Das Ma-nagementframework von Scrum kann als agil bezeichnet werden, weil es den Fokus auf Empirie setzt. Die erhobenen Daten werden möglichst häufig in Rückkopplungs-prozessen 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 verant-wortlich 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 Struk-tur-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 Arbeits-schritte. 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 Zeit-abschnitt von ein bis vier Wochen bezeichnet. Das Ergebnis eines Sprints stellt ein in sich abgeschlossenes Teilprojekt dar. Und das Sprint-Backlog ist das Strukturpla-nungselement, das alle Arbeitsschritte für den aktuellen Entwicklungszyklus erfasst. Das Product-Increment bzw. Increment ist das fertige Zwischenergebnis eines je-den 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 Anforde-rungen 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 Backlog-Items genannt werden. Diese Backlog Items werden bezüglich ihres Aufwandes

17 Scrum wurde von Ken Schwaber, Jeff Sutherland und Mike Beedle erfunden und etabliert. 2003 veröffentlichte Ken Schwaber ein Zertifizie-rungsprogramm für Scrum-Master, mit der Absicht, Soft-ware-Entwicklungen zu professionalisieren. Siehe auch: www.scrumalliance.org; http://agilemanifesto.org; http://scrumy.com


5.3.4 Kostenkalkulation

Eine zuverlässige Kostenkalkulation kann der Auftragnehmer dem Auftraggeber erst nach Fertigstellung des Pflichtenheftes, der Zeitplanungstabelle und des Style-guides 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ön-nen allein für die Erstellung der Präsentation eines komplexen Projekts (Corporate Design; Website mit Video und/oder Flashapplikationen und ContentManagement-System) durchaus 200 Stunden erforderlich werden.

Erfahrene Auftragnehmer werden auf die Kalkulationen vorheriger Projekte zu-rü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 gemein-same Erarbeitung des Pflichtenheftes wird dazu beitragen, den Entstehungsprozess des Projektes transparent zu machen und dem Auftraggeber die Gewissheit verschaf-fen, 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 Honorar-sätze, die ihm zuvor noch zu hoch oder zumindest schwer nachvollziehbar erschie-nen, 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 eingenom-men 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 an-fallen, 40 Stunden pro Woche gearbeitet und ein Gewinnanteil von 25% angestrebt wird. Der durchschnittliche Stundensatz kann sich aus unterschiedlich hohen, ge-staffelten Stundensätzen ergeben, die teilweise weit unter 78,– Euro für einfache Tätigkeiten beginnen können, wenn für bestimmte, anspruchsvollere Tätigkeitsbe-reiche 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.


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, Da-ten 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, Personalver-waltung, Adressen- und Kundenmanagement gemeint. Ab wann eine Anschaffung notwendig wird und ob sie sich lohnt, lässt sich pauschal nicht beantworten. CRM-Softwaresysteme sind bereits ab 50,– Euro zu erwerben. Da hält sich eine Fehlinves-tition 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 Mitar-beitern 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 Un-gleichgewicht an Befürchtungen und Erwartungen sein. Die Entscheidung für den Einsatz einer Projektmanagementsoftware muss sich nicht zwangsläufig positiv aus-wirken, 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 Ent-scheidung, 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ög-lichkeiten, die ein solches Verwaltungssystem bieten kann, überfordern werden. Die Folge könnte sein, dass sich die Anwender mehr mit der Software als mit dem Pro-jekt 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 Projektverwal-tung 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 Pro-jektverantwortlichen unter Umständen so davon ab, selbst über die geeigneten Pro-zesse nachzudenken. Als Folge schenken einige Projektleiter und Entwickler ihrer Verwaltungssoftware mehr Zeit, Glauben und Vertrauen als der eigenen Kompetenz,


Abb.164www.zoho.com

Projektentwicklung – Workfl ow Pflichtenheft/Lastenheft 167

Abb.165OmniPlanvonomnigroup.com

Abb.166EinGantt-DiagrammisteinInstrumentdesProjektmanage-mentsunddientdergrafischenDarstellungeinerzeitlichenAbfolgevonAufgaben.Esist

nachdemamerikanischenBeraterHenryL.Gantt(1861–1919)benannt.DasDiagrammzeigteinProjektvonAnkeHarmsundihremTeam,Feld-mannMediaGroup.

1715.4 Benutzerprofil/Zielgruppe

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 Benutzer gruppe individu-ellere Informationen über einen Anwender beinhalten.

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 ver-folgt 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.

ExemplarischeProfile:

• Zielgruppe• Schwierigkeitsgrad,

Kompetenzgrad• bevorzugteLernmethode,

Lernverlauf• Persönlichkeitseigenschaften• Auswahlverhalten,

Kaufverhalten• FinanziellerStatus

Projektentwicklung – Workflow FarbealsKonzept 180

5.5.2 Farbschema

Nachdem Benutzerprofil, Polaritätsprofil und Moodboard erstellt wurden, hat man die erforderlichen Anhaltspunkte, um ein geeignetes individuelles Farbschema er-stellen 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 Ideal-fall 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 Hinter-grund, Schrift und Gestaltungselemente unterschieden und funktionale Zustände der Bedienelemente abgebildet. Je nach gestalterischer Absicht und Zielgruppe kön-nen 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.175Mitcolorblender.comlässtsicheinePalettevonsechszueinan-derpassendenFarbenauseinereinzigenBasisfarbeerstellen.DieFarbenderPaletteharmoni-sierenz.B.inderKombinationvonText,Hintergrund,LinksundRahmen:http://colorblender.com

184

Ein Flussdiagramm, allgemein als Flowchart bezeichnet, repräsentiert die inhalt-lichen bzw. funktionalen Elemente eines Produkts und ist die visuelle Darstellung der Navigations- bzw. Funktionsstruktur, wodurch die Zusammenhänge und Ver-knüpfungen der inhaltlichen Elemente, Kapitel und Unterverzeichnisse bzw. die der funktionalen Elemente deutlich werden. Werden in erster Linie die funktionalen Elemente eines Produktes dar gestellt, so wird das Flowchart Funktionsstruktur-diagramm genannt.

Mit der Darstellung eines Flowcharts lassen sich entweder gezielt die Abhängigkei-ten der einzelnen Kapitel und Unterkapitel zueinander, aber auch deren Zusammen-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.

5.6 Flowchart

Hauptmenü

Kapitel 1 Kapitel 2

Unterkapitel 1 Unterkapitel 2 Unterkapitel 3

Unter- Unter- Unter-Unterkapitel 1 Unterkapitel 2 Unterkapitel 3

Hauptmenü

Kapitel 1 Kapitel 2

Unter-Unter-kapitel 1



Unterkapitel 1 Unter-kapitel 2

Unterkapitel 3

Abb.182Hierarchische DarstellungvonZusammenhängen.

Abb.183Darstellung der Zusammen-hängeinBezugzueinander.

Hauptmenü

Kapitel 1 Kapitel 2

Unterkapitel 1 Unterkapitel 2 Unterkapitel 3

Unter- Unter- Unter-Unterkapitel 1 Unterkapitel 2 Unterkapitel 3

Hauptmenü

Kapitel 1 Kapitel 2




Unterkapitel 1 Unter-kapitel 2

Unterkapitel 3

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ängig-keiten 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. Funktions elemente an. Es verschafft Überblick, ohne zu sehr ins Detail zu gehen.

Die detaillierte Darstellung der Funktionen eines Produktes und die Visualisie-rung 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 Beschrift ung lässt sich ein einfaches Funktions-layout 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 Funk-tionselemente, ihre Eigenschaft en und Positionen visualisiert, ohne dass man sich bereits im Vorfeld für eine Gestaltung festlegen müsste.

ExemplarischeFunktions-layouts/Wireframes:

• aus Papier www.alistapart.com/articles/paperprototypingwww.youtube.com/watch?v=OT3yYXkafy8www.youtube.com/watch?v=oITeUEjrY3Qwww.youtube.com/watch?gl=BR&hl=pt&v=RTwfz9x98A8

• aus Papier mit Magnetfl ächewww.adaptivepath.com/blog/2008/11/17/magneticprototyping

• als PDF-Dateiwww.boxesandarrows.com/view/pdf-prototypes

• PowerPoint Prototyping Toolkitwww.boxesandarrows.com/view/interactivewww.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01www.youtube.com/watch?v=JjbeCkn0bJg

• mit Visio und Wordwww.interakt.nu/home/visio

• mit Adobe Fireworks CS3www.adobe.com/devnet/fireworks/articles/rapid_prototyping.html

• Verschiedeneshttp://wireframes.linowski.cawww.guuui.com/issues/03_05.php

5.7 Funktionslayout/Wireframe

Abb.197a–bDieStudentinnenClaudiaSchick,JasminBreckenkampundAndreaSchreibererstelltenfürdieEntwicklungeinerInter-netseitederHochschulefürMusikDetmoldeinsprichwört-lichesPapier-Klickmodell.

Projektentwicklung – Workfl ow Funktionslayout/Wireframe 203

Abb.199OmniGraffle(Mac):http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palettehttp://urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle

Projektentwicklung – Workflow Funktionslayout/Wireframe 212

Abb.207a–cDasFunktionslayoutdermobi-lenApplikationdesProjektsPassepartoutmitdetailliertenAngaben.

Abb.208DasScreendesigndermobilenApplikationwurdeaufBasisderFunktionslayoutserstellt.

2135.8 Erweitertes Funktionslayout

Rein formal besteht ein Funktions layout aus einem Layout, in dem Funktionsbe-reiche und deren Funktions elemente 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 Funk-tionslayouts 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, kor-rekten 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 wich-tiges 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. Durchnumme-rierung des Funktionslayouts auch eine kurze Information zu vermerken, welche Aktionen durch das Bedienen welcher Funktionselemente (Menüpunkte, Software- bzw. 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 ver-wendet werden sollen, wie deren Bezeichnungen lauten und wo sich die Dateien bzw. Bauteile befinden.

Zusammen mit diesen Zusatzinformationen entspricht ein solches Funktions-layout 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ähl-formen Anwendung fände und nicht auch noch für die Produktionsplanung von Hardware-Produkten. Das erweiterte Funktionslayout ist für die Produktionspla-nung und Projektvisualisierung eines jeden Hard- oder Softwareprodukts gleicher-maß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öri-gen Text. Somit würde für ihn das Feld ›Font – Text – Datei‹ im erweiterten Funk-tionslayout 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

Projektentwicklung – Workflow Gestaltungslayout 234

1920

×10

80p

x

HD

TV1

080

1680

×10

50p

xW

SXG

A

1440

×9

00p

xW

XGA

1280

×72

0px

H

DTV

720

p

Abb.220Miteiner8 × 8 Pixel Submatrix,diemitnur1×1PixelkleinenPunktenimAbstandvonjeweils8Pixelgebildetwird,lassensichalleDisplay-Formateelekt-ronischerMedienabbilden,daderenAbmessungeninHöheundBreitestetsdurch8teilbarsind.AusnahmengibtesnurbeiSXGA+(1400×1050)undWideSXGA+(1680x1050).

Display-Formate

DiemeistenDisplay-FormatgrößensindaufGrunddeshorizontalenGe-sichtsfeldshorizontalausgerichtet.EineAusnahmemachendieDisplaysmobilerGerätewiez.B.MobiltelefonoderPDA.DiesesHochformatistwohldemUmstandgeschuldet,dassdieseGeräteschmalundhochkantindieHosentaschepassensollen.BeivielendieserGerätelässtsichdasBetrach-tungsformatdesDisplaysaberauchineinQuerformatumschalten.


1024

×76

8px

EV

GA

800

×6

00p

xSV

GA

768

×57

6px

PA

L

480

×32

0px

PD

A

240

×32

0px

Sm

artp

hone

128

×12

8px

M

obilt

elef

on


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 Gestal-tungslayouts einer einheitlichen Struktur folgen zu können.

Ein Raster stellt nicht zwangsläufig eine Einschränkung dar und ist beim End-ergebnis 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.


960- Pixel-System

Daesnichtdarumgehensollte,möglichstvielFlächeimBrowserzufüllen,sonderndievorhandeneFlächemöglichstsinnvollzunutzen,mussimZusammenhangmitsoftwarebeding-tenFormatgrößenunbedingtdas960-Pixel-System erwähntwerden.DanachwirddiemaximaleBreitevon960PixelfüreinWebdesignempfoh-len,dasichdieseBreitegutdurchvieleZahlenwerte(3,4,5,6,8,10,12,15,16,20,24…)teilenundsomitfürvieleunterschiedlicheSpaltenlayoutsnut-zenlässt:http://960.gs/demo.html

ImGegensatzzurBezeichnungLayout-raster,diebeiPrintdateienüblichist,sprichtmanbeiderGestaltungvonInternetseitenvon Layout-Frameworks.DieselassensichzudeminGrid-Frame-worksundCSS-Frameworksunterteilen.Grid-FrameworkssinddirektmitdenLayoutrasternimPrintbereichzuver-gleichen,dasiemitdergleichenAb-sichtfürStrukturunddifferenzierteUnterteilungsorgenundimAufbauinderRegelunverändertbleiben.Nebendem960GridSystemvonNathanSmithsinddanochdas24-Spalten-GridBlueprint CSS30,dasReset-StylesheetvonEricMeyer31unddasYUIGridvonYahooerwähnens-wert.DasYUI Grid32stellthierdieAusnahmedar,daesnichtausschließ-lichfixist,sondernauchdynamischeLayoutsermöglicht,indemesnebendendreifestenBreitenvon750,950und974PixelaucheinenskalierbarenProzentwertfürdieGesamtbreitevor-sieht.DarüberhinausbietetaberauchdasYUIGridkeineweiterendynami-schenFunktionalitäten.

30 www.blueprintcss.org31 http://meyerweb.com/ eric/thoughts/2007/05/01/ reset-reloaded32 http://developer.yahoo.com/yui/grids


Abb.22812-Spalten-Raster(Variantenachdem960GridSystemvonNathanSmith).


5.10.4 Komposition

Je nach Produkt, Produkttyp und Produktabsicht ist zu klären, welche inhaltlichen und funktionalen Bestandteile im Layout wo positioniert werden und welche Be-deutung, Funktion, Größe und Anzahl sie jeweils haben.

Mit Hilfe eines Funktionslayouts – auch Wireframe genannt – erfolgt die detail-lierte Darstellung der Funktionen eines Produktes und die Visualisierung aller ein-zelnen 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 Funkti-onslayout 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 Funk tionslayout erprobt bzw. gefällt werden, nicht bereits Bestandteil des Gestaltungsprozesses sind.

Mit dem Gestaltungslayout werden die gestalterischen Aspekte erprobt und letzt-endlich festgelegt. Die durch das Funktionslayouts ermittelten Erkenntnisse, Bedin-gungen, 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 technolo-gischen 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 da-durch 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 Funk-tionslayout 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ürch-tung, 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 vermeint-lichen Standards zu verlieren, die die Positionierung der Bestandteile festgelegt zu haben scheinen: Logo oben links, Titel oben Mitte, Hauptmenü oben quer, Unter-menü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 Gliederungs-strukturen 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 ge-eignet ist. Solche Kompositionen und Strukturierungen ergaben sich schließlich

InhaltlicheBestandteile• Logo• Symbole• Produktgrafik• Titel• TextimInhaltsbereich• BildimInhaltsbereich• TextinMarginalspalte• BildinMarginalspalte• Tabellen• Formulare• Werbebereich• rechtlicheHinweise• AGBetc.

FunktionaleBestandteile• Hauptmenü• Untermenüverzeichnisse• BedienfelderoderSchalter• Schieberegler• Drehräderetc.


Positionierungs-Erwartungen Das Marktforschungs- und Beratungsunterneh-men eResult GmbH ermittelte 2004 mittels einer mehrseitigen Online-Befragung mit 40 Untersuchungsfragen Positionierungs-Erwartungen bezüglich der Gliede-rung einer Internetseite. Es wurden über 500 erfahrene Internet-Nutzer befragt, in welchen Bereichen eines Layouts ihrer Ansicht nach zentrale Internet seiten-Elemente, 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 betref-fenden Elemente der Internetseiten positionieren und somit ihre Platzierungser-wartungen 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 Un-tersuchungen 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).


Gliederung des Layouts Eine Komposition ist gleichbedeutend mit der Gliede-rung eines Layouts. Je nach Aufteilung einer Fläche, der Größe der daraus resul-tierenden Parzellen, deren Farbe und deren Platzierung kann man die Bedeutung einzelner Bereiche bewusst steuern. Und je nach Verteilung der auf diesen Berei-chen angeordneten Elemente können Zusammenhänge visualisiert bzw. ebenso Bedeutungsreihenfolgen dargestellt werden. Mit Elementen sind folgende Bestand-teile 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 Schal-ter, Untermenüverzeichnis etc. Die Proportionen der Bereiche und der Elemente untereinander aber auch zueinander dienen demnach nicht nur einer ausgewoge-nen Komposition, sondern sind wesentlicher Bestandteil der Kommunikation, die sich z. B. in Chaos, Struktur, Dynamik oder Überzeugungskraft aus drücken kann.

Im Folgenden werden exemplarisch einige Gliederungen gezeigt. Es wird deut-lich, dass ein Raster nicht zwangsläufig einschränkt, sondern bei der Gliederung der Komposition behilflich ist oder sogar zum Stilmittel werden kann. Bei eini-gen 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. Funktions bereich, Orange die Headlines bzw. Beschriftungen und blaue Flächen definieren die Bereiche für Inhalte wie z. B. Bilder, Videos und Texte.

Projektentwicklung – Workfl ow Gestaltungslayout 262

Abb.240a–dwww.aec.at

2865.11 Styleguide

Die Planung eines interaktiven Produkts beginnt in der Regel mit Skizzen und en-det, 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 ge-samten 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 Be-schreibung aller Interaktionsmuster. Daher sind das Flowchart, die Funktions- und Gestaltungslayouts, das erweiterte Funktionslayout, das Storyboard und das even-tuelle 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 Pro-dukt 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 detail-liert 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 Einhal-tung von Barrierefreiheit, definiert wurden, die nun für alle Beteiligten kommuni-zierbar vorbereitet werden müssen.

Der Styleguide ist die Produktionsvorgabe und dient der Kommunikation in-nerhalb 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 schnel-ler 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 dokumen-tiert. 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 we-sentliches Ziel des Styleguides in der Wahrung eines einheitlichen Erscheinungsbil-

Projektentwicklung – Workflow Styleguide 293

DieWebsitevonPassepartoutteiltsichindreiBereiche,denNavigations-bereich,denderuntergeordnetenNavigationunddemBühnenbereich,dervondemNavigationsbereichumschlossenwird.

DasRasterunddieVermaßungenfürdasLayoutderPDA-Applikationensind,aufgrundderkleinenAktionsflä-che,jenachFunktionvariabelgestal-tet.AlleVariationenbeinhaltenjedochdieaufderrechtenSeitebefindlicheNavigationsleiste.

Abb.255Format:740×416Pixel.

Abb.256Format:320×480Pixel.JenachFunktionvariiertdieGrößederAktionsflächevon288×230bis316×476Pixel.

3105.12 Barrierefreiheit – eine erweiterte Form der Usability

»Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Ge-brauchsgegenstä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‹, ›Gebrauchstauglich-keit‹ 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 Behin-derung 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ög-lich, 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 be-kannten 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 mo-torischen oder sensorischen Fähigkeiten im Gebrauch von Produkten und Dienst-leistungen 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 an-gewandte Begriffe. Die Bezeichnung ›Barriere freiheit‹ wäre ergänzend zu ›Ergono-mie‹ 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 An-zahl an älteren Menschen, die ja nicht nur krankheits-, sondern in erster Linie altersbedingt im Umgang mit Produkten und Dienstleistungen ähnlich gehin-dert sein könnten. Daher sollte ›Barrierefreiheit‹ nicht unter dem Aspekt der Be-,

»NiemanddarfwegenseinesGeschlechtes,seinerAb-stammung,seinerRasse,seinerSprache,seinerHei-matundHerkunft,seinesGlaubens,seinerreligiösenoderpolitischenAnschau-ungbenachteiligtoderbevorzugtwerden.Nie-manddarfwegenseinerBehinderungbenachteiligtwerden.«

GrundgesetzderBRD,§3,Abs.3.

Barrierenkönnensichinfolgen-denKontextenergeben:• Alter• Behinderung• Lernschwierigkeiten• Gender• Kultur,Sprache• sozio-kulturelleBedingungen

Projektentwicklung – Workflow Barrierefreiheit–eineerweiterteFormderUsability 312

Alltagsprodukte lassen sich kombiniert mit zusätzlichen Geräten in ihrer Bar-rierefreiheit 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 Ver-größern bzw. Verändern der Bildschirmdarstellung. Des Weiteren gibt es Sprachge-neratoren 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 Mobil telefone 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 behinder-tenspezifisch 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.283KennungderTastaturvon›DataHand‹.

Abb.284Mitder›DataHand‹könnenAnwendermitgeringenmotori-schenFähigkeitenalleVorgängeeinesComputersunddievonSoftwarepaketensteuern.Computer-Maus-Bewegungensindebensomöglich.(www.datahand.com)

Screendesignbeispiele Barrierefreiheit–eineerweiterteFormderUsability 320

6 Screendesignbeispiele

321Screendesignbeispiele

Screendesign beschreibt die Form, Interfacedesigndie 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 Benutzerober-fl ä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 defi niert, 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ön-nen 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 er-mö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 wahrgenom-men 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äufi g wird mit Screendesign zwar ausschließlich eine rein äs-thetische 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 Be-dienbarkeit 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 unter-stü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 ge-stalten sind.37

37 Wie schnell bei der Beurtei-lung durch einen Betrachter über die Qualität entschieden wird, zeigen unterschiedliche Untersu-chungen. So wird z. B. laut einer Studie der kanadischen Forsche-rin 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 Screen-design zumindest bei Internetsei-ten bereits nach 50 Millisekun-den gefällt. Das ist gerade einmal halb so lang wie ein Augenblin-zeln. 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 drit-ten Durchgang die Darstellungs-zeit auf 50 Milli sekunden. Unab-hängig davon, wie lange die Probanden eine Internetseite anschauen durft en, kamen sie mit einer Genauigkeit von 94 – 98 % bei der Beurteilung der Qualität zum selben Ergebnis wie bereits nach 50 Millisekunden.

Screendesignbeispiele Barrierefreiheit–eineerweiterteFormderUsability 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 Ge-brauch 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 Abbil-dungen rechts im Screenshot der Internetseite ›www.interactions.de‹ (siehe Abbil-dung), 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 be-friedigt oder neue geweckt oder als Anreize eingesetzt werden. In der Psychologie stellt man so genannte ›Motivtaxonomien‹ auf. Dies sind Auflistungen, die beschrei-ben, 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. Misserfolgevermeiden

3. Sex

4. Dialogbereitschaft,InteresseanderKontaktaufnahmeundanneuenKontakten

5. Unterhaltung

6. Neugier

7. LustaufAbwechslung

8. InteresseanBildung,anInformation

9. Vorteileerlangen,z.B.durchInformationundRatgeber

10. EhrgeizundErfolg

11. StrebennachKontrolleübersichundandere

12. FürandereFürsorgeundUnterstützungleisten

13. Selberbeschütztwerdenwollen

14. Ordnung,dasBestrebennachVereinfachungundÜberschaubarkeit

15. Risiko,Spannung,Aufregung,z.B.mitSpielen

16. Zeitersparnis

17. Ansehenerlangen

350

Screendesign kann wesentlicher Bestandteil der Funktion sein und somit unter-stü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 Ge-staltung 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 festge-legtes 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 38 Die Übergänge von Screen-

und Interfacedesign sind z. B. bei der Internetseite http://wwwww-wwww.jodi.org des holländisch-belgischen Künstlerduos JODI (Joan Heemskerk, Dirk Praes-mans) oder bei der CD-ROM shiftcontrol von ›audiorom inter-active music‹, an der u. a. Paul Hopton arbeitete, fließend.

6.3 Screendesign – Form mit Funktion

JODI

BeidenArbeitenvonJODIwirddemAnwenderkeinklarabgegrenztesSteuerelementangeboten.DasInter-facedesignistsosehrindasScreen-designübergegangen,dassderAn-wenderzunächstSchwierigkeitenhat,sichzurechtzufinden.JODIbeabsich-tigtallerdingsauch,InterfacesunddenUmgangmitComputernschlechthinalsvermeintlichzuverlässigeSteuer-einheitenzuhinterfragen.

Screendesignbeispiele Screendesign–FormmitFunktion 353


JetBlue Check-in-Terminal

SelbstbeiAutomatengibtesselteneBeispiele,beidenendasScreendesignsogelungenist,dassihreAnwendungsogarFreudemacht.DieAgenturAn-tennaDesignNewYorkInc.gestaltetefürdieCheckin-AutomatenvonJetBlueeinScreendesign,dasFormundFunk-tionundsomitScreen-undInterface-designuntrennbarmiteinanderver-schmelzenließ.EinevergleichbareQualitätgelangdieserAgenturauchbeidenFahrkartenautomatenfürdieMetrovonNewYorkCity.DiesehoheQualitätinFormundFunktionwarnichtzuletztdeshalbmöglich,weildieAgentursowohldieHardware,sprichdenAutomaten,alsauchdieSoftwaregestalteteundsomitalleEigenschaf-tendesScreen-undInterfacedesignsperfektaufeinanderabstimmenkonnte.

MitdemJetBlueCheck-in-Terminal könnenFluggästedasEincheckenvordemFlugselbstdurchführen.BereitsderAuftraggeberJetBlueentschied,dassdieGestaltungderHardwareunddiedesScreen-undInterfacedesignsgemeinsamvoneinereinzigenAgen-turerfolgensollte,umeinedurchgän-gigeGebrauchstauglichkeitzwischenHard-undSoftwaresicherzustellen.AntennaDesignNewYorkInc.gelanges,demgesamtenCheck-in-ProzesseinereduzierteEleganzzuverleihen.DasScreendesigndientderFormundderFunktiongleichermaßenundun-terstütztdasInterfacedarin,mitdemAnwenderineinenDialogzutreten.

Abb.320a–dJetBlueCheck-in-Terminal(Industrial-,Screen-undInterfacedesign:MasamichiUdagawa,SigiMoeslinger;AntennaDesignNewYorkInc.;Foto:RyuzoMasunaga).


Abb.324AppleII,GSOS5.0.4

1987

Abb.325MacOS7.0

1991

Abb.326MacOS9.0

1999

Abb.328Windows3.1

1992

Abb.329Windows2000Pro

20001985

Abb.327Windows1.01

Abb.330AmigaOS,Workbench1.0


2005

Abb.332MacOSX10.4Tiger

Abb.331MacOSX10.1Puma

2001

Abb.334WindowsXPPro

2009

Abb.333MacOSX10.6SnowLeopard

Abb.336Windows7

2002

Abb.337GNOME2.2.0inRedHat9

Abb.335WindowsVista

2007

Web 1.0 ScreendesignfürWissensvermittlung 390

7 Web 1.0

391Web 1.0

Erst in Folge der Defi nitionen für Web 2.0 (Mitmach-Internet) und Web 3.0 (Se-mantisches Internet) ergab sich eine äquivalente Kurzbezeichnung für das ›ur-sprü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 abrufb ar 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 Kombina-tion 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 hierar-chisch als Baumstruktur aufgebaut.

Die Bezeichnung ›Web 1.0‹ kann einerseits als etabliert gelten, da es bei Google immerhin ungefähr 1.020.000 Treff er 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 lebhaft eres Interesse an diesen Begriff en bei der Suche über Google (Abb. 354). Das Diagramm zeigt aber deutlich, dass ›Web 2.0‹ eindeutig der am häufi gsten gesuchte dieser vier Begriff e ist. Im Vergleich dazu sind ›Web 3.0‹ und ›Semantic Web‹ nur sehr wenig gefragt und dies mit off ensichtlich 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 ei-nem Trend, der wieder vergehen wird, kann aber dennoch nicht die Rede sein. Die Begriff e ›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 klassifi zieren. 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 Begriff e ›Web 3.0‹ bzw. ›Semantic Web‹ bei weitem nicht so stark diskutiert werden, liegt nicht zuletzt daran, dass diese Th emen 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 Eigenschaft en leise und beinahe unbemerkt ihre Vorteile entfalten. Wurde früher ›Semantic Web‹ teilweise noch mit dem Be-griff ›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 wer-den. Schließlich basiert das Semantic Web auf klar strukturierte Taxonomien (siehe S. 420). So klassifi ziert es Daten und Informationen, um daraus Beziehungen und Be-deutungen zu generieren. Das Web 2.0 ist hingegen durch eine freie Partizipation

43 www.google.com/trends

44 http://conferences.oreillynet.com

392Web 1.0

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.

Abb.354SuchstatistikderBegriffe›Web1.0‹,›Web2.0‹,›Web3.0‹und›SemanticWeb‹beiGoogleTrends(www.google.com/trends).

393Web 1.0

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än-den 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 histori-scher 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 seit-dem als Sputnikschock bezeichnet werden. Die seit 1972 verwendete Bezeichnung Defense Advanced Research Projects Agency (DARPA) macht den Verteidigung-saspekt noch deutlicher.

Abb.355DieseGrafikzeigtdieInterpre-tationvonNovaSpivack,wieerdieEntwicklungdesInternetssieht.SeineInternetseitewww.twine.comzeigt,dasserbereitsaktivimWeb3.0ange-kommenist(Spivack,Nova(09.02.2007).HowtheWebOSEvolves?In:MindingthePlanet.http://novaspivack.typepad.com/nova_spivacks_weblog/2007/02/steps_towards_a.html).

EigentlichmüsstendieGraphenfür›Web1.0‹,›Web2.0‹und›Web3.0‹abeinemgewis-senZeitpunktzwarmitAbstän-den,aberparallelverlaufen.

Web 2.0 – Das Mitmach-Internet 398

8 Web 2.0 – Das Mitmach-Internet

399Web 2.0 – Das Mitmach-Internet

Mit den Möglichkeiten und Eigenschaft en, 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öff neten 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ög licht wird und ein Image vermittelt werden kann, dass aber erst das Interactiondesign die Schaff ung einer Beziehung zwischen Produkt und Anwender eröff net. 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.

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 stattfi ndet (www.web2con.com). Mit der Versionsnummer soll die Weiterentwicklung des Internets an sich unterstrichen werden. Die Grundlage zur Prägung des Begriff es liegt selbstverständlich an Ange-boten, die dem Mitmachprinzip des Web 2.0 bereits vor 2004 gerecht wurden. Hier eine kleine Auswahl:

8.1 Web 2.0 – Soziale Netzwerke

delicious

Wikipedia

WikipediaisteinvonJimmyWalesgegründetesWissensportal,dessenInhaltevondenNutzernselbsterstelltwerdenunddessenArtikeldurchalleNutzerbewertetundgeändertwerdenkönnen.DiedeutscheVersionwurdeimMärz2001gegründet.

http://de.wikipedia.orgWikimediaFoundation,SanFrancisco,USA

mySpace

mySpacebietetseinenNutzerndieGestaltungeinespersönlichenWeb-logsunddieTeilnahmeaneinerOn-line-Community,diesichinersterLiniemitdemErstellenunddemHörenvonMusikbeschäftigtundmitdermansichgegenseitigaufNeuerscheinun-genundKonzertehinweistundein-lädt.DieNutzerkönnenInformationen,Bilder,MusikundVideosöffentlichodereinemvordefinierbarenKreisanAnwendernzurBetrachtungundzumHerunterladenbereitstellen.mySpacewurde2003vonTomAndersonundChrisDeWolfegegründetund2006vonRuportMurdochfür580MillionenDollargekauft.

www.myspace.comMySpace,LosAngeles,USA

del.icio.us

del.icio.usdientdazuBookmarkszuteilen,dieeinzelnenLinksmitTagszuversehen,umsogezieltLinks,ThemenundZusammenhängefindenzukön-nen.del.icio.uswurde2003entwickeltundDezember2005vonYahoogekauft.

www.del.icio.us.comYahoo,Sunnyvale,USA

Web 2.0 – Das Mitmach-Internet SozialeNetzwerke 405

Abb.356a–bMASHME–eineBachelorarbeitvonMarcNeumeyer.Sieent-standimSommersemester2009anderMHMK(www.mhmk.de),Betreuung:Prof.TorstenStapel-kamp.DieArbeitbefindetsichimInternetunter:www.mashme.info


Abb.357MitPipeslassensichzahlreicheFeedsundanderemaschinen-lesbareInformationenunter-schiedlicherAnbietermiteinan-derkombinieren,filtern,erzeugenundaucheigeneMashupserstellen:http://pipes.yahoo.com/pipes(SieheS.411)

Abb.358Fundable.org


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 Inter-net 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 so-mit 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 Po-purls58 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.

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/NetNewsWire58 www.popurls.com

Abb.362Mitxfruits.comkannmansichalleseineRSS-FeedsineinemeinzigenRSS-FeedgesammeltansMobiltelefonoderalsE-mailzusendenodersichseineRSS-Feedsvorlesenlassen.MankannauchdieRSS-Feedsande-rerTeilnehmerunddieTeilneh-merselbstkennenlernenundzudemerfahren,auswelchenRegionendieTeilnehmerstam-men.

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 Se-mantic Web, da sich erst mit ihnen valide, sinnvolle und assoziative Verknüpfungen zwischen Personen, Dateien, Medien, Inhalten und Maschinen (Rechnern) erge-ben. 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 einbin-den (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.

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 ver-schiedene oder irreführende Begrifflichkeiten, Verwechslungen und Fehldeutungen zur Folge haben.

Ein wichtiger Vorteil des Tagging z. B. gegenüber der Annotation in Bibliothe-ken 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üh-ren 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 er-reichen 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 Kartei-kä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 wer-den, weshalb sich in klassischen Bibliotheken so einige Bücher befinden werden, die aufeinander verweisen oder in einem geeigneten Zusammenhang – gemein-sam 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 US-Bibliotheken68 digitalisiert hat und kostenfrei zum Lesen und Recherchieren zur Verfügung stellt.

Google Books ermöglicht nämlich ein automatisches Vergleichen von Buchin-halten. Und es werden nicht nur aktuelle Bücher digitalisiert, sondern auch histo-rische. 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.

63 http://del.icio.us64 www.diigo.com65 www.stumbleupon.com66 http://digg.com

67 http://books.google.de68 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)

8.2 Tagging

Web 2.0 – Das Mitmach-Internet Taxonomie 422

Abb.368Die6StufenderBloom’schen TaxonomieimkognitivenBe-reich,revidierteFassungnachKrathwohl.

DasBloom’s Wheel.Diebe-kanntesteTaxonomiesindfürdenkognitivenBereichdievonBenjaminBloom(1913–1999)beschriebenensechsLern-zielstufen,diehäufigmitBloom’sche Taxonomiebezeich-netwird.ErwareinUS-amerika-nischerPsychologieprofessor,deranderUniversityofChicagoErziehungswissenschaftenlehrte.

DieGrafikstammtvonJohnM.Kennedy,http://upload.wikimedia.org/wikipedia/com-mons/2/24/Blooms_rose.svg(MultilizensmitGFDLundCreativeCommonsCC-BY2.5).

Web 2.0 – Das Mitmach-Internet Mitmach-Kampagnen 437

Abb.381MitJuiceCaster.comkannmanallesmachen,wasmanbereitsvomComputerausmitz.B.AnbieternwieFlickr.com,Twit-ter.comundFacebook.commachenkonnte,nurdiesmalausschließlichmobil.

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 Inter-view 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üsselthe-men des eigenen Blogs oder der eigenen Internetseite oder denen seiner Kunden je-weils 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, Kon-gresse 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 aufgenom-men 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 zeit-aufwä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/pro-ducts/air). Mit twitterdeck lassen sich seine Twitter-Kontakte in Gruppen auftei-len 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öglich-keiten 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 au-tomatische 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-Micro-Blogs informiert sein möchte, sollte sich das Add-on Twitterfox installieren.

8.6 Twitter

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 Ange-bote 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, des-sen Gebrauch oder Weitergabe deswegen aber nicht gleich vermieden oder gar un-tersagt 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äh-rigen 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 vor-sichtig 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 Betroffenheits-lyrikers 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. Das-selbe gilt für jene, die Opfer von verborgenen Attacken durch Viren und Trojanern werden. Hier helfen selbst hoher Sachverstand und aktive Vorsichtsmaßnahmen

8.8 Web 2.0 – Gefahreneinschätzung

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 pro-fessionellen 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 Ti-tel 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üddeut-schen 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 Pa-pierarchive 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äts-fö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 US-Bü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 wesent-liche Kompetenz der Journalisten, aus den großen Informationsmengen der Pres-seagenturen 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 ver-lieren. 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, Zu-sammenhängen und Fakten erfolgen soll.

97 www.sueddeutsche.de/ computer/28/426784/text98 www.faz.net; Weblogs – Immer schön sachlich bleiben, 12. Dezember 200799 www.heise.de/tp/r4/ artikel/26/26825/1.html100 www.euroblog2007.org

101 http://pewresearch.org

8.9 Web 2.0 – Journalismus

466

Wer zahlreiche Angebote von Google nutzt, seine E-mails über Gmail verschickt, seine Termine und Adressen über sein individuelles Googleportal iGoogle ver-waltet und ausschließlich über Google im Internet sucht oder sogar den Google-eigenen Browser Chrome nutzt, gibt einem einzigen Anbieter einen sehr umfassen-den Ü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 personenbe-zogene Hinweise und Daten über die Suchenden zu erhalten, um zu vermeiden, bei den Treffern nur noch den Massengeschmack anzuzeigen. Da Google bereits zahl-reiche 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 Stan-dardtreffern zufrieden geben möchte, wird in Zukunft entweder auf spezialisierte Suchmaschinen zurückgreifen oder Google möglichst viele Daten über sich preisge-ben müssen. Das heißt, je mehr Angebote man von Google nutzt, umso wahrschein-licher 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 he-rausgebracht 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üs-sen 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 leug-nen. 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

MarktanteilederSmartphone-Betriebssysteme(3.Quartal2008/Quelle:Canalys):• Symbian: 47%• Apple: 17%• RIM(BlackBerry): 15%• Microsoft: 14%• sonstige: 7%

103 http://maps.google.de

8.10 Google – Ein Mitmach-Monopol?

Web 3.0 Google–EinMitmach-Monopol? 476

9 Web 3.0

477Web 3.0

Am 5. Juni 2008 defi nierte der Leiter des Deutschen Forschungszentrums für Künstliche Intelligenz (DFKI) Professor Wolfgang Wahlster auf dem 3. Dresdner Zukunft sforum die Zukunft sversion 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 Al-ternativen 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 Versions-nummern helfen zudem, deutlich zu machen, über welchen Technologiestatus bzw. über welche Möglichkeiten diskutiert wird.

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 An-wendern/Betrachtern und ihren Interpretationen ermöglichen. Charles William Morris (1901–1979) ordnete Semantik als Teilbereich der Semiotik (griechisch se-meion: Kennzeichen), der allgemeinen Lehre von den Zeichen, zu und etablierte so den Begriff Semantik in der Semiotik111. Er prägte die Auft eilung 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 Verbots-schild 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 Defi nition 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).

111 Foundations of the Th eory of Signs, Charles William Morris, Th e University of Chicago Press, 1938.

9.1 Semantische Suche

Abb.394DasSemiotischeModell.

Zeichen

Wahrnehmung

KonzeptErfahrung

Erfahrung

Erfahrung

Syntax

Zeichen

Zeichen Benutzer/Situation

Bedeutung

Semantik

Pragmatik

Abb.393SemiotiknachCharlesWilliamMorris,1938.

486

Um Sinnzusammenhänge der einzelnen Daten maschinenlesbar erkennen und aus-werten zu können, müssen die verfügbaren Daten entweder aufeinander referen-zieren 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 Zu-sammenwirken 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 ContentManagement-Systemen (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 Hin-tergrundinformationen 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 Informa-tionen 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 ei-nen Sinnzusammenhang zu bringen und entsprechend darzustellen.

117 www.zemanta.com118 www.linkedfacts.com

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

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

9.2 Open Data

Abb.399MitdieserGrafikdemonstrierendieEntwicklervonZemanta,welchenBereichderRechercheihrPlug-Inübernimmt(www.zemanta.com).

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 Be-ziehungen 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 Zu-sammenhang 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 Such-maschinen 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

PiggyBank,eineFirefox-Erweiterung,umInformatio-nenimWebautomatischzusammelnundinBeziehungzusetzen

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

livejournal.comnutztFOAFfürdieeigeneCommunity www.livejournal.com/community/communityname/data/foaf

MitqdosseinenStatusinderdigitalenWeltselbstdefinieren

http://qdos.comhttp://qdos.com/appshttp://foaf.qdos.com

FlockbasiertaufMozillaundisteinBrowser,derdenFOAF-GedankenkonsequentaufdasAustauschenvonDatenundInformationenbezieht

http://flock.com

MicrobloggingdienstIdenti.cavonControlYourself,Inc. http://identi.ca

GeneratorenzumErstelleneigenerFOAF-Dateien

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

FOAF-a-MaticStufe2 www.ldodds.com/wordtin/Wiki.jsp?page=FOAFaMaticMark2

FoaFMe http://foafme.opendfki.de

FOAFmaker http://peoplesdns.com/make

132 www.foaf-project.org FOAF-Spezifikationen: http://xmlns.com/foaf/0.1

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

WeitereInformationenüberFOAF:• EinBeispieleinerfoaf:Person,

konzipiertnachdemFOAF-Schema:www.semantic-web.at/people/blumauer/card#me

• EinekurzeaberumfassendeZusammenfassungüberFOAF:http://was-ist-foaf.de

• Eineumfangreiche,aberauchhilfreicheLinklistezumThemaFOAF:http://delicious.com/danbri/foaf

9.3 FOAF – Friend Of A Friend

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 las-sen 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 biblio-graphischer Daten.

Bei einer semantischen Suche geht es auch darum, Hinweise, Anregungen und As-soziationen zu erhalten und nicht nur um komplett ausformulierte und fertig auf-bereitete 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 anre-gen 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 Parti-zipation 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 Seman-tik. Außerdem ist XML hinsichtlich einer maschinellen Auswertung nicht eindeutig. Deswegen wurde unter anderem das Datenmodel RDF entwickelt, das maschinen-verarbeitbare 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 genann-ten gibt es noch weitere, bereits etablierte Standards zur geordneten Datenerfassung. Die Metadaten, die man bereits jetzt z. B. mit dem XMP-Standard (Extensible Meta-data 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 be-reitgestellt 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.

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

142 www.w3.org/2001/sw143 www.iptc.org144 www.iptc.org/IIM

9.6 Metadaten-Formate

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 HTML-Elemente (bspw. <span> oder <p>) zu definieren, die zur jeweiligen Unterschei-dung 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:[email protected]">[email protected]</a><br /> Web: <a href="http://www.maas-co.com/">www.maas-co.com</a></address>

Bereitstehende Elemente-Definitionen für hCard:

"country-name" =Land"email" =E-Mail"fn" =vollständigerName(Vor-undNachname)"locality" =Stadt"org" =Firma"postal-code" =Postleitzahl"region" =Bundesland"street-address" =Straßeinkl.Hausnummer"tel" =Telefonnummer"url" =Websiteadresse

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

174 http://microformats.org http://mikroformate.de/2006/ 12/16/einfuehrung-in-mikro-formate http://mikroformate.de/grundla-gen/s5/175 hCard creator: http://micro-formats.org/code/hcard/creator http://microformats.org/wiki/hcard-authoring176 hCalendar creator: http://microformats.org/code/hcalen-dar/creator http://microformats.org/wiki/hcalendar177 http://microformats.org/wiki/hatom178 hReview creator: http://microformats.org/code/hreview/creator http://microformats.org/wiki/hreview179 hResume creator: http://hresume.weblogswork.com/hresumecreator http://microformats.org/wiki/hresume

180 http://technorati.com/contacts

9.7 Microformats

519

Ergänzend zu den Informationen einer Ressource, die das RDF Datenmodell be-reitstellt, 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 SemantischesWeb

XML – StrukturSyntaktischesWeb

HTML – Form

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, Ei-genschaften 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.

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

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

9.9 OWL – Web Ontology Language – WOL

Web 3.0 Web3.0–Web3D 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 Grund-lage 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ösun-gen sind aber unveränderbar und vorgegeben. Dafür ist die Spielestruktur so ange-legt, 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.

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

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

Abb.427EineSzenenacheinerOnline-BattlevonEnricoReinsdorf(www.re-design.de)undseineminternationalenTeamausMit-streiternbeiWorld of Warcraft(www.wow-europe.com).SeinCharakternameistPlarti(UntoteHexenmeisterin)undersitztindererstenReihealsdrittervonlinks.

Web 3.0 Web3.0–Web3D 543

Abb.431Metaversen-Medien:Kongresse,Seminare,Vorlesungen,Kino(Abb.:vonHanspeterFüllemann,www.flickr.com/people/hampi,CreativeCommons-Lizenz).

Abb.434Metaversen-Medien:Festefeiern,Konzerte,Ausstellungenetc.(Abb.:vonHanspeterFüllemann,www.flickr.com/people/hampi,CreativeCommons-Lizenz).

Abb.437Metaversen-Medien:Texte.DieNotecardistzumLesenvonTextengeeignet,stelltallerdingskeinLayout,keineFormatierungundauchkeineBilderdar.NotecardskönnenabervomLeserkopiertundbearbeitetwerden(Abb.:www.realtime-collaboration.de).

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

Abb.435Metaversen-Medien:Bücher.AnimationenundGeräuschebeimUmblätternsindmöglich.Eswirdmassivversucht,dieäußereRealitätnachzubilden(Abb.:www.realtime-collaboration.de).

Abb.438Metaversen-Medien:BüchereienkönneninMetaversensimuliertundBücherverliehenwerden.(Abb.:www.realtime-collaboration.de).

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

Abb.436Metaversen-Medien:VerlagepräsentierenauchinSecondLifeeinigeihrerBücher(Abb.:www.sltalk.de).

Abb.439Metaversen-Medien:DataGloves.Hapti-schesEmpfindenkannfürMetaversensimuliertwerden.(Abb.:HapticWorkstationmitVRMLAnwendung;vonImmersionCorporationwww.immersion.com/3d).

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 wer-den, 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 Ar-beitsflä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 Tra-ckingsystems erkannt werden kann. Die dadurch ermittelten Koordinaten werden an den Computer übermittelt und dort verarbeitet, was wiederum zu einer entspre-chenden Ä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 Konven-tionen 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 Nut-zer 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 even-tuell eingeschränkt sein soll. Im Rahmen dieser Konventionen kann das System z. B. auch feststellen, ob Objekte (reale oder virtuelle) sich berühren bzw. überei-nander 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 Arbeits-fläche befinden, auf die zugleich projiziert wird, individuell durch ihre Form bzw. durch Erkennungsmerkmale (z. B. Farbe, Icon, Barcode) identifizieren und im je-weiligen Nutzungsszenario entsprechend zuordnen. Diese identifizierten Objekte können sogar vordefinierbare Eigenschaften (z. B. Magnetismus, Abstossungskraft, Ordner- oder Papierkorbeigenschaften) erhalten. Mit solchen Augmented Realty-Verfahren können z. B. Mediziner Operationen simuliert durchführen, Ingenieure und Chemiker nutzen solche Verfahren, um Werkstücke und deren Beschaffenhei-ten virtuell zu erproben. Übertragen auf Mediendesign, Webkonzeptionen und ver-gleichbare 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.

9.12 Web 3.0 – Augmented Realities

Anhang Web3.0–UbiquitousComputing 562

10 Anhang

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 Grafi ken und an Martin Mellen für seinen unermüdlichen Einsatz bei der Gestaltung und Umset-zung des Layouts und der Fertigstellung der Druck dateien. Sabine Brand danke ich für die Unterstützung bei der Einpfl ege der Textkorrekturen.

Ein besonderer Dank gilt den Studierenden aus meinen Seminaren im Fachbe-reich Gestaltung an der Fachhochschule Bielefeld, im Studiengang ›Medieninfor-matik und Gestaltung‹ der Universität Bielefeld, den Studierenden der MHMK und den Studierenden meiner Seminare in den Studienrichtungen ›Kommunikations-design‹ und ›Industrial Design‹ an der Universität Wuppertal. Mit den studenti-schen Seminarergebnissen wurde das Buch enorm bereichert.

Außerdem danke ich den Mitarbeitern des Verlags, insbesondere Herrn Her-mann Engesser, Frau Gabriele Fischer und Dorothea Glaunsinger, für ihre Unter-stützung und Geduld.

10.1 Danksagung

564

Alle in diesem Buch, unter www.designismakingsense.de/Daten_WebX.zip und http://vimeo.com/interfacedesign enthaltenen Angaben und Informationen wur-den 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 Nicht-nutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlos-sen. 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 beschrie-benen 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ütz-ten 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 wur-den einer sorgfältigen Virusprüfung unterzogen und sind nach bestem Wissen und Gewissen des Überprüfers virenfrei, funktionstüchtig und enthalten keine schäd-lichen 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 wer-den 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 An-wender, 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.

10.2 Rechtshinweise

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 gelink-ten/verknüpften Seiten hat weder der Autor noch der Verlag Einfluss. Deshalb di-stanzieren 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, qua-litativ 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.

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/Da-ten_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 ent-schuldigen. 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 ver-zichteten 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: [email protected]

10.3 Bildernachweis

567

Corporate Identity / Corporate Design

Birkigt, K.; Stadler, M.; Funck, H.J.: Corporate Identity. Grundlagen – Funkti-onen – 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 Han-

delns. 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/Her-big, 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 Farb-

gestaltung. DuMont, Köln, 1999.Küppers, Harald: Schule der Farben. Grundzüge der Farbentheorie für Compu-

teranwender 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 ›Infor-

mationsgestaltung und Typografie‹ am Fachbereich Münster. Verlag H.M. Hau-schild, 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. Cam-bridge 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.

10.4 Literaturverzeichnis

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 Inter-

from, 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., Olden-bourg, München, 2001.

Kracke, Bernd: Crossmedia-Strategien. Dialog über alle Medien. Gabler Verlag, 2001.

Lissitzky, El: Topographie der Typographie. In: El Lissitzky Maler Architekt Ty-pograf Fotograf. Dresden, VEB Verlag der Kunst, 1976 (1923), S. 360.


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 zwi-schen Blütenträumen und Businessmodellen. Gabler, 2004.

Schwabe, Gerhard: Theorien zur Mediennutzung bei der Gruppenarbeit. In: Schwabe, Gerhard; Streitz, Norbert; Unland, Rainer (Hrsg.): CSCW-Kompendium. 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, 2001Stapelkamp, 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.; Met-calfe, 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. Maast-richt, 1999.

Bürdek, Bernhard E.: Design. Geschichte, Theorie und Praxis der Produktgestal-tung. 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 Fachzeit-schrift für Information Management & Consulting 14. Jahrgang (August 1999).


Hesse, Friedrich W.; Garsoffky, Bärbel; Hron, Aemilian: Interface-Design für computerunterstütztes kooperatives Lernen. In: Issing, Ludwig J.; Klimsa, Paul (Hg.): Information und Lernen mit Multi media. 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 Human-Computer 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öl-ler (Hrsg.): Von Aufbruch und Utopie. Perspektiven einer neuen Gesellschafts-geschichte 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: Kra-mer, G. (Hrsg.): Auditory Display: Sonification, Audification and Auditory In-terfaces. 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.


Konzeptentwicklung

Kelley, Tom; Littman, Jonathan: The Art of Innovation. Profile Books, 2001.Pahl, Gerhard; Beitz, Wolfgang: Konstruktionslehre – Grundlagen erfolgrei-

cher Produktentwicklung. Springer, 2003Trogemann, 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


Riser, U.; Keuneke, J.; Freibichler, H.; Hoffmann, B.: Konzeption und Ent-wicklung interaktiver Lernprogramme. Kompendium und multi medialer Work-shop. 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 Lernpro-grammen – 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 – Überle-gungen 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.


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 – Interdiszi plinäre

Projekte. Springer, X.media.press, Berlin, 2002.Schubert, Petra: Digital erfolgreich. Fallstudien zu strategischen E-Business-

Konzepten. Springer, Berlin, 2002.Warschburger, Volker: Nachhaltig erfolgreiches E-Marketing. Online-Mar-

keting als Managementaufgabe: Grundlagen und Realisierung. Vieweg Verlag, 2001.

Wenzlau, Andreas: KundenProfiling. Die Methode zur Neukunden akquise. Pub-licis 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 Vermarktungs idee zum Marketingkonzept. Cornelsen, 2003.

Medientheorie

Bentele, Günter; Rühl, Manfred: Theorien öffentlicher Kommunikation. Öl-schlä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 Sociali-sation of Knowldege. In: Silvia Pizzocaro, Amilton Arruda, Dijon De Moraes (Hrsg.): Design Plus Research – Proceedings of the Politecnico di Mi-lano 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 Kommunika-

tion, 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 Deutsch-

land. Springer, Wien, 1997.Frieling, Rudolf: Medien Kunst Interaktion. Die 80er und 90er Jahre in Deutsch-

land. 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 Commu-

nication. University of Illinois Press Urbana, 1963.


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


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 Human-

Computer Interaction. Allyn & Bacon, 4. Aufl, 2004.Thissen, Frank: Screen-Design. Effektiv informieren und kommunizieren mit Mul-

timedia. 3., überarb. u. erw. Aufl., Springer, X.media.press, Heidelberg, 2003.Velthoven, Willem: Website Graphics. Schmidt (Hermann), Mainz, 2001.


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 Wissensge-sellschaft. Springer-Verlag, Berlin, Heidelberg, S. 73–88, 2006.

Blumauer, A. & Fundneider, T.: Semantische Technologien in integrierten Wissensmanagement Systemen. In: Andreas Blumauer & Pellegrini Tas-silo (Hrsg.): Semantic Web. Webe zur vernetzten Wissensgesellschaft. Springer-Verlag, Berlin, Heidelberg, S. 228–239, 2006.

Geyer-Hayden, B.: Wissensmodelierung im Semantic Web. In: Andreas Blu-mauer & 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 Approa-

ches to Social Software and the Semantic Web. Technical report, Semantic Web Company Vienna, 2009.

Pellegrini, T. & Paschke, A.: Semantic Web Awareness Barometer 2008. presen-tation, 2009.

Tochermann, K. & Maurer, H.: Semantic Web – Geschichte und Ausblick einer Vision. In: Tassilo Pellegrini & Andreas Blumauer (Hrsg.): Se-mantic 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. Re-

clam, 1999.Eco, Umberto: Zeichen: Einführung in einen Begriff und seine Geschichte. Suhr-

kamp, 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, Semio-

tik, Informatik. Baden-Baden, Agis-Verl., 1993.Peirce, Charles S.: Naturordnung und Zeichenprozess: Schriften über Semiotik

und Naturphilosophie. Frankfurt am Main, Suhrkamp, 1991.


Typografie, Layout

Bellatoni, Jeff; Woolman, Matt: Type in motion. Schmidt, Mainz, 1999.Bollwage, Max: Typografie kompakt. Vom richtigen Umgang mit Schrift am Com-

puter. 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. Lan-gen/Müller; Auflage: 2., verb. A., 1992.

Hartmann, Frank; Bauer Erwin K.: Bildersprache. Otto Neurath – Visualisie-rungen. 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 Kauf-

mann Interactive Technologies Series). Morgan Kaufmann, 2000.


Wahrnehmung

Brandes, Uta (Red.): Welt auf tönernen Füssen: Die Töne und das Hören. Kunst- und Ausstellungshalle der Bundesrepublik Deutschland. Göttingen: Steidl, 1994.

Brandes, Uta (Red.): Sehsucht: über die Veränderung der visuellen Wahrneh-mung. 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, Karl-heinz; Gente, Peter; Paris, Heidi; Richter, Stefan: Aisthesis. Wahrneh-mung 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: Kra-

mer, G. (Hrsg.): Auditory Display: Sonification, Audification and Auditory In-terfaces. 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 Breitbandzeit-

alter. 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 Wissensma-

nagement 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 Unter-nehmenspraxis. Grundlagen, Fallstudien und Trends zum Einsatz von Social Software. Oldenburg: Wissenschaftsverlag, 2008.


Surowiecki, James: Die Weisheit der Vielen. C. Bertelsmann Verlag, 2005.Tochtermann, K. & Schachner, W.: Corporate Web 2.0. Web 2.0 und Unterneh-

men Band II – Wie passt das zusammen?. Vol. II, Shaker Verlag, Aachen, 2008.Zerfass, A.; Boelter, D.: Die neuen Meinungsmacher: Weblogs als Herausforde-

rung 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: Zen-trale Begriffe und Unterscheidungen. In: Andreas Blumauer & Pellegrini Tassilo (Hrsg.): Semantic Web. Webe zur vernetzten Wissensgesellschaft. Sprin-ger 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. Schrif-ten, Symbole, Signete, Signale. Marixverlag, 2004.

Frutiger, Adrian; Schenkel, Ronald: Formen und Gegenformen. Niggli, 1999.Hartmann, Frank; Bauer Erwin K.: Bildersprache. Otto Neurath – Visualisie-

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

578

8×8PixelSubmatrix 234,2422D-Barcodes5551Passwd447280slides429960-Pixel-System244

AAbbild 17Abstand 48,71,99,105,106,116,

124Abweichung 31Achromatopsie 92AdditiveFarbmischung 39Ähnlichkeit 31AJAX(AsynchronousJavascript

AndXML) 276,309,403,429,445

AlphaWorld528AmericanTypewriter 101Analyse 172,185,488Anfänger 8,206,258Animation 222Anker 136Anreize332

→MotivationAntialiasing 102,104Antiquaschriften 100Antizipation 19,382Anwender 9

→Nutzer→Konsument→Zuschauer

Anzeigetafel 44,66,71→Display

API(ApplicationProgrammingInterface) 407,429

AppleHumanInterfaceGuideli-nes 288

Architekturfassaden 72Aristoteles 17,519ARPAnet(AdvancedResearch

ProjectsAgencyNet)393Atom495,508,509,510Auffälligkeit 30Auflösung 48,70,99,108,112,

231,236,242Aufmerksamkeit 18,26,31,50,

83,96,252Aufmerksamkeitsanalyse 258Aufmerksamkeitssteuerung

→SteuerungvonAufmerk-samkeit

Aufteilung 231,233,261,296,478

AugmentedReality532,544,553Augmentionisten532,536Ausstellung 277,384,509,543Auswahlvs.Interaktion 336Automaten 84,127,128,318,m

356,358Avatar426,527,530,542

BBalázs,Béla531Barcode 553,555BarrierefreieAutomaten 318BarrierefreieinteraktiveMulti-

mediakioske 318Barrierefreiheit 94,310,318Baumgarten,AlexanderGottlieb

19BedeutungvonFarben78,88

→FarbbedeutungBedeutungsgrößen 62,83Bedienbarkeit 310,321Benutzerführung 78Benutzeroberfläche 11,12,84,

96,126,207,247,321,350,356,361,497→Interface

Benutzerprofil 149,171Berührung 133,337BeschaulicheZugang 206

→ZugangskategorienBetriebssysteme288,361,466BeuthVerlag146BewertungenimInternet452BibTeX495Bildröhre39,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

Bildschirmschrift99,102,109 →Screenfont

Bildsprache 177,294Bildwortmarke 296,299

→MarkeBiM-Format(BinaryFormatfor

MPEG-7)503Bit(Binarydigit) 44,49,132Blau 35,39,42,62,88,93,96Blau-Blindheit93Blicksteuerung258

→Trackingblinkx505Blocksatz 292Branding 428Briefing145Brock,Bazon380Brockhaus402Bunt-Unbunt-Kontrast 50,56,

58,97,99,108

C Chat 128,528,532,538,544,551Checklisten,TippsundHinweise

11,48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533

→TabellenChrome(Google)457,466,472CIE-Farbsystem 42CIELab 42CIELuv 42Clarendon 100CloudComputing429,472CMYK-Farben 38,41,42,44,296Comic 222,256,372Computer-Maus 312,316,553Computer-Röhrenmonitor 39,

42,44,48,66,68,108,112,116,118,124,128,231

Computerspiel 128,446,528,530,559

CorporateDesign 109,144,153,176,286,306,415

CorporateIdentity 109,144,153,176,286,306,415

CourierNew 102,105,111Crossmedial 276,290Crowdsourcing404,413,415CSS(CascadingStyle

Sheets) 104,114,244,246,403,445

Cyan 36,38,39,41,42,44,67,296→CMYK

Cyberspace530

DDARPA(DefenseAdvanced

ResearchProjectsAgency)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

Definitionen96,508,511,532 →Tabellen

Descriptors503,509DescriptionSchemes503,509DescriptionDefinitionLan-

guage(DDL)503,509Designprozess142,153

→ProjektentwicklungDeubel,Heiner 20Deutanopie(Grün-Blind-

heit) 93,95→Farbenfehlsichtigkeit

DeweyDecimalClassification(DDC)420

Dialog 202,321,399,542Didot 100,113DIN-Format233 →halbierendenAufteilungDiscoursedb403

Display 39,42,44,48,66,68,108,112,116,118,124,128,231→Anzeigetafel→Automaten→DisplayvonmedizinischenGeräten→DisplayvonmobilenGeräten→DisplayvonProduktions-maschinen →InteraktiveMultimediaki-oske →LCD(LiquidCrystalDis-plays) →LED(LightEmittingDiode)→Monitor→OLED(OrganischeLichtEmittierendeDioden)→Plasmamonitor

Distanz 86,134Dithering 46,47dmbh 137DPI(dotsperinch) 112Download-Internet →Web1.0Dramaturgie 364,374Drehbuch 11,149,154,221,228Druckerzeugnisse 39,67DVD 68,118,173,228,323,382Dynamik 176,276

E›echte‹Interaktion 530Edler,Jan 73Edler,Tim 73Einfachheit 344 →KlarheitEinheit 112,532

→MaßeinheitElemente 17,24,31,184,227,

230,252,261,323,347,420E-Mail394Emotionen 9,35,324EmpfehlungenundFragen11,

48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533 →Tabellen

EMS(EnhancedMessageSer-vice) 130

em-Wert 112,114,298→Maßeinheit→Pixel

Entwurf 154→Skizze

e-Paper 133EPG(ElectronicProgramm

Guide) 119,121Erkennbarkeit 23Erwartungskonformität 259,

260

10.5 Index

Anhang Index 579

Erzählformen 213,227,364→LineareErzählform→NonlineareErzählform

Eskapismus532→InteraktiveErzählform

Evaluierung 220,248Evernote419ExIF(ExchangeableImageFile)

446,497Experte 92,258Expertenzugang 206

→ZugangskategorienExposé 221

F Facebook395,408,417,442,449,

450,486›falsche‹Interaktion 530Farbbedeutung 78,88

→InternationalisierungFarbdarstellung 66,68Farbe 17,35,78,82,88,90,92,

176,296Farbe-an-sich-Kontrast 54Farben-Blindheit93

→Farbenfehlsichtigkeit Farbenfehlsichtigkeit 92,94FarbenimInternet 49Farbkodierung 78,82,83,84,86Farbkontrast 86

→KontrastFarbkreis 36,42,52,62Farbmischung 39,41

→AdditiveFarbmischung→SubtraktiveFarbmischung

Farbpalette 45,46,49Farbraumsysteme 42Farbschema180Farbsättigung36Farbsysteme 42Farbtiefe 44,49Farbton 42,50,64FarbtönedesSpektrums 35Farbwert 42,49Feedback-Link 259Fernbedienung 346,366Fernseh-Röhrenmonitor 39,42,

44,48,66,68,108,112,116,118,124,128,231

Fibonacci-Zahlenfolge 232FigurundGrund 24,29Fläche 25,29,213,230,233,256Flowchart 11,165,185,429FOAF(FriendOfAFriend)479,

491,516Foerster,Heinzvon 17Fokus,Fokussierung 356Folksonomie392,424Font105,109

→SchriftartForm 11,173,180,231,310,321,

346,350

Format 231,233,276,495FragenundEmpfehlungen11,

48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533 →Tabellen

FragestellungenundDefinitio-nen11,48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533→Tabellen

Framework238,244,246,403,429,486,512,523

FTP(FileTransferProtocoll)394Funktion 11,180,310,321,350,

364FunktionaleAspekte 56,350FunktionaleBestandteile 248

→BestandteileFunktionsabläufe 79,83,248Funktionsbereiche 79,213Funktionskategorien 206

→ZugangskategorienFunktionslayout 11,14,153,169,

201,213,248 →WireframeFunktionssoftware 124,276,288Funktionszustände 78,83

G GalacticNetwork394Game 374,555Garamond 111Gebote,Kriterien,Tippsund

Hinweise11,48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533→Tabellen

Gefahreneinschätzung446Gefühle19

→EmotionenGeleiteteNavigationGeleiteterZugang 206

→ZugangskategorienGelb 38,41,42,44,296Gemeinsamkeiten 150Geocaching498Georgia 109,111Geotagging436,498Geschlossenheit 25Gesichtsfeld 22Gestaltgesetze22-33Gestaltungsfläche 81,296,299Gestaltungslayout 230,248Gestaltungsprozess 142,153

→ProjektentwicklungGibson,William530Gliederung 78,230,249,261,

230,249Gliffy429

GNOME 288,363Goethe,JohannWolfgang

von 21GoldeneSchnitt 231,232Google344,391,416,418,432,

457,466,474,479,498,505,520,548,552,559

GoogleChrome →ChromeGoogleEarth468GPS312,360,436,446,467,497,

498,558Graustufen 44GRDDL(GleaningResource

DescriptionsfromDialectsofLanguages)518

Groteskschrift 101,106Grün 35Grün-Blindheit 92,93

→FarbenfehlsichtigkeitGrundfarben 35,40,49,96Gruppierung 249,438GUI(GraphicalUserInter-

face) 11,12,84,96,126,207,247,321,350,356,361,497

H HalbierendeAufteilung 233 → DIN-FormatHandlung 222,354Handy346,432

→MobiltelefonHarmonie 89hAtom →AtomhCard479,508hCalendar479,508HDDVD 173HDTV-Norm 48,118Headline 261

→ÜberschriftHegel,Frank 26,196,383(und

alleGrafiken,wennnichtandersausgezeichnet)

Hegel,GeorgWilhelmFried-rich 19

Hell-Dunkel-Kontrast 50,60,97Helligkeitswert 42Hexadezimal-Code 49Hierarchie 200Hintergrund 29,35,60,90,99,

180→Vordergrund

HinweiseundTipps11,48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533→Tabellen

hResume479,508hReview479,508

HTML(HypertextMarkupLanguage) 102,297,508,517,519,527

HTML-Elemente508,510HTML4.x517HTML5.x517Hyperlink 411Hypertext 391

I iCalendar495,509Icon 12,553,557 →Logo

→PiktogrammID3(IdentifyanMP3)466,497,

502Identifikation 299,488,516Identitätsbereich 79,299IIM(InformationInterchange

Model)495Image 153,413Immersion531,536Immersionismus532Immersionisten532Immersiv227,530,536Individualisierbarkeit 413Information 90,249,321,380Informationdesign 11,14Informationssoftware 290Inhalt 138,228,236,276,324,

399,418Inhaltsbereiche 80,83,136,323IntegriertePublikation 9Intensität 17,30,56Interactiondesign 11,13,350,

399,403,411Interaktion 11,198,213,318,336,

399,530Interaktionsformen 311,354,380Interaktionsmöglichkeiten 336,

364,411,527Interaktivität 227,321,336,350,

366,380InteraktiveWertschöpfung399Interface 11,12,84,96,126,207,

247,321,350,356,361,497→Benutzeroberfläche

Interlacing 118Internetseite 88,94,109,116,

157,176,236,258,282,290,323,344,404,454,473,504

Interview 438,542Intuition 18,19IPTC(IPTC-NAA-Standard)495IPTV(InternetProtocolTelevi-

sion) 122IPv4394IPv6394

Anhang Index 580

J JavaLookandFeelDesign

Guidelines 289Jiglu418JODI 350Joystick 54,136jQuery403

K Kalkulation156KalteFarben 62Kalt-Warm-Kontrast 62,97Kant,Immanuel 19KDE 288KeyVisual 179Klarheit 32,344

→EinfachheitKörperfarben 41,42Kompetenzgrade 206Komplementärfarben 52,108Komplementärkontrast 52,97Komposition 248,250,261,380Konstruktionsorgel 250Konsument 9,453Kontext 19,28,554Kontrast 29,50,54,56,60,62,

64,78,86,97→Farbkontrast

Kontrastverlust 86Konzept 176,248,322,512Kostenkalkulation156KreisförmigesPopup-Menü 131KreisförmigeTouchpad-Tasta-

tur 131Kriterien,Gebote,Tippsund

Hinweise11,48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533→Tabellen

Küppers,Harald 36,52

L Landmarks 312Lastenheft146 →PflichtenheftLayout 12,213,230,238,248,276,

323,350Layoutraster 244,322LCD(LiquidCrystalDis-

plays) 66,69,70,122→Display

LED(LightEmittingDiode) 44,48,71,108,134

Leitsystem 79,277Lem,Stanislav530Lernen 380,549,552Lesbarkeit 96,100,106,118Leserichtung 17,253,256

→Fotoreading

Lexikon 402Lichtfarben 40,42Lichtmatrix 73,135Linearantiqua 100LineareErzählform 213,227,364

→InteraktiveErzählform→NonlineareErzählform

Linie 25,29,152,250,298Link258,491,565

→HyperlinkLocationBasedServices 128,

432,443,445Logo 157,248,519

→Icon→Piktogramm

Logobereich 79,299LSO(LatentSemanticOptimiza-

tion)505LucidaGrande 103,111Lupe 40,102

M Maas,Stefan 196,348,383Maas+Co 348Machinima537Maeda,John 512,516,568Magenta 35,37,38,41,42,44,

67,296→CMYK

Manipulation 109,423Marke 153,428

→BildwortmarkeMashup 403,404,434,466,479MassCustomization 413,453Maßeinheit 112,114,298,532

→em-Wert→Pixel

May,John 26Medien 39,99,108,133,254,276,

291,380,415,446,458,463,543

Medienkompetenz446Meilensteine146,149,154Mellen,Martin 239,255,563Menü 124,130,236,259,326,

336,380,402Metapher 12,343,372MetaPlus 101Metadaten486,493Metadaten-Formate495Metaversen528,530,532,543,

548,552MethodischerZugang 206

→ZugangskategorienMeyer-HayozDesign126,127,

247MHP(MultimediaHomePlatt-

form) 119,123Microformats497,508,518MicrosoftVista 289Minion 100

Mitspieler 9,315,364,374,428,446

Mitmach-Internet →Web2.0Mitmach-Kampagnen425Mittellänge 99,106MMOG(MassiveMultiplayer

OnlineGame)536MMS(MultimediaMessage

Service) 130Mnemotechnik 570MobileGeräte 8,44,130,289,

360,411,443Mobiltelefon 39,66,113,230,

235,276,451,466,561Mobiltelefon-optimierteFarb-

palette 47Moholy-Nagy,Làszló 250Monitor 39,42,44,48,66,68,

108,112,116,118,124,128,231→Computer-Röhrenmonitor→Fernseh-Röhrenmonitor→Plasmamonitor→Display

Moodboard 176,180,290Motivation 332,396MPEG-7466,497,502Müller,Karl 250MUDs(Multi-User-Dungeons)

528Multimediakiosk128,356 →POI(PointofInformation)Multimodal 545Museum 277MUSHs(Multi-UserShared

Hack)528Mustererkennung 32Myriad 117

N Nachbilder 36Nachhaltigkeit 310Nadin,Mihai 382Nähe 25Navigation 249,256,300Navigationsbereich 79,295,

300,305Navigationsgeräte70,360Navigationshinweis 83Navigationspfad 457Navigationssysteme 312Nekes,Werner 33,576Netzwerk 394,408,456Neugier 277,332Neuromancer530NichtproportionaleSchrift 105

→ProportionaleSchriftNietzsche,Friedrich 19NonlineareErzählform 213,227,

364 →InteraktiveErzählform→LineareErzählform

NovaSpivack473NTSC-Norm 118Nutzer 9,109,136,258,311,364,

296,400,424,442,446,450,505,530,553

O Office12 289OLED(OrganischeLichtEmittie-

rendeDioden) 70,108,133Ontologie392,420,516,519OpenCalais480,486,488OpenData486,487OpenDataSet486,487OpenDataDefinition487Orange 36,38,261Ordnung 32,78,176,202,420Orientierung 21,78,176,249,

326,497,542Ort 442,472,532OWL–WebOntologyLanguage

5190xdb503

P PalmOS 289PAL-Norm 48,118Parasument453PatervaMaltego449PDA(PersonalDigitalAssis-

tant) 39,70,119,234,276,290

Permalink411PervasiveComputing553,554,

560Pflichtenheft146 →LastenheftPhantomatik530Phishing448Pipes(pipes.yahoo.com)406Pixel 112,114,298,532

→em→Maßeinheit

Pixelschrift 99,102,109→Screenfont

Plasmamonitor 69→Display

Plastizität 28PODcasting415POI(PointofInformation)128,

356 →MultimediakioskPoken408Polaritätsprofil 172Positionierungserwartun-

gen 206,258Powerleveling537Präsentation 155,318Primärfunktion 206Produktentwicklung 142,153

→Projektentwicklung

Anhang Index 581

Projektabsicht 146,151Projektentwicklung 142,153Projektplanung 142,149,154,

161,166,215Proportion,proportional 114,

118,120,222,298ProportionaleSchrift 105

→NichtproportionaleSchrift

Prosument453Protanopie(Rot-Blindheit) 93,

95→Farbenfehlsichtigkeit

Pulldown-Menü 316→Menü

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

R Raster 39,41,67,178,230,240,

244,261,293,298RatschlägeundHinweise11,48,

89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533 →Tabellen

Räumlichkeit 17,24,62,227RDF(ResourceDescription

Framework)419,429,479,486,488,491,493,495,503,512

RDFa515,517realities:united 73Regeln,HinweiseundTipps11,

48,89,93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533 →Tabellen

Reihe 123,133Reihenfolge 185,297,314,420,

545Reflexion 39,86RelativeVermaßung 112,114,

298→em-Wert

Retrievr479Revyu.com489RFC2396516RFID(RadioFrequencyIdenti-

fication)560RGB-Modell 42RichInternetApplications(RIA)

428RichWebClients(RWC)429Rockwell 100Rollover 139Rot 35,39,42,85,89,93,296Rot-Blindheit93,94

→Farbenfehlsichtigkeit

Rot-Grün-Blindheit92 →Farbenfehlsichtigkeit

RSS 404,411,463,495Rythmus 168

S SansSerif111,297Sättigung42

→FarbsättigungSchieberegler 213,248Schnellzugang 206

→ZugangskategorienSchriftart 100,109,118,503Schriftschnitte 99,103,291Schriftgrößen 8,100,104,112,

116,298Schwarz 39,41,67,78,89,94,

297Screendesign 11,12,31,215,230,

238,320,364,380,402,438Screenfont 99,102,109Scrollen 301Scrollbalken 136,236Scrum150SecondLife528,533,538,540,

543Sehen35,88,92Sekundärfunktion 206SelbstleuchtendeMedien 41,

66,100,108Semager505Semantik478,486,489,503,518,

520,559SemanticDiscoverySystem489SemanticWebInitiative495SemantischesInternet479 →Web3.0SemantischeSuche 479,493,

505,512,520Semiotik478SerifenloseSchrift 99,101,291Serifenschrift 99,100,104,109,

111,118,291Servicebereich 79,84,299,301Silverscreen 102Sitemap 258,308Simultankontrast 50,97SIOC–Semantically-Interlinked OnlineCommunities492,515Skizze 158,185Smartphone 109,235,284Smashing Magazine403SoftwareasaService429 →RichInternetApplications

(RIA) →RichWebClients(RWC)Smartball561SMS(ShortMessageSer-

vice) 66,123,130,276,438SnowCrash530Social-Software 407,413,415,

418,494,549

SozialeNetzwerke376,400,407,413,549

Spalte 107,112Spaltenabstand 107Spaltenbreite 107Spannung 332,354SPARQL(SPARQLProtocoland

RDFQueryLanguage)518Spationierung 104Spiele 123,315,536,559,561Sprache 292,310,404,479,490,

502,519SteuerungvonAufmerksam-

keit 258Stephenson,Neil530Stil,Stilmittel 176,261,330,337,

342,352StoneSans 101Storyboard 184,213,221,286Strich25,29,152,250,298

→LinieStruktur 14,78,82,163,165,176,

256Styleguide 11,153,286,322Submatrix 231,234,242SubtraktiveFarbmischung 41,

67Suche 391,454,472,479,493,

512,520,561Suchfunktion 411,451Suchmaschinenmarketing(SEM)

505Suchmaschinenoptimierung

(SEO)505Sukzessivkontrast 50,97

→SimultankontrastSummatechnologiae530SustainableMedia 384Swarming415Symbol 78,82Syntax 101,114,291,478,503,51System 156,161,244,276,321,

416,519,553

T Tabellen11,48,89,93,96,154,

160,200,220,308,311,316,319,403,416,474,480,491,533

Tag-Cloud419Tagging396,418,436,498,520Tastatur 58,84,116,312,447Taxonomie332,391,416,418,

420,424,492,519TCP(TransmissionControl

Program)394TCP/IP(TransmissionControl

Program/InternetProtocol)394

Teletext120,242→Videotext

Tertiärfunktion 206

Textdarstellung 116Textmenge 136Thissen,Frank 571Tiefe 70,502TippsundHinweise11,48,89,

93,96,154,160,200,220,308,311,316,319,403,416,474,480,491,533 →Tabellen

Titel248,261,326,493,512→Überschrift

TopologyMap 261Tor(Software)457Tracking 171,457,490Transparent 146,156Treatment 221Trebuchet 103,109,111tripleninedynamicmedia

GmbH 384Tritanopie(Blau-Blindheit) 93,

95→Farbenfehlsichtigkeit

Twine429Twitter417,438,442,446,463,

466Typetester115Typografie 8,12,98,176

U Überlagerung 24,41Überprüfung 309,461Überschrift 248,261,326,493,

512UbiquitousComputing(Ubi-

com)558Univers 101,111Unschärfe 134Unterlänge 99URI(UniformResourceIdenti-

fier)516Usability 8,12,171,249,289,310,

359Usability-Test 171,309User 9,127,288,450,528

→Nutzer→Konsument→Zuschauer

V vCard495,508,511Verdana 103,109,111,117,295,

297Vergrößerung 336Verknüpfung 81,296,518Verlauf 104Vermaßung 304,323Verständlichkeit 147,402Video 11,123,148,169,221,366,

382,418,502,530,548Videotext 118,120,242

Anhang Index 582

Visualisierung 11,64,147,201,230,319

VisualisierungvonFarbenfehl-sichtigkeit 94,319

Vordergrund 9,419→Hintergrund

W Wahrnehmbarkeit 19Wahrnehmung 16,62,92,252,

310,442,459,478WahrnehmungundFarbe 35Wand,Eku 324Web1.0390,393,416,453,477,

559Web2.0391,392,395,398,416,

477,495,528,554,559Web2.0–Journalismus463Web3.0391,476,Web4.0429Web-TV505Web3D527WebOS393,429Website156,277,291,323,557

→InternetseiteWebsichereFarbpalette56

→InternetoptimierteFarb-palette

Wenzel,Horst 570Werbung 90,108,158,258,361,

455,463,503Wertschöpfung 399Wiederholung 343Wii(Nintendo)559Wiki402,416,487Wikipedia400,402,416,432,

475,480,487Winograd,Terry 573Wireframe11,14,153,169,201,

213,248→Funktionslayout

Wissensvermittlung 9,365,380wpMapsPlugin403WOL →OWLWolframAlpha473WorldofWarcraft(WOW)536

X xfruits.com412XHTML133,445,508,515,517XML(EXtensibleMarkupLan-

guage) 276,309,411,493,495,503,508,519

XMP(ExtensibleMetadataPlatform)493,495

Y Yellow 38,41,42,44,67,296

→CMYK→Gelb

Z Zadeh,Lofti558Zahl 49,93,449Zeichen 27,107,130,114,439,

448,478→Icon→Logo→Piktogramm

Zeilenabstand 106,114,316Zeilenlänge 106Zeit 68,151,164,166,395,417,

458,536Zeitplanung149,154,156,163,

165,166,222Zielgruppe 54,66,101,143,147,

171,311,350Zielgruppenanalyse 185Zielgruppenansprache 14,322,

384Zielsetzung 146Zoom 112Zufall 392,466Zugangskategorien 206Zuschauer 9,123,188,346,561

Anhang Index 583

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 Ei-genschaften der analogen und der digitalen Medien und entwickelt mit medienad-äquaten Verknüpfungen projekt- und adressatenspezifische Konzepte. Der wesent-liche 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 Ein-beziehung aktueller Usability-Strategien an. Er berücksichtigt ebenso das Erleben am Produkt und die Freude beim Benutzen (Joy of Use) und entwickelt so User Ex-perience 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 Ergebnissesowohl 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 Pro-dukt- und Markenentwicklung; Produkt-, Interface-, Corporate Design; www.maas-co.com)

Weitere Informationen zum Autor und zu den Themen dieses Buches:www.designismakingsense.de

Kontakt:[email protected]

10.6 Über den Autor

Web X.0 Erfolgreiches Webdesign, professionelle Webkonzepte. Gestaltungsstrategien, Styleguides

Documents

Transcript of Web X.0 Erfolgreiches Webdesign, professionelle Webkonzepte. Gestaltungsstrategien, Styleguides