+ All Categories
Home > Documents > 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259...

5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259...

Date post: 26-Jun-2020
Category:
Upload: others
View: 1 times
Download: 0 times
Share this document with a friend
25
5.3DesignderBenutzeroberfläche 257 Konsistenz: Die gleiche Informationsart ist erwartungskonform und durchgängigaufdiegleicheWeisepräsentiert. Internetbenutzer sind hinsichtlich ihrer Eigenschaften (Wissen, Fähigkeiten, Spra che etc.), Ziele (Informationsrecherche, elektronischer Handel etc.) und Browser bzw. Benutzeragenten (z. B. MS Internet Explorer, Opera Mobile etc.) besonders heterogen. Den daraus entstehenden Problemen für die Gebrauchstauglichkeit beiBenutzungsschnittstellenvonWebAnwendungentragendieEmpfehlungen im Teil 151 326 der ISONorm 9241 Rechnung. Sie konzentrieren sich auf folgende Themen: GrundlegendeGestaltungsentscheidungenundstrategien GestaltungvonInhalten NavigationundSuche DarstellungvonInhalten In den neuen Leitlinien für die Zugänglichkeit von Software im Teil 171 327 der Norm 9241 hat sich die ISO des Themas Acessibility angenommen 328 und stellt EmpfehlungenfürdieGestaltungzugänglicherSoftwarebereit.Dieseähnelnstark denenderbereitsvorgestelltenBITV(sieheKapitel2.2.2.2,Seite50). Die Steuerung einer Webapplikation erfolgt durch direkte Manipulation von Bildschirmelementen,alsodurcheinegrafischeRepräsentationdererforderlichen Funktionen durch symbolische Elemente, mit denen die Benutzer unter Einsatz vonMaus(oderanderenEingabegeräten)direktinteragieren. 5.3.1 Farben DieFarbwahlistvonzentralerBedeutungimWebdesign.Sielässtsicheinsetzen, umdemBesucherdieOrientierungzuerleichtern,seineAufmerksamkeitzustei gern und zu lenken, sowie um ihn emotional zu beeinflussen und Informationen aufeinemzusätzlichenKanalzukodieren. DiesesKapitelbeschreibtzunächstdiegrundlegendenOrdnungsmöglichkeitenfür Farben aus technischer und wahrnehmungsorientierter Perspektive (Kapitel 5.3.1.1). Auf welche Weise ein Individuum eine bestimmte Farbe wahrnimmt, ist neben den Parametern der Farbe selbst vor allem von ihrem Zusammenspiel mit 326 Siehehttp://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail. htm?csnumber=37031. 327 Siehehttp://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail. htm?csnumber=39080. 328 BisherfandensichEmpfehlungenfürdieZugänglichkeitverstreutindenauf Gebrauchstauglichkeit ausgerichteten allgemeinen Gestaltungsempfehlungen der Normen ISO 9241110, ISO 924111 bis 924117, ISO 149151 bis 149153 undISO13407.
Transcript
Page 1: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 257�

� Konsistenz:� Die� gleiche� Informationsart� ist� erwartungskonform� und�durchgängig�auf�die�gleiche�Weise�präsentiert.��

Internetbenutzer�sind�hinsichtlich�ihrer�Eigenschaften�(Wissen,�Fähigkeiten,�Spra�che� etc.),� Ziele� (Informationsrecherche,� elektronischer� Handel� etc.)� und� Browser�bzw.� Benutzeragenten� (z.� B.�MS� Internet� Explorer,�Opera�Mobile� etc.)� besonders�heterogen.� Den� daraus� entstehenden� Problemen� für� die�Gebrauchstauglichkeit�bei�Benutzungsschnittstellen�von�Web�Anwendungen�tragen�die�Empfehlungen�im�Teil�151326�der� ISO�Norm�9241�Rechnung.�Sie�konzentrieren�sich�auf� folgende�Themen:�

� Grundlegende�Gestaltungsentscheidungen�und��strategien�� Gestaltung�von�Inhalten�� Navigation�und�Suche�� Darstellung�von�Inhalten�

In� den� neuen� Leitlinien� für� die�Zugänglichkeit� von� Software� im�Teil� 171327� der�Norm� 9241� hat� sich� die� ISO� des� Themas� Acessibility� angenommen328� und� stellt�Empfehlungen�für�die�Gestaltung�zugänglicher�Software�bereit.�Diese�ähneln�stark�denen�der�bereits�vorgestellten�BITV�(siehe�Kapitel�2.2.2.2,�Seite�50).��

Die� Steuerung� einer� Webapplikation� erfolgt� durch� direkte� Manipulation� von�Bildschirmelementen,�also�durch�eine�grafische�Repräsentation�der�erforderlichen�Funktionen� durch� symbolische� Elemente,� mit� denen� die� Benutzer� unter� Einsatz�von�Maus�(oder�anderen�Eingabegeräten)�direkt�interagieren.�

5.3.1 FarbenDie�Farbwahl�ist�von�zentraler�Bedeutung�im�Webdesign.�Sie�lässt�sich�einsetzen,�um�dem�Besucher�die�Orientierung�zu�erleichtern,�seine�Aufmerksamkeit�zu�stei�gern�und�zu� lenken,�sowie�um�ihn�emotional�zu�beeinflussen�und�Informationen�auf�einem�zusätzlichen�Kanal�zu�kodieren.�

Dieses�Kapitel�beschreibt�zunächst�die�grundlegenden�Ordnungsmöglichkeiten�für�Farben� aus� technischer� und� wahrnehmungsorientierter� Perspektive� (Kapitel�5.3.1.1).�Auf�welche�Weise� ein� Individuum�eine�bestimmte�Farbe�wahrnimmt,� ist�neben�den�Parametern�der�Farbe�selbst�vor�allem�von� ihrem�Zusammenspiel�mit�

�����������������������������������������������������������326� Siehe�http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.�

htm?csnumber=37031.�

327� Siehe�http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.�htm?csnumber=39080.�

328� Bisher�fanden�sich�Empfehlungen�für�die�Zugänglichkeit�verstreut�in�den�auf�Gebrauchstauglichkeit� ausgerichteten� allgemeinen�Gestaltungsempfehlungen�der�Normen� ISO� 9241�110,� ISO� 9241�11� bis� 9241�17,� ISO� 14915�1� bis� 14915�3�und�ISO�13407.�

Page 2: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

258� 5�Feinkonzeption�(Drehbuch)�

den� Umgebungsfarben,� der� Farbwahrnehmungsfähigkeit� des� Individuums� und�technischen�Aspekten� des�Ausgabegeräts� abhängig� (Kapitel� 5.3.1.2� ab� Seite� 262).�Wovon�es�abhängt,�welche�Wirkung�diese�wahrgenommene�Farbe�bzw.�Farbkom�bination�dann�auf�den�Menschen� in�physiologischer,� synästhetischer,�psychologi�scher� in� symbolischer� Hinsicht� hat,� beleuchtet� das� Kapitel� 5.3.1.3� ab� Seite� 267.��Letztlich� lassen� sich� Farben� auch� dazu� nutzen,� auf� zweidimensionalen� Medien�einen�Eindruck�von�Räumlichkeit�zu�erzeugen�bzw.�zu�verstärken�(Kapitel�5.3.1.4�ab�Seite�275).�

5.3.1.1 FarbmodelleFarbmodelle� ordnen� jede� Farbe� eines� Farbsystems� systematisch� in� einem�Körper�unterschiedlicher� Form� ein� und� weisen� dem� jeweiligen� Farbort� eindeutige� Zah�lenwerte� zur� Identifikation� zu.�Alle� Farbmodelle� lassen� sich� durch�Koordinaten�transformation�ineinander�überführen.�TECHNISCHE FARBMODELLE

Das� additive� Farbsystem� (Abbildung� 149)� ist� die� physiologische� Farbmischung�oder�auch�die�Synthese�durch�Addition.�Die�Primärfarben�für�die�additive�Farbmi�schung�sind�Rot,�Grün�und�Blau.�Mischungen�entstehen�durch�verschieden�starke�Überlagerungen�der�Lichtquellen.�So�lässt�sich�beispielsweise�die�Farbe�Gelb�durch�die� Addition� von� Rot� und� Grün� erzeugen.� Das� Fehlen� jeglicher� Farbe� ergibt�Schwarz� und� die� Summe�der� drei� Primärfarben� zusammen� ergibt�Weiß� [Lynch/�Horton�1999,�S.�126].��

�Abbildung�149:�Additives�Farbsystem�

Auf�Grund�der�Verwendung�der�drei�Grundfarben�Rot�(R),�Grün�(G)�und�Blau�(B)�wird�dieses�Farbsystem�auch�als�RGB�Farbmodell�bezeichnet.�Es�wird�vor�allem�dort� eingesetzt,� wo� technische� Geräte� aktiv� Licht� aussenden,� beispielsweise� im�Farbfernseher,�Monitor,�Flüssigkristallbildschirm�oder�in�der�Beleuchtungstechnik�[Bühler�2004,�S.�64ff.].�Beim�Monitor� ist�das�RGB�Farbmodell�mittels�kleiner�Bild�punkte�in�den�drei�Farben�realisiert.�Diese�sind�abwechselnd�so�eng�nebeneinander�angebracht,� so�dass� für�den�Menschen�nur�noch�die�Farbmischung�erkennbar� ist.�Aufgrund� verschiedener�Monitorbeschichtungen� kann� es� vorkommen,� dass� eine�

Page 3: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 259�

Farbe�nicht�in�der�gleichen�Wellenlänge�und�somit�auf�heterogenen�Systemen�un�terschiedlich�dargestellt�wird.�Dies� lässt�sich�durch�die�Gamma�Korrektur�anglei�chen�[Gallenbacher�2000,�S.�580ff.].��

Das�subtraktive�Farbsystem� (Abbildung�150)� ist�die�physikalische�Farbmischung�oder� auch� die� Synthese� durch� Subtraktion.� Voraussetzung� für� die� subtraktive�Farbmischung�ist�immer�das�Vorhandensein�von�Licht.�Das�Prinzip�beruht�darauf,�dass�ein�Gegenstand�nur�bestimmte�Wellenlängen�des�(weißen)�Umgebungslichtes�reflektiert� und� andere� Teile� absorbiert,� also� vom�weißen� Licht�wie� ein� Filter� ab�zieht.�Beispielsweise�absorbiert�ein�gelbes�Objekt�blaues�Licht�und�remittiert�Grü�nes�und�Rotes,�das�sich�dann�im�Auge�zu�einem�gelben�Farbeindruck�addiert.�Wird�von� einem� Objekt� das� gesamte� Farbspektrum� zurückgeworfen,� so� erscheint� das�Objekt� weiß.� Je� mehr� absorbiert� wird,� desto� dunkler� erscheint� der� Gegenstand.�Wird�das�Licht�vom�Objekt�vollständig�absorbiert,�so�erscheint�das�Objekt�schwarz.�

�Abbildung�150:�Subtraktives�Farbsystem�

Die�Grundfarben� für� die� subtraktive� Farbmischung� sind�Cyanblau� (C),�Magenta�(M)� und�Gelb� (Y329),�weshalb�man� es� auch� als�CMY�Farbmodell�bezeichnet.�Die�Regeln�der�subtraktiven�Farbmischung�werden�vor�allem�in�der�Drucktechnik�und�der�Malerei�angewandt�[Bühler�2004,�S.�68ff.].�Aufgrund�der�fehlenden�Deckkraft�wird� die� Farbe� Schwarz� (K330)� zusätzlich� bereitgestellt,� damit� Graustufen� besser�abgebildet�werden,�dann�spricht�man�vom�CMYK�Farbmodell.�KÜNSTLERISCHE FARBMODELLE

Für� die� Gestaltung� sind� künstlerische� Farbmodelle� wesentlich� besser� geeignete�(und�werden�fortan�in�diesem�Buch�verwendet),�die�sich�bei�der�Farbdefinition�an�der� Farbwahrnehmung� des� Menschen� (Farbton,� Farbsättigung,� Farbhelligkeit)�orientieren.�Sie�stellen�Farben�anhand�ihrer�Position�in�Farbräumen�wie�Farbkrei�

�����������������������������������������������������������329� Für�Yellow�(engl.)�=�Gelb.�

330� Da�der�Buchstabe�„B“�bereits� für�„Blue“� (engl.)�=�Blau�verwendet�wurde,�ei�nigte�man�sich�darauf,�für�„Black“�(engl.)�=�Schwarz�den�letzten�statt�des�ers�ten�Buchstabens�des�englischen�Wortes�zu�verwenden.�

Page 4: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

260� 5�Feinkonzeption�(Drehbuch)�

sen�oder�Farbkörpern�(z.�B.�(Halb)�Kugeln,�Kegeln,�Zylindern�und�Pyramiden)�dar.�Die� ersten� dokumentierten� Farbkreise� entstanden� zu� Beginn� des� 18.� Jahrhun�derts331,� und� die� für� die� Zwecke� des� Webdesigns� in� Deutschland� relevantesten�stammen�von�Johann�Wolfgang�von�Goethe,�Johannes�Itten�und�Harald�Küppers.�Deren�Farbfolge�beruht�auf�einer�intersubjektiv�empfundenen�Ähnlichkeit�von�Farbe.�

Goethe�veröffentlichte� im� Jahr�1810�die�wissenschaftliche�Schrift�„Zur�Farbenleh�re“332,�in�welcher�er�u.�a.�seinen�Farbkreis�vorstellte�(Abbildung�151).�

�Abbildung�151:�Farbkreis�nach�Goethe�[Evodot�2008]�

Goethe�ging�bei�seinem�Farbkreis�von�Gelb�und�Blau�als�reine�Farben�aus,�die�den�Gegensatz� von� Hell� und� Dunkel� bildeten.� Alle� anderen� Farben� ließen� sich� zwi�schen�den�beiden�Farben�darstellen.�Die�Farbe�Rot�sei�im�Kreis�die�höchste�Steige�rung� der� Farbreihe.� Daraus� ergebe� sich� eine� Dreiecksbeziehung� zwischen� Gelb,�Blau�und�Rot.�Er�unterteilte�seinen�Farbkreis�in�eine�Plus��und�eine�Minusseite�und�schrieb�der�Plusseite�die�warmen�Gelb��und�Rottöne�zu�sowie�der�Minusseite�die�kalten�Grün��und�Blautöne.�Zusätzlich�schrieb�Goethe�den�Farben�noch�bestimmte�Eigenschaften�zu;�dieses�ist�Gegenstand�des�Kapitels�5.3.1.3�ab�Seite�267.�

Nach�Goethe�entwickelte� in� den� 1920er� Jahren�der�Maler�und�Kunstpädagoge� Jo�hannes�Itten�die�Grundlagen�seiner�Farbtheorie�[Itten�2003]�und�den�entsprechen�den�Farbkreis�(Abbildung�152).��

�����������������������������������������������������������331� Sir�Isaac�Newton�(um�1700)�und�Claude�Boutet�(1708).�

332� Eine� Abschrift� findet� sich� auf� der� Webseite� von� Johannes� Onneken� unter�http://www.farben�welten.de/uploads/media/zur_Farbenlehre.pdf.�

Page 5: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 261�

�Abbildung�152:�Farbkreis�nach�Itten�[Evodot�2008]�

Ittens�Farbkreis�beinhaltet�die�Primärfarben�Cyanblau,�Magenta�und�Gelb.�Dazwi�schen� liegen� die� Sekundärfarben� Grün,� Violett,� Orange� und� die� Tertiärfarben�Blaugrün,� Blauviolett,� Purpurrot,� Orangerot,� Dunkelgelb� und�Hellgrün.� Die� Pri�märfarbe�Gelb� steht� oben� im� Farbkreis,� Cyanblau� und�Magenta� jeweils� um� 120°�versetzt.� Die� entsprechenden� Sekundärfarben� liegen� genau� dazwischen,� also� bei�60°,�180°�und�300°.�Die�Tertiärfarben� liegen�zwischen�der� jeweiligen�Primär��und�Sekundärfarbe.��

Schließlich�entwickelte�der�Unternehmer,�Dozent�und�Autor�Harald�Küppers�in�den�1970er� Jahren� in� seiner� Farbentheorie� [Küppers� 2009]� einen� Farb“kreis“� in� Form�eines�Sechsecks�(Abbildung�153).�

�Abbildung�153:�Küppers’��Basisschema�der�Farbenlehre�[Küppers�2009]�

Page 6: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

262� 5�Feinkonzeption�(Drehbuch)�

Dessen�acht�Grundelemente�sind�neben�Weiß�und�Schwarz�die�Primärfarben�der�Licht��und�Pigmentfarben�(Rot,�Grün,�Blau,�Cyan,�Magenta,�Gelb).�Auf�der�gerad�linigen� Verbindung� zwischen� zwei� benachbarten� bunten� Grundfarben� befinden�sich�alle�möglichen�Mischungen,�die�mit�diesen�beiden�Grundfarben�möglich�sind.�Die� logische�und�systematische�Ordnung�von�unbunten�Farben�stellt�Küppers�auf�einer�Geraden� unterhalb�des� Sechsecks� dar.�Diese� Farbenlehre� ist� die�modernste�und� mathematisch� korrekteste� der� drei� vorgestellten� Lehren.� Küppers� kritisiert,�dass�die�von�Itten�verwendeten�Grundfarben�Mischfarben�seien,�und�dass�aus�die�sen�kein�Schwarz�gemischt�werden�kann�[Küppers�2009].�

5.3.1.2 FarbwahrnehmungDie�Farbwahrnehmung�ist�primär�beeinflusst�von�den�Parametern�der�Farbe�selbst,�ihrem� Zusammenwirken� mit� ihrer� Umgebung� (siehe� Seite� 262ff.),� individuelle�Störung�der�Farbwahrnehmung�(siehe�Seite�265f.)�sowie�technische�Einflussfakto�ren�(siehe�Seite�266ff.)�bestimmt.�FARBDIMENSIONEN

Die� künstlerischen� Farbraummodelle� unterscheiden� Farben� anhand� von� drei�Di�mensionen� der� menschlichen� Farbwahrnehmung:� Farbton� (Hue),� Farbsättigung�(Saturation)� und� als� dritte� Komponenten� die� relative� Farbhelligkeit� (Lightness),�die�absolute�Farbhelligkeit�(Brightness)�oder�die�Lichtintensität�(Intensitiy).�Je�nach�dem,�welchen�Aspekt�der�dritte�Wert�repräsentiert,�spricht�man�vom�HSL�,�HSB��oder�HSI�Farbraum.�

Mit� dem�Farbton� lassen� sich� Farben� einordnen� und� gruppieren.�Der� Farbton� ist�das�auffälligste�Kennzeichen�einer�Farbe,�so�wird�z.�B.�von�einem�Rotton�gespro�chen,�wenn�der�überwiegende�Farbanteil�rot�ist.�Als�reine�Farben�werden�die�Pri�märfarben�bezeichnet.�Der�Farbton�gibt�die�eigentliche�Farbigkeit�als�deren�Rich�tung� auf� dem� Farbkreis� wieder,� wobei� in� den� meisten� Bildverarbeitungspro�grammen�die� Farbe�Rot� bei� 0°� steht,�Gelb� bei� 60°,�Grün�bei� 120°,�Cyan�bei� 180°,�Blau�bei�240°�und�Magenta�bei�300°.�Die�Farben� im�rechten�Teil�von� Ittens�Farb�kreis�werden�auch�als�warme�Farben� empfunden�und�bezeichnet,�die�des� linken�Teils�des�Kreises�als�kalte�Farben� (Farbtemperatur).�Die�Farbtemperatur� hat� eine�starke�suggestive�Kraft�und�vermittelt�dem�Betrachter�nicht�nur�den�Eindruck�ei�ner�physikalischen,�sondern�auch�einer�emotionalen�Temperatur.�Vor�allem�warme�Farben�haben�einen�Aufforderungscharakter�und�eignen�sich�dadurch�zur�Unter�scheidung�von�anderen�Themenbereichen.�Die�Kombination�von�Farben�ähnlicher�Temperatur�(die�also�auf�dem�Farbkreis�nahe�beieinander�positioniert�sind)�wirkt�harmonisch�und�ausgeglichen,�während�das�Aufeinandertreffen�von�unterschiedli�chen� Farbtemperaturen� für� Spannung� und� Dynamik� sorgt� (siehe� auch�„Komplementär�Kontrast“,�Seite�276).��

Die�Farbsättigung�gibt�die�Reinheit�einer�Farbe�in�Prozentschritten�von�0���100�%�wieder,�respektive�ihren�Grauanteil.�Eine�Farbe�mit�maximaler�Farbsättigung�(100�

Page 7: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 263�

%� =� kein� Grauanteil)� gibt� den� jeweiligen� Farbton� rein� wieder,� eine� ungesättigte�Farbe�(0�%)�ist�neutralgrau.�Mit�zunehmender�Sättigung�wirken�sie�schwerer�und�dominanter.�Farben�mit�gleicher�Sättigung�wirken�verwandt,�vor� allem�wenn� sie�zudem�eine�identische�Helligkeit�aufweisen.�

Die�Farbhelligkeit�gibt�die�Wahrnehmung�der�Lichtintensität,�des�Leuchtens�einer�Farbe�wieder.�Sie�wird�in�Prozentschritten�von�0���100�%�definiert.�100�%�Farbhel�ligkeit�erzeugt�die�Farbe�Weiß,�50�%�Helligkeit�entspricht�dem�reinen�Farbton,�und�0� %� Helligkeit� bedeutet� Schwarz.� Mit� zunehmender� Helligkeit� wirken� Farben�leichter.� Die� Aufhellung� (Zumischen� von�Weiß)� bzw.� Abdunkelung� (Zumischen�von�Schwarz)�kann�aber�dazu�führen,�dass�ein�Farbton�umschlägt�–�beispielsweise�erhält�ein�zu�stark�abgedunkeltes�Gelb�einen�Grünstich.�Farben�gleicher�Helligkeit�erscheinen�verwandt,�insbesondere�wenn�sie�eine�identische�Sättigung�aufweisen.��KONTRASTLEHRE

Farben� beeinflussen� sich� gegenseitig,� sind� abhängig� von� einander� und� stehen� in�Wechselwirkung� mit� dem� Umfeld,� in� welchem� sie� dargestellt� sind� [Radt�ke/Pisani/Wolters�2006,�S.�84ff.].�Insbesondere�in�den�Werken�von�Goethe�und�Itten�sind� diese�Wirkungsmechanismen� zwischen� Farben� beschrieben� (Kontrastlehre),�aus� denen� sich� wichtige� Regeln� für� die� farbliche� Gestaltung� einer� Benutzer�oberfläche�ableiten�lassen.�Diese�betreffen�vor�allem�die�dreidimensionale�Wirkung�(siehe�5.3.1.4�ab�Seite�275)�sowie�

� die�Wirkung�des�Zusammentreffens�mehrerer�Farben�auf�die�Farbintensi�tät�(Farbe�an�sich�Kontrast,�insbesondere�Komplementär�Kontrast),�

� die�Änderung�von�Farbton,�Helligkeit�und�Sättigung�durch�eine�weitere�Farbe�im�Umfeld�(Simultan�Kontrast),�

� die�Strahlkraft�von�Farben�in�Abhängigkeit�von�ihrer�Fläche�(Quantitäts�Kontrast)�

� den�zeitlichen�Verlauf�der�Farbwahrnehmung�(Sukzessiv�Kontrast).�

Vom�Farbe�an�sich�Kontrast� (Abbildung� 154)� spricht�man,�wenn�drei� oder�mehr�Farben�zusammentreffen.�

Abbildung�154:�Farbe�an�sich�Kontrast�

Der� Farbe�an�sich�Kontrast� erreicht� vor� allem� bei� den� komplementären� Farben�Gelb,�Rot�und�Blau�eine�starke�Ausprägung�(Komplementär�Kontrast).�Die�Intensi�tätswahrnehmung�der�Farben�verstärkt�sich,�da�auf�der�Netzhaut�sowohl�Stäbchen��

Zusammentreffen� von� mehreren� starken� Farben���Verstärkte�Wahrnehmung�der�Farbintensität�

Page 8: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

264� 5�Feinkonzeption�(Drehbuch)�

als� auch� Zapfen� abwechselnd� gereizt� werden.� Dadurch� wird� Kontrast� als� bunt,�laut,� kraftvoll,� lebendig� und� entschieden� erlebt� und� lässt� sich� auf� Grund� seiner�Auffälligkeit�gut�für�Signale�(z.�B.�Lichtzeichenanlagen)�einsetzten.�

Der� Simultankontrast� (Abbildung� 155)� beschreibt� die�Änderung� einer� Farbwir�kung�durch�eine�weitere�Farbe�im�Umfeld.�

�Abbildung�155:�Simultankontrast�

Der�Farbton,�die�Helligkeit�und�die�Sättigung�der�betrachteten�Farbe�ändern�sich�subjektiv� je� nach� Umgebungsfarbe.� So� erscheint� beispielsweise� ein� Grauton� auf�dunklem�Hintergrund� heller� und� auf� hellem�Hintergrund�dunkler� (unbunter� Si�multankontrast).�Auf�einem�farbigen�Grund�tendiert�Grau�zur�Komplementärfar�be.�Auf�Gelb� erscheint�das�Grau�violett,� auf�Orange�blau,� auf� rot� türkis�und�auf�Purpur�grün.�Das�gegenseitige�Beeinflussen�von�Farben�durch�den�Kontrast� lässt�sich�auf�alle�Farbkombinationen�übertragen.�Beispielsweise�wirkt�Gelb�neben�Grün�wärmer� und� rötlicher,� neben� Orange� dagegen� kälter� und� grünlicher� [Holzinger�2001,� S.� 126].�Der� Simultankontrast�hat�neben�dem�Komplementärkontrast� (siehe�Abbildung�166,�Seite�277)�den�größten�Einfluss�auf�das�Zusammenspiel�der�Farben.�

Der� Quantitätskontrast� (Abbildung� 156)� bezeichnet� die� Gegenüberstellung� von�Größenverhältnissen�von�Farbflächen�und�deren�Strahlkraft.��

�Abbildung�156:�Quantitäts�Kontrast�

Die�Farbwirkung� ist�neben�der�Leuchtkraft�von�Farben�auch�von�deren�Mengen�verhältnis�zueinander�abhängig�(siehe�auch�Seite�277).�Bei�der�Zusammenstellung�von�gleichfarbigen�Flächen�wirken�kleinere�Elemente�heller�als�große�und�müssen�ggf.�etwas�abgedunkelt�werden,�um�einen�identischen�Eindruck�zu�erzeugen.��

Der� Sukzessivkontrast� erzeugt� ein�Nachbild� in� der� Komplementärfarbe� der� be�trachteten�Farbe�(Abbildung�157).��

Gleiche�Farbe�� �� kleinere� Elemente�wirken� heller�Maßzahlen�für�Harmonie�beachten�

Grau�auf�Schwarz� ��hell�

Grau�auf�Weiss�� ��dunkel�

Page 9: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 265�

�Abbildung�157:�Sukzessiv�Kontrast�

Betrachtet�man�beispielsweise�eine�rote�Fläche�und�schaut�dann�auf�eine�weiße,�so�erscheint�die�entsprechende�Form�in�Grün�als�Nachbild.�Dies�wird�durch�die�nach�lassende�Absorptionsfähigkeit�der�für�Rot�zuständigen�Zapfen�verursacht,�die�sich�nicht�sofort� regenerieren,�und�die�Komplementärfarbe�des�ursprünglichen�Reizes�erscheint.�Daher�sollen�Farbkonzepte�nicht�nur�im�Hinblick�auf�eine�Bildschirmsei�te�abgestimmt�sein,�sondern�möglichst�auch�den�Sukzessiv�Kontrast�durch�andere�Seiten�berücksichtigen.�FARBSINNSTÖRUNGEN

Die� Wahrnehmung� von� Farben� kann� durch� Farbsinnstörungen� (siehe� Kapitel�2.2.1.1� ab� Seite� 41)� beeinträchtigt� sein,� die� dazu� führen,� dass� die� Kontrastwahr�nehmung�gestört�ist�oder�einzelne�Farben�nur�bedingt�oder�gar�nicht�gesehen�wer�den�können�(wodurch�sich�auch�der�Eindruck�von�Mischfarben�signifikant�ändert).�

Ohne� hinreichenden�Kontrast� ist� keine� visuelle�Wahrnehmung�möglich.� Erhöhte�Lichtempfindlichkeit�(Photopsie)�kann�aber�bei�zu�starken�Kontrasten�zu�Lichtblit�zen,� Flackern� und� Tanzen� der� Buchstaben� führen.�Deshalb� sollten�Hintergründe�nie�rein�Weiß�sein,�sondern�immer�ein�paar�Prozent�Grauanteil�aufweisen.�Werk�zeuge,�um�den�Vorder�/Hintergrundkontrast�auf�W3C�Konformität�zu�überprüfen,�sind�beispielsweise�der�Colour�Contrast�Check333�von�Jonathan�Snook,�Rainer�Wage�ners� Rohschnitt�Kontrasttest334� sowie� der� Microsoft� Windows�basierte� Colour�Contrast� Analyser335� von� Vision� Australia;� ein� alternatives� Werkzeug,� das� voll�ständige� Stylesheets� testen� kann,� ist� der� Web�basierte� CSS� Analyser336� von� Gez�Lemon.�

�����������������������������������������������������������333� Siehe�http://www.snook.ca/technical/colour_contrast/colour.html.�

334� Siehe�http://www.rohschnitt.de/drag_queen.htm.�

335� Siehe�http://www.visionaustralia.org/info.aspx?page=628.�

336� Siehe�http://juicystudio.com/services/csstest.php.�

Bitte�betrachten�Sie�aus�der�Nähe�den�kleinen�Punkt�im�Herzen�auf�der�linken�Seite�der�Abbildung�für�ca.10�Sekunden.�Anschließend�blicken�Sie�bitte�sofort�auf�den�klei�nen� Punkt� im� rechten� Teil� dieser� Abbildung.� Sie� sollten� dann� im� weißen� Teil� der�Abbildung�ein�Abbild�des�zuvor� fixierten�Herzens� in�der�Komplementärfarbe�sehen.�Durch�Klimpern�mit�den�Augenlidern�kann�man�den�Effekt�verstärken.�

Page 10: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

266� 5�Feinkonzeption�(Drehbuch)�

Eine�gestörte�Wahrnehmung�der�Farbe�tritt�vor�allem�in�Form�der�Rot��bzw.�Grün�schwäche� auf� (Dyschromatopsie),� bei� der� die� Sensitivität� für� diese� Farben� noch�eingeschränkt�vorhanden�ist,�sowie�als�Rotblindheit�(Protanopie)�bzw.�Grünblind�heit� (Deuteranopie).�Eine�Störung� im�Rot�Grün�Bereich� führt�dazu,�dass�der�mit�telwellige�Bereich�zwischen�Blau�und�Gelb�als�graue�Zone�erscheint,�dessen�Abstu�fungen� sich�nur� in�Helligkeit�und�Sättigung�zu�unterscheiden� scheinen.�Oft�geht�mit� einer� gestörten� Farbwahrnehmung� eine� gesteigerte� Kontrastwahrnehmung�einher.� Probleme� Farbfehlsichtiger� mit� der� Darstellung� einer� Webseite� können�Normalsichtige�mit�Hilfe�von�Bernard�Jennys�Color�Oracle337�oder�Vischeck338�von�Bob�Dougherty�und�Alex�Wade�entdecken.�

Das� Webdesign� sollte� daher� kritische� Farbkombinationen� (gelb�grün� bis� rot�orange)� vermeiden� und� Informationen� niemals� ausschließlich� über� die� Farbe�kommunizieren.� Beispielsweise� sollte� der� veränderte� Zustand� einer� selektierten�Schaltfläche�zusätzlich�durch�einen�Formwechsel�und�einen�alternativen�Text� für�den�Screenreader�angezeigt�werden.�Vor�allem�bei�einem�zielgruppenspezifischen�Webdesign�ist�auf�eine�Farbsinnstörung�zu�achten,�beispielsweise�für�Senioren,�da�sich�die�unterschiedlichen�Zapfen� im�Alter�allmählich�verbrauchen�und�Senioren�Unterschiede� von� Blautönen� nur� noch� eingeschränkt� wahrnehmen� können� [Os�wald�2003,�S.�72f.].�TECHNISCHE EINFLUSSFAKTOREN

Wie�ein�Betrachter�Farben�wahrnimmt,�hängt�auch�vom�Endgerät�ab,�mit�dem�er�sie�betrachtet,�vor�allem�von�der�Grafikkarte,�den�Monitoreinstellungen,�dem�Be�triebssystem� und� dem�Webbrowser.� So� können� portable� Clients� oft� noch� keine�Echtfarben�darstellen,�Helligkeit,�Kontrast,�Gammawert�und�Farbkalibrierung�von�Monitoren� und� Drucken� sind� uneinheitlich,� Macintosh�Computer� stellen� Farben�heller� dar� als�MS��Windows�Systeme,�und�nur�wenige�Browser� unterstützen�die�Farbprofile�des�International�Color�Consortiums�(ICC),�die�eine�einheitliche�Farb�darstellung�auf�Dokumenten�und�Displays�erreichen�sollen.339��

Deshalb�sollte�man�in�den�Umgebungen�testen,�die�in�der�Zielgruppe�zu�erwarten�sind.� Sind�diese�nicht� bekannt,� bzw.� ist� die�Zielgruppe� anonym,� so� lässt� sich� im�Netz� die� momentane� Häufigkeit� der� eingesetzten� Betriebssystem�� und� Browser�versionen� ermitteln,� z.�B.� für�Deutschland� im�Web�Barometer�von�Webhits340;� im�Zweifelsfall� sollten�die�Testumgebungen�den�MS� IE�ab�Version�5,�Firefox,�Opera�und�Safari�umfassen.�

�����������������������������������������������������������337� Siehe�http://colororacle.cartography.ch/.�

338� Siehe�http://www.vischeck.com/.�

339� Ein� Browsertest� findet� sich� auf� den� Seiten� des� ICC� (siehe� http://www.co�lor.org/version4html.xalter).�

340� Siehe�http://www.webhits.de.�

Page 11: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 267�

Wenn�nicht�alle�Umgebungen� lokal�zur�Verfügung�stehen,�kann�man�auch�Web�basierte�Services�in�Anspruch�nehmen,�die�Screenshots�der�zu�überprüfenden�Sei�ten� in�unterschiedlichen�Browservarianten�generieren,341� ggf.�Unterschiede� in�der�Darstellung�markieren342�oder�es� sogar�erlauben,�die�Webseiten� interaktiv�zu� tes�ten.343��

Darüber� hinaus� ist� daran� zu� denken,� dass� weißer� Text� im� Browserfenster� beim�Drucken�auf�Papier�nicht�sichtbar�ist�und�eine�alternative�Druckfunktion�erfordert.�

5.3.1.3 FarbwirkungFarben�gehören�zu�den�mächtigsten�Instrumenten,�die�dem�Webdesigner�zur�Ver�fügung�stehen,�um�den�Besucher�einer�Internetpräsenz�im�Sinne�des�Anbieters�zu�beeinflussen,� denn� sie� transportieren� Nachrichten� an� den� Körper,� das� Unterbe�wusstsein�(siehe�Seite�269ff.)�und�die�bewusste�Wahrnehmung�(siehe�Seite�271ff.),�die�sich�zu�einem�erheblichen�Teil�der�Kontrolle�durch�den�Betrachter�entziehen.��PHYSIOLOGISCHE WIRKUNG

Farben�wirken�über�den�Grad�der�neuronalen�Aktivität,�die�sie�im�Sehkortex�ver�ursachen� (siehe� Abbildung� 6,� Seite� 13),� auch� auf� das� Zentralnervensystem� und�somit�den�Gesamtorganismus.�So�wirkt�ein�längeren�Aufenthalt� in�einem�ganz�in�Rot�gestalteten�Raum�aktivierend�und�führt�zu�einer�erhöhten�Adrenalinausschüt�tung,�höherer�Herzfrequenz,� steigendem�Blutdruck,�und�beschleunigter�Atmung,�

�����������������������������������������������������������341� Dan�Vine�stellt�unentgeltlich�mit�ieCapture�(siehe�http://www.iecapture.com/)�

ein�Tool� zur�Verfügung,�mit�denen�Webseiten� aus� Sicht�der� aktuellsten� (Be�ta)Versionen�des�MS�Internet�Explorers�betrachtet�werden�können.�Eine�große�Vielfalt�an�Browsersichten�bietet�Johann�C.�Rocholl�mit�den�Onlinedienst�Brow�sershots�(siehe�http://www.browsershots.de/)�kostenlos�an.��

342� Z.�B.�der�freie�Onlinedienst�IENetRenderer�für�Microsoft�Internet�Explorer�5.5,�6,�7�und�8�(siehe�http://meineipadresse.de/netrenderer/index.php).�

343� Der� kostenpflichtige� Dienst� Browsercramp� (siehe� http://www.browsr�camp.com/)�gestattet�es,�mittels�Virtual�Network�Computing�(VNC)�einen�Mac�OS�Rechner�mit�allen�Mac�Browsern�zum�Testen�in�Fernsteuerung�zu�nehmen.�Der� US�amerikanische� Anbieter� Browsercam� (siehe� http://www.� browser�cam.com/)�setzt�die�gleiche�Zugangstechnologie�ein,�bietet�aber�ungleich�mehr�und�sogar�individuelle�Konfigurationen�von�Betriebssystem�und�Browser�an�–�inklusive�mobiler�Varianten�für�PDAs.�Ähnliche�Funktionalität,�wenn�auch�in�den� Kombinationsmöglichkeiten� etwas� eingeschränkter,� offerieren� die� deut�schen�Anbieter�Browserpool�(siehe�http://www.browserpool.de/)�und�Browse�rama� (siehe�http://www.browserama.de/).�Auf� sehr�alten�Browsern� lässt� sich�kostenlos� mit� dem� Browseremulator� (siehe� http://www.dejavu.org/emula�tor.htm)�von�Pär�Lannerö�testen.�

Page 12: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

268� 5�Feinkonzeption�(Drehbuch)�

während�die� blaue� Farbe� von�Himmel� oder�Meer� durch� die�Reizarmut� entspan�nend�und�beruhigend�auf�den�Organismus�wirken�(Abbildung�158).�Diesen�Effekt�nutzt� das�Webdesign� vor� allem,� um� gezielt� Aufmerksamkeit� zu�wecken� und� zu�steuern.�

�Abbildung�158:�Farbe�und�Aktivierungsgrad�

Die� erhöhte� Aktivierung� durch� „warme“� Farben� führt� über� den� beschleunigten�Stoffwechsel� zu� einer� höheren� Aufnahmefähigkeit,� gesteigerter� Leistungsbereit�schaft�und�einem�veränderten�Temperaturempfinden:�Untersuchungen�ergaben�z.�B.,� dass� der� gefühlte� Temperaturunterschied� in� einem� Raum� abhängig� von� der�Farbwahl�bis�zu�zwei�Grad�Kelvin�betragen�kann�[Krüger�2003,�S.�42ff.].�

„Kalte“� Farben� hingegen� dämpfen� nicht� nur� die� Aktivität� und� das� Temperatur�empfinden,� sondern�auch�die�Reizaufnahme.�So�konnten�sich�Probanden� in�Räu�men,�die�in�Blau��und�Brauntöne�gehalten�waren,�bei�hohem�Geräuschpegel�besser�konzentrieren�[ebenda].�SYNÄSTHETISCHE WIRKUNG

Farben�können�sogar�ohne�den�Umweg�über�einen�veränderten�Aktivierungsgrad�Wahrnehmungen� anderer� Sinnesorgane� erzeugen� bzw.� beeinflussen.� Synästhesie�(zugleich�wahrnehmen)�bezeichnet�die�Kopplung�zweier�physisch�getrennter�Sin�ne�bei�der�Wahrnehmung,�die�dazu�führt,�dass�die�Ansprache�eines�Sinnes�einen�anderen�Sinn�mit�reizt.�Beispielsweise�sehen�Synästhetiker�Farben,�wenn�sie�Musik�hören,�oder�haben�ein�Geschmacksempfinden,�wenn�die�Farben�sehen.��

Ca.� 4�%�der�Allgemeinheit� könnten�diese�doppelte�Kodierung�durchführen� [Bar�netta/Finucanea/Asherd/Bargarya/Corvinf/Newella/Mitchell� 2008,� S.� 890]� und� in�Zielgruppen�mit�hoher�Kreativität�könnte�der�Anteil�an�Synästhetikern�sogar�noch�viel�größer�sein�[Domino�1989,�S.�29].�Dass�Farben�eine�starke�synästhetische�Wir�

Page 13: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 269�

kung�haben�können� (Abbildung�159),� sollte�man�daher�beim�Webdesign�berück�sichtigen.�

Farbe� Geschmack� Geruch� Tastsinn� Hören� Muskelsinn�

Gelb� sauer� säuerlich� glatt�schrill/�hoch� leicht�

Rot� süß� kräftig/erogen� fest� laut� mittelschwer�

Grün� fruchtig� frisch� glatt�plät�schernd� mittel/leicht�

Blau� wässrig� geruchlos� glatt� fern� leicht�

Violett� bitter� narkotisch� samtig�traurig/�tief� schwer�

Wei� salzig� geruchlos� trocken� still� sehr�leicht�

Schwarz� tintig� muffig� hart� tief� schwer�

Abbildung�159:�Beispiele� zur� synästhetischen� Farbwirkung� (in� Anlehnung� an�[Radtke/Pisani/Wolters�2006,�S.�77])�

Sollen�beispielsweise�Oberflächen�glatt�und�kühl�wirken,�so�wird�das�mit�den�Far�ben� Blau� oder�Hellgrau� erreicht.� Raue� oder� sandige�Oberflächen�wirken� eher� in�den�Farben�Ocker,�Gelb�oder�Beige�griffig�[Radtke/Pisani/Wolters�2006,�S.�76f.].�EMOTIONALE WIRKUNG

Farben�sind�mit�Emotionen�und�Werten�belegt.�Daher�kann�man�durch�gezielten�Farbeinsatz�versuchen,�beim�Betrachter�Empfindungen�auszulösen,�um�ihn�in�eine�mit� der� Grundaussage� der� Internetpräsenz� harmonierende� Stimmung� zu� verset�zen,� und� auf� diese� Weise� den� Boden� für� eine� Informationsaufnahme� und���bewertung�zu�bereiten,�welche�den�Zielen�des�Anbieters�entspricht.�

Bereits�Goethe�attestierte� in�seiner�Theorie�zur�Farbenlehre�einer�Farbe�eine�„sinn�lich�sittliche�Wirkung“� […]�„durchs�Auge�aufs�Gemüt,� sie�kann�Gesichtssinn�und�Geist�mit�sich�in�Einklang�bringen“.�Er�ordnete�die�Farben�seines�Farbkreises�in�eine�Plus��und�eine�Minusseite�ein�und�beschrieb�ihre�Wirkung�so:�„Die�Farben�der�Plusseite�stimmen� insgesamt� regsam,� lebhaft� und� strebend.�Gelb:� heiter,� sanft,� angenehm,�warm,�wirksam,� beleuchtet.� Rotgelb� (Orange):� energetischer,� erzeugt�Gefühl� von�Wärme�und�Wonne.�Gelbrot� (Mennig,�Zinnober):�gewaltsam,�erschütternd,�höch�ste�Energie�der�aktiven�Seite.�Die�Farben�der�Minusseite�stimmen�unruhig,�weich�

Page 14: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

270� 5�Feinkonzeption�(Drehbuch)�

und�sehnend.�Blau:�Widerspruch�von�Reiz�und�Ruhe,�Gefühl�der�Kälte,�schatten�haft.�Rotblau:�unruhig,� lebhaft�ohne�Fröhlichkeit.�Blaurot:�unruhig,�unerträglich.“�[Vogl�2009].�

Welche� psychologische� Wirkung� eine� Farbe� hat,� ist� aber� von� vielen� Einflüssen�gleichzeitig� abhängig,� vor� allem� von� dem� Kontext,� in� dem� sie� wahrgenommen�wird,� von�der� kulturellen�Prägung�und�vielen� individuellen�Faktoren� (z.� B.�dem�Lebensalter,�dem�Erfahrungshintergrund).� So�kann�die�gleiche�Farbe�ganz�unter�schiedliche�Emotionen�auslösen:�

Im�Zusammenhangen�mit�Verletzungen�oder�Blut�wird�Rot�als�unangenehm,�aber�in�Verbindung�mit�Lagerfeuer� oder� einem�Sonnenuntergang�als� angenehm�emp�funden�[Bartel�2003,�S.�40].�

In�kalten�Ländern�transportiert�beispielsweise�die�Farbe�Rot�hauptsächlich�positive�Gefühle�wie�innerliche�Wärme,�Liebe�und�Lebensfreude,�in�heißen�Ländern�hinge�gen�Angst�vor�dem�Bösen,�dem�Tod�und�der�Zerstörung.�So�zeigt�auch�der��Global�Color�Popularity�Report�2008�344�des�US�amerikanischen�Chemiekonzerns�DuPont�trotz�einer�erkennbaren�weltweiten�Konvergenz�immer�noch�signifikante�regionale�Unterschiede�in�der�Popularität�von�Farben�beim�Autokauf�(Abbildung�160).��

Abbildung�160:�Beispiele� für� internationale� Popularität� von� Autofarben� [Global�Color�Popularity�Report�2008]�

�����������������������������������������������������������344� Details�finden�sich�unter�http://vocuspr.vocus.com/VocusPR30/Newsroom/�

Query.aspx?SiteName=DupontNew&Entity=PRAsset&SF_PRAsset_PRAs�setID_EQ=111443&XSL=PressRelease&Cache=.�

Page 15: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 271�

Dass�die�psychologische�Farbwirkung�auch�vom�Lebensalter� abhängt,� kann�man�täglich�auf�der�Straße�sehen.�Während� Jugendliche� i.�d.�R.� lebhafte�Farben� lieben�und� sich� entsprechend� kleiden,� bevorzugen� ältere�Menschen� eher� ausgeglichene�Farben.��

Menschen�machen� auch� ganz� individuelle� Erfahrungen�mit� Farben.� Durch�Wie�derholung� können� diese� Schemata� verinnerlicht� werden,� und� die� Farbwahrneh�mung� kann� anschließend� automatisch� Empfindungen� auslösen.� Beispielsweise�kann�bei�einem�Kind,�das�über�einen�längeren�Zeitraum�gegen�seinen�Willen�zum�Essen� eines� bestimmten� Nahrungsmittels� gezwungen� wurde,� allein� der� Anblick�der�betreffenden�Farbe�Ekelgefühle�auslösen.�

Die�psychologische�Bedeutung�von�Farben�ist�nicht�konstant,�sondern�ändert�sich�im�Zeitverlauf�mit�dem�Wandel�der�Kultur�und�des�Individuums.�FARBSYMBOLIK

Farben�eignen�sich�nicht�nur,�um�den�Betrachter� subtil� in�eine�gewünschte�Stim�mung�zu�versetzen,�sondern�auch�um�konkrete�Eigenschaften�eines�Produktes�auf�einem�zusätzlichen�Weg�zu�vermitteln�und�auf�diese�Weise�zu�unterstreichen,�wie�etwa�die�Schnelligkeit�eines�Automobils�durch�die�Farbe�Rot,�die�Seriöstität�eines�Informationsangebotes�durch�die�Farben�Blau�oder�Weiß,�das�ökologische�Verant�wortungsbewusstsein�eines�Unternehmens�durch�die�Farbe�Grün�etc.�Die�umseiti�ge�Aufzählung�(Abbildung�161)�gibt�ein�paar�Beispiele�für�die�positive�und�–�kur�siv�dargestellt�–�negative�Symbolik�von�Farben:345�

Die�Wirkung�und�Botschaft�von�Farben�erschließt�sich�immer�im�Kontext�vor�dem�Erfahrungshintergrund�(den�Schemata)�des�Betrachters.�Die�Kodierung�von�Eigen�schaften�durch�Farben�muss�daher�,�wie�bereits�bei�der�Kodierung�von�Emotionen�beschrieben,�immer�den�Kontext�sowie�die�kulturelle�und�individuelle�Prägung�der�Zielgruppenmitglieder�berücksichtigen,� etwa�deren�Zugehörigkeit� zu�beruflichen�und�gesellschaftliche�Gruppen,�sowie�persönlichen�Erfahrungen�und�Präferenzen.�

�����������������������������������������������������������345� Eine� umfangreichere� Darstellung� findet� sich� z.� B.� bei� Bartels� [Bartel� 2003],�

Frieling�[Frieling�2005],�Heller�[Heller�2004]�und�Thissen�[Thissen�2003].�

Page 16: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

272� 5�Feinkonzeption�(Drehbuch)�

Rot� Hitze,� Aktivität,� Dynamik,� Macht,� Stärke,� Schnelligkeit,� Energie,�Leben,�Liebe,�Erotik�

Begierde,�Unruhe,�Aggressivität,�Zorn,�Blut,�Krieg,�Gefahr,�Warnung�

Orange� Wärme,�Geselligkeit,�Freude,�Aktivität,�Vergnügen�

Aufdringlichkeit�

Gelb� Sonne,� Reife,� Helligkeit,� Heiterkeit,� Lebhaftigkeit,� Hoffnung,� Op�timismus,�Glück�

Geiz,�Eifersucht�

Grün� Natur,�Wachstum,�Üppigkeit,�Frische,�Ruhe,�Friedlichkeit,�Ausge�glichenheit,�Entspannung,�Gesundheit,�Hoffnung�

Neid,�Gift�

Blau� Himmel,�Meer,�Unendlichkeit,�Weite,�Sicherheit,�Ausgeglichenheit,�Glaubwürdigkeit,�Ernst,�Konzentration,�Treue,�Harmonie,�Freund�schaft�

Passivität,�Statik,�Distanz,�Kälte�

Lila� Fragilität,�Einsamkeit,�Sehnsucht,�Phantasie,�Nostalgie,�Pietät,�Sak�ralität,�Magie,�Verborgenheit,�Frauenemanzipation�

Selbstbezogenheit,�Eitelkeit,�Dekadenz,�Trauer�

Rosa� Zartheit,�Weichheit,� Baby,�Weiblichkeit,� Zärtlichkeit,� Lieblichkeit,�Sanftheit,�Milde,�Sensibilität,�Romantik�

Naivität,�Kitschigkeit�

Schwarz� Eleganz,� Würde,� Schwere,� Nacht,� Geheimnis,� Undurchdringlich�keit,�Individualität,�Intellektualität,�Eleganz�

Introvertiertheit,�Arroganz,�Härte,�Gewalt,�Tod,�Trauer,�Melancholie�

Grau� Neutralität,�Nüchternheit,� Sachlichkeit,�Biederkeit,�Theorie,�Nach�denklichkeit,�Eleganz,�Technologie,�Alter,��

Einsamkeit,�Langeweile,�Trostlosigkeit,�Elend,�Depression�

Weiß� Reinheit,�Klarheit,�Unschuld,�Ordnung,�Vollkommenheit,�Authen�tizität,�Idealismus,�Leichtigkeit,�Neutralität,�Ehrlichkeit,�Wahrheit�

Leere�

Abbildung�161:�Beispiele�für�Farbsymbolik�(in�Anlehnung�an�[Frieling�2005])�

Page 17: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 273�

�Abbildung�162:�Farbbedeutung� bei� Verkehrsampeln� (links),� Äpfeln� (mitte)� und��

Flüssigkeiten�(rechts)�

Wirkung�und�Botschaft�von�Farben�stehen�im�direkten�Zusammenhang�zum�Inhalt�des� Gesehenen� (Abbildung� 162).� Die� Farbe� „Grün“� ist� beispielsweise� in� Zusam�menhang�mit�einer�Verkehrsampel�positiv�besetzt,�signalisiert�sie�doch,�dass�alles�in�Ordnung�ist�und�man�relativ�ungefährdet�weiterfahren�kann.�Und�so�gibt�dann�auch� das� Management� „Grünes� Licht“,� wenn� ein� Projekt� durchgeführt� werden�kann.��

In�Zusammenhang�mit�einem�Apfel�sieht�die�Sache�schon�anders�aus.�Während�der�rote�Apfel�definitiv�reif�und�süß�ist,�könnte�der�grüne�Apfel�auch�unreif�und�sauer�sein.�Und� jemand,� der� unerfahren� ist,�wird� in�Deutschland� als� „grün� hinter� den�Ohren“�bzw.�in�den�USA�als�„Greenhorn“�bezeichnet.�Bei�einem�Glas�mit�Flüssig�keit� schließlich�mag�die�Farbe�Grün�Ungenießbarkeit�oder� sogar�Gift� symbolisie�ren.�

Die�grundsätzliche�Symbolik�von�Farben�ist�kulturhistorisch�geprägt:�Die�Interpre�tationsmöglichkeiten�von�Farben�sind�Bestandteil�des�Kodex�einer�Kultur,�und�die�Bedeutungen�können�sich�im�Laufe�der�Zeit�mit�der�Kultur�ändern.�Dies�ist�insbe�sondere�bei� international�genutzter�Software�(und�das� trifft�auf�alle� Internetange�bote�prinzipiell�zu)�relevant,�deren�Benutzer�u.�U.�einen�völlig�anderen�kulturellen�Hintergrund�mitbringen.��

Will�man�beispielsweise�als�Anbieter�eines�Informationsangebots�seinen�Patriotis�mus�über�die�Farbe�kodieren,�so�muss�man�z.�B.�in�China�Rot�verwenden�und�so�wohl�im�katholischen�Irland�wie�auch�in�der�muslimischen�arabischen�Liga�Grün.�Das� gleiche�Rot,� das� in�China� aber� für� die�Nation,�Kommunismus,� Feierlichkeit,�Glück,�Freude,�und�Fruchtbarkeit�steht,�signalisiert�einem�afrikanischen�Besucher�statt�dessen�Tod�und�Trauer� [Singh/Pereira�2004,�S.�47ff.],�und�das�Grün�der�Iren�und�Araber�gilt�einem�französischen�Benutzer�als�Unglücksfarbe�[Thissen�2003,�S.�181].�Tabelle�11�zeigt�an�einigen�weiteren�Beispielen,�wie�unterschiedlich�die�kultu�rell�geprägte�Interpretation�von�Farben�sein�kann.�

Page 18: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

274� 5�Feinkonzeption�(Drehbuch)�

Tabelle� 11:� Ausgewählte� Beispiele� kulturell� geprägter� Farbbedeutung� (in� Anleh�nung�an�[Bartel�2003];�[Skopec�2004];�[Singh/Pereira�2004];�[Thissen�2003])�

� Form

alitä

t��

Fruc

htba

rkeit�

Gefah

r�

Glück��

Glückselig

keit�

Lieb

e��

Mod

ernität��

Nationa

lstolz�

Reinhe

it�

Relig

ion��

Stärke

��

Tod,�Traue

r��

Wiede

rgeb

urt�

Woh

lstand

��

Afrika� �� �� �� �� �� �� �� �� � �� �� � � �

Ägypten� �� �� �� � �� �� �� �� �� �� � � �� �

Brasilien� �� �� �� � �� �� �� �� �� �� �� �� �� �

China� �� � �� � � �� �� � � �� � � �� �

Europa� � �� � �� �� � �� �� � �� � � �� �

Ghana� �� �� �� � �� �� � �� �� �� �� �� �� �

Griechen�land� � �� �� � �� �� �� � �� �� �� �� �� �

Indien� �� �� �� �� �� � �� �� �� �� �� � � �

Irland� �� �� �� �� �� � �� �� �� � �� �� �� �

Islam� �� �� �� �� �� �� �� �� �� � �� �� �� �

Israel� �� �� �� �� �� �� �� �� �� � �� �� �� �

Japan� �� �� � � �� �� � �� �� �� � � �� �

Malaysia� �� �� �� �� �� �� �� �� �� �� � �� �� �

Mexiko� �� �� �� �� �� �� �� �� �� � �� � �� �

Orient� �� �� �� �� �� �� �� �� �� �� � �� �� �

Pakistan� �� �� �� � �� �� �� �� �� �� �� �� �� �

Skandi�navien� �� �� �� �� �� �� �� �� �� �� � �� �� �

Südame�rika� �� �� �� �� �� �� �� �� �� �� �� � �� �

USA� �� �� � �� �� �� �� �� � �� � � �� �

Page 19: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 275�

Wenn�man�bezüglich�der�Farbbedeutungen�in�einer�Kultur�unsicher�ist,�kann�man�auf�die�Farben�der�jeweiligen�Nationalflagge�zurückgreifen:�Diese�Farbkombinati�on�ist�in�aller�Regel�mit�einer�positiven�Bedeutung�besetzt.�Auch�die�Orientierung�an�der�farblichen�Gestaltung�der�unterschiedlichen�Formate�im�Fernsehprogramm�(Nachrichten,�Unterhaltung,� Sport,� Spiel� etc.)� bietet� gute�Anhaltspunkte� für� eine�Farbwahl,�die�sowohl�dem�Thema�als�auch�dem�kulturellen�Hintergrund�und�Alter�der�Zielgruppe�angemessen�ist.�

Einige� Farbkombinationen� schränken� den� Interpretationsspielraum� so� stark� ein,�dass�man�sie� international�ohne�Gefahr�eines�Missverständnisses�einsetzen�kann.�Dazu� zählen�die�Rot�Grün�Kombination� für� Stop�&�Go,� eine� Farbskala� von� blau�nach�rot�als�Temperaturskala�und�die�Schwarz�Gelb�Kombination�mit�ihrer�beson�ders�starken�physiologischen�Wirkung�für��Achtung�.�

Innerhalb�eines�Kulturkreises�können�individuelle�Erfahrungen�und�Erlebnisse�bei�der�Deutung�eine�wesentliche�Rolle�spielen.�Diese�sind�vor�allem�durch�die�Zuge�hörigkeit� zu� einer� sozialen� Schicht� oder� Berufsgruppe� geprägt,�wenn�deren�Mit�glieder�häufig�einen� individuellen�Farbkodex�zur�Kommunikation�verwenden�(z.�B.�Gesundheitswesen,�Kirche,�Militär).�

5.3.1.4 Dreidimensionalität durch Farben Räumliche�Wirkung�kann�eine�Farbe�nur�in�Kombination�mit�einer�anderen�Farb�fläche�erzielen,�die�sich�in�Farbton,�Sättigung,�Helligkeit,�Flächenanteil�oder�Trans�parenz�unterscheidet.�Diese�Kontraste�kann�man�dazu�nutzen,�eine�visuelle�Drei�dimensionalität�vorzutäuschen�und�einen�durch�Formen�vorgegebenen�räumlichen�Eindruck�zu�unterstreichen.�KALT-WARM-KONTRAST

Der�Kalt�Warm�Kontrast�(Abbildung�163)�schafft�durch�unterschiedliche�Farbtöne�eine�subjektive�Temperaturempfindung�und�eine�räumliche�Wirkung.�

�Abbildung�163:�Kalt�Warm�Kontrast�

Die�in�der�unteren�Hälfte�des�Farbkreises�abgesiedelten�Grün��und�Blautöne�wer�den�als�kalt�und�fern�empfunden,�die�oben�liegenden�Gelb��und�Rottöne�als�warm�und�nah.�Vor�allem�die�warmen�Farben�haben�einen�Aufforderungscharakter�und�eignen� sich�dadurch� zur�Unterscheidung�von� bestimmten�Themenbereichen.�Die�Kombination� von� Farben� ähnlicher� Temperatur�wirkt� harmonisch� und� ausgegli�

Kalte�Farben�� � ��Hintergrund�

Warme�Farben��� ��Vordergrund�

Page 20: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

276� 5�Feinkonzeption�(Drehbuch)�

chen,� während� das� Aufeinandertreffen� von� unterschiedlichen� Farbtemperaturen�für�Spannung�und�Dynamik�sorgt.�QUALITÄTS-KONTRAST

Der�Qualitätskontrast� (Abbildung�164)�bezeichnet�den�Gegensatz�von�gesättigten�und� reinen� zu� ungesättigten� und� trüben� Farben,� die� also� eine� unterschiedliche�Strahlkraft�besitzen.�

�Abbildung�164:�Qualitätskontrast�

Durch�Beimischung�von�Grau�verliert�eine�Farbe�an�Strahlkraft.�Dadurch�verliert�sie�an�Bedeutung�und�rückt�optisch�weiter�in�den�Hintergrund.�HELL-DUNKEL-KONTRAST

Der�Hell�Dunkel�Kontrast�(Abbildung�165)�entsteht�durch�unterschiedliche�Hellig�keiten�zwischen�den�Farben.�

�Abbildung�165:�Hell�Dunkel�Kontrast�

Gleiche�Helligkeiten� lassen�Farben�verwandt� erscheinen,�unterschiedliche�Hellig�keiten,�also�ein�starker�Hell�Dunkel�Kontrast,�wirken�räumlich,�da�helle�Farben�in�den�Vordergrund�drängen�und�dunkle�nach�hinten.�Die�Wirkung�des�Kontrastes�wird�als�ruhig,�geordnet�und�entspannt�beschrieben�und�eignet�sich�als�Mittel�zur�Unterscheidung�von�Prioritäten.��KOMPLEMENTÄR-KONTRAST

Der�Komplementärkontrast�(Abbildung�166)�bildet�zwischen�zwei�Komplementär�farben� ein� besonderes� Harmonieverhältnis,� da� die� Farbintensität� gegenseitig� ge�steigert�wird.�

Helle�Farben�� ��Hintergrund�

Dunkle�Farben���Vordergrund�

Ungesättigte�Farben�� ��Hintergrund�

Gesättigte�Farben�� ��Vordergrund�

Page 21: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 277�

�Abbildung�166:�Komplementär�Kontrast�

Derartige�Kontraste�wirken�zwar� stabil,� aber�dennoch�unruhig�vibrierend� (Chro�mosteropsis�Effekt).� Die� stärkste�Wirkung� hat� hierbei� das� Komplementärfarben�paar�Rot�und�Grün,�aber�auch�die�Kombinationen�Rot�und�Blau�sowie�Grün�und�Blau�eigenen�sich�gut,�um�Signalwirkung�zu�erzeugen.�Vor�allem�auf�grauem�Hin�tergrund� entsteht� der� Eindruck� räumlicher� Tiefe.� Der� Effekt� lässt� sich� durch�schwarze� oder�weiße� Ränder� und� einen� höheren� Kontrast� zwischen� den� Farben�reduzieren.�QUANTITÄTS-KONTRAST

Der� Quantitätskontrast� (Abbildung� 167)� bezeichnet� die� Gegenüberstellung� von�Größenverhältnissen�von�Farbflächen�und�Strahlkraft.��

�Abbildung�167:�Quantitäts�Kontrast�

Bei� der�Zusammenstellung�von�gleich�großen�Farbflächen� treten� leuchtende�Far�ben�hervor� und�dunklere� treten� zurück.�Die� Farbwirkung� ist� abhängig� von�dem�Mengenverhältnis�der�Farben�zueinander�und�deren�Leuchtkraft.��

Der�Quantitätskontrast�gilt�dann�als�harmonisch,�wenn�bestimmte�Maßzahlen�der�Farbgewichte�eingehalten�werden�[Goethe�1810,�S.�96ff.].�Für�Gelb�gilt�die�Maßzahl�drei,�für�Rot�vier,�für�Orange�und�Grün�sechs,�für�Blau�acht�und�für�Violett�neun.�Die� Summe� der� Maßzahlen� der� Komplementärfarbenpaare� ergibt� bei� harmoni�schen�Proportionen�stets�den�Wert�12,�z.�B.�bei�einer�Zusammenstellung�der�Komp�lementärfarbenpaare� Blau� und�Orange� im�Verhältnis� 4:8,� Rot� und�Grün� im�Ver�hältnis�6:6�oder�Gelb�und�Violett�im�Verhältnis�3:9.�

Gleiche�Fläche���� leuchtende�Farben�im�Vor�dergrund��

Maßzahlen�für�Harmonie�beachten�

Komplementärfarben� ��Chromosteropsis�Effekt�

Grauer�Hintergrund� ��Rot�im�Vordergrund�

� ��Blau�im�Hintergrund�

� ��Grün�auf�gleicher�Ebene�

Page 22: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

278� 5�Feinkonzeption�(Drehbuch)�

5.3.1.5 Farbkombinationen und Farbklänge Farben�stehen�selten�alleine,�sondern�treten�meist�zusammen�mit�anderen�Farben�auf.� Durch� die� Kombination� entstehende� Effekte� in� physiologischer,� psychologi�scher�und�symbolischer�Hinsicht,�bezeichnet�man�als�Farbklänge.�Ziel� ist�es,�Har�monie�und�Ordnung�zu�schaffen,�ohne�langweilig�zu�wirken.��

Wenn�kein�Farbschema�im�Rahmen�eines�Corporate�Design�durch�Syleguides�vor�gegeben� ist,� gilt� es� zunächst,� eine�dominante�Basisfarbe� zu�bestimmen.� Sie�muss�Unternehmens�/�Produktidentität�bzw.�das�Thema�widerspiegeln�und�die�Grund�aussage� des� Informationsangebots� unterstreichen� (siehe� Kapitel� 5.3.1.3� ab� Seite�267),�wie�z.�B.�bei�der�Farbe�„Ferrari�Rot“.�

Ausgehend�von�dieser�Basisfarbe�wird�dann�ein�Farbschema�entwickelt,�das�drei�bis� fünf� Farben� umfasst� und� konsistent� in� der� gesamten� Produktion� eingesetzt�wird.� Die� (interne)� Konsistenz� erleichtert� durch� eine� identische� Farbgebung� für�gleiche�Funktionen�(funktionale�Farbkodierung,�siehe�Kapitel�4.4.1.1�ab�Seite�185)�und� ggf.� auch� für� gleiche� Inhalte� (thematische� Farbkodierung,� siehe� Abbildung�234,�Seite�354)�die�Orientierung.�

Um�eine�ästhetische�Farbharmonie�zu�erzielen,� empfiehlt� es� sich,� im�Farbschema�auf�mindestens�eine�der�drei�Grundfarben�zu�verzichten�und�die� folgenden�Har�monieregeln�zu�beachten,�die�sich�aus�den�Gesetzen�der�Ähnlichkeit,�der�Kontinui�tät,�der�Prägnanz�und�der�Symmetrie�ableiten�lassen.�Die�konkrete�Zuordnung�der�Farben�hängt�dabei�vom�gewählten�Farbmodell�ab.��

Die� Kombination� von� im� Farbkreis�benachbarter� Farben� (Abbildung� 168)� wirkt�ruhig�und�ausgeglichen.�Gleiches�gilt�für�die�Farbparameter�Sättigung�und�Intensi�tät� bzw.� Helligkeit.� Kombinationen� von� Farbtönen� unterschiedlicher� Sättigungs�grade�oder�Helligkeitswerte�wirken�hingegen�unausgewogen�und�sollten�vermie�den�werden.�

�Abbildung�168:�Beispiele�für�benachbarte�Farben�im�Farbkreis�nach�Itten�

Zu�jeder�Farbe�existiert�eine�Gegenfarbe,�die�farbenpsychologisch�als�komplemen�tär� empfunden�wird� (Komplementärfarbe).� Farben� in� einer�Komplementärbezie�

Page 23: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 279�

hung� stehen� in� besonderem�Gegensatz� zueinander� und� bilden� dadurch� eine� be�sondere�Form�der�Harmonie�(Abbildung�169).��

Mit�Hilfe�eines�Farbkreises�lassen�sich�Gegenfarben�einfach�bestimmen.�Dort�liegt�einer�Primärfarbe� immer�eine�aus�den�übrigen�Primärfarben�gebildete�Sekundär�farbe� gegenüber.� Bei� additiver� Farbmischung� addieren� sich� eine� Farbe� und� ihr�Komplementär�zu�Weiß�und�bei�subtraktiver�Farbmischung�zu�Schwarz.�Die�jewei�ligen�Komplementärfarben�sind�bei� Itten�und�Küppers� im�Inneren�des�Farbkreises�dargestellt�und�stehen�sich�bei�Itten�diametral�gegenüber.�Der�Einsatz�komplemen�tärer� Farben�wirkt� auf�Grund�des� hohen�Kontrastes� lebendig�und� erzeugt� Span�nung,�wird�aber�oft�auch�als�zu�plakativ�und�aufdringlich�empfunden.�

�Abbildung�169:�Beispiele�für�Komplementärfarbenpaare��im�Farbkreis�nach�Itten�

Legt�man� ein� gleichschenkliges�Dreieck�über�den�Farbenkreis,� so� lassen� sich� aus�den�drei�durch�dessen�Eckpunkt�gekennzeichneten�Farben�mehr�Farbkombinatio�nen�(Triaden)�bilden,�die�ebenfalls�sehr�lebendig�wirken�(Abbildung�170).�

�Abbildung�170:�Beispiele�für�Triade�im�Farbkreis�nach�Itten�

Geteilte� Komplementärfarben� setzen� sich� aus� einer� Farbe� und� den� nächst�gelegenen� Nachbarn� der� jeweiligen� Komplementärfarbe� zusammen� (Abbildung�171).�Dadurch�schwächen�sie�die�Spannung�von�komplementären�Farben�ab�und�wirken�nicht�ganz�so�markant.��

Page 24: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

280� 5�Feinkonzeption�(Drehbuch)�

�Abbildung�171:�Beispiel�für�geteilte�Komplementärfarben�im�Farbkreis�nach�Itten�

Noch�mehr� und� ausgeglichenere� Farbkombinationen� erzielt�man,�wenn�man� ein�Rechteck�auf�den�Farbkreis�auflegt�(Abbildung�172).�Dessen�Eckpunkte�bezeichnen�die�doppelt�geteilten�Komplementärfarben.�Wenn�das�Farbschema�nur�aus�drei�Farben�bestehen�soll,�kann�die�Farbe�eines�Eckpunktes�ausgelassen�werden.�

�Abbildung�172:�Beispiel� für� doppelt� geteilte� Komplementärfarben� im� Farbkreis�

nach�Itten�

Das�Farbschema�lässt�sich�dann�einsetzen,�um�die�Aufmerksamkeit�des�Benutzers�zu� steigern�und�gezielt�über�die�Seite� zu� führen.�Dazu�verwendet�man�zunächst�reizarme�Farben�(unbunte�Farben,�kalte�Farben,�ungesättigte�Farben)�sowie�geringe�Farb�� und� Helligkeitskontraste,� um� ein� harmonisches� Gesamtbild� zu� erzeugen.�Abschließend� sorgen� reizstarke� Farben� (warme� Farben,� intensive� Farben,� stark�gesättigte�Farben,�unerwartete�Farben)�sowie�hohe�Farb��und�Helligkeitskontraste�punktuell� für�Aufmerksamkeit.�Da�sich�die�Einzelwirkungen�addieren�oder�auch�subtrahieren�können,�lässt�sich�der�Grad�der�Aktivierung�abgestuft�steuern.��

Einige�gute�Anregungen�für�das�Finden�von�Farbschemata�hat�auch�Suzy�Chiazzari�veröffentlicht.�Obwohl�eigentlich�für�die�Farbwahl�in�Wohnräumen�gedacht,�lassen�sich�die�vorgestellten�Prinzipien�auch�sehr�gut�auf�virtuelle�Räume�anwenden.�Die�Möglichkeit,�Farbkombinationen�auf�einfache�Art�auszuprobieren�[Chiazzari�2007,�S.� 217ff.],� hilft� insbesondere� Anfängern,� grundlegende� Farbschemata� zu� entwi�

Page 25: 5.3.1 Farben - Springer › sgw › documents › 1361119 › ...5.3DesignderBenutzeroberfläche 259 FarbenichtindergleichenWellenlängeundsomitaufheterogenenSystemenun terschiedlichdargestelltwird

5.3�Design�der�Benutzeroberfläche� 281�

ckeln.�Die�dort�vorgenommene�Aufteilung�der�Räume�in�Decke,�Wand,�Möbel�und�Fußboden�lässt�sich�auf�die�Seitenbereiche�Header,�Background,�Content�Elemente�und�Footer�übertragen.�

Bei�der�Farbfindung�bieten� auch�Softwaretools� (Colour� Schemers)�Unterstützung�an.� Diese� bestimmen� ausgehend� von� einer� Basisfarbe� passende� Farbharmonien,�z.B.�das�Plug�In�Kuler�für�den�Adobe�Dreamweaver.�Eine�umfangreiche�Liste�von�Web�basierten� Generatoren� für� Farbschemata� findet� sich� z.� B.� auf� Jürgen� Kollers�Web�Site.346�Alternativ�kann�man�auch� fertige� Farbschemata� einsetzen,�welche� in�den�Galerien� der� einschlägigen�Communities� zur� freien�Verwendung� angeboten�werden.347�

Mögliche�symbolische�Farbwirkungen�von�Zweierkombinationen�aus�den�Farben�Rot,�Gelb,�Blau,�Grün,�Orange,�Braun�und�Schwarz�können�bei�Stefanie�Bartel�[Bar�tel�2003,�S.�44f.]�nachgeschlagen�werden.�Beispielsweise�stehen�in�ihrer�Matrix�der�Farbklänge�die�Kombinationen�Braun�Gelb� für�„Wärme�und�Gemütlichkeit“�und�Rot�Schwarz�für�„Brutalität,�Bosheit,�Hölle,�negativ,�Stärke“.�

5.3.2 FormenFormen� gehören� zusammen�mit� Farben� zu� den� elementaren� Bestandteilen� eines�Layouts.�Sie�finden�sich�überall�wieder,�im�Großen�(z.�B.�in�der�Bildschirmstruktur�oder� Hintergrundflächen)� wie� im� Kleinen� (z.� B.� als� Schaltflächen� oder� Aufzäh�lungszeichen�(„Bullets“)�in�Texten).��

Anhaltspunkte�für�die�Gestaltung�von�Formen�gibt�die�Formenlehre,�die�bis�in�die�Antike� zurückreicht.� Insbesondere� die� Gestaltpsychologie� mit� ihren� Begründern�Max� Wertheimer,�Kurt� Koffka� und�Wolfgang� Köhler� hat� zu�Beginn�des� letzten� Jahr�hunderts� viel� zum�Verständnis� der� Formwahrnehmung� beigetragen� und� die� be�reits�im�Kapitel�4.4.1�ab�Seite�185�beschriebenen�Gestaltgesetze�hervorgebracht.�

Dieses�Kapitel�klärt�zunächst,�was�eine�Gestalt�ist�und�welche�Eigenschaften�sie�hat�(Kapitel� 5.3.2.1)� und�wie� Formen� beschaffen� sein�müssen,� damit� sie� leicht� zu� er�kennen�sind�(siehe�Seite�284ff.).�Zu�berücksichtigen�sind�dabei�mögliche�Fehlinter�pretationen� z.� B.� im�Hinblick� auf� Form,� Größe,� Bewegung� oder� Bedeutung� von�Elementen,� um� unerwünschte� Effekte� zu� vermeiden� oder� optische� Täuschungen�gezielt�einzusetzen.��

Der�wichtigste�Schritt�bei�der�Formgebung�ist�es,�Formen�mit�einer�Symbolik�aus�zuwählen� bzw.� zu� gestalten,� welche� die� Grundaussage� des� Webauftritts� unter�stützt�(siehe�Seite�291f.).��

�����������������������������������������������������������346� Siehe�http://www.kollermedia.at/archive/2007/04/11/list�of�25�online�color�

scheme�generator/.�

347� Siehe� z.� B.� http://www.colorschemer.com/schemes/� und� http://www.colour�lovers.com/.�


Recommended