Schlagwort-Archive: button

20 Tipps für den Call to Action Button und warum sich A/B-Tests lohnen

Der Call to Action Button ist Schlüssel zur Konversion, sei es nun auf einer Website, in einem Onlineshop oder eben in einem Newsletter. Die perfekte optische und inhaltliche Gestaltung ist also besonders wichtig und Empfehlungen dazu gibt es viele.

HubSpot hat in einer Slideshare-Präsentation 20 Do’s und Don’ts für Call to Action Buttons zusammengefasst und gibt Empfehlungen für Farbe, Größe, Position, Schrift und Inhalt:

So viel zur Theorie

Im Blog von Michael Lykke Aagaard findet man Ergebnisse aus zehn A/B-Tests, die an konkreten Beispielen zeigen, welche Anpassungen in der Praxis zu einer höheren Konversion geführt haben. Wie die Tipps von HupSpot zeigen auch die Case Studies, dass Farbe von Button und Schrift, Stilelemente im Button sowie Größe und Position die Konversionen beeinflussen können. Außerdem wird deutlich, dass schon kleine inhaltliche Änderungen eine große Wirkung haben können:
  • Perspektivwechsel: Schon der Austausch eines Wortes („dein“ zu „mein“) kann die Konversionsrate deutlich steigern.
  • Mehrwert und Relevanz: Auf den richtigen Inhalt kommt es an.
  • Link zu Detailinformationen: Der Nutzer muss wissen, worauf er sich einlässt.

Natürlich können die Ergebnisse nicht verallgemeinert werden und sind nicht zuletzt abhängig von Corporate Design sowie Aufbau und Inhalt des Newsletter. Doch es wird wieder einmal mehr als deutlich: A/B-Test lohnen sich! Worauf warten Sie also noch?

Personalisierung einmal anders

Die typischen Personalisierungsmöglichkeiten im E-Mail-Marketing sind gemeinhin bekannt: Anrede, Betreffzeile, Bildpersonalisierung, personalisierte Inhalte oder Trigger-Mails. Aber damit ist das Potenzial noch längst nicht erschöpft – Nico Zorn stellt im EmailMarketingBlog das Beispiel Photobox vor.

Absender und Call-to-Action personalisieren

Die erste dort eingesetzt Individualisierung ist der Absender. Neben der Betreffzeile und ggf. dem Preheader fällt er dem Empfänger im Posteingang als erstes ins Auge. Steht hier neben dem Unternehmen oder Produkt zusätzlich der Name des Empfängers („Produktname“ für „Empfängername“) oder der Wohnort („Produktname“ in „Wohnort des Empfängers“) sollte die Aufmerksamkeit des Abonnenten gesichert sein. Der zweite Ansatz ist die Personalisierung von Buttons. Lautet die Beschriftung eines Call-to-Action beispielsweise „10 € Rabatt für Name“ wird ein Gefühl von Exklusivität vermittelt.

Entscheidend bei jeder Art der persönlichen Anrede ist zum einen die korrekte Schreibweise des Namens, zum anderen aber auch eine angemessene Ansprache –  je nach Kontext per „du“ oder „Sie“.

ASCII-Art als Eye-Catcher im Posteingang

Zwar keine direkte Personalisierung, aber dennoch eine Möglichkeit um sich über die Betreffzeile im Posteingang hervorzuheben, ist die Verwendung von ASCII-Art. Es müssen ja keine Herzen oder Smileys sein – aber vielleicht lässt sich ein kreativer und thematisch passender Einzeiler finden. Einfach einmal googeln und staunen.

Links nicht links liegen lassen

Über den perfekten Call-to-Action Button haben wir bereits berichtet. Aber letztendlich ist auch ein Call-to-Action nichts anderes als eine Verlinkung. Diese kann zum einen in Button-Form umgesetzt sein, aber auch in vielen anderen Varianten, wie beispielsweise Links im Fließtext, verlinkte Bilder oder verlinkte Bildüberschriften. Welche Darstellung der Links am geeignetsten ist, hängt natürlich von der Darstellung des Newsletters ab. Grundsätzlich gilt jedoch:

  • Verlinkungen müssen als solche erkennbar sein. Unterstrichene Passagen sind als Links gelernt, farbliche Hervorhebungen unterstützen. Zudem haben Links unterschiedliche Zustände, beispielsweise bei Mouse-Over. Viele Nutzer behandeln aber auch Bilder oder Überschriften wie Verlinkungen.
  • Verlinkungen müssen auch mobil funktionieren. Ein Finger ist breiter als ein Mousezeiger, also müssen die Abstände zwischen zwei Links und auch der verlinkte Inhalt selbst entsprechend groß sein.

Je mehr verlinkte Flächen, desto größer die Wahrscheinlichkeit, dass geklickt wird

Ein Newsletter kann sehr gut aus kurzen Teasern zusammengestellt werden. Lange Texte gilt es zu vermeiden, da Empfänger die Inhalte meist nur überfliegen und innerhalb weniger Sekunden entscheiden, welche Themen sie interessieren. Bei der Gestaltung mit Teasern gilt:

  • Pro Teaser sollte es thematisch nur einen ausgehenden Link geben.
  • Dieser eine Link sollte über möglichst viele Wege klickbar sein, also durch Verlinkung von Teaserbild, Überschrift und Call-to-Action. Unterschiedliche Leser klicken unterschiedliche Dinge – und alle Wege sollten zum Ziel führen.
  • Textpassagen im Fließtext sollten eher nicht verlinkt werden. Viele Nutzer nehmen diese gar nicht wahr und mobil sind sie schwer zu „klicken“.

Vor jedem Versand gilt es natürlich die Verlinkungen noch einmal zu testen. Viele Newsletter-Systeme übernehmen dies automatisch und überprüfen, ob die angegebenen URLs auch erreichtbar sind.

Nach dem Klick ist vor dem Klick – Landingpages nicht vergessen

Natürlich endet die Optimierung nicht mit dem Klick auf den Link – auch auf die nachfolgende Landingpage sollte ein entsprechendes Augenmerk gelegt werden, sowohl inhaltlich als auch optisch. Und sofern der Newsletter für mobile Endgeräte optimiert ist, gilt gleiches auch für die Landingpage. Im Idealfall ist auch die verlinkte Seite für mobile Endgeräte angepasst, sodass die Usability nicht nach Verlassen des Newsletters endet. Dies schmälert die Chance auf einen erneuten Klick aus dem Newsletter heraus bzw. sogar dessen mobilen Aufruf.

Responsive mobile E-Mail-Design

E-Mails werden auf immer unterschiedlicheren Endgeräten abgerufen, vor allem mobil. Wissen wir! Für die Darstellung auf Smartphones und Tablets gelten besondere Gestaltungsrichtlinien. Wissen wir! Nutzer sind mit der praktischen Umsetzung bislang aber noch eher unzufrieden. Wissen wir auch! Aber haben wir uns mit dem Thema schon wirklich in der Praxis auseinander gesetzt? Ganz ehrlich? Wahrscheinlich eher nicht.

Dynamische mobile E-Mails versenden

Wäre es da nicht praktisch, wenn sich die E-Mail live an das Endgerät anpassen würde, auf dem sie gerade geöffnet wird? Das hat sich auch die artegic AG gedacht und stellt erstmals dynamische E-Mails vor, die sich von selbst und live anpassen, je nachdem, ob sie auf einem PC oder auf einem mobilen Endgerät, wie Tablet oder Smartphone, geöffnet werden.

Doch dem Nutzer bietet es natürlich wenig Mehrwert, wenn der Newsletter lediglich auf die Breite seines Smartphones optimiert ist und die Buttons viel zu klein zum antippen sind. Auch hier hat artegic vorgesorgt: Die Response-Elemente werden in Form und Größe verändert und optimal auf die Touchscreen-Bedienung angepasst – und zwar nicht nur äußerlich, sondern auch inhaltlich! Da die Endgeräte genau identifiziert werden können, ist es möglich, auch die Linkinhalte anzupassen. So erhalten iPhone-Nutzer beispielsweise einen Link zu einer App oder es wird je nach Endgerät auf die mobile oder „normale“  Webpräsenz geleitet.

Wir sind gespannt, wie es mit dieser Entwicklung weitergeht!

Der perfekte Call-to-Action Button

Die Bedeutung des Call-to-Action Button in einem Newsletter liegt auf der Hand, denn mit dem Aufruf zum Klick verfolgen Versender in der Regel ein ganz bestimmtes Ziel. Damit der Empfänger tatsächlich dazu bewegt wird, diesen Button zu klicken, gibt es speziell bei HTML-E-Mails einiges zu beachten. Er birgt nicht nur großes Potenzial, man kann bei der Umsetzung auch einiges falsch machen. Zu berücksichtigen sind nicht nur offensichtliche Dinge wie Farbe, Kontrast, Form, Größe, Wortlaut und Platzierung des Buttons. Auch folgende, weniger offensichtliche Dinge sollten bedacht werden:

  • Allgemeinverständliche Icons können die Klickrate des Call-to-Action Buttons erhöhen, unbekannte Icons den Nutzer dagegegen verwirren.
  • Nicht mit zu vielen, gleichgestalteten und nah beieinander liegenden Call-to-Action Buttons arbeiten.
  • Fallback-Lösung bei Bildunterdrückung entwickeln. Wie man Call-to-Action Buttons auch im Falle von Bildunterdrückung ansprechend und aufmerksamkeitsstark gestalten kann, darüber haben wir im Blog bereits berichtet.
  • Buttongröße für die Mobile-Optimierung berücksichtigen.
  • A/B-Tests durchführen.
  • Nach dem Klick ist vor dem Klick: Nutzer auf einer entsprechenden Landingpage auffangen.

Litmus hat in einer Infografik, die wichtigsten Dos und Don’ts zusammengefasst.

 

 

Bildunterdrückung: Call-to-Action Button aus HTML-Tabelle

Der erste Schritt ist geschafft, der Abonnent hat die E-Mail geöffnet. Der erhoffte zweite Schritt ist oft das Klicken eines Call-to-Action Button. Dieser kann beispielsweise zu weiteren Informationen führen, eine Bestellung oder den Download eines Whitepapers auslösen.

Um die Aufmerksamkeit des Lesers zu fesseln und ihn zum Klicken zu bewegen, bliebt nicht viel Zeit. Ein aufmerksamkeitsstarker Call-to-Action Button muss her, um das Interesse des Nutzers beim Scannen der E-Mail zu wecken. Neben der optimalen Platzierung im sichtbaren Bereich des Newsletters spielt dabei vor allem die Optik eine entscheidende Rolle. In der Regel wird der Button deshalb als Grafik eingebunden.

Was tun, wenn das E-Mail-Programm des Empfängers die Bildanzeige unterdrückt?

Die Lösung sind Button-Layouts die aus HTML-Tabellen konstruiert werden. Vereinfacht gesagt: Der Button entspricht einer Tabelle mit genau einer Zelle. Mit HTML und CSS kann man den Button dann noch etwas gestalten. Da jede Tabellenzelle einen Bildpunkt darstellen kann, lassen sich neben einfarbigen Buttons auch optische Trennlinien und einfache Muster gut umsetzten.

Das Problem der Bildunterdrückung scheint gelöst, denn theoretisch lässt sich so ein ganzes Logo oder eine Grafik als Tabelle gerastert und für den Empfänger sofort sichtbar abbilden. Leider funktioniert dies eher in der Theorie, denn das Bild wird nicht nur oft pixelig angezeigt, sondern die Dateigröße steigt durch die Tabellen auch enorm an. Für Call-to-Action Buttons aber sicherlich ein Ansatz,  den man einmal getestet haben sollte.

Eine Anleitung mit exemplarischem Quellcode gibt es im Campfire-Blog.

Mobile E-Mail-Marketing optimieren

Wie wir berichtet haben, sind laut einer Studie immer noch der Destop-PC bzw. das Notebook die beliebtesten Geräte zum Abrufen von E-Mails. Smartphones und Tablets sind aber natürlich weiter auf dem Vormarsch. Letztere haben laut einer Google-Studie ihren Haupteinsatz beim Checken von E-Mails, in der Regel parallel zu anderen Tätigkeiten, wie z.B. Fernsehen.

Bei der Darstellung von E-Mails und Newslettern auf mobilen Endgeräten besteht aber in der Regel noch großer Optimierungsbedarf. Christopher Linnemann von „Do You Mail?“ hat daher fünf Dinge zusammengestellt, die beim Mobile E-Mail-Marketing beachtet werden sollten:

  1. Große Schriftgröße wählen: 14px im Inhalt und 22px für den Titel
  2. Auflösung auf eine Breite von 320 px bis 550 px optimieren
  3. Call-to-Action Buttons auffällig, eindeutig und gut erreichbar platzieren
  4. „Touching Errors“ durch Optimierung der Abstände zwischen den Artikeln/Absätzen und Größe der Call-to-Action Buttons vermeiden
  5. keine Navigationsleisten verwenden