Der Shopify Blog

13 Wege, um die Conversion Rate deines Onlineshops durch gute CTAs zu verbessern

CTA Call to Action

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 in deinem Onlineshop besonders 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 mehr Conversions zu 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, 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. Diese klaren Botschaften und Handlungsaufforderungen erscheinen meist in Button-Form und werden Call-to-Action genannt.

Wie kann ich meinen Onlineshop durch CTAs verbessern?

Gute Online-Stores müssen so aufgebaut sein, dass sie den Kunden ohne Umschweife zum nächsten Schritt führen. Dabei ist der Standardablauf, im E-Commerce auch Funnel genannt, folgender:

>> Ansehen der Produktseite
>> Varianten auswählen (optional)
>> Zum Warenkorb hinzufügen
>> Nach anderen Produkten suchen (optional)
>> Im Checkout Versanddaten eintragen
>> Im Checkout Zahlungsdaten eintragen à
>> Bestellung überprüfen
>> Zahlen

    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.

    Lesetipp: Die 10 wichtigsten Gründe für Warenkorbabbrüche und was du dagegen tun kannst, findest du hier.

    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. 

    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:

    Call to Action verstehen

    Dazu wurden aktuell spannende Experimente auf der Produktseite von Snocks durchgeführt, die sehr überraschende Ergebnisse lieferten.

    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 Umsetzung mit vielen verschiedenen Varianten und einer guten Größe des ATC vor 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 Produktseite zu 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

    Sticky Call to Action 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:

    Einsatzleiter in der Feuerwehr vergleichen - im Gegensatz 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.

    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 so selbsterklärend und so deutlich auf den nächsten Schritt hinweisen muss, dass du auch 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:
    Call-to-Action-Button-Tipps

    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 die erste annehmbare Option. Diese Strategie nennt man auch Satisficing: 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 Website einzusetzen. 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 bekomme und was 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. 

      Die Tests und Tipps zu CTAs im Checkout

      In dem unten aufgeführten Bild fällt sofort der CTA „Weiter zum kostenlosen Versand“ auf. Kostenlos ist 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-Tests geben wir in diesem Guide.

      Wir fassen zusammen:

      Auf jeder Seite muss ein klarer CTA vorhanden sein. Dieser muss für den Kunden gut erkennbar sein und sich von anderen Inhalten hervorheben.

      Es sollten verschiedene Varianten getestet 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.


      Which method is right for you?Autor: Fabian Gmeindl ist Geschäftsführer bei Drip 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 auf LinkedIn.

      Themen: