Farben auf Buttons als Conversion-Element

Farben auf Buttons als Conversion-Element

Usability & Design

23.09.2016 / Joana Saba

Schon immer orientieren sich Menschen anhand von Farben. Mit Hilfe von unterschiedlichen Farbtönen- und Abstufungen können wir die Welt visuell erfahren und differenziert erkennen. Auf psychischer Ebene beeinflussen uns Farben auf unterschiedliche Art und Weise, indem sie je nach Individuum, Kulturkreis oder Tradition verschiedenste Assoziationen, Gefühle und Empfindungen in uns auslösen können. Und auch wenn die Farbwirkung einer subjektiven Wahrnehmung unterliegt, so gibt es theoretisch begründete, objektiv zu betrachtende Farbwirkungen, die ähnliche oder gleiche Assoziationen beim Betrachter hervorrufen.

Die Psychologie der Farben

#88_infografik_farbpsychologie

Diese Farbwirkung machen sich selbstverständlich auch Händler, Produzenten und Werbemacher zu Nutze, um Konsumenten unterbewusst zu beeinflussen und zum Kauf oder einer Handlung anzuregen.

Auch in der digitalen Welt sind Farben, Farbwerte und Farbkontraste enorm wichtig. Kein Screendesign kommt ohne den Einsatz von Farben und Farbkontrasten aus und kaum ein Webprojekt wird seine gewünschte Wirkung ohne eine gezielte und sauber abgestimmte Farbwahl auf der Seite erreichen. So lässt sich beispielsweise mit einer bedachten Farbwahl auf Call-to-Action-Elementen (CTA) die Conversion eines Onlineshops bereits maßgeblich optimieren. Call-to-Action-Elemente haben immer ein Ziel: sie geben Orientierung und navigieren den Nutzer durch die Seite – im besten Falle führen sie am Ende zum Kaufabschluss oder einer anderen vergleichbaren Aktion. Und genau das ist es ja, was der Händler mit seinem Onlineshop erreichen möchte!

Das etablierteste und sicher auch sinnvollste CTA-Element ist der herkömmliche Button, welcher variabel auf allen Seitentypen einer Webseite oder eines Onlineshops platziert werden kann.

Neben der Form und Größe, der Positionierung und Wortwahl, ist die bereits erwähnte Farbwahl entscheidend für eine möglichst unkomplizierte und schnelle Blickführung und eine Navigation zum gewünschten Ziel- und damit auch zu einer hohen Conversionrate. Wie effektiv die sich die Farbwahl der CTA-Buttons auf die Klickrate auswirkt, belegen bereits zahlreiche Studien.

#88_infografik_liquidlife

Und wie sieht die perfekte Farbe für einen CTA-Button nun aus?

Nun, so allgemein und einfach lässt sich das natürlich nicht definieren. Eine Standardlösung gibt es nicht und kein Button funktioniert immer. Die „perfekte Farbe“ für den jeweiligen Button hängt immer vom Kontext des Online-Bereiches ab, in dem das CTA-Element zum Einsatz kommen soll. Hierbei spielen beispielsweise das Thema, die Zielgruppe, die psychologische Wirkung von Farben, das verwendete Corporate Design, sowie eine gute Portion an Design-Grundwissen eine Rolle.

Folgende Fragen sollte man sich vor der Farbwahl des CTA-Buttons stellen:

  • Welche Zielgruppe möchten Sie ansprechen?
  • Wie sieht der Markt aus, auf dem Sie vertreten sind?
  • Welches Gefühl möchten Sie dem Betrachter mit Ihrem Produkt vermitteln?
    Aktivität, Seriösität, Entspannung, Genuss, Business (…)?
  • Grenzt mein CTA-Button sich durch seinen Farbkontrast gut genug vom restlichen Erscheinungbild der Seite ab?
  • Welcher Button auf der Seite ist am Wichtigsten für meine Conversionrate und wie grenze ich ihn farblich perfekt von den anderen Buttons ab, damit er immer am deutlichsten aus der Seite hervortritt?
  • Wird die Botschaft auf dem Element gut lesbar vermittelt? Ist die Schrift groß genug und wird sie sauber angezeigt?
  • Hebt die Schrift sich gut von der Farbe des Button-Hintergrundes ab?
  • Passt die Farbe zum restlichen Corporate Design, ohne jedoch dabei unterzugehen und an Wirkung zu verlieren? Oder ist es vielleicht sinnvoller, vom CD abzuweichen, um einen größeren Farbkontrast zu erzeugen?

Die wichtigste Grundregel ist aber: das CTA-Element muss SICHTBAR sein. Ohne, dass man den Button direkt sieht, erfüllt auch der sorgfältigst gestaltete Button nicht seinen Zweck. Also sollte ein guter Kontrast zur restlichen Seite gewählt werden, die dem Betrachter sofort ins Auge fallen.

Hierfür leistet ein guter alter Trick immer noch anständige Dienste:

Stehen Sie von Ihrem Stuhl auf und treten Sie ein paar Schritte zurück. Dann kneifen Sie Ihre Augen zusammen. Was sehen Sie zuerst? Tritt der CTA-Button am deutlichsten hervor? Gut gemacht! Wenn nicht, dann sollten Sie wohl nochmal an die Arbeit gehen.

#88_animiertes-gif_buttons

Möchten Sie mehr erfahren oder sich von uns beraten lassen? Dann kontaktieren Sie uns gerne! Nutzen Sie dafür einfach den unten stehenden Call-To-Action-Button 😉

Quellen