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

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

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

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

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

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

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

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.