Kostenlos testen Login
Home » Blog » Kleiner Knopf, große Wirkung: Das perfekte CTA-Design

Kleiner Knopf, große Wirkung: Das perfekte CTA-Design

28. September 2018

CTA_button_Newsletter2Go

Wie Sie Ihre Kunden mit einem CTA im Kaufprozess leiten

Vivecca.Frank_Newsletter2Go

Vivecca Frank von 99designs

Von der Registrierung als neuer Nutzer über den Download eines eBooks bis hin zur Kontaktaufnahme mit dem Kundenservice: All diese Aktionen werden über Call-to-Action-Buttons auf einer Website ausgelöst. Vivecca Frank ist Expertin im Bereich Design und Branding und arbeitet im Berliner Büro der internationalen Kreativplattform 99designs. Im folgenden Artikel erklärt sie, wie Nutzer durch einen gut gestalteten CTA-Button im Kaufprozess geleitet werden – und wie das entsprechende Design gestaltet werden sollte.

Warum sind CTAs wichtig?

Ein direktes Kundengespräch endet in der Regel mit einer Aufforderung oder Frage, die den Kunden zu einer Aktion verleiten soll – der sogenannten „Closing Line“. Der Call-to-Action-Button (CTA) überträgt diesen Vorgang auf Websites oder Apps. Doch in der Online-Welt fehlen Emotionalität und individuelle Anpassung an den Kunden. Es ist deshalb nicht nur wichtig, was Sie Ihrem Kunden sagen, sondern auch, wie Sie dies tun. Das ideale Design, die Message und die Platzierung des CTA erhöhen die Klickrate. Sie führen zu mehr Engagement und helfen somit, die Konversionsrate zu verbessern. Um ein paar Zahlen sprechen zu lassen: E-Mails mit CTAs erhöhen die Klickrate um 371% und Verkäufe um 1.617%.1

Der Erfolg von CTAs beruht auf der Erwartungshaltung der Nutzer, wenn sie Landing Pages besuchen oder Newsletter lesen. Laut dem Online-Marketing-Experten Neil Patel erwarten sie, durch einen Button zu einer Handlung aufgefordert zu werden. Es ist ein Verhalten, dass sie durch den Besuch unzähliger Landingpages gelernt haben. Der Nutzer weiß, dass es CTAs gibt. Er erwartet nicht nur, von ihn geleitet zu werden, sondern wünscht dies sogar.

Die wichtigsten CTA-Arten

Ein CTA ist nicht gleich ein CTA. In seinem Kontext hat jeder Button eine unterschiedliche Funktion, die es zu beachten gilt, um ihn optimal zu gestalten und zu platzieren. Im Folgenden finden Sie die wichtigsten CTA-Typen und ihre Anwendung im E-Mail-Marketing.

E-Mail-Anmeldung

CTA_Anmeldung_Newsletter2Go

Landingpage für RHWC von Pixed Ideas via 99designs

E-Mail-Adressen werden im digitalen Business als Währung gehandelt. Gerade deshalb ist die Anmeldung für den Erhalt von E-Mails aktuell die am weitesten verbreitete Form des CTAs. Das heißt jedoch nicht, dass Website-Besucher ihre E-Mail-Adresse leichtfertig weitergeben. Umso wichtiger ist es, den Nutzen der Mails aufzuzeigen und mit Fingerspitzengefühl vorzugehen. Wie im Beispielbild oben sollten die USPs der Newsletter-Anmeldung in direkter Nähe des CTA stehen, denn wer möchte schon die berühmte Katze im Sack in seinem Postfach haben. Zusammen mit der akzentuierten aber harmonierenden Farbwahl, seiner optimalen Platzierung und dem ansprechenden Text auf dem Button bleiben in diesem Beispiel keine Fragen mehr offen, was der Nutzer beim Klick auf den Button zu erwarten hat.

Richtungsweiser

CTA_Ricxhtungsweiser_Newsletter2Go

Landingpage für MotoLoot von krstatzar via 99designs

Der erste Besuch einer unbekannten Website kann bei manchem User zu Verwirrung führen. Wird er nicht durch die Seite geleitet, kann es passieren, dass er seinen Besuch vorzeitig abbricht. Damit das nicht passiert, kommen die sogenannten Richtungsweiser ins Spiel. Diese Form des CTAs wird so gestaltet, dass sie dem Nutzer gleich ins Auge fällt. Sie fungiert als Wegweiser für den User, zeigt ihm, wie er am besten fortfährt, und bereitet ihm somit einen zufriedenstellenden Besuch mit einer längeren Verweildauer. Da ein Richtungsweiser eine andere Funktion hat als seine anderen CTA-Kollegen, kann er sich auch in Farbwahl und Platzierung von seinen Kollegen abheben. Ist ein Nutzer z.B. auf einer Landingpage gelandet, soll aber als nächstes eine weitere Seite mit den Preis-Optionen besuchen, sollte man ihm das so deutlich wie möglich machen. Auffallende Farben, präsentere Buttons, Grafiken und Texte, die auf den Button hinweisen, prominente Platzierung gleich oben auf der Seite – alles ist möglich, um den User an den Ort zu lenken, an dem man ihn gerne hätte.

Onsite-Action

onsite_action_CTA_Newsletter2Go

Landingpage für DomainMarket.com von krstatzar via 99designs

Dieser CTA-Typ spielt immer dann eine Rolle, wenn es darum geht, den Besucher zu einer konkreten Aktion zu verleiten. Am häufigsten wird der Onsite-Action-CTA deshalb im E-Commerce bei Verkaufsprozessen eingesetzt und deckt hier gleich mehrere Funktionen ab. Er legt Produkte in den Warenkorb, bringt sie zur Kasse und schließt letztlich die Bezahlung ab. Im sorgfältig gestalteten Kontext ist er somit das direkte Äquivalent zur oben erwähnten „Closing Line“. Er kann darüber hinaus aber auch dabei helfen, Nutzer zum Ausfüllen von Formularen oder Herunterladen von eBooks zu bringen. Im Beispiel oben sehen Sie, wie der CTA sich in den CI-Farben perfekt ins Gesamtbild einfügt, jedoch trotzdem deutlich daraus hervor sticht. Die hier gezeigten Onsite-Action CTAs werden durch Text und Bild eingeleitet und haben allesamt genug Raum, um zu wirken.

Engagement

CTA_Engagement_Newsletter2Go

Landingpage für pagerangers von GraphicDots via 99designs

Im Bereich Engagement erfüllen CTA-Buttons eine ganz andere Funktion. Sie erinnern die User an eine Aktion, in diesem Fall die vorher durchgeführte Onsite-Action (siehe oben) mit der Äußerung der eigenen Erfahrung zu verknüpfen. Ein Kommentar, Review oder Like geht mit einem ansprechenden CTA-Design zudem leichter von der Hand. Es ist dabei wichtig, dem Nutzer schnell zu verdeutlichen, was von ihm erwartet wird. Grafiken oder Auswahlfelder mit Sternen werden schnell als Review-Möglichkeit erkannt, ein Herz oder Daumen nach oben als Like. Auch die Platzierung ist hier wichtig. Schließlich erfolgt eine Bewertung nach einer getätigten Aktion und muss sich daher auch räumlich von dieser abgrenzen.

Share-Button

Share_Button_CTA_Newsletter2Gov

Landingpage für dobbiebox von dragan_sh vir 99designs

Auch der Share-Button fungiert hauptsächlich als Erinnerung. Er schlägt dem Nutzer eine konkrete Handlung vor – nämlich das Teilen via Social Media – und erinnert ihn sanft an diese Möglichkeit. Wie bei den anderen CTA-Typen wird die Anwesenheit solcher Buttons vorausgesetzt und ist somit als freundlicher Teil des gesamten Dienstleistungspakets zu verstehen. Wie im Bild oben kann es nicht schaden, die offiziellen Logos der Netzwerke zu verwenden, um den Nutzern ein Teilen so leicht wie möglich zu machen.

E-Mail-CTA designen – so funktioniert’s am Beispiel „Richtungsweiser“

Stellen Sie sich nun folgende Situation vor: Sie betreiben E-Mail Marketing und Ihr Newsletter hat es ins Postfach eines potentiellen Kunden geschafft, er öffnet und liest sie interessiert. Doch plötzlich weiß er nicht, wie er weiter verfahren soll. Es fehlt ein CTA-Button, der ihm zeigt, wie und wo seine Reise weitergehen soll. Ein Richtungsweiser bringt ihn auf charmante Art und Weise auf Ihre Seite. Um das zu schaffen, muss er jedoch einige Kriterien erfüllen.

1. Nur ein Button ist ein Button

Es mag selbstverständlich klingen, doch tatsächlich funktioniert ein Button erst dann richtig, wenn er auch wie einer aussieht. Buttons haben eine definierte Form und Begrenzung, differenzieren sich über die Farbe von ihrer Umgebung und haben einen lesbaren Text auf ihrer Oberfläche. Die Vertrautheit ihres Aussehens muss gegeben sein, um ihren Zweck zu erfüllen.

2. Farblich abgehoben, aber trotzdem passend

Wie ein Wegweiser auf der Straße ist es wichtig, dass der Richtungsweiser aus dem Gesamtbild Ihrer Mail heraussticht, um wahrgenommen zu werden. Er muss einzigartig in seiner Erscheinung sein, weshalb Sie seine Farbe möglichst nicht an anderer Stelle in der E-Mail verwenden sollten. Lassen Sie ihn trotzdem die Emotionen und Tonalität Ihrer Mail und der gewünschten Aktion widerspiegeln.

3. Die perfekte Größe und die Rolle der Typografie

Der Button sollte auch durch seine Größe hervorstechen, jedoch nicht das Bild der Mail stören oder dominieren. Die Schriftgröße 16 zu verwenden, kann hierbei eine gute Faustregel sein. Insbesondere dann, wenn Sie die betreffende Mail für das Lesen auf mobilen Endgeräten optimieren wollen. Als zusätzliche Orientierung kann es helfen, die Mail mit zusammengekniffenen Augen zu betrachten. Können Sie den Button so noch gut erkennen? Dann hat er vermutlich die ideale Größe.

Lesbarkeit ist also wichtig. Deshalb darf auch die Typografie nicht achtlos gestaltet werden. Die Schrift darf emotionalisieren und abgrenzen, muss aber in jedem Fall so lesbar wie möglich sein. Es ist aus diesem Grund nicht empfehlenswert, auf CTA-Buttons mit Versalien zu arbeiten – es sei denn, man gibt den einzelnen Lettern ausreichend Abstand zueinander. Besonders gut eignen sich zudem serifenlose Schriftarten für die kurzen Texte der CTAs, da der Inhalt so schneller ins Auge springt.

4. Der richtige Ort

Ihr Richtungsweiser ist fertig gestaltet. Nun geht es an seine Platzierung. Denken Sie wieder an den Wegweiser auf der Straße. Steht er an der falschen Stelle, werden Sie sich vielleicht verlaufen. Auch wenn es in diesem Fall nicht ganz so dramatisch ausgehen wird, sollte die Platzierung Ihres CTA mit Bedacht gewählt werden. Eine Platzierung über dem „Fold“ hilft dabei, eilige User sofort abzuholen und an den Zielort zu bringen. Die, die noch nicht wissen, ob sie zum Kunden werden wollen, werden besser erst am Ende der Mail von einem Button weitergeleitet. Wichtig ist es in jedem Fall, dass Sie die Reibung um den CTA herum reduzieren. Ein Button braucht Raum, um vom Nutzer in seiner Gänze wahrgenommen zu werden.

5. Was Sie auf jeden Fall beachten sollten

Zu guter Letzt gilt es ein paar Grundsätze jedweder Gestaltung und Platzierung zu bedenken:
Beständigkeit: Das Design Ihrer CTAs sollte sowohl in Ihren E-Mails als auch auf Ihren Seiten gleich bleiben, um den Nutzer nicht zu verwirren.

Ein Button reicht: Mehr als ein CTA per E-Mail könnte dazu führen, dass Ihre Nutzer nicht wissen, was sie tun sollen. Mit einem Button und einem Textlink fahren Sie deshalb besser.

Wie Sie sehen, gibt es über die CTA-Arten hinaus verschiedene Regeln und Tipps, die es bei der Gestaltung zu beachten gilt. Alle zusammen führen schließlich zum Erfolg. Doch auch hier gilt: Selbst die Meinung bedeutender Experten kann die eigene Erfahrung nicht ersetzen. Sollten Sie also Zweifel haben, führen Sie einfach einen A/B-Test durch. Denn nur so können Sie herausfinden, auf welche Parameter Ihre Kundschaft anspringt. Egal für welchen CTA Sie sich am Ende entscheiden, bleiben Sie in jedem Fall Ihrer Marke und CI treu. Authentizität im Design ist und bleibt ein wichtiger Faktor in der Kundenakquise und -bindung.

1 http://www.wordstream.com/blog/ws/2015/06/10/digital-marketing-stats

Schreibe einen Kommentar

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

    Newsletter2Go verwendet Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Wenn Sie auf der Seite weitersurfen stimmen Sie der Cookie-Nutzung zu. Ich stimme zu.