Ein Unternehmen hat meistens das Ziel, in irgendeiner Weise neue Kunden zu erreichen. Wurde ein Kunde durch eine Anzeige, SEO oder Ähnliches auf die eigene Website geleitet, beginnt jedoch erst die Arbeit!
Der richtige Call-to-Action, kurz CTA genannt, ist deswegen indeinem Onlineshopbesonders wichtig!
Aber wie optimiere ich den Weg, den der Kunde im Onlineshop durchläuft und die Botschaften, die er dabei sieht?
In diesem Beitrag erklärt Fabian Gmeindl, Experte bei Drip Agency, Grundprinzipien, die von ihm erfolgreich beim Onlineshop Snocks getestet wurden und die die Add-to-Cart-Rate von neun auf 17 Prozent steigern konnten. Insgesamt wurden seit März 2019 fast 50 Tests auf Produktebene durchgeführt, um den besten Weg zu einer höherenConversion Ratezu finden.
Die Einblicke und was Onlinehändler und -händlerinnen für ihren Onlineshop lernen können, werden in den folgenden Absätzen Step by Step aufgezeigt.
Ergänzend dazu empfehlen wir den Beitrag"9 Aktionen, die dir helfen, online mehr zu verkaufen".
Was ist ein Call-to-Action und wie sind die Grundprinzipien eines funktionierenden CTA?
Landet ein potenzieller Kunde auf deinem Shopify Store (Was ist Shopify?), muss er direkt wissen, was als nächstes zu tun ist. Im Onlineshop muss der Kunde mit einem Blick verstehen können, wie er ein Produkt kaufen und in welchen Varianten er dieses auswählen kann. Wenn er sich auf der Seite weiterbewegt und in den Checkout kommt, muss eindeutig gekennzeichnet werde, wo schließlich geklickt werden soll, um zu kaufen. Dieseklaren Botschaften und Handlungsaufforderungenerscheinen meist in Button-Form und werden Call-to-Action genannt.
Lesetipp:Alle wichtigen Pflichtangaben zurImpressumspflichtkannst du in diesem Beitrag nachlesen.
Wie kann ich meinen Onlineshop durch CTAs verbessern?
Gute Online-Storesmüssen so aufgebaut sein, dass sie den Kunden ohne Umschweife zum nächsten Schritt führen. Dabei ist der Standardablauf, im E-Commerce auchFunnelgenannt, folgender:
Lesetipp:In diesem Beitrag liefern wir dir zehn Tipps und Maßnahmen zurWarenkorb-Optimierung.
Hierzu möchten wir noch drei grundlegende Tipps zu Call-to-Actions im E-Commerce geben, bevor wir auf die Tests eingehen.
Tipp1: Ein CTA pro Funnel
Kunden sind leicht vom eigentlichen Angebot abgelenkt, deshalb ist es wichtig nicht zu viele Call-To-Actions zu setzen. Weniger ist hier definitiv mehr. Mehrere gleiche CTAs auf einer Seite funktionieren bei Produkten gut, die erklärungsbedürftig sind und eine umfassende Beschreibung haben.
Tipp 2: Gut erkennbare Call-to-Actions
Je klarer die visuellen Hinweise, desto eindeutiger das Signal für den Kunden. Möglichkeiten, um CTAs zu variieren sind Schatten, Farbe, Rahmen und Größe.
Hier findest du wertvolle Tipps für deinenOnline-Shop-Warenkorb, um Kaufabbrüche zu reduzieren.
Tipp 3: Klar kommuniziert
Für den Kunden ist es wichtig zu wissen, wohin der CTA führt, zum Beispiel ob er direkt in den Bezahlvorgang geleitet wird oder vorher in den Warenkorb kommt.Deswegen sind klare Botschaften essenziell.
Lesetipp:Hier geben wir dir weitere Tipps, wie du deineConversion Rate optimierenkannst.
Die Produktseite
"Je wichtiger etwas ist, desto auffälliger soll es sein": Auf der Produktseite zum Beispiel sollte der Fokus auf dem Add-to-Cart-Button und den Varianten liegen, die zur Auswahl stehen. Diesen kann man zum Beispiel mit auffälligeren Farben oder größerer Schrift hervorheben, wie hier im Bild zu sehen:
Dazu wurden aktuell spannende Experimente auf der Produktseite vonSnocksdurchgeführt, die sehr überraschende Ergebnisse lieferten.
Wenn du noch auf der Suche nach Inspiration für deinen Shop bist, beschäftigen wir uns in diesem Blogbeitrag mit der Frage: "Was lässt sich gut verkaufen?"
Die CTA-Erkenntnisse für Produktseiten
Vorab ist zu sagen, dass viele die Sinnhaftigkeit von kleineren Tests zu bspw. unterschiedlichen Farben in Frage stellen. Das Wissen darüber, was am besten funktioniert, erlangt man jedoch nur durch Tests wie diese.
1. Tests zur Farbe des Add-to-Cart-Buttons:
- Die anfängliche Add-to-Cart-Rate (auch ATC-Rate) bei diesem Test lag bei durchschnittlich 11 Prozent.
- Im ersten Test nutzten wir für unseren CTA den Orange-Ton von Amazon. Durch diesen konnten wir die Add-to-Cart-Rate um ca. 30-50 Prozent steigern.
- Im zweiten Test kam der Orange-Ton von Zalando zum Einsatz. Dieser ist etwas auffälliger und knalliger, wie im Bild zu sehen ist. Wir stellten hier eine 10-prozentige Reduzierung der Conversion Rate im Vergleich zu den Anfangswerten fest.
2. Die Größe des Add-to-Cart-Buttons
Auch hier lohnt es sich einfach zu testen und zu sehen, ob sich etwas verändert. Die perfekte Größe den Buttons ist natürlich abhängig vom Seitenaufbau und Theme, aber generell sollte er ca. daumenbreit sein. Diese Richtlinie gilt auch fürs Smartphone, da man dort durch die Verwendung eines Fingers statt einer Maus ungenauer tippt.
- Zu Beginn betrug die Add-to-Cart-Rate 9 %.
- ATC-Button 200px x 50px = 5 % Verbesserung
- ATC-Button 300px x 66px = 8 % Verbesserung
- ATC-Button 400px x 66px = 10 % Verbesserung
3. Der Text im Add-to-Cart-Button
Zwischen 'Zum Warenkorb hinzufügen' oder 'in den Warenkorb legen' besteht ein Unterschied.
Hier besteht eine klare Abhängigkeit vom Preis. Generell haben wir herausgefunden, dass große Marken mit Produkten, die man in einem Geschäft in einen Einkaufswagen legen müsste, auch den Begriff "Einkaufswagen" im Onlineshop verwenden. Verkauft man eher kleinere Produkte, dann wird oft das Wording "Warenkorb" verwendet. Auch das Symbol ändert sich.
Zwischen "Zum Warenkorb hinzufügen" oder "in den Warenkorb legen" besteht ein Unterschied. Der Effekt ist produktabhängig, kann jedoch sehr einfach getestet werden.
4. Preis im Warenkorb anzeigen
Diese Anpassung führte in unserem Test zu keinem positiven Ergebnis, sodass keine weiteren Tests dazu durchgeführt wurden. Eine Vermutung ist, dass eine doppelte Anzeige des Preises den Fokus auf den Preis und nicht auf das Produkt legt.
5. Position
Die Theorie: wenn sich der Add-To-Cart-Button im ersten Sichtfeld der Seite befindet, verbessert sich die Conversion Rate.
In der Praxis ist die Umsetzungmit vielen verschiedenen Varianten und einer guten Größe des ATCvor allem auf dem Handy nicht einfach. Auf der Produktseite von Snocks wurde diese Änderung so vorgenommen, dass User nach einmaligem Scrollen direkt den ATC-Button sehen. Große Auswirkungen auf die Conversion hatte das jedoch nicht. Wahrscheinlich, weil sich der Button auch zuvor beinahe "above the fold" befand und und laut Heatmaps 80 Prozent der User den CTA-Button vor der Änderung schon gesehen haben.
Wir können dennoch empfehlen,den Add-to-Cart-Button im oberen Teil der Produktseitezu platzieren.
Lesetipp:Interesse an 6 weiteren todsicheren Wegen, um die Conversions deiner Produktseiten anzukurbeln?In diesem Beitrag erfährst du mehr.
6. Farbe des Preises
"Den Preisschmerz nehmen" ist hier die Absicht. Das ist keine Voodoo-Technik, sondern eine Taktik, die eigentlich fast alle großen E-Commerce-Stores nutzen. Unsere zwei Techniken hierzu waren:
- Ein sehr dunkles Rot zu nutzen, ähnlich wie bei Amazon. Farbpsychologisch gesehen, wirkt dieser Preis besser.
- Die Reviews direkt neben der Zahl bieten einen Vergleich: 35€ im Vergleich mit 712 Bewertungen ist ein klares Ergebnis.
7. "Sticky" Add-to-Cart-Button
Wie im Bild zu sehen, erscheint die Möglichkeit, das Produkt in den Warenkorb zu legen, wenn der normale ATC-Button nicht mehr im Sichtfeld ist. Der Sticky Cart macht fast zahn Prozent aller Add-to-Carts aus. Eine mögliche Theorie ist, dass der Kunde die Botschaft "in den Warenkorb legen" stets fokussieren kann, da der ATC-Button nie aus dem Sichtfeld verschwindet.
Weniger ist mehr, auch bei Call-to-Actions
Das Problem bei vielen Onlinshops ist, dass Produktseiten, der Checkout und sonstige Seiten immer nach dem Prinzip "Literatur" designt werden. Das bedeutet, dass man davon ausgeht, dass User eine Seite genau studieren, wie ein Buch lesen und dann eine fundierte Entscheidung treffen.
Ein Beispiel aus dem Leben: Gary Klein fand in einem Experiment zum Treffen von Entscheidung bei Feuerwehrleuten folgendes heraus:
在der Einsatzleiter Feuerwehr vergleichen - im通用电气gensatz zu den Annahmen anerkannter Modelle - überhaupt keine Optionen. Sie greifen nach dem ersten vernünftigen Plan, der ihnen in den Sinn kommt, und überprüfen diesen im Geiste schnell auf Probleme. Wenn sie keine finden, haben sie ihren Aktionsplan.
Lesetipp:Wir zeigen dir, wie du eingutes Produkt für den Onlineshopfinden kannst.
Und genau darum sollte der Onlineshop eher nach dem Prinzip "mit 100 Sachen an Werbeplakaten vorbeirauschen“ designt werden, wie Steve Krug in seinem Buch "Don't make them think" schreibt.
Stell dir vor du sitzt in deinem Auto und fährst mit 100 km/h an einem Plakat vorbei, auf dem deine Website dargestellt ist. Erkennst du die Grundstruktur und den wichtigsten Call-to-Action?
Die erste Entscheidung, die deine Kunden treffen können, soll die sein, die zum Kauf führt.
Das heißt ganz einfach, dass dein Onlineshop soselbsterklärendund sodeutlich天改nachsten Schritt hinweisen吵架,你一个uch im Schnellvorbeifahren genau erkennst, was zu tun ist.
Hier im Beispiel der Warenkorb von Snocks. Es wird sofort klar, wo geklickt werden muss, um zu bezahlen:
Die CTA-Erkenntnisse für den Warenkorb
8.Hervorheben des Cart Drawers
Hier haben wir festgestellt, dass es sich lohnt mit Overlays zu arbeiten. Indem man für den Rest des Onlineshops mit einer Transparenz und Unschärfe arbeitet, wird der Fokus auf das eigentlich wichtige Warenkorbfeld (= Cart Drawer) gelegt. Im gezeigten Beispiel wurde ein transparenter Schwarzton für den Bereich der Seite verwendet, der nicht wichtig für den Warenkorb ist. Das Auge fokussiert sich dadurch nicht wie sonst von links oben nach rechts unten, sondern von recht oben nach rechts unten.
9. Einheitliche Farbe aller CTAs die zum Kauf führen
Der Call-To-Action „Jetzt sicher zur Kasse“ nutzt wieder die altbekannte Farbe des ATC-Buttons und zeigt dem Kunden, wo er als nächstes klicken muss. Das hat sich bei uns sehr positiv auf die Conversion Rate ausgewirkt.
10. Wording
In diesem Schritt des Bestellprozesses haben wir herausgefunden, dass dem Kunden Sicherheit wichtig ist. Deshalb haben wir den Text von der Standardfloskel "zur Kasse“ zu "Jetzt sicher zur Kasse" geändert.
11. Shipping Notes entfernen
Diese Methode bringt noch mehr Klarheit in das Warenkorbfeld und eliminiert einen weiteren CTA, der den Kunden vom nächsten Schritt abhalten könnte. Falls diese in deinem Shop noch aktiv sind, lohnt es sich definitiv sie testweise zu entfernen.
Wie benutzten Menschen das Internet?
Der Grund warum Menschen so offensichtlich darauf hingewiesen werden müssen, was als nächstes zu tun ist, lässt sich darauf zurückführen, wie Menschen das Internet benutzen und generell Entscheidungen treffen. Die Annahme, dass Menschen erst alle möglichen Optionen raussuchen und dann eine Entscheidung treffen, ist oft falsch.
In der Realität wählen wir meist nicht die beste Option, sondern dieerste annehmbare Option.Diese Strategie nennt man auchSatisficing: Sobald wir einen Link gefunden haben, der halbwegs so aussieht, als brächte er uns zum Ziel, ist die Wahrscheinlichkeit für einen Klick auf diesen hoch. Das hat auch mit der alltäglichen Eile zu tun, die die meisten von uns umgibt.
Lesetipp:Wann und warum sich Kunden für einen Kauf entscheiden und wie du darauf Einfluss nehmen kannst,liest du hier.
Deshalb ist es so wichtig,so wenig CTAs wie möglich auf einer Websiteeinzusetzen. Die vorhandenen CTAs sollen herausstechen, sodass man sie theoretisch bei einer schnellen Autofahrt auf einem Werbeplakat sehen könnte.
Ein guter CTA ist zum Beispiel: "Café umsonst, nächste Autobahnausfahrt“, weil er zum einen sagt,was ich bekommeundwas ich dafür tun muss. Durch die klare Kommunikation kann ein Autofahrer in unter drei Sekunden klar erkennen, was er bekommt - ohne unnützen Text.
Lesetipp:In 12 Schritten zum eigenen Dropshipping-Store. Wir zeigen dir, wie wir mitShopify Dropshippingin wenigen Tagen einen beachtlichen Umsatz erzielt haben.
Die Tests und Tipps zu CTAs im Checkout
In dem unten aufgeführten Bild fällt sofort der CTA „Weiter zum kostenlosen Versand“ auf.Kostenlosist eines der Schlüsselwörter, das Menschen anspricht und immer sehr gut funktioniert.
Hier haben wir folgende Veränderungen gemacht:
12. Die Farbe des CTA-Buttons
In unserem Onlineshop haben wir den Call-to-Action-Button auf die Standardfarbe aller anderen CTAs geändert. Ganz wichtig ist Konsistenz, da dem Kunden mit dieser Farbe signalisiert wird "Hier geht's weiter". Jeder der wichtigen Call-to-Actions ist deshalb in derselben Farbe und fast in derselben Größe.
13. Wording
"Weiter zum kostenlosen Versand" klingt um einiges besser als "Weiter zum Versand".
Wenn es als Unternehmen möglich ist, kostenlosen Versand anzubieten, dann sollte das auch klar kommuniziert werden.
Falls kostenloser Versand keine Option ist, kann auch der Preis des Versands direkt mit einberechnet werden.
Dazu muss man anmerken, dass der Checkout im Beispielbild nicht perfekt ist. Wir werden in den nächsten Wochen den Express-Checkout testweise entfernen, da es gegen unser Prinzip von nur einem CTA klar verstößt.
CTAs erfolgreich testen
Abschließend möchten wir kurz die verschiedenen Möglichkeiten vorstellen, um solche Methoden zu testen:
- Vergleichen: Beim Vergleichen testet man eine Woche lang eine Variante und in der nächsten Woche eine andere und stellt die Ergebnisse schließlich vergleichend gegenüber.
Vorteil: Die Durchführung ist sehr einfach.
Nachteil: Weil in verschiedenen Zeiträumen getestet wird, können viele Faktoren das Ergebnis verfälschen. - Verschieden Produkt-Themes:Heißt ganz einfach, dass man für zwei verschiedenen Produkte ein anderes Layout erstellt und dann vergleicht.
- Google Optimize:Die wahrscheinlich einfachste und beste kostenlose Option, um A/B zu testen.
- Drittanbieter: A/B-Tests lassen sich mithilfe von verschiedenen Tools durchführen. Hier sind die großen Player Optimizely und VWO.
Lesetipp:Umfassende Tipps für erfolgreiche A/B-Testsgeben wir in diesem Guide.
Wir fassen zusammen:
Auf jeder Seite mussein klarer CTAvorhanden sein. Dieser muss für den Kunden gut erkennbar sein und sichvon anderen Inhalten hervorheben.
Es solltenverschiedene Variantengetestet werden. Vereinfacht gesagt sollte man das, von dem man denkt es sei richtig, mit Tests auf die Probe stellen. Oft steht einem hier die eigene Meinung im Weg.
Es ist wichtig jede Entscheidung durch Tests in Frage zu stellen.
Du willst auch den Schritt gehen und deinen Shop auf ein neues Level bringen? Das ist deine Einladung dir beim Testen die Hände schmutzig zu machen und endlich deine Entscheidungen mit Daten zu hinterlegen.
Wir sind gespannt auf deine Erfahrungen und freuen uns über einen regen Austausch!
Starte deinen eigenen Onlineshop mit Shopify!
14 Tage lang kostenlos testen—keine Kreditkarte erforderlich.
Häufig gestellte Fragen zu Call-to-Actions
Was ist ein Call-to-Action?
Was ist bei der Erstellung von Call-to-Actions zu beachten?
Wie testet man den Erfolg eines Call-to-Action?
Autor:Fabian Gmeindl ist Geschäftsführer beiDrip Agency. Durch langjährige Erfahrung im Bereich E-Commerce befasst er sich jetzt mit der Conversion-Rate-Optimierung von Shopify Stores in Deutschland und dokumentiert seine Tests, Updates und Learnings aufLinkedIn.