CTA in E-Mails: Die Checkliste zur Optimierung Ihrer Konversionen

Ein kleiner Bereich, kaum mehr als ein paar Pixel, aber von großer Bedeutung: Der CTA in einer E-Mail (Call-to-Action) kann allein über den Erfolg oder Misserfolg Ihrer Kampagnen entscheiden.

Zusammen mit der Betreffzeile ist der CTA die von E-Mail-Marketern am häufigsten getestete Komponente: Kein Wunder, wenn man bedenkt, dass er der wichtigste Hebel für die Konversion Ihrer Kampagnen ist.  Aus diesem Grund sollte er auch mit besonderer Sorgfalt behandelt werden.

Das Element Button im E-Mail-Builder Dartagnan ist eine native Funktion, die es Ihnen ermöglicht, hochwirksame CTAs zu erstellen. Aber Sie müssen auch die Codes beherrschen ...

Größe, Farbe, Form, Text ... Hier ist unsere 12-Punkte-Checkliste, um dies zu erreichen.

Eines der wichtigsten Gebote des UX-Designs: das Prinzip der Affordanz zu beachten. Was heißt das im Klartext? Die Form eines Objekts kann seine Funktion andeuten. So zeigt Ihnen das Symbol eines Briefumschlags, dass Sie eine E-Mail versenden, das Symbol eines Pfeils nach rechts, dass Sie weitergehen, nach links, dass Sie zurückgehen, usw. ...

In ähnlicher Weise signalisiert uns unterstrichener Text, und noch mehr wenn er blau ist, dass dieser Textabschnitt anklickbar ist.

Aber die Schaltfläche treibt die Identifizierung noch weiter. Durch einen Gewöhnungseffekt in den digitalen Umgebungen, mit denen wir täglich zu tun haben, ruft das Vorhandensein einer Schaltfläche in jeder beliebigen Schnittstelle nach einem Klick.

Ist die Schaltfläche ein größerer Anreiz als ein „einfacher“ unterstrichener Link? Die meisten Tests, die zu dieser Frage durchgeführt wurden, legen dies nahe. Zum Beispiel dieser hier, bei dem die Schaltfläche 45% mehr Konversion bewirkt als der Link.

Aus Gründen der Hierarchie und der Lesbarkeit ist es jedoch ratsam, zwischen Schaltflächen und Links abzuwechseln.

Diese E-Mail von Pierre & Vacances ist ein gutes Beispiel dafür:

• Durch die Verwendung von „Ich entdecke“-Links wird das Design schlanker.
• Die leichteren Links verweisen auf ein bestimmtes Reiseziel, während der auffälligere „Ich buche“-Button auf die Buchungsseite für alle Reiseziele verweist.

Ein Call-to-Action ist also meistens ein Rechteck, das eine Nachricht enthält, die zu einer Handlung auffordert. Mit drei möglichen Formen: quadratische Ecken, leicht abgerundete Ecken oder stark abgerundete Ecken.

Es gibt keine absolute Regel für die Wahl der Form, außer derjenigen, die von Ihrem eigenen Corporate Design vorgegeben wird.

Das Design der CTAs in Ihren E-Mails sollte mit Ihrer Markenidentität übereinstimmen und deren Persönlichkeit und Werte widerspiegeln.

Richten Sie das E-Mail-Design an Ihrem Web-Design aus (wenn möglich) und:

• Wählen Sie Schaltflächen, die denen auf Ihrer Website ähneln.
• Verwenden Sie in Ihrer gesamten E-Mail die gleiche Form der Schaltfläche.

Damit Ihr CTA visuell konsistent und ansprechend ist :

• Platzieren Sie nicht ein einzelnes Wort in einer sehr breiten Klickzone.
• Platzieren Sie den Textinhalt Ihrer Schaltfläche nicht in zwei Zeilen.

Ihr CTA muss ein gutes Gleichgewicht zwischen Lesbarkeit und Konzentration finden.

Je größer er ist, desto besser ist Ihr CTA in der E-Mail sichtbar, also desto wahrscheinlicher ist es, dass er angeklickt wird? Das stimmt nicht immer! Was jedoch sicher ist, Größe spielt eine Rolle. Insbesondere bei der responsiven Version für Mobiltelefone geht es darum, es dem Nutzer so einfach wie möglich zu machen.

Kurz gesagt: Wenn Sie Ihre Konversionsrate maximieren und Ihre Leistung im E-Mail-Marketing steigern möchten, können Sie sich von den folgenden Regeln inspirieren lassen.

Hier sind die wichtigsten Empfehlungen zur Mindestgröße von Call-to-Actions laut Apple (iOS), Google (Android), Microsoft ... und einem Labor des MIT, das die „Tap-Fläche“ eines durchschnittlichen menschlichen Zeigefingers untersucht hat.

Die Empfehlung von Dartagnan? Gestalten Sie Ihre Schaltflächen mit einer Höhe zwischen 35 und 45 Pixel. Aus Gründen der Hierarchie zwischen Ihren CTAs können Sie jedoch bis zu einer Höhe von 30 Pixeln heruntergehen.

Wenn Ihnen das Thema Barrierefreiheit in E-Mails wichtig ist, können Sie bis zu einer Höhe von 50 px gehen. Dadurch können Menschen mit Sehbehinderungen Ihre CTAs in Ihren E-Mails besser finden.

Sie können sich auch dafür entscheiden, die Breite Ihrer CTAs in % statt in Pixel festzulegen: Dadurch passen sich Ihre Schaltflächen an die Bildschirmgröße der Geräte an, auf denen Ihre E-Mails angezeigt werden.

Um die Sichtbarkeit Ihrer Schaltflächen zu erhöhen, können Sie auf zwei sich ergänzende Designmethoden zurückgreifen:

• Die Verwendung von Whitespace (ein „weißer“ oder genauer gesagt leerer Raum um Ihren CTA herum, durch den dieser deutlicher hervortritt).
  
  
• Visuelle Hinweise: Striche, Pfeile oder der Blick einer Person, die auf den CTA gerichtet ist, Symbole oder Pfeile im CTA selbst (wie Petit Bateau unten)... Diese Tricks lenken das Auge des Empfängers effektiv auf Ihre Schaltfläche.

Die ideale Farbe für eine Call-to-Action gibt es nicht. Es gibt jedoch einige Regeln, die Sie befolgen sollten, um den richtigen Farbton für Ihre Kampagne zu finden. Beginnen Sie damit, dass Sie sich an die Farbpalette halten, die im Style Guide Ihrer Marke festgelegt ist.

Die ultimative Waffe bei der Farbgestaltung von CTAs ist letztlich der Kontrast. Werfen Sie einen Blick auf die folgenden drei Schaltflächen :

Das linke CTA (dunkelblau) auf hellem (grauem) Hintergrund ist deutlich besser zu erkennen als das mittlere (obwohl der Blauton recht harmonisch ist). Der rechte fällt jedoch sofort ins Auge. Der Grund dafür? Der Kontrast zwischen dem Blau des Knopfes und dem Gelb-Orange des Hintergrunds ist maximal, da die beiden Farben Komplementärfarben sind.

Hell zu dunkel (oder umgekehrt) oder Komplementär zu Komplementär (Blau zu Orange, Rot zu Grün, Gelb zu Violett...): Es ist also das Verhältnis der Farben zueinander, das die Wirkung Ihrer Call-to-Actions am stärksten beeinflussen wird.

Es kann vorkommen, dass die Farben Ihrer CTAs durch den Darkmode verändert werden: Sie verlieren dann an Sichtbarkeit bzw. Lesbarkeit.

Wir empfehlen Ihnen, Ihre CTAs in der E-Mail zum Zeitpunkt des Einfügens zu testen, um Ihre Farbwahl zu überprüfen und an die Anzeige anzupassen.

Beachten Sie jedoch, dass der Darkmode zwischen 15 und 20 % der Anzeigen ausmacht. Das ist nicht wenig, aber auch nicht so groß, dass es Ihre Entscheidungen völlig aufwiegt, falls Sie sich nicht sicher sind, ob Sie etwas ändern wollen.

Kurz gesagt: Machen Sie im Darkmode das Beste daraus.

Der Begriff „Falz“ (engl.fold ) oder „Knick“ stammt noch aus der Zeit der Papierzeitungen und ist im Unterbewusstsein von Designern fest verankert. Above the fold - was über dem Falz liegt :

• erscheint bereits beim Öffnen der E-Mail,
• hat eine höhere Wahrscheinlichkeit, gesehen zu werden,
• wird daher vom Empfänger a priori als wichtiger wahrgenommen.

Was sich darunter befindet, ist dagegen zweitrangig. Oder sogar unsichtbar...

Bei Dartagnan ist man der Ansicht, dass der Begriff des Falzes nicht mehr wirklich relevant ist.

Heute stammen 41% der E-Mail-Aufrufe von Mobilgeräten und 39% von Desktopgeräten (Quelle: Hubspot-Blog). Die Konzeption Ihrer Kampagnen muss daher zwangsläufig die mobilen Einschränkungen berücksichtigen.

Die Anzahl der Geräte (und damit der Bildschirmgrößen) ist jedoch so groß, dass es schwierig ist, den Falz und damit die genaue Position Ihres Haupt-CTAs mit Sicherheit zu bestimmen.

Anstatt die Position Ihres CTA in Bezug auf die Höhe zu betrachten, empfehlen wir Ihnen, sie in Bezug auf das Scrolling zu betrachten.

In einem spannenden Artikel „How to design for thumbs in the era of huge screens“ beobachtet der Designer Scott Hurf, dass jeder zweite Mensch sein Smartphone mit nur einer Hand bedient. Und somit nur mit seinem Daumen navigiert.

Bei den ersten Smartphones war das noch recht einfach. Im Zeitalter der riesigen Bildschirme des iPhone 6 Plus oder XS Max (von uns in dieser Abbildung hinzugefügt) wird es geradezu sportlich!

Möchten Sie, dass man leicht auf Ihren CTA zugreifen kann? Dann zielen Sie auf den „Fuß“ des ersten Bildschirms.

Je höher, desto besser, allerdings mit der Einschränkung, dass die meisten Menschen mittlerweile scrollen. Das bedeutet nicht, dass Sie Ihren Haupt-CTA absenken müssen, aber es reicht aus, wenn Sie die Konsistenz des Designs (Desktop & Mobil) Ihrer Kampagne priorisieren.

Ist es war, dass Sie durch Erhöhung der Anzahl der Call-to-Actions, also der Klickgelegenheiten, zwangsläufig die Chancen auf eine Konversion vergrößern? Das ist falsch.

Angesichts einer „Weihnachtsbaum“-E-Mail ist der Empfänger mit einer ziemlich gefürchteten kognitiven Verzerrung konfrontiert: analysis paralysis (Analyse-Lähmung, die „Hindernisverweigerung“, die durch eine Überfülle an Auswahlmöglichkeiten erzeugt wird).

Ihre Aufgabe ist es also, die Anzahl der Angebote (und damit der CTAs in der E-Mail) so weit wie möglich zu reduzieren.

Es ist notwendig, dass eine E-Mail nur ein klares Angebot enthält? Im Rahmen eines CRM-Programms und im E-Mail-Marketing allgemein ist es nicht immer einfach, sich an dieses Prinzip zu halten.

Die Lösung ist, Ihre Botschaften zu priorisieren: eine im Rampenlicht, einige zweitrangig oder sogar drittrangig.

Verwenden Sie CTA-Designs, die nach ihrer Bedeutung differenziert sind:

• eine „volle“, gut sichtbare und strategisch platzierte Schaltfläche für das Vorzeigeangebot Ihrer E-Mail,
• einen oder mehrere weitere „Geister“-Knöpfe (mit einem Rand, aber ohne farbigen Hintergrund) für weniger wichtige Angebote,
• und warum nicht einfache unterstrichene Links für das Beiwerk.

Wir wissen alle, dass es nicht leicht ist, einen Call-to-Action-Text mit nur wenigen Buchstaben zu verfassen. Es gibt jedoch Möglichkeiten, kreativer und vor allem überzeugender zu sein.

Job Nr. 1 des Textes, der mitten auf Ihrer Schaltfläche steht und alle Blicke auf sich zieht? Dem Empfänger sehr genau zu erklären, was passieren wird, wenn er klickt:

• Wo wird er landen: auf einer Produktseite, einer Landing Page, einem Leitartikel, einem Video?
  
  
• Welche Optionen hat er am Zielort: verschiedene Farben eines Kleidungsstücks ansehen, Spielkonsolen vergleichen, ein paradiesisches Hotel entdecken?
  
  
• Was erwarten Sie als Nächstes von ihm: dass er (sofort) kauft, bucht, vergleicht?

All diese Informationen kennt der Empfänger Ihrer Kampagne nicht. Es liegt also an Ihnen, ihm einen Eindruck davon zu vermitteln, was ihn auf der anderen Seite der virtuellen Eingangstür, die Ihr CTA darstellt, erwartet.

Ein Produkt, eine Schaltfläche „Kaufen“ - das ist doch einfach, klar und präzise, oder? Aber das ist wahrscheinlich ein bisschen zu schnell. Das Ziel ist es, zu verkaufen, aber Ihr Empfänger möchte vielleicht nicht direkt zum Kauf übergehen.

In der Tat ist es oft eine gute Idee, sich für weniger einladende CTA-Beschriftungen zu entscheiden, die den Eindruck erwecken, mehr Freiheit zu bieten... Dies wird durch einige Beispiele belegt:

• Indem L'Argus seinen alten CTA (der den Preis eines Autos anzeigte) durch ein weiseres „Details anzeigen“ ersetzte, konnte die Klickrate um 574% gesteigert werden.
  
  
• Pierre et Vacances ersetzte „Reservieren“ durch das weniger verkaufsfördernde „Verfügbarkeiten anzeigen“ und steigerte seine Verkäufe dennoch um 14%.

Was ist die Lektion? „Produkt ansehen“, „Kollektion entdecken“, „Farben vergleichen“ kann sich als effektiver erweisen als das (zu?) direkte „Jetzt kaufen“.

Ihr Aktionsverb: E-Commerce-Anbieter sind eher Anhänger des Infinitivs. Wenn Sie Ihren Call-to-Action so formulieren, dass der Empfänger das Gefühl hat, dass er eine Entscheidung trifft, können Sie die Konversionsrate deutlich erhöhen.

„Ich“, ‚Mein‘ und ‚Mich‘ sind kleine Anstöße, die Sie nutzen (oder zumindest testen) sollten. Ein Beispiel dafür ist dieser AB-Test, bei dem die Änderung von „Start your free trial“ in „Start my grauit trial“ 90% mehr Konversion erzeugte.

Die oben genannten Beispiele belegen eines: Die wenigen Worte, die den Call-to-Action einer E-Mail begleiten, sind von entscheidender Bedeutung. Was diese Tests nicht sagen ... ist, dass man bei Bedarf auch ohne Wörter auskommen kann.

Sie können darauf verzichten, wenn Sie z. B. :

• Ihr Vorschlag so offensichtlich ist, dass er ohne Zwischenüberschriften auskommt,
  
  
• Ihre E-Mail aus sehr vielen Produkten oder Aktionen besteht und eine ganze Reihe von CTAs in der E-Mail den Empfänger zu erdrücken droht.

Diese E-Mail von Le Printemps ist ein gutes Beispiel dafür: Für die Produktauswahl der 80er Jahre wählte Le Printemps klickbare Bilder und einen generischen CTA anstelle von individualisierten CTAs. Dadurch wird die Komposition schlanker und viel effektiver:

CTAs als Bilder zu gestalten, ist eine weit verbreitete Praxis... Aber es kann dazu führen, dass Ihre E-Mail-Kampagnen wertvolle Konvertierungspunkte verlieren. In vielen Konfigurationen werden Bilder nämlich nicht angezeigt. Und Sie müssen zumindest einen Alternativtext vorsehen.

Was ist die Alternative? Codieren Sie Ihre CTAs in HTML, so dass sie wie eine Schaltfläche aussehen, ohne ein Bild aufrufen zu müssen. Diese werden als „bulletproof buttons“ bezeichnet, weil sie in allen Konfigurationen und mit demselben Design angezeigt werden.

Sehen Sie zum Beispiel, wie derselbe Call-to-Action von Evaneos auf dem Desktop, auf dem Handy oder wenn Bilder nicht geladen werden aussehen wird:

Gut zu wissen: Mit dem E-Mail-Builder von Dartagnan, sind die Schaltflächen Ihrer Kampagnen „bulletproof“, ohne dass Sie diese selbst codieren müssen.

Indem Sie einen Hover State hinzufügen, machen Sie Ihren CTA in der E-Mail dynamisch und lenken die gesamte Aufmerksamkeit auf Ihr Wertangebot.

Dieser kleine Trick lässt sich in Dartagnan ganz einfach umsetzen, da der Hover State eine native Funktion unseres Designers ist und daher sehr einfach und schnell zu implementieren ist!

Der Beweis in Bildern ist diese wunderschöne E-Mail von Maison Kitsuné :

Sie haben die zehn vorangegangenen Schritte befolgt und sind nun bereit, Ihre E-Mail-Kampagne mit einem schönen neuen CTA zu versenden? Bevor Sie Ihre neue Schaltfläche und eine Kontrollversion in einen AB-Test aufnehmen (eine Praxis, die wir Ihnen sehr empfehlen...), ist noch ein letzter kleiner Test nötig: der Unschärfetest.

Wandeln Sie Ihre E-Mail in ein Bild um, wenden Sie einen hohen Grad an Unschärfe an und betrachten Sie dieses mit neuen Augen: Ist die E-Mail gut strukturiert? Ist der Haupt-CTA gut sichtbar und hervorgehoben?

Dieser Test ist sehr nützlich, um das „diagonale“ Lesen Ihrer Kampagne zu simulieren. Wenn Ihre Kampagne den Unschärfetest mit Bravour besteht, hat sie gute Chancen, die Aufmerksamkeit selbst Ihrer oberflächlichsten Empfänger zu erregen.