Auch im E-Mail-Marketing ist ein überzeugendes Look & Feel unerlässlich. Markante Design-Elemente helfen dem Nutzer sich im E-Mail-Körper zurechtzufinden. Call-to-Action-Buttons sind hierbei eine wichtige Maßnahme, um die Empfänger zu leiten und zu der gewünschten Aktion zu bringen. Solche Buttons sollten deshalb möglichst prominent platziert und ansprechend gestaltet werden. 

Gelungene Call-to-Action-Buttons animieren zum Klick und sorgen so für deutlich mehr Verkäufe, Anmeldungen oder vergleichbare Aktionen. Für den E-Mail-Empfänger sollte hierbei immer klar ersichtlich sein, dass es sich um einen Button handelt. Zugleich ist der Gestaltungspielraum in diesem Bereich enorm.

Was einen klickstarken Call-to-Action-Button ausmacht:

  • Ein oder mehrere Worte auf der Schaltfläche des Buttons
  • Call-to-Action-Text (z. B. „Anmelden“ oder „Senden“)
  • Intensität der Aufforderung (etwa „Jetzt kaufen“ oder „Senden“)
  • Groß-, Kleinschreibung oder Schreibweise in Blockschrift
  • Deadline auf der Schaltfläche bzw. künstliche Verknappung (z. B. „Nur noch 1 Woche bis zum Bundesligastart – jetzt TV-Abo bestellen““)
  • HTML- oder grafische Elemente
  • Größe und Positionierung der Call-to-Action-Buttons
  • Kontrast und farbliche Auszeichnung der Schaltflächen (Vordergrund- und Hintergrundfarbe)
  • Auszeichnung in der Beschriftung (etwa kursiv, fett oder unterstrichen)
  • Designs mit Schatten bzw. ohne Schatten
  • Button-Form (z. B. rund, eckig, oval oder abgerundete Ecken)
  • Icons oder Symbole auf der Schaltfläche
  • Mit bzw. ohne Hover-Effekt (Darstellung von Links und wechselnde Linkfarben beim Mouse Over)
  • Freiraum um den Button herum bzw. zu anderen grafischen Elementen (Freistellung)


Asstel-Newsletter: Prominent platzierter Call-to-Acton-Button

Beschriftung

Die Beschriftung der Buttons sollte mit Bedacht gewählt werden. So sollte die Aufforderung „Gratis anfordern“ eine höhere Konversionsrate als ein schlichtes „Abschicken“ erzielen. Es lohnt sich auch, die Beschriftung und die Verlinkung als interaktive Elemente darzustellen. Interaktivität lässt sich etwa durch ein in Richtung Aufforderungstext zeigendes Dreieck oder ein vergleichbares grafisches Element darstellen.

Positionierung

Call-to-Action-Buttons sollten in jeder E-Mail prominent platziert werden. Ich empfehle, die Platzierung an dem natürlichen Lese- und Blickverlauf der Leser auszurichten. Zudem schließen Buttons eine inhaltliche Einheit mit einer Aktion ab – die Schaltflächen sollten entsprechend positioniert werden. Ich empfehle hierbei, den Call-to-Action-Button als zentrales Response-Element und abschließenden Reiz zu platzieren.

Alt-Tags

Auf der technischen Ebene sollte jeder Button mit einem Alt-Tag versehen werden. In dem Tag platzierte Texte werden bei einem durch den E-Mail-Client nicht geladenen Button als Alternative angezeigt. Berücksichtigen Sie auch mögliche Darstellungsprobleme. Die verschiedenen E-Mail-Dienste können den gleichen HTML-Code sehr unterschiedlich darstellen. Doch mit ein paar Tricks lässt sich auch unter diesen erschwerten Bedingungen eine perfekte Sichtbarkeit auf den ersten Blick gewährleisten:

  • Button als HTML Tabelle <table> mit einer Zelle erstellen
  • Verläufe, abgerundete Kanten, Schlagschatten etc. ohne Text als Hintergrundbild der Tabellenzelle (nicht als Vordergrund-Bild <img …>!) einbinden. Das Hintergrundbild dabei sowohl per CSS background-image, als auch per HTML background spezifizieren, da Google Mail ersteres nicht berücksichtigt
  • Hintergrundfarbe für die Zelle angeben – sicherheitshalber per HTML-Tag bgbolor und CSS background-color(z. B.: #FF0000 für rot)
  • Breite und Höhe entsprechend der Hintergrundgrafik per HTML und CSS width und height für die Tabellenzelle definieren
  • Text formatieren (z. B. „Jetzt downloaden„)

Hier ein exemplarischer Quelltext (Muster):

<table cellspacing=“0″ cellpadding=“0″ border=“0″>
<tr>
<td width=“153″ height=“21″ align=“center“ bgcolor=“#ff0000″ background=“Grafik-URL“ style=“width:153px; height:21px; background-color:#ff0000; background-image:url(Grafik-URL);“><a href=“Link-URL“ style=“text-decoration:none; color:#ffffff; font-family:arial,verdana; font-size:14px; font-weight:bold;“>&raquo;&nbsp;Jetzt downloaden</a></td>
</tr>
</table>

Testen, testen, testen

Das Look & Feel von Call-to-Action-Buttons unterliegt meist aktuellen Design-Trends und variiert von Branche zu Branche. Nicht zuletzt deshalb empfiehlt sich ein kontinuierliches Testen verschiedener Varianten. Sie profitieren besonders davon, dass sich Buttons besonders einfach testen lassen. Verbesserungen an diesem Element führen meist kurzfristig zu einer deutlich höheren Konversion. Testen sollten Sie besonders die Größe, Farbe und Beschriftung, die Platzierung in der E-Mail, die Textfarbe und -größe sowie unterschiedliche Formulierungen.

ist als Email Marketing Evangelist beim Dienstleister optivo tätig. Neben Beratungsprojekten betreut er federführend das Wissensportal optivo® campfire und vermittelt regelmäßig Know-how und marktrelevante Informationen für erfolgreiches E-Mail-Marketing.

Online-Marketing

3 Growth Hacks für Online-Shops: Jetzt ausprobieren!

Hendrik Lennarz •

Recht

E-Commerce-Recht – Rückblick auf den November 2014

Rolf Albrecht •