8 Tipps für den idealen CTA-Button – Darauf solltet ihr unbedingt achten!

8 Tipps für den idealen CTA-Button - Darauf solltet ihr unbedingt achten!Ein funktionierender CTA-Button ist im Web maßgeblich für den Erfolg verantwortlich.

Funktioniert ein Button nicht richtig, gibt es keinen Abschluss, keinen Verkauf, keine Weiterleitung und auch keinen Kontakt.

Wie ihr einen idealen Call to Action Button erstellt und worauf es dabei besonders zu achten gilt, soll dieser Artikel ein wenig genauer erläutern.

8 Tipps für den idealen CTA-Button

Kontrast ist wichtig

Es gibt diese Studien, in denen der grüne immer besser als der rote CTA-Button funktioniert. Es gibt auch Forschungen, die mehr oder weniger klarstellen, dass bei einigen Farbfehlsichtigkeiten der rote Button zu einem Braun, der grüne aber zu einem angenehmen Orange wird.

Ist zwar alles schön und gut, stammt aber nicht aus unserer Zeit. Wichtig ist vielmehr, dass ihr Kontraste schafft und die Buttons damit vollständig vom Hintergrund löst. Bei einem durchdachtem Design ist der Call to Action Button also nicht einfach nur grün oder rot, er ist farblich passend zur Seite gestaltet, mit einem starken Kontrast zum restlichen Inhalt. Dann funktioniert er und zwar vollkommen egal in welcher Farbe.

Nur diesen Rot-Grün-Schwachsinn kann ich irgendwie nicht mehr hören, denn auch wenn mal etwas dran war oder immer noch dran ist – Kein Mensch knallt ausschließlich grüne Buttons auf seine Website. Das geht einfach nicht.

Es kommt immer auf den Einzelfall an, doch Kontrast spielt dabei eine größere Rolle als die Farbe, zumindest meiner Erfahrung nach. Hebt sich ein CTA-Button gut vom Hintergrund ab, wird er meist auch gerne geklickt. Auch Tiefe, also eine Art 3D-Effekt, kann hier hilfreich sein.

Dringlichkeit oder Druck erzeugen

Was ebenfalls sehr gut funktioniert, ist das Spiel mit Zeit und Zahlen. Social Buttons beispielsweise, wurden bei mir immer häufiger geklickt, wenn die Anzahl der Shares angezeigt wurde und diese besonders hoch ausfiel.

Aber auch die Verknappung kann dabei helfen, dass ein CTA-Button besser funktioniert. So produziert manch ein Händler nur Kleinauflagen und wer zu lange wartet, bekommt dann eben nichts mehr. Überhaupt kann die Anzahl an Produkten einen enormen Druck erzeugen. Wir allen kennen das »Noch zwei Artikel verfügbar« von Amazon oder anderen Online-Shops. Wer jetzt nicht klickt, bekommt vielleicht nichts mehr oder muss erst wochenlang auf eine Nachlieferung warten.

So ein Spiel mit Zeitdruck und Zahlen funktioniert wirklich hervorragend. Gutscheincodes, die innerhalb weniger Stunden ablaufen oder auch Angebote, die nur für 24 Stunden gültig sind und bei denen ein Timer die Sekunden zählt, führen ebenfalls oft zu mehr Klicks auf den CTA-Button.

Hier sei allerdings erwähnt, dass künstliche Verknappung etc. nicht rechtens ist, genau wie Fehlinformationen. Ich denke da spontan an das Urteil bezüglich Zalando, die eine ganz besondere Formulierung gewählt hatten.

Falls ihr solche Mechaniken nutzen wollt, solltet ihr euch vorab also genauestens über eure Rechte diesbezüglich informieren, um keine Abmahnung zu riskieren.

Platzierung im oberen Bereich

Ihr kennt alle diese Scroll-Seiten, bei denen es nach und nach immer weiter nach unten geht. Auch auf Smartphones sind wir das Scrollen mittlerweile gewohnt, denn es geht dort schließlich gar nicht anders.

Trotzdem: Schaue ich in Statistiken oder Studien, scrollen die Leute zu einem Großteil einfach nicht. Die meisten Besucher sehen niemals den Footer.

Oder anders gesagt: Wer eine Website bis zur Hälfte scrollt, scrollt schon mehr als der übliche Durchschnitt. Das wiederum bedeutet für euren Button, dass dieser immer ganz oben platziert werden sollte.

Eine hohe Conversion-Rate erreicht ihr also nur dann, wenn der CTA-Button eines der ersten sichtbaren Elemente ist. Sobald gescrollt werden muss, egal wie viel, verpufft seine Wirkung bereits, sinkt die Conversion-Rate und damit sinken auch alle möglichen Umsätze. Das ist einfach so. Leider.

Gefühle der Zielgruppe finden

Es ist im Grunde genommen bekannt, aber es ist wichtig und wird immer noch unterschätzt. Gemeint ist, die eigene Website nicht stumpf nach Zahlen und Fakten zu bauen, sondern die Zielgruppe zu verstehen.

Wer Informationen sucht, klickt oder kauft nicht automatisch. Könnte er aber, wenn ihr seine Gefühle versteht, ihn an die Hand nehmt und und bis zum Klick auf euren CTA-Button begleitet. Das geht nur dann, wenn ihr die Beweggründe eurer Zielgruppe versteht.

Was bringt euch eine altbackene Optimierung auf irgendwelche Keywords, wenn das dem Besucher nichts bringt oder seine Fragen gar nichts mit den Keywords zu tun haben? Genau deshalb geht es auch bei einem CTA-Button darum, diesen sinnvoll in die Website einzubetten. Text der den Leser packt, all seine Fragen beantwortet und ihn dann sanft zu dem Button bringt, der bereitwillig geklickt wird.

Versteht eure Zielgruppe, helft ihr, denn dann hilft sie auch euch, indem sie bereitwillig klickt oder kauft. Wer seine Leser mit Gefühlen zum CTA-Button leitet, erhöht auch automatisch die Conversion-Rate.

Groß, fett, auffällig

Einen schicken schmalen Button, runde Ecken, eine feine Schriftart? Klar, könnt ihr machen, funktioniert nur leider nicht so gut. Groß, größer am größten, lautet das Motto, wenn es um einen CTA-Button geht.

Meine Erfahrung ist: Je größer und fetter der Text, desto besser wird der eigentliche Button geklickt. Versuche mit schmalen Buttons oder feinen Texten und außergewöhnlichen Schriftarten, gingen dabei immer schief. Immer!

Inzwischen bleibe ich daher bei großen Buttons, die klar herausstechen und auch mit ihrer fetten Schrift bereits früh auffallen. Das steigert die Klickrate enorm, zumindest ist dies meine Erfahrung. Alle Spielereien diesbezüglich, würde ich also wirklich sein lassen. Groß, fett, auffällig – so muss ein CTA-Button aussehen, damit er geklickt wird.

Richtige Beschriftung wählen

Der Text auf einem CTA Button ist entscheidend für seinen Erfolg. Klingt komisch, aber »Hier klicken« funktioniert auch heute noch besser als ein »Details ansehen«.

Viele meinen außerdem, dass aktive Handlungsaufforderungen zu besseren Klickraten führen. Also statt einfach nur »Kaufen« auf den Button zu schreiben, sollte vielmehr ein »Jetzt kaufen« oder »Sofort kaufen« verwendet werden. Fakt ist jedenfalls, dass der Text wirklich ein entscheidender Faktor für CTA Buttons ist.

Allerdings ist auch klar, dass es nicht DEN perfekten Text gibt, sondern die Handlungsaufforderung immer vom Projekt, der Zielgruppe und dem jeweiligen Produkt abhängt. Hier muss jeder selbst prüfen und testen, was bei ihm am besten funktioniert und die höchsten Conversion-Rates erzeugt. Nur solltet ihr euch eben entsprechend viel Zeit dafür nehmen und einige Tests absolvieren, weil es ein sehr wichtiger Punkt in Bezug auf den CTA-Button ist.

Konkurrenz beobachten

Immer wieder predige ich, dass jede Website individuell ist. Was bei der einen funktioniert, kann bei der anderen fürchterlich schiefgehen. Das ist auch so und dennoch: Wer seine Konkurrenz beobachtet, gerade die große und professionelle, kann häufig eine Menge von ihr lernen.

Das gilt für Platzierungen, Farben und Formen der Buttons, dem Aufbau und der Gestaltung. Natürlich kann die Konkurrenz es auch grundlegend falsch angehen, doch je größer sie ist, desto durchdachter läuft es dort meist. Das gilt auch für Amazon, denn wer Nischenseiten betreibt und den CTA-Button von Amazon nachbaut, erreicht damit häufig bessere Conversion-Rates als mit einem eigenen.

So ging es mir zumindest und so entstand auch der Artikel zum Thema, der genau diesen Amazon Button als Nachbau präsentierte. Blind kopieren macht natürlich keinen Sinn, doch die Konkurrenz genau zu beobachten und deren Anpassungen und Änderungen nachzuvollziehen, kann eine Menge Erkenntnisse mit sich bringen.

Ein CTA-Button erfordert viele A/B Tests

Wenn es um die Conversion-Rate geht, ist jedes Projekt sehr verschieden und besitzt meist auch eigene Regeln und Maßstäbe. Pauschale Aussagen sind daher nur schwer zu treffen. Gerade beim Text kommt es darauf an, welche Zielgruppe ihr habt und welche Produkt vertrieben werden.

Das wiederum bedeutet, dass A/B Tests bei einem CTA-Button die zentrale Rolle spielen. Einfach mal ausprobieren, ändern, wieder verbessern und optimieren, nur das bringt in der Regel den perfekten Button hervor. Aber auch nicht für alle Projekte, sondern eben wirklich nur für das eine. Das jeweilige Prinzip ist also nur schwer übertragbar.

Wichtig ist, dass ihr euch an die Punkte in diesem Artikel haltet und darauf basierend dann eigene Verbesserungen, samt ausführlicher Tests integriert. So steigert ihr letztendlich dann die Klickrate und damit hoffentlich auch eure Einnahmen.

Schritt für Schritt zum idealen CTA-Button

Habe ich etwas wichtiges zum Thema CTA-Button vergessen? Habt ihr noch einen kleinen Gehimtipp parat, den ihr mir mitteilen möchtet?

Ich bin sehr gespannt auf eure Rückmeldungen, Tipps und Tricks, aber auch auf praktische Erfahrungen, die ihr selbst bislang machen konntet. Also bitte rein damit in die Kommentare, damit wir gemeinsam noch ein paar Geheimtipps finden.

5 Gedanken zu „8 Tipps für den idealen CTA-Button – Darauf solltet ihr unbedingt achten!“

  1. Ein paar optische/grafische Beispiele könnte der Text ruhig vertragen 😉

    Zum Inhalt: “Je größer und fetter der Text […]”. Ich denke und fahre am besten mit dem Gegenteil. Klar, ein Button der genau so groß ist wie der Text selber wird kaum geklickt. Aber habe ich ein Text mit Schriftgröße 14px, ist die Schriftgröße beim Button maximal bei 20px und auch nicht Fett. Hinterlegt, wie du es sagst, mit einer Kontrastfarbe und das wars. Derzeit teste ich animierte Buttons, die gar nicht mal so schlecht laufen. Dabei “swingt” der Button alle zehn Sekunden zwei/dreimal hin und her. Das zieht die Aufmerksamkeit besser auf sich, als ein überdimensionaler fetter Button, der mehr abschreckend (spam), als nützlich ist.

    Antworten
    • Also dass der Text nicht so groß wie der Button sein sollte, versteht sich schon aus ästhetischen Gründen. Ich muss wohl mehr darauf achten, auch auf solche Sachen hinzuweisen, damit niemand auf die falsche Idee kommt. Ansonsten hast du was wichtiges gesagt… du testest gerade. Das ist immer richtig, weil jede Umgebung und Zielgruppe anders reagiert und wie du auch erwähnst, es ja zur Schriftgröße passen muss. Die Schriftart spielt dann auch noch eine Rolle. Eigentlich alles. Solche Tipps wie hier, sind immer nur eine Grundlage für den Start, denke ich. Etwas Erprobtes was meist gut funktioniert.

      Du kannst dir ja mal den Button auf meiner Website anschauen (https://dkeu.de). Diese Art von Button meine ich mit Fettschrift und großer Schrift. Konvertiert auf meinen Seiten sehr gut und bleibt trotzdem simpel. Und mit Animationen spiele und teste ich auch gerade herum 😉 und mache damit (so viel sei verraten) ebenfalls gute Erfahrungen.

      Buttons sind letztendlich aber immer ein A/B Test Ding. Man sollte, nein MUSS, da einfach richtig viel ausprobieren und für sich selbst herausfinden, dann erschafft man den idealen Button.

      Antworten
    • Danke für die Idee, die Buttons zu animieren. Das werde ich gleich mal ausprobieren. Aber warum bin ich noch nicht selbst auf diese Idee gekommen?

      Antworten
  2. Vielen Dank für die Tipps bezüglich des idealen CTA-Buttons. Besonders relevant finde ich den Hinweis, Druck oder Dringlichkeit zu erzeugen. Ich habe selber schon erlebt, wie sehr man sich als potentieller Kunde unter Druck fühlt, wenn zu lesen ist: “Nur noch 1 Stück auf Lager” oder “gerade wurden wiederum 2 Doppelzimmer gebucht, nur noch wenige verfügbar”. Selbst wenn man weiß, dass solche Hinweise in der Regel nicht den Tatsachen entsprechen, ist man geneigt, die Buchung oder den Kauf schnell abzuschließen, ehe einem ein anderer zuvorkommt.

    LG

    Antworten
  3. Ein insgesamt interessanter Beitrag, aber das Ganze hätte noch sehr gut ein wenig grafische Unterstützung vertragen – also z. B. Darstellung von Best Practice und Worst Practice, das hätte es noch plakativer gemacht.

    Antworten

Schreibe einen Kommentar