Webdesign Website erstellen

Call-to-Action-Button: Farbe, Größe und Platzierung

Drücken oder nicht drücken. Wenn ja, dann worauf. Das Design eines Call-to-Action-Buttons (CTA) sollte dazu beitragen, dass Webnutzer häufiger darauf klicken. In meinem  Artikel zu Call-to-Action habe ich über den Text dazu geschrieben. Heute zeige ich dir, worauf es bei der visuellen Darstellung deines Buttons (Farbe, Platzierung und Form) ankommt. 

Vorab ein paar grundlegende Informationen zum Design eines CTA-Buttons:

Traditionell werden diese als horizontalen Vierecke dargestellt, denn Menschen sind gewohnt, diese Form als einen Button wahrzunehmen. Die Buttons heben sich vom Hintergrund ab, damit sie leicht von Nutzern gefunden werden. Außerdem wird  empfohlen die Ecken abzurunden, denn so ist der Text darauf einfacher zu lesen.  

Farbe

Welche Farbe soll ich für meinen Call-to-Action-Button wählen? Auf diese Fragen gibt es keine eindeutige Antworten. Messen lässt sich die Koversionsrate. Vereinfacht bezeichnet man damit im Marketing, wie viele der Webseitenbesucher am Ende etwas kaufen. Ich stelle dir aber eine Studie vor, die hilft, zu verstehen, wie du bei der Farbenauswahl beim Design deines CTA-Buttons vorgehen kannst. 

Hubspot Farbe für Call-to-Action-Button
Auf welchen Button würdest du klicken?
Bild von Hubspot

Hubspot hat einen Test durchgeführt, um festzustellen, welche Farbe zu mehr Konversion führt. Es gab zwei Farben zur Auswahl: rot und grün. Sie haben festgestellt, dass die Konversion von roter Farbe um 21% höher war als bei den grünen. Menschen haben auf den roten Call-to-Action-Button öfter geklickt. Das klingt logisch, denn die rote Farbe zieht mehr Aufmerksamkeit auf sich aus. 

Es ist aber nicht alles. Schauen wir die beiden getesteten CTA-Buttons genauer an. Bei beiden Seiten ist grün die Hintergrundfarbe. Sie ist auf dem Logo und als Element der Bilder zu finden. Was sieht vorteilhafter auf dem grünem Hintergrund aus? Ein roter oder ein grüner Call-to-Action-Button? Beim roten Button ist mehr Kontrast zu sehen. Aus diesem Grund neigen Menschen eher dazu, auf den roten als auf den grünen CTA-Button zu klicken. 

Farbe an sich spielt keine entscheidende Rolle. Es wurde noch kein Zauberfarbton entdeckt, der deine Konversion steigen lässt. Wenn du eine Farbe für deinen Call-to-Action-Button aussuchst, beachte den Hintergrundton deiner Seite. Die Farbe deines CTA-Buttons muss die Aufmerksamkeit anziehen, aber darf deine Webnutzer nicht stören. Deswegen stellen Kontrastfarben meist eine optimale Lösung dar.

Platzierung CTA

Eine gut ausgewählte Farbe bringt aber wenig, wenn dein Button von den Webnutzern übersehen wird. 

Bevor eine Website gelesen wird, schauen Menschen diese an, um zu verstehen, ob sie interessant und relevant ist. Deswegen ist es wichtig, zu wissen, wohin am häufigsten geschaut wird. So kann man leichter einen passenden Platz für einen Call-to-Action-Button finden.

Websites werden häufig entweder nach F- oder Z-Patterns angeschaut. 

F-Pattern für Call-to-Action-Button
Das F-Pattern spiegelt das natürliche Betrachtungsmuster der meisten Webnutzer wieder

F-Pattern bei CTA-Buttons 

F-Pattern ist populär bei Websites mit viel Content, also bei Blogs und bei Nachrichtenportalen. 

Der Leser überblickt schnell die Seite, indem er zuerst horizontalen Linien oben entlang folgt. Danach gleitet sein Blick vertikal am linken Seitenrand entlang nach unten. Wenn es irgendetwas Relevantes und Entscheidendes zu sehen gibt, schaut es der Webnutzer genauer an. Die Augen folgen einem imaginären F beim Lesen. 

Stell dir den Buchstaben F vor und platziere deine Handlungsaufforderung dort, wo sich die horizontalen und vertikalen Linien kreuzen. 

Z-Pattern für Call-to-Action-Button
Du kannst das Logo auf Position 1 und die Suchfunktion auf Position 2 platzieren

Z-Pattern 

Beim Lesen von Landing Pages und Websites, die nicht so viele Informationen bereitstellen wird das Z-Pattern eingesetzt. 

Am Anfang betrachtet der Webnutzer den oberen Teil der Seite, dabei fängt er an der linken Ecke an. Währenddessen sucht er nach wichtigen Informationen und wechselt im Anschluss zur diagonal entgegengesetzte Ecke und schwenkt dann nach rechts.

Diese Patterns zu verstehen, hilft die CTA-Buttons dort zu platzieren, wo die Aufmerksamkeit der Leser am stärksten ist. 

Wo soll ein Call-to-Action-Button platziert werden: am Anfang (oben) oder am Ende (unten) der Seite?

Man kann nicht eindeutig sagen, welche Variante für dich besser funktioniert. Vielfach hört man die Meinung, dass auf dem ersten Screen ein CTA-Button zu finden sein muss. Websites werden von vielen Webnutzern nicht bis zum Ende gescrollt und es kann passieren, dass Leser gar nicht bis zu deinem CTA kommen. 

Wenn aber dein Produkt zu schwer zu verstehen ist und du es deinem Leser erst erklären musst, ist es nicht erfolgversprechend, den Call-to-Action-Button an den Anfang zu setzen. 

Oft wird ein CTA-Button sowohl oben auf dem ersten Screen als auch unten am Ende der Seite platziert, damit er auf jeden Fall nicht von den Lesern übersehen wird.

Wichtig ist es aber, damit nicht zu übertreiben. Deine Website sollte trotzdem übersichtlich bleiben. Nicht dass die Webnutzer am Ende keine Ahnung haben, was sie machen müssen, um das zu bekommen, was sie wollen. 

Am besten ist es, wenn du einfach ein bisschen ausprobierst und anhand der Ergebnisse dich für eine Lösung entscheidest, die für dich am besten funktioniert. 

Größe 

Je größer ein Objekt ist, desto mehr Bedeutung wird ihm zugewiesen. Ein wichtiges Ziel von CTA-Buttons ist es, die Aufmerksamkeit der Nutzer zu lenken. Aus diesem Grund wird er größer gemacht. So hat er mehr Chancen gesehen und gemerkt zu werden. 

Vor allem muss er groß genug sein, damit er gesehen wird, aber nicht zu groß, damit die visuelle Hierarchie und Komposition nicht kaputtgeht.

Apple sah, dass die Größe des CTAs im mobilen Interface nicht weniger als 44*44 px sein muss. Bei Microsoft hingegen geht es um 34*26px.

Um die richtige Größe für deinen CTA-Button zu finden, beachte auch, dass viele Nutzer Webseiten von ihren mobilen Endgeräten aufrufen. Dein Button sollte groß genug sein, damit man leicht darauf drücken kann. Aber nicht zu groß, damit der Leser nicht das Gefühl bekommt, dass er manipuliert wird. 

Fazit: Design deines Call-to-Actions-Buttons

Vier Regeln fürs Design deines CTA

Entscheide, was du von deinen Webnutzern haben willst und gestalte das Design deines CTA-Buttons dementsprechend

Teile dem Webnutzer mit, was er bekommt

Mache ihn für die Webnutzer einfach und logisch

Der Button muss groß genug, aber nicht zu groß

Kommentieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.