Die Rolle der Farbe in UX

Das Verständnis der Farbpsychologie ist ein Schlüsselaspekt beim Erstellen einer Farbpalette, die im digitalen Design gut funktioniert. Während Farbe von einigen Designern manchmal als rein ästhetische Wahl angesehen wird, ist sie tatsächlich eine Schlüsselkomponente der psychologischen Wirkung eines Designs auf Benutzer und damit seiner UX.

Eine gut durchdachte Farbpalette kann ein Design von „gut“ auf „großartig“ heben, während eine mittelmäßige oder schlechte Farbpalette das Gesamterlebnis eines Benutzers beeinträchtigen und sogar seine Fähigkeit beeinträchtigen kann, eine Website oder App zu verwenden.

Während die Farbtheorie im Allgemeinen ein komplexes Thema ist und die Verwendung von Farbe im UX-Design viel mehr umfasst als nur das Erstellen einer Palette, die gut aussieht (wie z. B. Zugänglichkeit und die psychologischen Auswirkungen sogar unterschiedlicher Farbtöne innerhalb desselben Farbtons); Designer können nach und nach eine bessere Verwendung von Farben in ihre Designs integrieren, ohne ihren gesamten Prozess überdenken zu müssen. Sobald ein Designer die Grundlagen abgedeckt hat, ist es einer der lohnendsten Teile der Farbtheorie, zu lernen, unerwartetere Farben in seine Designs zu integrieren.

Die Psychologie der Farbe

Die Farbtheorie und die psychologische Wirkung von Farben auf den Benutzer ist ein komplexes und oft subjektives Thema. Aber es gibt bestimmte Aspekte, die auf einer universelleren Ebene angesprochen werden können.

Dinge wie die gemeinsamen Bedeutungen der Hauptfarben (Primär-, Sekundär- und Tertiärfarben), traditionelle Farbpaletten und kulturelle Unterschiede in der Farbbedeutung sind alle ziemlich einfach. Designer können diese Grundlagen leicht erlernen und auf ihre Arbeit anwenden. Aber es gibt Feinheiten zu lernen, wenn es um die Verwendung von Farben im UX-Design geht.

Die emotionale Wirkung von Oberflächenfarben sollte nicht übersehen werden. Und während einige Farben im UX-Design „universal“ sind (z. B. Schwarz, Weiß und Grau, von denen mindestens eine in praktisch jedem guten Design verwendet wird), können die Farben, mit denen sie kombiniert werden, einen großen Einfluss haben die Wahrnehmung eines Benutzers.

Natürlich kann auch die Art und Weise, wie Farbe verwendet wird, einen dramatischen Einfluss darauf haben, wie sie wahrgenommen wird. Blau, das beispielsweise als Primärfarbe in einem modernen, minimalistischen Design verwendet wird, fühlt sich ganz anders an als das gleiche Blau, das als Akzentfarbe in einem komplexeren Corporate Design verwendet wird.

Kulturelle Unterschiede in der Farbe

Ein Problem, das Designer gerne übersehen, sind die kulturellen Unterschiede, die bei verschiedenen Farben bestehen können. Beispielsweise wird Weiß in vielen westlichen Kulturen mit Dingen wie Reinheit, Unschuld und Hoffnung in Verbindung gebracht. Aber in Teilen Asiens wird Weiß mit Tod, Trauer und Unglück in Verbindung gebracht.

Einige Farben haben unabhängig von der Kultur im Allgemeinen positive Konnotationen (wie Orange), während andere, wie Weiß, von Land zu Land stark variieren. Dies kann das Leben eines Designers sicherlich erschweren, wenn er versucht, ein Design zu erstellen, das das größtmögliche Publikum anspricht.

Es ist wichtig, dass Designer die kulturellen Implikationen ihrer Farbpaletten basierend auf der beabsichtigten Zielgruppe für das Produkt oder die Website betrachten. Wenn ein Produkt ein weltweites Publikum ansprechen soll, achten Sie darauf, die verwendeten Farben und Bilder auszugleichen, um negative kulturelle Konnotationen zu vermeiden. Wenn ein Produkt in erster Linie nur auf eine bestimmte Kultur abzielt, können Designer den Auswirkungen, die die gewählte Palette auf andere Kulturen haben kann, weniger Aufmerksamkeit schenken.

Passende UX-Farben zur Marke

Markenwerte sollten bei der Erstellung einer Farbpalette eine Schlüsselrolle spielen. Aber sie sind nicht der einzige wichtige Faktor. Branchennormen sind ebenso wichtig wie Farben, die bereits von Wettbewerbern verwendet werden. Die Verwendung einer Farbpalette, die fast identisch mit der Hauptkonkurrenz einer Marke ist, ist eine großartige Möglichkeit, Verwirrung zu stiften und sicherzustellen, dass die Marke nicht auffällt.

Zugegeben, davon gibt es Ausnahmen. Nehmen wir zum Beispiel McDonald's und Wendy's. Beides sind Schnellrestaurants, die in direkter Konkurrenz zueinander stehen. Und beide verwenden eine rote und gelbe Farbpalette. Wenn man sich jedoch ihre Logos ansieht, ist Wendy's Logo hauptsächlich rot mit gelben Akzenten, während McDonald's das Gegenteil ist. Ihre Verpackung verwendet diese Farben auch auf unterschiedliche Weise, wodurch die Marken weiter differenziert werden. Aus diesem Grund würde keines leicht mit dem anderen verwechselt werden, selbst wenn Logos und andere Erkennungsmerkmale von ihrer Verpackung entfernt würden.

Der erste Schritt zur Erstellung einer Markenfarbpalette, die die Werte der Marke unterstützt, besteht darin, die Bedeutung der verschiedenen Farben zu verstehen und sie heller/heller/dunkler/stumpfer/usw. zu machen. können sie beeinflussen. Hier ist eine grundlegende Aufschlüsselung dessen, was verschiedene Farben bedeuten:

• Rot – Rot ist die Farbe der Gefahr und Leidenschaft sowie der Aufregung. Es ist eine sehr starke Farbe und kann bei Menschen starke Reaktionen hervorrufen. Das Aufhellen zu Pink macht es femininer und romantischer, während das Abdunkeln des Farbtons zu Kastanienbraun es gedämpfter und traditioneller macht.
• Orange – Orange ist eine sehr kreative Farbe, die auch mit Abenteuer und Jugend in Verbindung gebracht wird. Es ist auch sehr energisch. Aufgrund der starken Bindung von Orange an den Stil der 70er Jahre kann es auch ein Retro-Feeling hervorrufen.
• Gelb – Gelb ist glücklich, optimistisch und fröhlich. Es ist in Designs für Kinder und Erwachsene gleichermaßen beliebt. Pastelltöne werden oft als geschlechtsneutrale Babyfarbe verwendet, während hellere Gelbtöne in kreativen Designs beliebt sind. Dunklere Gelbtöne werden zu Gold, das mit Reichtum und Erfolg assoziiert wird.
• Grün — Grün hat vielfältige Assoziationen. Einerseits weckt es Gefühle von Reichtum und Tradition (insbesondere dunklere Farbtöne), andererseits wird es stark mit Umweltschutz und Natur in Verbindung gebracht. Limettengrün wird oft mit Erneuerung und Wachstum in Verbindung gebracht.
• Blau – Blau wird am häufigsten mit Loyalität und Vertrauen in Verbindung gebracht. Helleres Blau kann mit Kommunikation in Verbindung gebracht werden, während stumpferes und dunkleres Blau mit Traurigkeit und Depression in Verbindung gebracht werden kann. Blau ist die allgemein beliebteste Farbe der Welt, was erklären könnte, warum sich so viele Unternehmen für blaue Farbtöne für ihr Branding entscheiden.
• Lila – Lila ist ein weiterer Farbton mit unterschiedlichen Bedeutungen. Es wird seit langem mit Königtum und Reichtum in Verbindung gebracht (da lila Farbstoff in vielen alten Zivilisationen selten war, war es den Königen vorbehalten). Aber es ist auch mit Geheimnis und Spiritualität verbunden. Lila kann auch Kreativität hervorrufen.
• Schwarz – Schwarz steht für Raffinesse und Luxus. Es kann jedoch auch mit Trauer und Negativität verbunden sein. Abhängig von den anderen UX-Farben, die neben Schwarz verwendet werden, kann es sich modern oder traditionell, formell oder lässig anfühlen.
• Weiß – Weiß ist mit Reinheit, Unschuld und Positivität verbunden. Auch in minimalistischen Designs ist Weiß aufgrund seiner Neutralität und Schlichtheit sehr beliebt. Wie Schwarz nimmt Weiß leicht die Eigenschaften anderer Farben an, mit denen es verwendet wird.
• Grau — Grau hat je nach Kontext unterschiedliche Bedeutungen. Es kann konservativ und raffiniert oder schmuddelig und langweilig sein. Es kann emotionslos oder launisch sein. Es kann auch mit Kummer und Traurigkeit verbunden sein.
• Braun – Braun (eigentlich ein dunkler Orangeton) wird mit Bodenständigkeit und Bodenständigkeit in Verbindung gebracht. Es wird auch mit Natur und sogar Gemütlichkeit in Verbindung gebracht. Und natürlich kann es damit verbunden sein, schmutzig oder schmuddelig zu sein.

Die Kenntnis dieser grundlegenden Farbbedeutungen gibt Designern eine solide Grundlage, auf der sie Farbpaletten für jede Marke oder jedes Produkt erstellen können.

Die Farbtheorie ist jedoch teils Wissenschaft und teils Kunst. Nur weil eine Farbe im Allgemeinen mit einem bestimmten Gefühl oder einer bestimmten Stimmung verbunden ist, bedeutet das nicht, dass sie nicht auch auf andere Weise wahrgenommen werden kann, indem man sie mit anderen Farben kombiniert, den genauen Farbton ändert oder ihre Verwendung unter anderen Designelementen variiert.

Unkonventionelle UX-Farben verwenden

Die unkonventionelle Verwendung von UX-Farben ist eine großartige Möglichkeit, eine Marke von anderen abzuheben. Und obwohl es mehr Finesse erfordert, als einfach irgendwelche alten Farben zu kombinieren, die ein Designer kombinieren möchte, ist es nicht so schwierig zu lernen, wie man unerwartete Farben in UX-Designs verwendet.

Akzentfarben sind der einfachste Ausgangspunkt, wenn es darum geht, einem Design unkonventionelle Farben hinzuzufügen. Beispielsweise könnte die Website einer Anwaltskanzlei eine traditionelle Farbpalette aus Marineblau und Grau verwenden. Aber fügen Sie einige limonengrüne Akzente hinzu und plötzlich hebt sich das Design vom Meer anderer Anwaltskanzleien mit marineblauen und grauen Websites ab. Oder schauen Sie sich dieses Beispiel von Hogan Lovells an, das eine weiße, graue und hellgrüne Farbpalette verwendet, um eine moderne Website zu erstellen, die sich definitiv von anderen Websites der Rechtsbranche abhebt. Es würde ein jüngeres, moderneres Publikum ansprechen als eine durchschnittliche legale Website.

Berdan Real Estate ist eine weitere Website, die eine unerwartete Farbpalette verwendet. Die Immobilienseite verwendet Gelb- und Pfirsichtöne, die beide viel energischer sind als eine durchschnittliche Immobilienseite (wo große Schwaden von Blau, Rot und Grün dominieren).

Versicherungen werden im Allgemeinen nicht als moderne, bahnbrechende Branche angesehen, aber das bedeutet nicht, dass ihre Designs es nicht sein können. Die Website von Lemonade verwendet ein graues und weißes Farbschema mit fuchsiafarbenen Akzenten. Völlig unerwartet in einer Branche, die nicht dafür bekannt ist, Risiken einzugehen.

Es gibt eine Vielzahl weiterer Beispiele für unkonventionelle UX-Farben, die in der Praxis im Web verwendet werden und als Inspiration dienen können.

Die 60-30-10-Regel

Die 60-30-10-Regel ist eine einfache Theorie zum Erstellen von Farbpaletten, die gut ausbalanciert und optisch interessant sind. Die Idee ist, dass eine Farbe – im Allgemeinen etwas ziemlich Neutrales (entweder buchstäblich oder psychologisch) – 60 % der Palette ausmacht. Eine weitere Komplementärfarbe macht 30 % der Palette aus. Und dann wird eine dritte Farbe als Akzent für die restlichen 10 % des Designs verwendet.

Diese Methode macht es Designern viel einfacher, mit unkonventionellen Farbpaletten zu experimentieren, ohne zu weit von den erwarteten Normen innerhalb einer Branche oder Marke abzuweichen. Das Hinzufügen eines unerwarteten Farbtons kann ein Design hervorheben, das ansonsten zu den Erwartungen eines bestimmten Unternehmens passt. Es kann auch der erste Schritt zur Schaffung einer Markenpalette sein, die viel zukunftsorientierter ist als die der Konkurrenz, wodurch sich die Marke von anderen abhebt und sie einprägsamer macht.

Fazit

Während Farbtheorie ein komplexes Thema ist, ist es nicht besonders kompliziert, die Grundlagen zu erlernen. Von dort aus können Designer auf ihrem Wissen aufbauen, um vielfältigere und anspruchsvollere Farbpaletten für ihre Designs zu erstellen.

Eine gut gestaltete Farbpalette, insbesondere eine, die einige unerwartete Farbtöne enthält, ist nicht nur eine ästhetische Wahl. Es kann erhebliche psychologische Auswirkungen auf Benutzer haben, die UX-Designer nutzen sollten, um bessere Erfahrungen zu schaffen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Designpsychologie und die Neurowissenschaft von Awesome UX
• Dunkle Benutzeroberflächen. Das Gute und das Böse. Verhaltensregeln.
• Emotionales Branding für nachhaltiges Produktdesign
• Nutzen Sie Ihre Inspiration – Ein Leitfaden für Moodboards
• Überzeugendes Design: Fortgeschrittene Psychologie effektiv nutzen