Praxisguide

Produktdetailseiten: Call-to-Action

Der Call-to-Action gehört zu den notwendigen Elementen einer Produktdetailseite. Ohne ihn gibt es keinen Kauf. In diesem Praxisguide antworten und diskutieren wir deshalb alle wichtigen Fragen rum um diesen Button.

Neben der Beschriftung erläutern wir auch Größe, Farbe, Platzierung, Form und das Umfeld des Call-to-Actions.

1. Einleitung

Die Produktdetailseite ist einer der wichtigsten Seiten eines Online-Shops. Die Kaufentscheidung für oder gegen ein Produkt wird in den meisten Fällen hier getroffen.

In einer Vielzahl von an Praxisguides helfen wir Ihnen deshalb Ihre Produktdetailseite zu optimieren.

Der Call-to-Action gehört zu den notwendigen Elementen einer Produktdetailseite. Ohne ihn gibt es keinen Kauf. In diesem Praxisguide antworten und diskutieren wir deshalb alle Fragen rund um Call-to-Actions auf Produktdetailseiten:

  • Welche Beschriftung ist für Call-to-Actions passen (2. Kapitel)?
  • Wo sollten Call-to-Actions platziert werden und welche Größe ist geeignet (3. Kapitel)?
  • Welche Farben eignen sich (4. Kapitel)?
  • Auf was gilt es bei der Wahl der Form zu achten (5. Kapitel)?
  • Welche Elemente können in der Nähe des Call-to-Actions platziert werden (6. Kapitel)?

Einige weitere Hinweise:

(1) Der Fokus liegt im Folgenden auf dem „In den Warenkorb“-Button. Wir thematisieren jedoch auch sekundäre Call-to-Actions wie:

  • Auf den Merkzettel
  • Produkt vergleichen
  • Bewertung abgeben
  • Produkt sofort kaufen

(2) Die Bedeutung des Call-to-Actions auf Produktdetailseiten sollte nicht überschätzt werden. Um dies zu verdeutlichen, ist diese Unterscheidung zweier Aufgaben eines Call-to-Actions hilfreich:

  1. 1.Er sollte Besucher zur Handlung aufzufordern.
  2. 2.Er sollte Besuchern vermitteln, was sie nach einem Klick auf den Button erwartet.

Beide Aufgaben zu erfüllen, ist auf Landingpages wichtiger als auf Produktdetailseiten:

  • Nach vielen Jahren Erfahrung im Online-Shopping haben Besucher gelernt, dass auf Produktdetailseiten Produkte in den Warenkorb gelegt werden können. Die zweite Aufgabe fällt also weg.
  • Eine Handlungsaufforderung ist jedoch trotzdem sinnvoll.

(3) Sobald Sie Ihre Produktdetailseite „auf Vordermann“ gebracht haben, sollten Sie diese durch von A/B-Tests weiter verbessern. Unser Leitfaden Produktdetailseite zeigt Ihnen Schritt für Schritt, wie dies am besten funktioniert.

2. Beschriftung des Call-to-Actions

2.1 Hintergrund: verschiedene Hürden

Etwas theoretischer Hintergrund. Call-to-Actions erfüllen verschiedenen Aufgaben mit stark unterschiedlichen Wertigkeiten und Wichtigkeiten. Es lohnt daher, sich über die Bedeutung des jeweiligen Elements Gedanken zu machen.

Folgendes „Hürdenmodell“ beschreibt die Sicht des Besuchers auf Call-to-Actions und dient dazu, unnötig hohe Hürden zu erkennen. Gestalten Sie die Hürde nicht höher als sie tatsächlich ist, sondern gestalteten Sie passende Call-to-Actions.

2.1.1 Kleine Hürde

Die meisten Call-to-Actions dienen dazu, den Besucher über eine kleine Hürde zu führen. Eine kleine Hürde zeichnet sich insbesondere dadurch aus, dass der Besucher keinerlei Verpflichtung eingeht und er keinerlei Daten eingeben muss, um die Hürde zu passieren.

2.1.2 Mittlere Hürde

Während man die kleine Hürde zwar häufiger findet, ist die mittlere Hürde diejenige mit der insgesamt größten Bedeutung. Es ist von einer mittleren Hürde auszugehen, wenn der Besucher zwar keine finanzielle Zusage macht, jedoch eine aufwendigere Aktion durchführen oder Daten angeben muss.

Prominente Beispiele sind die Bestellung eines Newsletters oder die Angabe von persönlichen Daten während eines Bestellprozesses.

2.1.3 Große Hürde

Die große Hürde ist meist mit einer finanziellen Zusage verbunden oder ein Schritt auf dem direkten Weg dorthin. Der häufigste Fall ist das Absenden einer verbindlichen Bestellung.

2.2 Anwendung auf Produktdetailseiten

Call-to-Actions auf der Produktdetailseite sollten immer eine kleine Hürde darstellen. Der „In den Warenkorb legen“-Button sollte daher nicht mit „Jetzt kaufen“ oder „Jetzt bestellen“ beschriftet werden. Sinnvoller ist es in diesem Fall die Hürde durch „In den Warenkorb legen“ niedrig darzustellen und somit die Hemmschwelle des Besuchers, die Aktion auszuführen, herabzusetzen.

Weitere sinnvolle Alternativen sind:

  • „In den Warenkorb legen“
  • „In die Einkaufstasche“
  • „In den Einkaufswagen“

Ein historisches Beispiel. Vor vielen Jahren hat Amazon noch unter den „In den Warenkorb legen“-Button den Hinweis „you can always remove it later“ platziert.

Heutzutage ist dies wahrscheinlich nur auf Online-Shops mit Besuchern ohne Online-Erfahrung notwendig. Im Jahr 2015 wird „In den Warenkorb legen“ als niedrige Hürde erkannt.

Weiterbildung per eLearning.

Werde zum Spezialisten für eCommerce-Optimierung
  • Branchenbekanntes Zertifikat
  • Zeitlich unlimitierter Zugang zu allen Lerninhalten
  • Zu jeder Zeit und an jedem Ort lernen

3. Position und Größe

Bei der Größe und Position des Call-to-Actions sollte sichergestellt sein, dass er klar erkennbar ist, jedoch trotzdem nicht zu dominant auf der Website angezeigt wird.

Dies erreicht man mithilfe einer durchdachten visuellen Hierarchie. Dieser Begriff bezeichnet unter anderem die Position, Orientierung, Größe, Farbe sowie Form von grafischen Elementen. In den folgenden Kapiteln zeigen wir, wie dies funktionieren kann. Eine ausführliche Einführung finden Sie hier.

3.1 Klar erkennbar

Wie kann der Call-to-Action klar erkennbar gemacht werden?

Erstens sollte der primäre Call-to-Action-Button oben auf der Produktdetailseite platziert werden. Besucher sollte nicht lange suchen müssen, um ein Produkt in den Warenkorb zu legen.

Zweitens sollte der primäre Call-to-Action auch der größte Button auf der Produktdetailseite sein. In diesem Beispiel wird der „In den Warenkorb“-Button klar von den anderen vier abgegrenzt.

Drittens sollte um den Button genug Weißraum gelassen werden. Das obige Beispiel von s.Oliver erfüllt auch diese Bedingung.

3.2 Eine logische Abfolge

Der Call-to-Action sollte zwar klar erkennbar sein – jedoch nicht das prominenteste Element. Im Gegensatz zum Call-to-Action auf Landingpages sollte der Call-to-Action auf Produktdetailseiten nicht sofort ins Auge fallen. Stattdessen sollte zuerst das Produkt, dann erst der Button im Fokus stehen.

Besucher verwenden Produktdetailseiten meistens in einer bestimmten Reihenfolge. Die Position des Call-to-Actions in diese Reihenfolge passen:

  • Zuerst werden Produktinformationen (als Text und/oder Bild) angesehen.
  • Im Anschluss wird die Auswahl der Produktvariante (zum Beispiel Größe, Farbe, Anzahl) vorgenommen.
  • Erst dann wird das Produkt in den Warenkorb gelegt.

Galeria Kaufhof setzt dies gut um. Der Blickverlauf erfolgt hier von links nach rechts.

4. Farbe

So wie Position und Größe sollte auch die Farbe des Call-to-Actions dem Grundsatz folgen, die Schaltfläche klar erkennbar zu machen, aber nicht zu dominant auf der Website darzustellen. Orientieren Sie sich an den folgenden drei Prinzipien, um dieses Ziel zu erreichen.

ConversionBoosting ANALYZE.

Wandle Deine Besucher in mehr Leads & Sales
  • Konkrete Optimierungsvorschläge für mehr Leads & Sales
  • Innovatives Online-Tool zur Conversion-Optimierung
  • Individuelle Analyse Deiner Website

4.1 Hoher Kontrast der Farbe

Eine gelungene Farbwahl des Call-to-Actions hilft, diesen von weniger relevanten Elementen abzuheben. Komplementärfarben und Signalfarben sind dazu gute Möglichkeiten.

Bei Jako-o hilft das Orange, den Button hervorzuheben.

Auf der Produktdetailseite von Lands‘ End geht der graue Button dagegen neben den vielen Feldern zur Größenauswahl unter. Etwas mehr Kontrast hätte dem Call-to-Action gut getan.

4.2 Visuelle Hierarchie durch verschiedene Farben

Betonen Sie den primären Call-to-Action durch eine stärkere Farbe und grenzen ihn dadurch gegenüber sekundären Buttons ab.

Bei Tom Tailor wird zum Beispeil der „In den Warenkorb“-Button auf diese Weise gegenüber dem „Zur Kasse“-Button betont:

Bei Baur wird der „Artikel merken“-Button durch das unauffällige Grau etwas in den Hintergrund geschoben. Zwischen den Button „In den Warenkorb“ und „Sofort kaufen“ gibt es jedoch keine offensichtliche Priorisierung – weder Gelb noch Grün stechen mehr heraus.

4.3 Bestimmte Wirkung der Farbe

Die Farbwahl des Call-to-Actions wird zu einem großen Teil durch das Corporate Design bestimmt. Wenn ein Button nicht in das Gesamtbild passt, bemerken Besucher das (unbewusst) und reagieren möglicherweise negativ auf eine Produktdetailseite. Deshalb gilt: Am Corporate Design orientieren.

Oft gibt es jedoch auch hier Spielraum. Denken Sie dann bei der Farbwahl daran, welche Assoziationen Besucher mit bestimmten Farben haben. Orange wird beispielsweise sehr schnell als Farbe von Discountern wie Aldi wahrgenommen. Diese Assoziationen gelten nicht nur für Buttons, sondern auch die Darstellung von Preisen.

5. Form

Glücklicherweise gibt es heutzutage keine Shops mehr, die mit Textlinks als Call-to-Actions arbeiten. Trotzdem gibt es auch der Form des Buttons etwas zu beachten.

5.1 Als Button erkennbar machen

Achten Sie unbedingt darauf, dass ein Call-to-Action auch als Button – das heißt als etwas Klickbares – erkennbar ist. Dies ist besonders bei weniger internetaffinen Zielgruppen wichtig.

Dies kann durch verschiedene Möglichkeiten erreicht werden.

Dreidimensionalität

computeruniverse

Pfeilsymbol

bücher.de

Einkaufswagen-/Tüte-Symbol

cyberport

s.oliver

Weniger gelungen sind dagegen diese Beispiele:

orsay

HTML-Template mit sogenanntem „Ghost Button“

5.2 Textlinks für sekundäre Call-to-Actions

Während der primäre Call-to-Action unbedingt ein Button sein sollte, können für sekundäre Call-to-Actions auch Textlinks zum Einsatz kommen. Dies hilf weiter, den primären Call-to-Action zu betonen.

Einige Beispiele:

bücher.de

tamaris

Thomann

6. Das Umfeld des Call-to-Actions

Auch die Elemente um den Call-to-Action herum können von Bedeutung sein. Gerade auf Produktdetailseiten gibt es hier Möglichkeiten, die Kaufentscheidung zu unterstützen.

Wir unterscheiden zwischen zwei verschiedenen Positionen für weitere Hinweise:

  • Lead-in: zeitlich vor und damit meistens oberhalb des Call-to-Action
  • Lead-out: zeitlich nach und damit meistens unterhalb des Call-to-Action

6.1 Lead-in

Beim Frontlineshop wird der Lead-in verwendet, um prominent auf den kostenfreien Versand hinzuweisen. Dies soll den letzten nötigen Impuls zu einer Kaufentscheidung geben.

6.2 Lead-out

Der Platz unterhalb des „In den Warenkorb“-Buttons eignet sich sehr gut, um auf entweder auf Vertrauen erweckende Elemente oder Vorteile des Shops hinzuweisen. Schuhtempel24 platziert hier zum Beispiel das Trusted-Shops-Siegel.

ConversionBoosting