Wie beeinflussen Farben die Konversionsrate?

Für Designer ist die Farbwahl eine der wichtigsten Entscheidungen. Farben können die Aufmerksamkeit steuern, Stimmungen hervorrufen und Emotionen, Wahrnehmungen und Handlungen beeinflussen.

„Farben machen ein Design nicht nur ansprechender. Sie unterstreichen es.” – Pierre Bonnard

Wusstest du, dass die Entscheidung, ob du ein Produkt kaufst oder nicht, zu 90 % von Farbe gesteuert wird? Oder dass farbige Werbeanzeigen in Zeitschriften um 26 % häufiger wahrgenommen werden als Schwarz-Weiß-Anzeigen?

Folgender Schluss liegt also nahe: Verwende die richtige Farbe, und du wirst Erfolg haben. Das führt uns allerdings zu der Frage, welche die „richtige“ Farbe ist. Um eine Antwort zu finden, werden wir traditionelle Farbassoziationen, die unterschiedliche Farbwahrnehmung von Männern und Frauen sowie die Barrierefreiheit von Farben analysieren.

Farbpsychologie

Farben vermitteln nicht nur objektive Informationen über ein Produkt. Sie haben auch einen starken psychologischen Einfluss auf das menschliche Gehirn. Je nachdem, in welcher Kultur deine Designs präsentiert werden, lösen die verwendeten Farben unterschiedliche Gefühle aus. Wir schauen uns im Folgenden die Bedeutung von Farben in der westlichen Welt etwas genauer an:

Rot

Gefahr, Wichtigkeit, Leidenschaft

Rot ist die Farbe des Feuers und des Blutes. Sie ist eine der bedeutungsstärksten Farben überhaupt und wird gleichzeitig sowohl mit Liebe als auch mit Krieg assoziiert (man denke nur an den Ausdruck „rotsehen“).

Rot ist eine sehr emotionale Farbe. Sie kann sogar körperliche Reaktionen hervorrufen, wie einen Anstieg des Blutdrucks und der Atemfrequenz.


https://blogsimages.adobe.com/creative/files/2017/09/Resize5.jpg

Netflix und YouTube setzen beide auf Rot. Die Farbe wirkt dynamisch, impulsiv und symbolisiert Schnelligkeit und Kraft.

In Designs kann Rot für kräftige Farbakzente eingesetzt werden, da Rot sofort hervorsticht. Rot eignet sich aufgrund seiner Signalwirkung (ähnlich wie der rote Teppich bei Preisverleihungen und Promi-Events) zur Hervorhebung der

Orange

Zuversicht, Energie, Optimismus

Orange ist eine äußerst muntere Farbe. Ähnlich wie Rot wirkt Orange stimulierend und strahlt Energie aus, allerdings in dezenterem Maße und ohne die bei Rot mitschwingende Aggression. Orange kann eine positive Atmosphäre schaffen.


https://blogsimages.adobe.com/creative/files/2017/09/Resize6.jpg

Auf der Website von Hipmunk fällt der orange Button sofort auf.

Orange zieht genau wie Rot die Aufmerksamkeit auf sich und eignet sich daher gut, um wichtige Elemente wie Call-To-Action-Buttons hervorzuheben. Einige Studien deuten darauf hin, dass Orange mit Billigkeit in Verbindung gebracht wird. Viele Apps und Websites verwenden das Merkmal billig allerdings im positiven Sinne.

Gelb

Sonne, Fröhlichkeit, Aufmerksamkeit

Kurioserweise steht Gelb sowohl für Fröhlichkeit als auch für Ängstlichkeit. Gelb zieht Aufmerksamkeit auf sich und wird daher oft für Warnschilder verwendet (Gelb kann für Gefahr stehen, wenn auch in etwas schwächerer Form als Rot).

In Kombination mit Schwarz ist die Signalwirkung von Gelb noch stärker (was sich gut an den New Yorker Taxis erkennen lässt).


https://blogsimages.adobe.com/creative/files/2017/09/Resize7.jpg

Auf schwarzem Hintergrund sticht Gelb von allen Farben am meisten hervor. Breitling macht sich diese Eigenschaft beim Button „Discover the Entire Range“ (Gesamtes Sortiment anzeigen) zunutze.

Grün

Natur, Wachstum, Erfolg

Bei Grün denken wir sofort an die Natur und an Pflanzen. Grün symbolisiert deshalb Wachstum und Gesundheit.

In Designs wirkt Grün ausgleichend und harmonisierend. Die Farbe wird daher gerne für Call-To-Action-Buttons verwendet. Allerdings sollten Designer bei der Sättigung aufpassen. Satte Grüntöne wirken dynamisch und aufregend. Sie stechen sofort ins Auge und eignen sich genau deshalb so gut für Call-To-Action-Buttons.


https://blogsimages.adobe.com/creative/files/2017/09/Resize8.jpg
Blau

Ruhe, Entspannung, Vertrauen

Blau ist die Farbe des Meeres und des Himmels. Sie ist eine der bedeutendsten und am häufigsten verwendeten Farben im Oberflächen-Design. Die Wahl des Blautons entscheidet, wie dein Design empfunden wird:


https://blogsimages.adobe.com/creative/files/2017/09/Resize9.jpg

Blau wird häufig mit Verlässlichkeit assoziiert.

Lila

Luxus, Spiritualität, Kreativität

Lila ist eine besondere Farbe. Sie kommt in der Natur nur äußerst selten vor und ist zudem extrem teuer in der Herstellung. Als Farbe der Könige steht Lila bzw. Violett auch heute noch für Luxus. Violett vermittelt den Eindruck, dass ein Produkt oder eine Website von hoher Qualität ist (auch wenn das vielleicht gar nicht der Fall ist).

Eine interessante Tatsache: 75 Prozent aller Kinder ziehen Lila allen anderen Farben vor.


https://blogsimages.adobe.com/creative/files/2017/09/Resize10.jpg

Für die meisten Kinder ist Lila eine fröhliche Farbe.

Schwarz

Kraft, Eleganz, Kultiviertheit

Schwarz ist die stärkste aller Farben. Sie zieht sofort die Aufmerksamkeit auf sich und wird deshalb gerne für Texte und Akzente verwendet.


https://blogsimages.adobe.com/creative/files/2017/09/Resize11.jpg

Auf der Squarespace-Website sticht der schwarze Button „Get started“ sofort ins Auge.

Als Hauptfarbe eines Farbschemas, z. B. für den Hintergrund, kann Schwarz auf emotionaler Ebene ansprechen und ein Gefühl von Mysterium und Kultiviertheit erzeugen.

Weiß

Gesundheit, Reinheit, Tugend

Die Farbe Weiß wird oft mit Reinheit, Sauberkeit und Tugend assoziiert. Sie wird häufig im Zusammenhang mit Gesundheit und Innovation verwendet. Wenn es um den Verkauf medizinischer oder High-Tech-Produkte geht, vermittelt Weiß ein Gefühl von Sicherheit.

Weiß wird in Designs verwendet, um andere Farben zu betonen, und ist deshalb eine beliebte sekundäre Farbe. Sorgfältig gesetzte weiße Flächen bzw. Leerräume sind ein wirkungsvolles gestalterisches Mittel. Die Startseite von Google ist ein gutes Beispiel. Aufgrund des großzügigen Einsatzes der Farbe Weiß rücken andere Farben sofort in den Mittelpunkt.


https://blogsimages.adobe.com/creative/files/2017/09/Resize12.jpg

Großzügige weiße Flächen schaffen Abstand. Abstände helfen, Elemente in den Vordergrund zu stellen oder von anderen zu trennen.

Grau

Förmlichkeit, Neutralität, Professionalität

Grau steht für Neutralität und lässt sich sehr gut mit anderen Farben kombinieren. Als primäre Farbe vermittelt Grau einen förmlichen Eindruck, was nicht notwendigerweise etwas Negatives sein muss. Ähnlich wie Weiß eignet sich auch Grau gut als Hintergrundfarbe, um andere Farben hervorzuheben.


https://blogsimages.adobe.com/creative/files/2017/09/Resize13.jpg

Grau in Kombination mit helleren Akzentfarben: Dropbox setzt Grau ein, um die blauen Call-To-Action-Buttons zu betonen.

Geschlechterspezifische Farbwahrnehmung

Feste Regeln dafür, welche Farben ausschließlich feminin oder maskulin sind, gibt es nicht. Allerdings wurden in den vergangenen 80 Jahren immer wieder Studien durchgeführt, die bestimmte Tendenzen erkennen lassen. Die Ergebnisse können zwar auf verschiedene Weise interpretiert werden, dennoch haben die Studien gezeigt, dass es zwischen den Geschlechtern unterschiedliche Farbpräferenzen gibt.

Beliebteste Farben


https://blogsimages.adobe.com/creative/files/2017/09/Resize14.jpg

Unbeliebteste Farben


https://blogsimages.adobe.com/creative/files/2017/09/Resize15.jpg

Quelle: VALUE

Farben in der Geschäftswelt

Die Bedeutung von Farbe als CI-Element

Bei der Branding-Strategie vieler Unternehmen steht Farbe im Mittelpunkt. Jede Farbe vermittelt etwas – direkt oder indirekt –, das unsere Einstellung einer Marke gegenüber beeinflusst. Einige Farben werden nicht nur mit einem Unternehmen assoziiert, sondern mit einem ganzen Wirtschaftszweig, z. B. Blau für Tourismus, Grün für das Gesundheitswesen oder Rot für die Fast-Food-Branche.

Für die Suche nach dem richtigen Farbschema für deine Marke gibt es keine allgemein gültige Regel. Einige Unternehmen entscheiden sich für branchenübliche Farben, andere hingegen wählen bewusst andere Farben, um sich von der Konkurrenz abzuheben. Das Design der Website und der App von Virgin America zum Beispiel würde man normalerweise nicht von einer Fluggesellschaft erwarten, und genau deshalb fällt es auf.


https://blogsimages.adobe.com/creative/files/2017/09/Resize16.jpg

Das Design der Virgin America-App für iOS verzichtet durchgehend auf das branchenübliche Blau.

Eine unkonventionelle Farbwahl kann dazu beitragen, Kunden im Gedächtnis zu bleiben.

Die Bedeutung von Farbe für Konversionsraten

Wie kannst du nun dein Wissen über Farbtheorie und Farbpsychologie nutzen, um Anwender dazu zu bringen, auf einen Button zu klicken? Im Bereich Konversion und Optimierung ist die Farbwahl von Call-To-Action-Buttons ein Dauerthema. Auf jeden Experten, der behauptet, ein knalliges Rot sei die beste Wahl für einen Button, kommt ein anderer Experte, der meint, Grün sei besser geeignet, weil Grün als Symbol für „Start“ bzw. „Los“ positiv besetzt ist.

HubSpot veröffentlichte einen Test, der zeigte, wie stark die Farbe eines Call-To-Action-Buttons die tatsächlichen Anmeldezahlen beeinflussen kann.


https://blogsimages.adobe.com/creative/files/2017/09/Resize17.jpg

A/B-Test von Performable zur Farbe von Buttons

Ursprünglich wurde eine Tendenz zum grünen Button erwartet. Mit 21 % mehr Klicks spricht das Ergebnis allerdings klar für den roten Button. HubSpot weist gleichzeitig darauf hin, dass die Ergebnisse subjektiv sind (die Befragten bevorzugten den roten Button vermutlich deshalb, weil es das einzige auffällige farbige Element auf der Seite war).

Die Farbe des Buttons an sich hat somit nur einen minimalen bis gar keinen Effekt. Auch wenn eine Farbe auf einer bestimmten Website gut funktioniert, muss das nicht für andere gelten. Die Behauptung, eine Farbe sei besser geeignet als eine andere, wäre schlichtweg falsch. Eine global perfekte Farbe gibt es nicht. Trotzdem gibt es einige Faustregeln. Der Restorff-Effekt ist eine davon. Gemäß diesem psychologischen Prinzip wird man sich an die sich von der Umgebung unterscheidenden Inhalte besser erinnern.

Wenn die Hauptfarbe einer Website oder App Grün ist, werden Anwender einen grünen Button wahrscheinlich nicht auf Anhieb erkennen. In dem Fall spielt es keine Rolle, wie gut grüne Buttons bei A/B-Tests anderer Websites abgeschnitten haben.


https://blogsimages.adobe.com/creative/files/2017/09/Resize18.jpg

Der Button „Get Evernote, It’s Free“ (Evernote kostenlos herunterladen) geht völlig unter, weil er die gleiche Farbe wie der Hintergrund hat. Er ist für Anwender praktisch unsichtbar.

Die Website sollte einer visuellen Hierarchie folgen, damit sich Call-To-Action-Buttons von den restlichen Elementen der zugehörigen Web-Seiten abheben. Dabei sind Farbkontraste entscheidend. Die Aufmerksamkeit des potenziellen Kunden muss sofort auf den Call-To-Action-Button gelenkt werden, sonst wird womöglich eine wichtige Chance zur Konversion vertan.


https://blogsimages.adobe.com/creative/files/2017/09/Resize19.jpg

Die perfekte Farbe für einen Call-To-Action-Button ist eine Farbe, die im Kontrast zum Farbschema der restlichen Elemente auf der Seite steht.

Farbe und Benutzerfreundlichkeit

UX-Designer legen besonderen Wert darauf, dass Designs nicht nur ansprechend aussehen, sondern auch funktional und benutzerfreundlich sind. Die Farbgestaltung kann das Auge des Anwenders lenken. Gelungene Oberflächen beeinflussen nicht nur die Aufmerksamkeit des Anwenders, sondern seine Interaktionen mit dem gesamten digitalen Erlebnis.

Farbanzahl beschränken

Die richtige Balance ist bei der Farbwahl ausschlaggebend. Je mehr Farben im Spiel sind, desto schwerer wird es, diese Balance zu halten. Die Verwendung von zu vielen Farben ist ein häufiger Fehler. Dadurch werden zu viele Gefühle und Botschaften gleichzeitig vermittelt, was beim Anwender zu Verwirrung führt.


https://blogsimages.adobe.com/creative/files/2017/09/Resize20.jpg

Zu viele verschiedene Farben, unabhängig davon welche, solltest du vermeiden.

Eine simple Regel aus dem Bereich der Inneneinrichtung kann auf Designs jeder Art angewendet werden. Sie lautet 60 – 30 – 10. Diese zeitlose Dekorationstechnik kann dir bei der Zusammenstellung deines Farbschemas helfen. _60 % Hauptfarbton – 30 % sekundäre Farbe – 10 % farbliche Akzente. _Diese Formel erzeugt ein farbliches Gleichgewicht und strengt die Augen des Anwenders nicht an, wenn sie sich von einem Fokus zum anderen bewegen.


https://blogsimages.adobe.com/creative/files/2017/09/Resize21.jpg

Die Aufteilung 60–30–10 sorgt für ein ausgewogenes Farbschema. Quelle: Facildecoracion

Barrierefreie Farben wählen

Menschen nehmen Farben unterschiedlich wahr. Etwa 8 % der Männer und circa 0,5 % der Frauen leiden unter irgendeiner Form der Farbenblindheit. Rot und Grün sind die Farben, die am häufigsten aufgrund einer Störung der Farbwahrnehmung nicht erkannt werden. Vermeide es, zwei Status oder Werte ausschließlich durch diese beiden Farben voneinander zu unterscheiden.


https://blogsimages.adobe.com/creative/files/2017/09/Resize22.jpg

Viele Menschen, die unter einer Farbenfehlsichtigkeit leiden, können Rot und Grün nicht voneinander unterscheiden.

Ein Beispiel aus der Praxis: Hast du schon mal ein Formular ausgefüllt und dabei eine Fehlermeldung wie „Rot markierte Felder sind Pflichtfelder“ erhalten? Das mag keine große Sache sein, aber eine solche Fehlermeldung bei einem Formular wie unten im Bild kann für Menschen mit einer Farbenfehlsichtigkeit große Frustration hervorrufen.


https://blogsimages.adobe.com/creative/files/2017/09/Resize23.jpg

Die Farben Rot und Grün sind die einzigen Indikatoren für ein korrekt oder falsch ausgefülltes Formularfeld. Farbenblinde Anwender können nicht erkennen, welche Felder rot hervorgehoben sind.

Wie aus den W3C-Richtlinien hervorgeht, sollte Farbe nicht das einzige visuelle Mittel sein, um Informationen zu kommunizieren, eine Handlung oder eine Antwort anzufordern oder Elemente voneinander zu unterscheiden. Beim Formular wie im obigen Beispiel könnte der Designer die Fehlermeldung präziser formulieren, z. B. „Die eingegebene E-Mail-Adresse ist ungültig.“


https://blogsimages.adobe.com/creative/files/2017/09/Resize24.jpg

Zusätzliche Hinweise im Design oder in der Fehlermeldung helfen Anwendern, das Feld mit der fehlerhaften Eingabe schnell zu erkennen.

Wir stellen euch zwei nützliche Werkzeuge vor, mit denen du testen kannst, ob dein Oberflächen-Design barrierefrei ist:

Fazit

Wir haben mehrere Aspekte der Farbwahl analysiert, die das Erlebnis von Anwendern mit deiner Website oder App beeinflussen können. Eine Antwort auf die Frage, welche Farbe die „richtige“ ist, konnten wir allerdings nicht finden. Du ahnst es wahrscheinlich schon: Die beste Farbe für eine erfolgreiche Konversion gibt es nicht. Die Wirkung von Farbe in einem Design hängt nicht von den einzelnen Farben selbst ab, sondern von der Verwendung und Kombination der Farben. Das folgende Zitat bringt diesen Gedanken auf den Punkt.

„Es gibt keine falschen Farben. Entscheidend ist, wie man sie verwendet.“

Wenn du deine Konversionsrate steigern willst, musst du ein wenig Recherche betreiben. Eine Steigerung der Konversionsrate erzielt man, wenn man genau untersucht, welche Anforderungen die Zielgruppe hat, welche Sprache bei ihr funktioniert und wie sie das Produkt erwerben möchte. Die richtige Design-Entscheidung ist die, die deine Anwender für richtig halten.