Praxisguide
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.
Autor
Julian Kleinknecht
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:
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:
(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:
Beide Aufgaben zu erfüllen, ist auf Landingpages wichtiger als auf Produktdetailseiten:
(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.
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.
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.
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.
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.
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:
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.
Keine Anmeldung notwendig
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.
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.
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:
Galeria Kaufhof setzt dies gut um. Der Blickverlauf erfolgt hier von links nach rechts.
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.
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.
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.
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.
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.
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“
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
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:
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.
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.
