Die Wahrheit über die besten Call-to-Action-Button-Farben für Ihre Website

Im Internet ist viel darüber gesprochen worden, welche Farben auf einer Webseite am besten funktionieren. Sie werden Tausende von Artikeln darüber finden. Von dem, wo ein Nutzer fragt, welche Farbe besser ist und widersprüchliche Antworten erhält (was für eine Überraschung, oder?), bis hin zu dem bekannten Artikel, der die Tests erklärt, die Google mit vielen Blautönen für seine Links durchgeführt hat.

Die Realität hinter all dem ist, dass niemand garantieren kann, dass eine bestimmte Farbe auf einer Website besser oder schlechter funktioniert, ohne es auszuprobieren. Wenn sie dir etwas anderes sagen, lügen sie dich an. Und ich bin sicher, du magst es nicht, angelogen zu werden.

Ich auch nicht, also las ich diesen Artikel von Yahoo! Small Business, wo sie sagen, dass die besten Farben für die Schaltflächen rot, grün und orange oder gelb sind, dachte ich als erstes, dass ich es auf unserer eigenen Website ausprobieren sollte.

Wenn Sie die Artikelserie verfolgt haben, die ich monatlich über A/B-Tests geschrieben habe, wissen Sie sicherlich bereits, dass eine der wichtigsten Seiten unserer Website die Zielseite von Nelio Content ist, zusammen mit der Preisseite. Auf beiden Seiten sind die Call-to-Action-Buttons orange.

Funktioniert Rot oder Grün besser als die orange Farbe, die wir bereits auf unserer Website für Call-to-Action-Buttons verwenden? Das ist die Frage, die ich mir gestellt habe und die ich hier mit echten Daten unserer Besucher beantworten werde. Nicht subjektive Meinung. Echte Daten.

Lass uns gehen!

Erstellen eines A/B-Tests von CSS

Die einfachste Möglichkeit, die Farbe der Schaltflächen auf einer Seite zu ändern, besteht darin, ein paar zusätzliche CSS-Regeln hinzuzufügen, um die neue Farbe anzuwenden. Sie fügen der Schaltfläche eine neue Regel für die background-color mit der gewünschten Farbe hinzu, und das war's. Kinderleicht.

Mit Nelio A/B Testing haben Sie die Möglichkeit, einen A/B-Test von CSS-Stilen zu erstellen, um verschiedene Varianten zusätzlicher CSS-Regeln zu testen. Sie müssen nur einen neuen Test erstellen und die CSS-Option in der Testtypauswahl auswählen:

Dadurch gelangen Sie in den Test-Editor, wo Sie als erstes die Varianten erstellen müssen. Denken Sie daran, dass bei dieser Art von Test die erste Variante diejenige ist, die die Seite in ihrem aktuellen Erscheinungsbild ohne zusätzliches CSS anzeigt.

Dann erstellen Sie eine Variante für in unserem Fall jede der zusätzlichen Farben, die wir testen werden: eine für Grün und eine für Rot. Die erste Variante ist bereits orange, damit haben wir also alles parat.

Für jede zusätzliche Variante können Sie sie bearbeiten, um die zusätzlichen CSS-Regeln hinzuzufügen, die die Farbe der Schaltflächen ändern. Die CSS-Regeln, die Sie benötigen, hängen von dem Thema ab, das Sie in Ihrem WordPress verwenden. In dem von Nelio A/B Testing bereitgestellten CSS-Editor können Sie in Echtzeit sehen, wie Ihre neuen CSS-Regeln das Erscheinungsbild Ihrer Website verändern. Dies hilft Ihnen zu überprüfen, ob Sie es richtig machen.

So sehen die Aktionsschaltflächen im CSS-Stileditor jeder Variante des A/B-Tests aus, die wir einrichten. Wie bereits erwähnt, haben Sie zunächst die Originalversion mit den orangefarbenen Schaltflächen. Die anderen beiden Varianten beinhalten das CSS, um die Schaltflächen grün bzw. rot zu färben:

Sobald wir die Varianten fertig haben, ist es an der Zeit, die Conversion-Ziele zu definieren, die wir messen möchten. In diesem Fall haben wir, wie Sie im Screenshot des Test-Editors sehen können, zwei Ziele.

Das erste Ziel misst die Klicks auf die Aktionsschaltflächen, während wir beim zweiten Ziel auch diese Klicks messen, aber nur diejenigen, die auf der Nelio Content-Preisseite erfolgen.

Beachten Sie schließlich, dass sich A/B-Tests von CSS auf alle Seiten Ihrer Website auswirken. Um dieses Verhalten in Nelio A/B Testing einzuschränken, haben Sie in der rechten Seitenleiste des A/B-Test-Editors die Möglichkeit, den Umfang des Tests einzuschränken. Ich habe es so gemacht, dass es nur die Hauptseite von Nelio Content und die Preisseite betrifft.

Wir haben alles bereit, um mit dem Test zu beginnen. Sobald wir dies tun, ist Nelio A/B Testing dafür verantwortlich, den Verkehr, der diese beiden Seiten besucht, für Sie aufzuteilen und die verschiedenen Farbvarianten anzuzeigen sowie die Conversions (Klicks auf die Schaltflächen) zu verfolgen.

Denken Sie daran, dass Sie nur darauf warten müssen, dass Ihre Besucher diese Seiten durchlaufen, um Ergebnisse zu sehen.

Analyse der Ergebnisse

Wir haben den A/B-Test der Button-Farben auf unserer Website seit anderthalb Monaten auf der spanischen Website und fast einen Monat auf der englischen Website laufen lassen. In der englischen Version haben wir früher aufgehört, weil wir mit einem hohen Konfidenzwert schneller statistisch signifikante Ergebnisse erzielt haben.

Aber beginnen wir mit den Ergebnissen des Tests auf unserer Webseite auf Spanisch:

Wie Sie im obigen Screenshot sehen können, scheinen die grünen und roten Varianten der Schaltflächen für das Ziel, die Klicks auf beiden Seiten zu messen, etwas besser abzuschneiden als die ursprüngliche orange Version. Die Statistiken sagen uns jedoch, dass die Verbesserung nicht wesentlich ist, und daher können wir nicht sagen, dass diese Farben besser als Orange sind.

Für das zweite Ziel, das nur Klicks auf die Preisseite von Nelio Content gemessen hat, sehen wir, dass es auch keine klare Gewinnerfarbe gibt. Wir können sogar beobachten, dass Grün hier schlechter abschneidet als Orange. Obwohl wir aus den Daten, die Nelio A/B Testing von unseren Besuchern gesammelt hat, keine eindeutigen Schlussfolgerungen ziehen können:

Sehen wir uns nun die Ergebnisse des Tests in der englischen Version der Seite an. Hier, im ersten Ziel, das Klicks auf eine der beiden Seiten von Nelio Content gemessen hat, sehen wir, dass sowohl Grün als auch Rot Farben sind, die eine bessere Klickrate erzeugen.

Außerdem können wir hier bestätigen, dass die grüne Farbe die Siegerfarbe des Tests ist. Die Ergebnisse sind statistisch signifikant mit einem Konfidenzgrad von mehr als 99 %. Grün ist die beste Farbe, die wir auf unserer Website in englischer Sprache für die Schaltflächen auf den Nelio-Inhaltsseiten verwenden können.

Wenn wir uns nur die Klicks auf der Preisseite von Nelio Content (zweites Ziel des Tests) ansehen, sehen wir, dass die Ergebnisse mit denen des ersten Ziels des Tests übereinstimmen:

Nachdem wir dies gesehen haben, können wir sagen, dass Grün die Farbe ist, die auf den Nelio-Inhaltsseiten für unser Publikum auf Englisch am besten funktioniert hat. Für unser spanisches Publikum konnten wir jedoch keine Farbe finden, die besser funktioniert als die, die wir bereits hatten.

Schlussfolgerungen

Hier habe ich die Ergebnisse eines A/B-Tests mit echten Daten von Besuchern gezeigt, die durch zwei der relevantesten Seiten unserer Website gesurft sind. Und Sie konnten überprüfen, dass das, was für ein bestimmtes Publikum am besten funktioniert, nicht für ein anderes am besten funktionieren muss.

Grüne Schaltflächen funktionieren am besten für unsere englischsprachigen Besucher. Das heißt aber nicht, dass es anderen Besuchern genauso ergeht. Aus diesem Grund haben wir die Farbe der Aktionsschaltflächen der Nelio-Content-Seiten nur in der englischen Version dieser Seiten auf Grün geändert. Die auf Spanisch bleiben orange.

Ich wäre dumm, wenn ich Ihnen sagen würde, dass Sie die grüne Farbe auf Ihrer Seite verwenden müssen. Das sollte dir keiner sagen. Ich nicht, niemand. Ich habe keine Ahnung, ob Grün für Sie funktioniert.

Machen Sie aus diesem Grund den Test selbst, bevor Sie auf die vielen Gurus achten, die Sie im Internet finden. Das Erstellen des A/B-Tests ist sehr einfach. Und nur so können Sie herausfinden, was auf Ihrer Website besser funktioniert (oder nicht). Mit Ihrem echten Publikum.

Beitragsbild von Robert Katzki auf Unsplash.