Call-to-Actions sind Handlungsaufforderungen, die den Nutzer dazu anleiten sollen, eine bestimmte Aktion auszuführen. Sie sind vielseitig im Einsatz, zum Beispiel als Link am Ende von Textauszügen („Weiterlesen“, „Mehr“, etc.), am Ende der Descriptions in den SERPs („Jetzt mehr erfahren“, „Das finden Sie bei uns!“, etc.) und besonders wichtig sind sie in Adwords-Anzeigen, denn sie sollen die Nutzer neugierig machen und zum Klick auf die Anzeige anregen.
In meinem Artikel möchte ich mich jedoch auf Call-to-Action-Buttons in Onlineshops beschränken, welche letztendlich zum Kauf führen sollen. Wer sich für Call-to-Action-Buttons bei Anmeldungen (z.B. zum Newsletter) oder den Downloadbereich interessiert, der findet hier über 50, allerdings zum Großteil englische, Beispiele.
Im Allgemeinen gilt die Regel: eine Handlungsaufforderung pro Seite. Dies ist zum Teil schwierig umzusetzen, da einzelne Webseiten oft verschiedene Themen gleichzeitig ansprechen und jede Thematik eine Handlung hervorrufen soll. Wichtig ist daher: die Buttons dürfen sich nicht gegenseitig kanibalisieren, widersprechen oder „im Weg stehen“. Um dies zu realisieren sollte man zuerst die primäre Call-to-Action bestimmen, zum Beispiel ein Produkt in den Warenkorb legen. Danach entscheidet man, welche Handlungsaufforderungen sekundär seien sollen, beispielsweise das Produkt auf den Merkzettel zu setzen.
Nun muss man diese Hierarchie nur noch auf der entsprechenden Seite (in diesem Fall Produktdetailseite) deutlich machen. Dies lässt sich realisieren, indem die Buttons unterschiedliche Größen, Schriftgrößen (auch Großbuchstaben) sowie Farben erhalten (der primäre Button bekommt die herausstechendere Farbe je nach eigenem Design). Die Positionen auf der Seite und der umgebende Kontext sind ebenso entscheidend, dabei sollte die wichtige Call-to-Action genügend Abstand zu anderen Elementen haben, um damit noch besser wirken zu können.
Schauen wir uns nun die Handlungsaufforderungen auf den einzelnen Seitentypen von Onlineshops am Beispiel von intersport.at genauer an:
Call-to-Action auf der Startseite
Startseite vom Intersport-eshop
Auf der Startseite des eshops finden sich mehrere Handlungsaufforderungen: Im oberen Bereich ist die Suchfunktion mit „Los“ beschriftet, rechts deuten die Pfeile auf roten Grund (Login und Newsletter-Abo) eine Aktion an, denn der Pfeil findet sich auch bei der primären Call-to-Action im sichtbaren Bereich, dem Slider, wieder, welcher deutlich die Nutzer zu einer Handlung „jetzt kaufen“ auffordert. Weiter unten gibt es noch einen Banner, welcher Sommerhighlights anteasert: „Zu den HIGHLIGHTS“. Am Ende der Seite findet man im Text: „Jetzt online Sportartikel kaufen [..]“.
Die primäre Handlungsaufforderung ist im sichtbaren Bereich platziert, durch den roten Button, der trotz allem zum Corporate Design passt (dies muss nicht immer der Fall sein, um einen aussagekräftigen Button zu haben) deutlich hervorgehoben und weist ausreichenden Abstand zu anderen Elementen auf. Der reduzierte Preis und die Angabe der Prozentzahl, was die Kunden beim Kauf des Artikels sparen würden, sind weitere Eyecatcher.
Call-to-Action auf Oberkategorieseiten
Oberkategorieseite vom Intersport-eshop
Bei Intersport.at wird auch auf den Oberkategorieseiten (im Beispiel: Fitness) ein Slider genutzt, welcher beispielsweise reduzierte Produkte oder Unterkategorien anteasert: „Jetzt kaufen“ bzw. „Zum Shop“. Dies sind die primären Handlungsaufforderungen auf der Seite, denn weitere Call-to-Actions gibt es auf diesem Seitentyp nicht.
Da sich Nutzer, welche Oberkategorien anklicken, erst einen Überblick verschaffen wollen, ist es völlig richtig, eine Übersicht über alle Unterkategorien zu geben und einzelne in einem rotierenden Banner anzubieten. Durch die Beschränkung auf einen Button wird der Nutzer nicht zu sehr abgelenkt und kann sich in Ruhe seine Wunschkategorie auswählen sowie auf die eine Handlung im Slider konzentrieren.
Call-to-Action auf Unterkategorieseiten
Unterkategorieseite vom Intersport-eshop
Auf den Unterkategorieseiten wird auf den Einsatz eines Sliders verzichtet. Hier liegt der Fokus auf der Auswahl der Produkte und der Sortierung der Ergebnisse. Dazu wird der Button „ARTIKEL FILTERN“ dunkel hervorgehoben und mit dem weißen Pfeil auf rotem Grund versehen.
Bei den dargestellten Produkten wird ein „Vergleichen“- und „weitere Farben“-Link angeboten, jedoch kein „Jetzt kaufen“ oder „In den Warenkorb“-Button, da dieser oftmals erst auf den Produktdetailseiten Bedeutung erlangt. Zuvor ist es meines Erachtens sehr selten, dass Nutzer ein Produkt direkt in den Warenkorb legen, ohne sich die Details angesehen zu haben (abgesehen von Nutzern, welche den Shop bereits besucht haben und wissen, was sie wollen).
Man findet also auch hier wieder eine einzige Call-to-Action vor, die den Kunden in seiner Suche nach dem richtigen Produkt unterstützt – gut gemacht!
Call-to-Action auf Produktdetailseiten
Produktdetailseite vom Intersport-eshop
Neben des Eyecatchers des reduzierten Preises wird die entscheidende Call-to-Action „IN DEN WARENKORB“ durch einen großen roten Button hervorgehoben. An Stelle des Pfeils wird nun ein Warenkorbsymbol verwendet. Alle übrigen Handlungsaufforderungen wie zum Beispiel „Merkzettel“, Vergleichen“ oder „Artikel empfehlen“ werden nur als Link ohne farbliche Hervorhebung angeboten.
Unter dem Artikel werden weitere, passende Produkte dargestellt, jedoch ohne Call-to-Action. Das heißt auch auf der Produktdetailseite findet man eine klare und deutlich herausstechende Handlungsaufforderung.
Call-to-Action im Warenkorb
Warenkorb-Hinweis vom Intersport-eshop
Der Wunschartikel wird nun in den Warenkorb gelegt, wobei sich ein Layer öffnet mit dem Hinweis, dass der Artikel in den Warenkorb gelegt wurde. Dabei werden nochmal die wichtigsten Informationen dargestellt, sodass man überprüfen kann, ob man auch die richtige Farbe und Größe ausgewählt hat.
Der Nutzer hat nun zwei Auswahlmöglichkeiten: entweder „WEITER SHOPPEN“ oder „ZUR KASSA“ (da es sich um einen österreichischen Shop handelt ist Kassa hier kein Schreibfehler;-)). Die Buttons sind in der Gestaltung mit der Call-to-Action auf den Unterkategorieseiten („ARTIKEL FILTERN“) identisch. Es stellt sich also die Frage, welche Handlung wichtiger ist und vom Kunden erwartet wird. Da der „WEITER SHOPPEN“-Button die größere Klickfläche aufweist, möchte der Shopbetreiber anscheinend, dass die Nutzer mehrere Produkte kaufen und weiter im Shop suchen.
Der Kunde geht jedoch zur Kasse und findet einen aufegräumten, übersichtlichen Warenkorb vor:
Warenkorb vom Intersport-ehop
Dieser ist auf das Nötigste reduziert: Man findet vertrauensbildende Elemente am linken Rand, einen Fortschrittsindikator im oberen Bereich und alle wichtigen Produktinformationen inkl. Preisen. Es werden keine weiteren Produkte dargestellt, denn diese könnten den Nutzer ablenken, sodass er sich nicht auf den folgenden CheckOut-Prozess konzentrieren kann.
Insgesamt gibt es vier Call-to-Actions im Warenkorb: „WEITER SHOPPEN“ links oben mit einem Zurück-Pfeil, „EINLÖSEN“, um einen Gutschein einzulösen in der Mitte und rechts oben sowie unten die Buttons „ZUR KASSA“, welche durch die rote Farbe am meisten hervorgehoben und damit die primären Handlungsaufforderungen sind. In der Hierarchie folgen der „WEITER SHOPPEN“- und der „EINLÖSEN“-Button, da diese farblich weniger präsent sind.
Call-to-Action im CheckOut-Prozess
CheckOut-Prozess vom Intersport-eshop
Im Bestellprozess sind alle Call-to-Actions mit „ZURÜCK “ oder „WEITER“ beschriftet. Durch die rote Farbgebung wird deutlich, dass der „WEITER“-Button die primäre Handlungsaufforderung ist. Der „ZURÜCK“-Button wird in grau dargestellt. Die Beschriftungen entsprechen jedoch eher dem Standard und stechen durch das Wording weniger hervor. Optimaler wäre es für die Nutzer, wenn die Buttons derart beschriftet sind, dass man weiß, zu welchem Schritt man als nächstes gelangt.
Fazit
Intersport.at ist ein gutes Beispiel für den richtigen Einsatz von Handlungsaufforderungen. Optimierungspotential besteht jedoch zum Beipsiel im Bestellprozess.
Call-to-Actions sind hilfreich, um die Nutzer in die gewünschte Richtung zu lenken. Man sollte jedoch mit den Buttons sparsam umgehen und bei mehreren Handlungen müssen diese durch die Gestaltung, die Position, Größe, Wording und den Kontext priorisiert werden. Am besten lässt sich die Wirkung verschiedener Call-to-Actions durch Testing als Methode der Conversion Optimierung herausfinden.
Eine sehr schöne Darstellung! Man kann wirklich allerhand falsch machen und letzten Endes keine Conversions erzielen. Die richtigen Elemente an der richtigen Stelle, wie am Beispiel des „Jetzt kaufen“-Buttons sehr gut erklärt.
Vielen Dank für das Lob Seb! Ich habe hier bewusst ein gutes Beispiel gewählt, weil es viele Seitenbetreiber gibt, die eben die richtigen Elemente nicht an der richtigen Stelle platzieren und sich auf diese Weise Gedanken machen können, wie es bei ihnen umgesetzt ist. Gespannt bin ich auch vor allem auf das Inkrafttreten der „Button-Lösung“ ab 1.August, wenn der Kaufen-Button implizieren muss, dass man kostenpflichtig bestellt. So muss man statt „Bestellen“ nun „Kostenpflichtig Bestellen“ o.Ä. verwenden. Ich hoffe die Shopbetreiber richten sich entsprechend darauf ein.
Das freut uns aber sehr, dass unser eShop in dieser sehr professionellen Abhandlung zum Thema „Call to Action“ als fast durchgehend positives Beispiel präsentiert wird!
Wir versuchen bei unseren (Weiter)entwicklungen immer die Benutzerfreundlichkeit für unsere (potenziellen) Kunden in den Mittelpunkt zu stellen. Dass uns das auch „von außen“ betrachtet ganz gut gelingt, nehmen wir als Motivation für unsere nächsten Projekte mit, genauso wie die Gedankenansätze zur weiteren Optimierung.
Guten Tag Herr Reisinger,
professionelle Arbeit erkennen auch die Nutzer und macht sich letztendlich auch im Umsatz bezahlt, wenn die Kunden sich auf Ihrer Seite gut zurecht finden und wohlfühlen. Man erkennt bei Ihnen den Fokus auf Benutzerfreundlichkeit, weiter so! Denn oftmals sehen sich Shopbetreiber nur die Verkaufszahlen an und verlieren dabei ihre Kunden aus den Augen und übersehen, dass es vielleicht Hürden bei der Produktauswahl, im Bestellprozess, etc. gibt und sie dadurch einen Großteil potentieller Käufer verlieren.
Sehr gute Erklärung. Werde gleich mal das eine oder andere bei meiner Seite umsetzen.
Diese Seite habe ich nun in meinen Favoriten damit ich hier wieder zurückkommen kann.
Viel Erfolg und viele Besucher.
Vielen Dank! Es freut mich, dass mein Artikel weiterhilft und zum Nachdenken anregt. Wir geben gern unser Wissen weiter und meine Kollegen und ich werden auch in Zukunft weitere Themen aus den Bereichen Conversion Optimierung und User Experience hier veröffentlichen. Dir auch viel Erfolg für deine Seite und viele Besucher!
[…] beispielsweise Intersport.at. Unter folgendem Link habe ich dieses Beispiel näher analysiert: Call-to-Actions richtig einsetzen am Beispiel von intersport.at Tweet Geposted in Conversion Optimierung – Schlagwörter Call-to-Action, Conversion Funnel […]