Ein eLearning-Kurs von Jessica Battram (neusta destination solutions GmbH)
Lerneinheit 2
Farben – Leitsystem und Barrierearmut
— KURZBESCHREIBUNG —
Bei unseren afrikanischen Vorfahren vor hunderttausenden von Jahren entschied das Farbensehen über Leben und Tod. Auch wenn der nackte Überlebenskampf in unserer heutigen Gesellschaft in weite Ferne gerückt ist, sind wir doch noch genauso von Farben abhängig und beeinflussbar wie vor Urzeiten. Was es mit der menschlichen Farbwahrnehmung auf sich hat und wie wir sie geschickt für unser Webdesign nutzen können, wird in dieser Lerneinheit beantwortet.
— GLIEDERUNG —
In dieser Lerneinheit erwartet Sie:
- Was ist Farbe?
- Farben im Web
- Farben als Leitsystem
- Das 60-30-10 Prinzip
- Wie berechnet man Farbkontrast?
— EINGANGSSZENARIO —
Ist Ihnen schon einmal aufgefallen, dass ein Stop-Schild im Verkehr immer rot ist? Was wäre eigentlich, wenn es verschiedene Stop-Schilder in unterschiedlichen Farben gäbe, die Bedeutung aber gleich wäre? Man kann sich schnell ausmalen, dass solch ein Szenario schnell zum Verkehrschaos führen würde. Ein konsequenter Einsatz von Farben ist essentiell für eine schnelle Auffassungsgabe. Genauso verhält es sich auch beim Webdesign.
— VIDEO —
— ZUSAMMENFASSUNG —
Wir haben in der ersten Lerneinheit erfahren, dass eine Webseite nur dann erfolgreich sein kann, wenn sie sich mit ihrer Zielgruppe befasst und allgemeinen Wahrnehmungsregeln folgt. Wir wollen uns also in dieser Lerneinheit damit beschäftigen, wie der User generell auf Farben reagiert, sie verarbeitet und wie man sie gezielt im Webdesign einsetzen kann. Kommen wir zur allerersten, grundlegenden Frage:
Was ist Farbe?
Wir alle erinnern uns an unseren Physikunterricht und die erste Erklärung, dass Farbe durch die Wahrnehmung elektromagnetischer Strahlung der Wellenlänge zwischen 380 und 760 Nanometer hervorgerufen wird. Der Mensch sieht also mit dem Auge und verarbeitet den Reiz mit dem Gehirn. Und dort wird es spannend, denn die Wahrnehmung und Interpretation von Farbe ist ein wahrnehmungspsychologisch sehr komplexer Prozess, in dem alle Menschen desselben Kulturkreises Gemeinsamkeiten und individuelle Unterschiede aufweisen. Wichtig für den Gestaltungsprozess ist hier vor allem die Tatsache, dass die Wahrnehmung von Farben psychologisch zwei Dinge tut:
erstens ruft sie Assoziationen hervor, die meistens an Erinnerungen geknüpft ist. So steht rot für Feuer, grün für Gras oder blau für den Himmel.
Zweitens ruft Farbe Gefühle hervor, die in uns Menschen seit Urzeiten verankert sind. So wird beispielsweise rot mit gefährlich, grün mit giftig oder blau mit beruhigend gleichgesetzt. Diese Art Orientierung hat sich im Laufe der Evolution durch unser Dasein in der Welt und unsere Interaktion mit der Natur in unserem Gehirn als universal festgesetzt. Im Gegensatz zu heute haben die richtigen Farbwahrnehmungen bei unseren Vorfahren noch häufiger über Leben und Tod entschieden. Farben und Farbkontraste halfen unseren Vorfahren beispielsweise, Früchte zu finden und zu identifizieren oder Gefahren zu erkennen und zu fliehen.
Durch unsere Erfahrung und Erziehung haben sich sowohl Farbassoziationen als auch Farbgefühle derart intensiv eingeprägt, dass nirgends so eine schnell emotionale Reaktion beim Menschen hervorgerufen wird als bei der Wahrnehmung von Farbe.
Was bedeutet das nun für Webdesign?
Wir lernen, dass Farbe eins der stärksten und schnellsten Werkzeuge im Webdesign ist, gerade im Hinblick darauf, dass ein User ja bereits in wenigen Millisekunden Entscheidungen über sein weiteres Klickvorgehen trifft. Wenn wir also sowieso nur ein paar Millisekunden Zeit haben, um den User zu leiten, dann ist der richtige Einsatz von Farbe und Farbkontrast in diesen ersten Momenten unabdinglich.
Befassen wir uns nun stärker mit dem Gestaltungsprozess und den einzelnen Farbentscheidungen, die zur Leitung des Users getroffen werden sollten.
Wie werden Farben im Web überhaupt definiert?
Der für Bildschirme designierte Farbraum ist RGB (rot, grün, blau) und die für den Webeinsatz bestimmten Farben entweder direkt mit den entsprechenden Rot-, Grün- und Blauwerten oder mit dem dazugehörigen sechsstelligen Hexadezimalwert (oder kurz Hexwert) nach dem Schema #RRGGBB definiert. Dabei reicht das Spektrum von „0“ für das Nicht-Vorhandensein der Farbe bis 255 oder FF für die 100%ige Farbsättigung. Rot wäre demnach beispielsweise als R255 G0 B0 oder als Hexwert #FF0000 codiert.
CI_Manual
Ein vollständiges CI_Manual, in dem ihre Markenidentität beschrieben wird, sollte unbedingt die unterschiedlichen Farbräume für die unterschiedlichen Medien enthalten: als Minimum also RBG/Hexwerte für computergestütztes Design und sogenannte CMYK-Farbwerte für den Printbereich, auf die wir hier aber nicht weiter eingehen werden.
Wie lege ich nun die ersten Farben fest?
Die allerersten Farbentscheidungen werden bereits durch die Markenidentität vorgegeben. Und das ist auch grundsätzlich gut so, damit beispielsweise ein Markenlogo sich vollkommen natürlich in ein Webdesign einfügt und nicht wie ein Fremdkörper wirkt. Sind die Farben grundsätzlich aufeinander abgestimmt und „gehören“ mit dem Markenlogo zusammen, kann der User beim ersten Eindruck sofort erkennen, dass hier eine individuell abgestimmte Farbdefinition vorgenommen wurde und stuft so die Webseite als wertiger ein. Wenn Sie sich noch ganz am Anfang Ihrer gestalterischen Identitätsfindung befinden, machen Sie sich bewusst, dass sich neben den universellen Farbwahrnehmungen aus der Natur auch im kommerziellen Bereich Traditionen etabliert haben:
so werden kühle, neutrale Farben beispielsweise häufig in der Finanz- oder wissenschaftlichen Branche eingesetzt, während man emotionale Rot-Gelb-Töne in Gastronomie und Schwarz-Weiß in Verbindung mit Luxusprodukten findet. In dieser Lerneinheit wollen wir uns jedoch vornehmlich auf Farben im Gestaltungsprozess von Webseiten konzentrieren. Nehmen wir also an, Sie haben bereits ein Logo und haben sich für eine farbliche Grundstimmung Ihrer Webseite entschieden. Rufen wir uns von unserer ersten Lerneinheit folgendes ins Gedächtnis:
Der heutige Nutzer möchte sich so schnell wie möglich auf einer Webseite zurechtfinden können, nicht überfordert werden und seiner Intention – sei es Inspiration, Information oder gleich Kaufintention – so unkompliziert wie möglich nachgehen können. Da der Nutzer wie wir gelernt haben auf Farbe am schnellsten reagiert, können wir seinen Wünschen bereits mit Farbgebung und deren geplante Hierarchien entgegenkommen.
Gehen wir seine Wünsche der Reihe nach durch.
Wunsch eins:
Er möchte sich auf der Webseite zurechtfinden können. „Zurechtfinden“ bedeutet hier, dass er zum einen den Content einer Seite schnell erfassen als auch dessen Anordnung verstehen und auf diese Weise seinem gewünschten „Klickweg“ auf der Webseite nachgehen kann. Für die Farbgebung bedeutet dies konkret: Achten Sie darauf, dass starke Farben und Farbkontraste genau da Einsatz finden, wo Sie etwas betonen bzw. die Aufmerksamkeit des Nutzers erreichen möchten. Textfarben müssen gut erkennbar und damit lesbar sein, wichtige weiterführende Klickwege z. B. durch Call-to-action Buttons in der Farbhierarchie ganz oben angesiedelt und damit mit den stärksten Farben ausgestattet werden. Stellen Sie sich die primäre Funktion von Farbe als Leitsystem im Web genauso vor wie den Verkehr: Durch die richtige Beschilderung navigieren Sie den Nutzer von Straße zu Straße, so dass er nie in einer Sackgasse landet und die Webseite aufgrund dieses negativen Nutzererlebnisses verlässt.
Und was steht in der Farbhierarchie einer Webseite ganz oben?
Die Antwort liegt auf der Hand: genau das, was als Vertriebsziel für die jeweilige Seite gesteckt wurde, wird auch am stärksten und damit am lautesten betont: von einer Anmeldung zum Newsletter bis hin zur kommerziellen Buchung. Und wie erreiche ich hier die maximale Aufmerksamkeit? Usability-Studien haben herausgefunden, dass Nutzer hier auf Farben, die bewusst aus dem bisher definierten Farbschema ausbrechen, besonders stark reagieren. Eine fast schon störerische Farbe wird auf diese Weise unübersehbar. Häufig wird diese aus dem Farbschema herausbrechende Farbe als Conversionfarbe bezeichnet, weil sie eben hilft, den einfachen Nutzer in einen Abonnenten oder Käufer zu „konvertieren“. Wichtig ist an dieser Stelle, dass die Conversionfarbe nicht allzu großflächig und allzu häufig eingesetzt wird, weil sie sonst ihren „Störeffekt“ verliert – ganz nach dem Motto: wenn alles laut ist, ist nichts mehr laut.
Wunsch zwei:
Kommen wir nun zum zweiten Wunsch des Nutzers, nicht überfordert zu werden. Stellen Sie sich vor, ein und dasselbe Verkehrsschild wie z. B. ein Warndreieck gäbe es in mehreren Farbausführungen, von rot über blau bis hin zu grün. Die Message bzw. Funktion an sich wäre aber gleich belegt. man kann sich leicht vorstellen, wie dies bei der Mehrheit der Verkehrsteilnehmer auf unnötige Verwirrung stößt. Hier ist also zu Gunsten der schnellen Erfassungsgabe und Orientierung unbedingt Einheit geboten. Genauso verhält es sich mit den funktionalen Farben im Web:
sobald interaktive Funktionen und Aufforderungen im Spiel sind – der Nutzer also direkt geleitet wird – ist es wichtig, die Farben konsequent einzusetzen. Bestimmen Sie daher beispielsweise eine Linkfarbe, die sich beim Nutzer wie ein Verkehrsschild oder Straßenname einprägt. Seien Sie dabei unbedingt konsequent, damit Sie beim Nutzer kein negatives Klickerlebnis hervorrufen, weil Sie z. B. einer Textzeile die Linkfarbe geben, obwohl kein Link dahintersteckt.
Selbstverständlich kann Farbe auch im Web weit mehr als einfach nur als Leitsystem zu dienen. Sie können die Zielgruppe beruhigen, animieren oder inspirieren. Der Anblick von türkisfarbenem Wasser in einem Foto animiert unsere Vorstellungskraft und lässt uns in die Ferne träumen. Ein neutraler, großflächiger Hintergrund hilft dem darauf liegenden Content, für den User in den Fokus zu rücken. Es ist hierbei wichtig, die Webseite unbedingt als einheitliches Ganzes zu betrachten. Damit die verschiedenen Farben auch in ihrer Fläche und Menge den richtigen Einsatz finden, nutzen wir das sogenannte 60-30-10 Prinzip, das als Basisleitfaden dient:
Die Farbe mit der meisten Fläche, also vor allem die Hintergrundfarben, die für die farbliche Grundstimmung der Webseite sorgen, nehmen ca. 60% der kompletten Farbgebung in Anspruch. Eine weitere Sekundärfarbe rundet das Farbkonzept ab. Bei einem anteiligen Einsatz von ca. 30% kann man hier durchaus eine kräftigere Farbe wählen.
Das letzte i-Tüpfelchen und damit die stärkste Aufmerksamkeit erhalten wie vorher beschrieben Themenlinks, Conversionlinks oder z. B. weitere Störer, die unbedingt geklickt werden möchten. Dadurch, dass wir hier „nur“ 10% in der Gesamtverteilung beanspruchen, kann überhaupt punktuell die Leitung des Nutzerauges funktionieren. Wenn es sich zusätzlich zur starken Farbe auch noch um einen starken Farbkontrast handelt, ist die Wirkung noch effektiver.
Wie berechnet man Farbkontrast?
Im Zeitalter von barrierearmen Webseiten und dem Erreichen derjenigen Nutzer, die eine Form von Sehschwäche haben, ist es für Webdesigner essentiell, bei allen funktional besetzten Elementen wie z. B. Buttons oder Textcontent ausreichend Farbkontrast einzukalkulieren. Und die gute Nachricht? Ein barrierearmer Farbkontrast liegt nicht etwa subjektiv im Auge des Betrachters, sondern kann errechnet werden. Unzählige im Web auffindbare Farbkontrastrechner berechnen nach Eingabe von Vor- und Hintergrundfarbe eine Kontrastratio. Geläufig ist beispielsweise die Erfüllung des sogenannten WCAG-Standards Level AA, wonach die Kontrastratio mindestens 4,5 : 1 erfüllen muss. Und so erfolgt an dieser Stelle während des Gestaltungsprozesses eine Überprüfung der anfangs vorgegebenen CI-Farben und werden – falls notwendig – im Kontrast feinjustiert. Die wichtigsten Prinzipien der Farbgebung im Web und deren essentieller Beitrag zur Nutzerführung und visueller Hierarchie sind damit angerissen. Farben können bestimmten Content in den Fokus rücken oder zurückstellen. In der nächsten Lerneinheit beschäftigen wir uns mit dem Content selbst, allen voran Webtypografie und Bildsprache.
— WEITERFÜHRENDE INFORMATIONEN —
Sie haben noch nicht genug? Dann sehen Sie sich doch diese weiterführenden Informationen an:
- Grundlagen der visuellen Wahrnehmung: Hier klicken
- Das richtige Farbschema wählen: Hier klicken
— AUSGANGSSZENARIO —
Die wichtigsten Prinzipien der Farbgebung im Web und deren essentieller Beitrag zur Nutzerführung und visueller Hierarchie sind damit angerissen. Farben können bestimmten Content in den Fokus rücken oder zurückstellen. In der nächsten Lerneinheit beschäftigen wir uns mit dem Content selbst, allen voran Webtypografie und Bildsprache.
Dieser Kurs wird von Teejit - Weiterbildung neu definiert im Rahmen des LIFT-Förderprojektes bereitgestellt. Weitere CC-BY Kurse gibt es auf www.teejit.de