9 wichtige CTA-Designtipps für Buttons, die zum Klicken anregen

Ihr Call-to-Action (CTA) ist der Höhepunkt Ihrer Marketingstrategie. Egal, ob Sie nach einem Kauf, einer Registrierung oder einem Download fragen. Bis zu diesem Punkt ging es nur darum, potenzielle Kunden auf Ihre Zielseite zu bringen. Und manchmal haben Sie nur ein paar Worte, um den Deal zu besiegeln.

Aus diesem Grund ist Ihr CTA-Button das wichtigste Designelement Ihrer Website. Weil es aus passiven Besuchern aktive Nutzer machen kann.

Call-to-Action-Buttons scheinen einfach zu sein. Aber sie sind leicht zu vermasseln. Oder ganz vermisst werden. Diese 9 CTA-Designtipps stellen sicher, dass Sie diese Conversion erzielen. Außerdem viele hilfreiche Beispiele:

1. Lassen Sie Ihren Button anklickbar aussehen
2. Seien Sie beschreibend mit Ihrer Kopie
3. Größe und Platz richtig
4. Verbinden Sie sich mit der ersten Person
5. Schaffen Sie Dringlichkeit und verwenden Sie starke Verben
6. Versuchen Sie es mit einer Unterüberschrift
7. A/B-Testvarianten
8. Achten Sie auf die mobile Version

Lassen Sie Ihren CTA-Button anklickbar aussehen

Eine Schaltfläche "anklickbar" aussehen zu lassen, klingt albern. Aber Sie würden nicht glauben, wie oft Websites Fehler machen. Und das hat vor allem mit dem Umriss und der Farbe des Buttons zu tun.

Conversion-Rate-Trends kommen und gehen. Wie der transparente „Geister-Button“ mit dünnem Rand und Text, der in die Hintergrundfarbe übergeht. Sie sehen zwar cool aus, erregen aber tendenziell weniger Aufmerksamkeit. Das Gegenteil von dem, was ein effektiver CTA bewirken sollte.

Das einzige Mal, wenn dieses Design normalerweise funktioniert, ist als sekundärer Knopf:

Quelle: UX-Bewegung

Hier ist ein weiteres Beispiel dafür, dass CTA-Buttons offensichtlich nicht anklickbar sind. Sicher, die Zielseite dieser Designagentur sieht cool aus. Aber es sei Ihnen verziehen, wenn Sie an dieser Fallstudie vorbei gescrollt haben:

Also, wie bringt man die Leute dazu, zu klicken? Für höhere Conversion-Raten Ihre Schaltfläche sollte groß und fett sein und mit dem von Ihnen gewählten Farbschema funktionieren.

Netflix verwendet sein charakteristisches Rot, um Ihre Aufmerksamkeit auf sich zu ziehen. Fast wie ein Stoppschild:

Es kann auch funktionieren, um eine Kontrastfarbe zu haben, damit es auffällt. Wie das, was die E-Commerce-Plattform BigCommerce hier gemacht hat:

Dies gilt auch für den Text in der Box. Stellen Sie sicher, dass es kontrastiert, damit Sie es richtig lesen können.

Farbverläufe können auch innerhalb des gleichen Markenfarbschemas funktionieren. Sie verleihen den Dingen ein modernes, jugendlicheres Aussehen:

Quelle: Montag

Mein Rat hier wäre, zu versuchen, Ihr CTA-Design offensichtlich zu halten. Etwas out of the box zu tun, mag nach einer guten Idee klingen , aber der Mensch ist ein Gewohnheitstier. Und Sie werden erstaunt sein, wie viele den Punkt verfehlen werden.

Seien Sie beschreibend mit Ihrer Kopie

Eine der einfachsten Taktiken zur Conversion-Rate-Optimierung (CRO) ist großartiges Copywriting. Aber nicht nur mit großen Textblöcken. Die Mikroskopie ist genauso wichtig und deckt die kleineren Details ab.

Sie sehen es normalerweise in Kontaktformularen und Statusaktualisierungsleisten in sozialen Medien. Wie Facebooks berühmtes „What's on your mind?“ oder „Beitrag starten“ von LinkedIn.

Mikroskopie kann helfen:

• Sagen Sie den Benutzern, was sie tun sollen
• Vorschläge machen
• Sprechen Sie Bedenken an
• Kontext bereitstellen

Ihre CTA-Button-Kopie ist ein weiteres Beispiel. Und es sollte den Leuten genau sagen, was sie bekommen/was passieren wird, wenn sie darauf klicken.

Früher war dies der CTA-Button von IMPACT. "Kostenfreier Download". Nicht sehr einfallsreich, oder?

Quelle: AUSWIRKUNG

Aber indem sie es aussagekräftiger machten, steigerten sie die Conversions um 78,5 %. „Zeig mir, wie ich mehr Kunden anziehe“ hat eindeutig mehr angesprochen:

Es ist verlockend, einfach „Klicken Sie hier“ zu schreiben. Aber es gibt so viele Alternativen, die die Benutzer fesseln und hoffentlich zur gewünschten Aktion inspirieren.

Also, was soll man schreiben? Zunächst müssen Sie die Conversion-Absicht identifizieren. Sie möchten sich daran ausrichten, wo sich die Benutzer im Trichter befinden und woher sie kommen (Traffic-Quelle).

Quelle: ClientBoost

Dann müssen Sie den Wert dessen hervorheben, was Sie anbieten. Und gehen Sie auf Einwände ein.

Quelle: Marketingbeispiele

Es ist so ein einzigartiger Prozess. Und es hängt von Ihrer Nische und Ihrer Markenstimme ab. Aber welche Formulierung Sie auch wählen, vergessen Sie nicht, den Schaltflächentext kurz und prägnant zu halten.

Richten Sie die Größe richtig aus und verwenden Sie Leerraum

Das CTA-Button-Design ist viel mehr als nur die Farbe. Die Schaltflächengröße ist ein weiteres kleines Detail, das die Klickrate wirklich beeinflussen kann. Und Leerraum ist genauso wichtig wie der Text selbst.

Vieles davon hängt von Ihrem Webdesign ab. Negativer (weißer) Raum lenkt die Aufmerksamkeit auf bestimmte Elemente auf einer Seite. Sie wollen keine überladene Homepage. Es muss einen offensichtlichen Weg geben, dem der Besucher folgen kann.

Airbnb ist eines der besten Beispiele für richtig gemachten Negativraum. Und eine Kontrastfarbe, um es besonders deutlich zu machen:

Buffer hat ein bisschen mehr auf ihrer Homepage, aber sie halten den CTA-Button immer noch in der Nähe der Hauptkopie. Außerdem ein Beispiel für die effektive Verwendung von Ghost-Buttons. Damit ist klar, was als nächstes zu tun ist:

Je größer Ihr Button ist, desto auffälliger ist er. Und es muss auffallen, um Aufmerksamkeit zu erregen. Aber nicht so sehr, dass es die Seite übernimmt und die UX verdirbt.

Wenn Sie zu Migräne neigen, schauen Sie jetzt weg. Hier ist ein Beispiel, wie man es nicht machen sollte:

Quelle: Justinmind

So viele Elemente hier sehen aus wie ein Knopf. Ich bin mir nicht einmal sicher, ob diese Seite weiß, worauf die Besucher klicken sollen.

Was sehen Sie dagegen als Erstes auf der Landingpage von Spotify?

Der riesige „Go Premium“-Button, richtig? So gestalten Sie einen klaren Benutzerpfad.

Gibt es abschließend noch etwas, das Ihnen an den CTA-Designs für die guten Beispiele aufgefallen ist? Wenn Sie einen weiteren Blick darauf werfen, werden Sie etwas sehen, das so ziemlich alle von ihnen gemeinsam haben.

Wissenschaftler fanden heraus, dass Menschen „Formen mit sanften Kurven im Gegensatz zu scharfen Spitzen“ mögen. Sie sind angenehmer für das Auge und lassen uns friedlicher fühlen. Aus diesem Grund sind die effektivsten Call-to-Action-Buttons Rechtecke mit abgerundeten Ecken.

Quelle: CleverTap

Es ist aus gutem Grund das beliebteste Format. Aber probieren Sie verschiedene Optionen aus. Ihr Publikum bevorzugt vielleicht etwas anderes.

Verbinden Sie sich mit der ersten Person

Ein besseres CTA-Design kann nur eine Änderung entfernt sein. Manchmal ein einziges Wort.

Beim Verfassen von Texten wird uns beigebracht, das Wort „Sie“ zu verwenden. Weil es dem Leser das Gefühl gibt, direkt angesprochen zu werden. Du denkst also, das würde auch für deine Button-Kopie gelten, oder? Seltsamerweise nicht so sehr.

Unbounce entdeckte, dass die Änderung der Kopie auf ihrer Zielseite von „Starte deine kostenlose 30-Tage-Testversion“ zu „Starte meine kostenlose 30-Tage-Testversion“ die Klickraten um 90 % erhöhte.

Also, warum ist das so? Nun, wenn sich jemand mit einem Produkt verbunden fühlt, ist es wahrscheinlicher, dass er konvertiert. Es gibt diese persönliche Note, ohne etwas über sie wissen zu müssen.

Die Marketingpsychologie zeigt, dass Kaufentscheidungen hauptsächlich auf Emotionen basieren. Sie möchten also, dass Ihre Website-Besucher das Gefühl haben, dass es ihre Wahl ist.

Das Schreiben von „my“ hilft dem Benutzer, die Aktion zu visualisieren, die er ausführen wird. Es gibt ihnen Kontrolle und bringt sie (hoffentlich) zur Entscheidungsfindung.

Außerdem kann es zeigen, dass sie einen sofortigen Wert erzielen werden. Wie auf der Homepage von Crazy Egg:

Quelle: Verrücktes Ei

1-800 Contacts ist das weltweit größte Geschäft für Kontaktlinsen. Aber sie tun dasselbe. Sie stellen sicher, dass ihre CTA-Buttons nur an eine Person gerichtet sind:

Quelle: 1-800 Kontakte

Nicht viele Unternehmen verwenden diese Technik. Was bedeutet, dass es auffällt, wenn Sie es sehen. Also, warum es nicht versuchen?

Schaffen Sie ein Gefühl der Dringlichkeit und verwenden Sie starke Verben

Ihr Text muss ein Gefühl der Dringlichkeit erzeugen und die Aufmerksamkeit der Benutzer auf sich ziehen. Dies funktioniert besonders gut für E-Commerce-Unternehmen. Die Verwendung von Wörtern wie „jetzt“ und „heute“ kann helfen, zum Handeln anzuspornen. Weil sie andeuten, dass das Angebot nicht ewig bestehen wird.

„Jetzt kaufen“ ist ein Klassiker. Aber mit unserem CTA-Design können wir noch mehr erreichen.

Quelle: GoSquared

Du könntest es mit Formulierungen versuchen wie:

• „Gönnen Sie sich heute“
• „Jetzt Rabatt freischalten“
• „Einmaliger kostenloser Download“

Außerdem möchten Sie Ihr Angebot attraktiv gestalten und neugierig machen. Beginnen Sie also mit einem starken Verb. Nicht etwas, das so aussieht, als wäre es eine Anstrengung. Das ist eine einfache Möglichkeit, Leute abzuschrecken.

Hier sind ein paar Beispiele dafür, was ich meine:

Die linke Seite klingt so, als würden Ihre Benutzer etwas vom Klicken bekommen . Die rechte Seite klingt, als müssten sie Zeit oder Geld aufgeben .

Sie können auch wirklich kreativ werden. Wie diese Version von Huemors Homepage:

Quelle: FastCapital360

Oder die alte Zielseite von Humboldt County, die ihr eine mystische Wendung gibt:

Quelle: ConEmprendimiento

Brainstormen Sie Ideen mit Ihrem Team. Egal wie lächerlich. Sie werden überrascht sein, was Sie sich einfallen lassen und am Ende verwenden werden. Aber welche Formulierung Sie auch wählen, vergessen Sie nicht, Ihr Versprechen am anderen Ende zu erfüllen.

Versuchen Sie es mit einer Unterüberschrift neben Ihrem Call-to-Action-Button

Manchmal brauchen Menschen einen kleinen Schubs. Und ein wenig Text unter Ihrem CTA-Button kann den Zweck erfüllen. Es ist keine normale „Unterüberschrift“. Aber so lässt es sich am einfachsten beschreiben.

Wenn wir uns den Schaltflächentext als Überschrift vorstellen, ist die beliebteste Unterüberschrift, die Sie sehen werden, „Keine Kreditkartendaten erforderlich“. Aber deine kann alles sagen. Und es macht Spaß, damit ein wenig kreativ zu werden.

Meistens werden sie verwendet, um dem potenziellen Kunden Vertrauen zu geben. Und sie können die wichtigsten Schmerzpunkte ansprechen, die Menschen haben könnten:

Quelle: CoSchedule

CoSchedule versteht, dass Benutzer denken könnten, dass es sich nur um eine kostenlose Testversion handelt. Also warum nicht? Es ist für immer kostenlos“, stellt es klar.

Sie können sie auch verwenden, um einen sozialen Beweis hinzuzufügen:

Quelle: Basislager

Dies verleiht Ihnen sofortige Glaubwürdigkeit, da Benutzer deutlich sehen können, dass andere Ihnen bereits vertrauen. Es kann auch FOMO inspirieren, da die Leute denken, dass es Gründe für so viele Abonnenten geben muss.

Wenn Sie ein Sonderangebot oder einen zusätzlichen Wert haben, der mit Ihrem Service einhergeht, verwenden Sie Ihre Unterüberschrift, um es hervorzuheben:

Quelle: Moz

Microcopy ist eine Chance für Ihre Markenstimme, zu glänzen. Auch wenn es nur ein einziger Satz ist. Scheuen Sie sich also nicht, ein wenig frech zu sein, wenn es passt:

Quelle: ClientBoost

Sie können auch genau angeben, was passiert, nachdem die Leute geklickt haben. Erzähl es ihnen:

• Was sie bekommen (neue Marketingideen)
• Wie viele (17+)
• Und warum sollten sie sich darum kümmern (sie sind besser als das, was du hast)

Verwenden Sie diese Beispiele als Vorlagen zur Inspiration. Oder etwas ganz anderes machen. Stellen Sie einfach sicher, dass es zu Ihrer Markenidentität passt, und haben Sie Spaß damit.

Vergessen Sie A/B-Tests nicht

Die meisten CRO-Tools zielen darauf ab, die Benutzererfahrung (UX) zu verbessern. Und möglicherweise tun Sie dies bereits mit den Hauptteilen Ihrer Webseiten. Aber Sie sollten es auch mit den kleinen Elementen tun.

Amazon ist notorisch wählerisch in Bezug auf seine CTA-Button-Designs. Vor allem bei der Nutzung durch Dritte. Stellen Sie also sicher, dass Sie mit Ihrem keine Regeln brechen.

Danach können kleine Änderungen an Ihrem Button-Design große Auswirkungen haben. Vergleichen Sie also verschiedene Arten von CTA-Buttons. Dann A/B-Testvariationen von:

• Knopffarbe
• CTA-Kopie
• Schriftart
• Platzierung im Seitendesign
• Pop-ups
• Kontaktformulare

Quelle: Snov

Wie ich bereits erwähnt habe, kann das Ändern von nur einem Wort manchmal die Konversions- oder Klickrate erhöhen. Aber bevor Sie loslegen, müssen Sie verstehen, wie Besucher auf Ihrer Website navigieren.

Sie möchten Dinge herausfinden wie:

1. Mit welchen Elementen sie zu interagieren versuchen
2. Wo kommen sie her
3. Die User Journey/der Kauftrichter Ihrer Website
4. Die Motivation der Leute, dort zu sein

Quelle: GIPHY

Sobald Sie diese Informationen haben, können Sie mit Dingen experimentieren, die auf Fakten basieren, nicht auf Vermutungen.

Es ist normalerweise einfacher, eine A- und eine B-Version mit dem CTA-Design zu vergleichen. Sie können dies jedoch erhöhen und multivariate Tests ausprobieren. Einfacher ist in der Regel zunächst besser. Auf diese Weise haben Sie einen klaren Gewinner.

Aber nichts hindert Sie daran, diesen Gewinner danach gegen eine andere Version zu testen. Sie sollten immer testen und vergleichen. Auch wenn Sie etwas gefunden haben, das funktioniert. Das tun erfolgreiche Marken.

Achten Sie auf die mobile Version

Ein kurzer Tipp zum Abschluss. Ihre Designelemente werden auf einem mobilen Bildschirm ganz anders aussehen. Sie arbeiten mit einem viel kleineren Display und weniger Pixeln. So wird das Durcheinander viel einfacher.

Alles, was wir behandelt haben, wird in Ihrer mobilen Version häufiger. Kontrastfarben müssen stärker hervortreten:

Negativraum sollte Priorität haben:

Und sogar Ihre Unterüberschrift könnte an einer anderen Stelle stehen. Da mobile Benutzer möglicherweise nicht weit genug nach unten scrollen, um es darunter zu sehen:

Grüße an CleverTap für diese Grafiken

Generell muss auf Mobilgeräten mehr über Ihre UX nachgedacht werden. Weil Mobile über die Hälfte des weltweiten Suchverkehrs ausmacht. Sie können nicht erwarten, dass Ihre Desktop-Version übersetzt. Und ein wenig Aufwand könnte zu einer viel höheren Klickrate führen.

Fazit

Effektives CTA-Design besteht aus vielen dieser kleinen Details. Ich habe es schon so oft gesagt, aber die kleinste Änderung könnte alles sein, was man braucht. Sogar etwas so Unbedeutendes wie die Farbe oder Form des Umrisses.

A/B-Tests sind der einzige Weg, um es herauszufinden. Und Sie brauchen dafür nicht einmal ein teures CRO-Tool. Verfolgen Sie einfach Ihre Conversions. Nehmen Sie eine Änderung vor. Und sehen Sie, ob es eine Zunahme oder Abnahme von der üblichen Zahl gibt.

Geben Sie Ihrem Call-to-Action-Button einfach die Aufmerksamkeit, die er verdient. Es könnte der Unterschied zwischen einem neuen Kunden oder einer verpassten Gelegenheit sein.

Haben Sie in letzter Zeit originelle CTA-Designs gesehen? Haben Sie eine kleine Änderung vorgenommen, die zu höheren Conversions geführt hat? Lassen Sie es uns in den Kommentaren unten wissen.