Die Psychologie der Farben im digitalen Design

Die Bedeutung einer Farbe sowie das Gefühl, das von ihr vermittelt wird, etabliert sich bereits in der frühen Kindheit und wird mit fortschreitendem Alter immer weiter ausgeprägt. Die dahinterstehende Symbolik ist aber kein universelles Konstrukt, sondern unterscheidet sich über Kulturen hinweg. So tragen Bräute in den meisten asiatischen Kulturen die Farbe Rot, da dies für Freude, Glück und ein langes Leben steht. Dagegen symbolisiert Rot in westlichen Kulturen nicht nur die Liebe, sondern auch Gefahr. Eine Gefahr, die das menschliche Gehirn absolut ernst nimmt. Neurowissenschaftliche Untersuchungen zeigen nämlich auf, dass durch das Erblicken der Farbe Rot die Gehirnareale für Aufmerksamkeit aktiviert werden, was direkte Auswirkungen auf alle vegetativen Körperfunktionen hat.

Die Signalwirkung von Farben hat somit einen nicht zu unterschätzenden Einfluss auf unser Handeln, Denken und vor allem auf unsere Gefühlswelt. Und da die Wahrnehmung in Verbindung mit den zu erweckenden Emotionen eine der wichtigsten Grundbausteine der User Experience sind, muss der Farbpsychologie auch in der digitalen Welt Rechnung getragen werden, um Produkte oder Anwendungen für Nutzer verständlicher, mitreißender und greifbarer zu gestalten.

Farben als psychologisches Element

90 Sekunden – das ist durchschnittlich die maximale Zeitspanne, die ein Mensch dafür braucht, um für sich zu dem Entschluss zu kommen, ob ihm ein Produkt gefällt oder nicht. 90 Sekunden der Entscheidungsfindung, in denen unser Gehirn regelrecht dazu programmiert ist, die durch die genutzten Farben transportierten Informationen und ausgelösten Emotionen auf sich wirken zu lassen. Es ist daher wenig verwunderlich, dass die psychologische Wirkung von Farben schon lange im Marketing, der Verpackungs- oder auch Logogestaltung sehr bewusst eingesetzt wird.

Als Aufmerksamkeit erregende Farbe findet Rot so z. B. gerne Verwendung in Bereichen wie Unterhaltung (Netflix), Sport (Ferrari) oder dank ihrer Signalwirkung auch bei Notfall- und Gesundheitsdiensten (Feuerwehr, Rotes Kreuz). Außerdem zeigen verschiedene Studien, dass warme Farben wie Rot bei Nahrungsmitteln appetitanregend wirken und ein in der Werbung rot dargestellter Angebotspreis eher zu einem Impulskauf verführt. Dagegen nutzt die Geschäftswelt, gerade wenn es um den Finanz- (PayPal, DKB) oder Versicherungssektor (IKK, Allianz) geht, mit Vorliebe die Farbe Blau, da hierdurch Vertrauen, Kompetenz und Sicherheit ausgestrahlt werden. Die richtige Farbe kann deshalb nicht nur dazu genutzt werden, um die vom Unternehmen gewünschten Werte zu vermitteln, sondern auch um den Wiedererkennungswert einer Marke um das Vielfache steigern.

Dazu sei aber gesagt, dass Farben sowohl kulturelle Unterschiede aufweisen als auch in ihrer Wirkung nicht in Stein gemeißelt sind. Farben transportieren Weltbilder und Weltbilder sind nicht vor Veränderungen gefeit. Bis in die 40er Jahre war so z. B. Hellblau die Farbe kleiner Mädchen. Wahrscheinlich aufgrund christlicher Traditionen, die sich am blauen Gewand der Jungfrau Maria orientierten. Rot war hingegen die Farbe der Krieger und der Männlichkeit, wodurch kleinen Jungen das „kleine Rot“ (Rosa) zugedacht wurde. Da heutzutage Rosa für Mädchen und Hellblau für Jungs eine gewisse Allgemeingültigkeit erfährt, war das etablierte Farbwissen also wohl nicht derart verwurzelt, dass es nicht zu einer vollkommenen Umkehrung kommen konnte.

Farben als Gestaltungselement im digitalen Kontext

Wenngleich es auch Ausnahmen gibt, so ist die Farbpsychologie in der Regel in sich stimmig und durch die Globalisierung mitsamt der digitalen Möglichkeiten bilden sich sogar langsam universelle Gültigkeiten über Grenzen und Kulturen hinweg aus. Das Nutzen und Beeinflussen der Wahrnehmung durch Farben spielt daher ebenfalls im digitalen Design eine wichtige Rolle, um die Conversion Rate zu erhöhen und die Markenbekanntheit zu stärken. Vor allem kann durch die Farbgestaltung aber auch die Benutzerfreundlichkeit und der gesamte Joy of Use erhöht werden, da Farben hierbei eine einfache und für Nutzer schnell zu erfassende Möglichkeit bieten, um wichtige Elemente hervorzuheben und Informationen strukturiert darzustellen.

Wird ein Element oder eine Information als wichtig erachtet, sollte dies im Kontrast zu seiner Umgebung stehen, damit sich der Nutzer schneller zurechtfindet und die Funktionen erspäht, die ihm eine reibungslose Interaktion erlauben. Leuchtende oder hochgesättigte Farben lenken genauso wie Helligkeitsunterschiede ganz allgemein den Blick eines Betrachters, wogegen dunkle oder schwach gesättigte Farben weniger wichtig bzw. aufmerksamkeitserregender erscheinen. Gleichzeitig sollten all die Informationen, die in einem inhaltlichen Zusammenhang stehen, zur Übersichtlichkeit durch Farbgleichheit bestechen, sodass der Nutzer die Inhalte strukturiert aufnehmen kann. Die verwendeten Farbtöne sollen somit eine visuelle Hierarchie erzeugen, die gleichsam die Aufmerksamkeit des Nutzers lenkt als auch ihn bei seiner Zielerfüllung unterstützt.

Zudem tragen Farben im Sinne einer optimalen Interaktion zur Vermittlung des Informationsstatus eines Elements oder einer Komponente bei. Ein Button sollte so z. B. nicht nur signalisieren, was eine Aktion im Interface auslöst, sondern auch farbliches Feedback über seinen Zustand weitergeben. So sind die aus dem Ampelsystem gelernten Symbolfarben Rot (Stop) und Grün (Los) in ihrer Kommunikation einfach übertragbar (deaktiviert/aktiviert). Die Signalfarbe Rot eignet sich hierbei auch um Fehlermeldungen oder Eingabeaufforderungen  hervorzuheben. Fehlt in einem Eingabefeld eines Formulars eine Information, wird dies in rot gekennzeichnet, wodurch der Nutzer die Warnung als direkten Call-to-Action versteht.

Im digitalen Design liegt aber auch eine Herausforderung darin, dass Bildschirme Farben durch Licht projizieren und im Prinzip jeder Nutzer seinen Monitor individuell in Helligkeit und Farbwiedergabe einstellen kann, wodurch der gleiche Farbwert (RGB, Hexadezimal) auf unterschiedlichen Ausgabegeräten auch unterschiedlich dargestellt wird. Eine zu helle Fläche kann so schnell andere Informationen überstrahlen oder zu Flimmereffekten führen. Weniger leuchtende oder unbunte Areale sind deshalb bei der Farbabstimmung genauso wichtig wie die zu hervorhebenden Elemente mit Signalwirkung.

Um Farbkombinationen zu erhalten, die zu einer optimalen Farbharmonie führen, bieten sich heutzutage Farbschema-Tools an, die auf Grundlage einer Primärfarbe passende Farben berechnen, und die Orientierung am 60-30-10 Prinzip, indem die Hauptfarbe mit 60%, die Sekundärfarbe mit 30% und die Akzentfarbe mit 10% im Design vertreten ist. Farben, die hierbei als harmonisch oder ästhetisch angesehen werden, sind zumeist Kombinationen aus ähnlichen Farben, die sich nur minimal in einer einzigen Eigenschaft (z. B. Sättigungsgrad) unterscheiden, oder sich stark unterscheidenden Komplementärfarben, die sich z. B. im RGB-Farbkreis gegenüberstehen (z. B. Gelb & Blau, Grün & Violett).

Farben als Teil inklusiver Gestaltung

Bei der Farbwahl gilt es jedoch nicht nur, Rahmenbedingungen aus der realen Welt und kulturelle Unterschiede miteinzubeziehen, sondern auch Menschen, die eine Störung in der Farbwahrnehmung aufweisen. Schließlich hat jeder zwölfte Mensch damit Probleme, das durchschnittliche volle Farbspektrum zu sehen. Grundsätzlich gilt deshalb, dass zwischen dem Text im Vordergrund und den Hintergrundfarben ein ausreichender Kontrast vorherrscht und auf bestimmte Farbkonstellationen verzichtet wird, die Menschen mit einer Sehbehinderung oder Farbenblindheit nicht unterscheiden können.

Das Verwenden von kräftigen Farben, die sich kontrastieren, anstatt blasser Varianten baut hierbei den meisten Verwechslungen vor und ist elementar für die visuelle Wahrnehmung. Wobei gerade bei wichtigen Seitenelementen wie Warnhinweise oder Navigation Rot-Grün-Kombinationen vermieden werden sollten, da vielen Farbfehlsichtigen die Unterscheidung hierbei schwer fällt. Die Barrierefreiheit kann auch damit erhöht werden, dass neben der Farbgestaltung zusätzlich klar verständliche Icons genutzt werden oder auch sekundäre Hinweise in Textform, die Betroffene bei der Anwendung unterstützen. Richtlinien für Kontraste und unterstützende Elemente bieten hierbei die Web Content Accessibility Guidelines (WCAG), die international anerkannte Standards zur Barrierefreiheit enthalten.

Kompliziert kann es dennoch werden, wenn das User Interface auch über einen Dark Mode verfügen soll. Hierbei wird der Hintergrund vorwiegend in dunkle Farben getaucht, um die Augen zu schonen und energieeffizienter zu sein. Hier sollte auf stark gesättigte Farben verzichtet und der richtige Kontrast (Verhältnis von Text zu Hintergrund von mindestens 15,8:1) gewählt werden. Dabei gilt; je wichtiger ein Element, desto heller sollte es erscheinen. Menschen mit Farbenblindheit oder anderen Sehschwächen haben damit aber trotzdem möglicherweise mehr Probleme, da ihnen die hierbei oft verwendeten Grautöne in Kombination mit blassen Farben nicht genügend Kontrast liefern. Im Gegensatz hierzu ist eine reine Invertierung der Farben, die z. B. bei iOS eingeschaltet werden kann, oder das Beschränken auf weißem Text auf schwarzem Hintergrund eine gängige Methode, um Menschen mit Sehbehinderungen die Nutzung zu erleichtern. Für alle anderen Nutzer sollte jedoch ein dedizierter Dark Mode, in dem Kontraste und Farben angepasst werden, gestaltet werden, da ansonsten bei der reinen Invertierung der im Light Mode erfüllte psychologische Zweck der Farben größtenteils in der Bedeutungslosigkeit verschwindet und die emotionale Bindung verringert wird.

Die Wichtigkeit eines Styleguides

Als Designer muss man verstehen, dass jede Interaktion mit den Nutzern auch Kommunikation bedeutet und Farben ein wichtiger Teil dieser Kommunikation sind. Es ist daher ratsam, einen Styleguide zu erstellen, der eine konsistente Farbgebung im Oberflächendesign bietet, um dem Nutzer die Navigation durch einen User Flow zu vereinfachen. Ein homogenes und klar definiertes Farbschema, welches nicht mehr als drei Grundfarben enthält, sorgt dabei nicht nur für ein einheitliches Look & Feel, sondern fördert auch die Usability eines Produktes oder Services.

Kontraste gehen dabei immer mit der Wahl einer geeigneten Farbpalette einher und müssen innerhalb der Farben geprüft werden. Die Farbe Rot kann schließlich nur dann Aufmerksamkeit erregen, wenn sie sich vom Hintergrund oder den umgebenden Farben auch klar unterscheidet. Das Arbeiten mit Kontrasten ist daher eine der grundlegendsten Aufgaben eines Designers, um wichtige Elemente hervorzuheben und eine visuelle Hierarchie aufzubauen, die dem Nutzer eine unbewusste Leitlinie bietet, mit deren Hilfe er schnell und einfach den digitalen Service direkt auf notwendige Informationen und mögliche Interaktionen scannen kann.

Richtig eingesetzt entsteht durch die gewählte Farbpalette nicht nur ein stimmiges Interface, in welchem sich der Nutzer auf natürlichste Weise zurechtfindet, sondern auch ein Hub, in dem bestimmte Assoziationen und Emotionen hervorgerufen werden, die der Nutzer sowohl mit dem Service/dem Produkt als auch mit dem Unternehmen selbst in Verbindung bringt. Ein professionelles Farbschema zu entwickeln ist daher weit komplexer und mehr als nur Geschmackssache als es vielleicht zunächst erscheinen mag. Farben beeinflussen unsere Wahrnehmung, spiegeln sich mit den gelernten Erfahrungen aus der realen Welt und kommunizieren ihre Botschaft als Symbolträger. Die psychologische Wirkung von Farben ist daher nicht nur unabdingbarer Teil unserer Lebensrealität, sondern genauso unabdingbar für die Gestaltung guter, nachvollziehbarer und packender UI- und UX-Designs.

_________
Quellen:

aok.de

ole-beekmann.de

99designs.de – Psychologie der Farben im Webdesign

uxdesign.cc/fundamentals-of-color-in-interface-design-ui

uxdesign.cc/10-principles-for-color-usage-in-ui-design

userinterfacedesign.ch

extensis.com

99designs.de – Dark-Mode-Design

mdr.de

w3.org

Eigene verlinkte Artikel:

Feedback

Feedback Design – Warum jede Interaktion eine Reaktion braucht

Kultur

Kultur und Design

UX

Was bedeutet User Experience – Der Weg zum unverzichtbaren Bestandteil heutiger Produkte & Services

Inklusive Gestaltung

Inklusive Gestaltung: Diversität erkennen, Vorteile verstehen