Zum Hauptinhalt springen Zur Suche springen Zur Hauptnavigation springen

Was eine gute Call-to-Action ausmacht

von: | 02.02.2025

Der Begriff Call-to-Action (kurz: CTA) bedeutet übersetzt "Handlungsaufforderung", also die Aufforderung an den Besucher der Seite, eine bestimmte Handlung oder Aktion auszuführen. Das Ziel dahinter ist es, dass er mit der Seite interagiert, beispielsweise indem er sich für den Newsletter anmeldet, ein Formular ausfüllt oder ein Produkt in den Warenkorb legt. Ein Call-to-Action Button hingegen ist das klickbare, meist farbige Element zur Durchführung der Handlung.

Aus welchen Elementen kann eine Call-to-Action bestehen?

Eine Call-to-Action kann ein Link, eine Schaltfläche oder eine Kombination aus einer Überschrift, einem Text und einer Schaltfläche in einer zusammenhängenden Box sein, gegebenenfalls auch mit Eingabefeldern. Der Text für den Link oder die Schaltfläche könnte dazu beispielsweise "Jetzt kaufen" lauten. Ein Beispiel für eine zusammenhängende Box findet man häufig bei den Teasern von Blogartikeln.

Welche Kriterien sollte eine Call-to-Action erfüllen?

Generell sollte eine Call-to-Action nur eine einzige Handlung, die der Besucher ausführen soll, enthalten. Außerdem sollte man klar formulieren, was er genau zu tun hat und dies mit einfachen Worten. Es kann auch hilfreich sein, dem Besucher den Nutzen zu kommunizieren, was er also im Gegenzug dafür bekommt. Zum Beispiel: "erhalte kostenlose Updates". Bei der Anzahl an Wörtern und Zeichen sollten es nicht mehr als vier oder fünf Wörter und 60 Zeichen seinMehr Aufmerksamkeit kann auch durch eine künstliche Verknappung wie "Jetzt kaufen!" oder "Schnell zugreifen!" entstehen, da diese die Angst auslöst, etwas zu verpassen.

Auch optisch gibt es einiges zu beachten: zuallererst sollte eine passende Farbe gefunden werden, die das Allgemeinbild nicht stört, sich aber trotzdem farblich abhebt, um eine Signalwirkung zu entfalten. Dies kann man beispielsweise mit einem farblichen Kontrast zu den umgebenden Inhalten erreichen. Außerdem sollten die Bedienflächen ausreichend groß sein, damit sie gut bedienbar sind, vor allem auf dem Smartphone oder Tablet. Sie sollten also groß genug sein, damit der Besucher sie bequem bedienen kann, aber nicht so groß, das es zu aufdringlich wirkt. Empfehlenswert ist eine Mindestgröße von 44 x 44 Pixeln. Wichtig ist auch, dass der Link oder die Schaltfläche in Form und Stil so aussieht, dass der Besucher diese als solches erkennt.

Wann setzt man einen Link und wann eine Schaltfläche ein?

Ein Hyperlink, der oft mit "Link" abgekürzt wird, ist ein Verweis auf eine andere (interne oder externe) Seite oder auf ein Dokument im Internet und verkettet zwei Dinge miteinander. Das HTML-Element für einen Link ist das a-Tag, das mindestens aus einer URL und einem Text besteht. Außerdem kann er über das target-Attribut im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden. Ein optische Unterscheidung zwischen einem aktiven (:active), noch nicht besuchten und besuchten Link ist (:visited) ebenso möglich. Die Gestaltung des Linktextes sollte sich vom Rest des Textes unterscheiden, sodass für den Leser deutlich wird, dass der Link anklickbar ist. Damit der Text des Links, den Screenreader vorlesen, barrierefrei ist und auch für Suchmaschinen relevant wird, sollte er auch ohne den umgebenden Kontext verständlich sein, weshalb auf "hier", "Details" und "Mehr erfahren" verzichten werden sollte. Damit der Leser sofort erkennen kann, wohin ihn der Link führt, empfiehlt es sich, das Linkziel zu beschreiben und stattdessen beispielsweise "Mehr über Slider erfahren" zu nutzen. Auch das Setzen eines title-Attributs oder des ARIA-Attributs aria-label kann für Screenreader und Suchmaschinen hilfreich sein.

Im Gegensatz dazu steht die Schaltfläche, die eine Aktion auf derselben Seite auslöst und die Seite verändert, beispielsweise indem sie ein Formular absendet oder ein Dialog öffnet. Das HTML-Element für die Schaltfläche ist das button-Tag. Die Aktion wird über das type-Attribut festgelegt, "submit" sendet beispielsweise das Formular ab, "reset" setzt es zurück und der Wert "button" sagt aus, dass es eine anklickbare Schaltfläche ist. Die Schaltfläche sollte farblich hervorgehoben werden und sich von der Hintergrundfarbe des Bereichs, in dem sie platziert wurde, unterscheiden. Sollte dies nicht möglich sein, kann auch eine dickere Umrandung verwendet werden.

Auch wenn für eine Aktion im Grunde beide Elemente verwendet werden können, sollte man im Sinne der Barrierefreiheit das jeweils semantisch korrekte verwenden, da sich zum Beispiel die Tastenkombinationen (Shortcuts) beider Elemente unterscheiden.

Wie erstelle ich in Shopware 6 eine Call-to-Action?

In Shopware 6 steht bei jedem Text-Element im TinyMCE die Funktion "Link" zur Verfügung. Darüber ist es möglich, einen vorher markierten Text auf eine URL, ein Produkt, ein Kategorie, eine Datei, eine E-Mail-Adresse oder eine Telefonnummer verweisen zu lassen. Das Linkziel kann man im Anschluss beim Feld "Link zu" festlegen oder auswählen. Insofern der Link in einem neuen Tab geöffnet werden soll, muss dazu nur der Schalter "Link in neuem Tab öffnen" aktiviert werden. Soll der Link nicht als Link dargestellt werden, sondern als Schaltfläche in der selbst festgelegten Primär- oder Sekundärfarbe, kann man dies über den Schalter "Link als Button darstellen" und die Auswahl von "Primär", "Sekundär", "Primär (klein)" oder "Sekundär (klein)" umsetzen. Über die Schaltfläche "Hinzufügen" wird der markierte Text dann entsprechend verlinkt. Um bei einem Link das title-Attribut oder das ARIA-Attribut aria-label zu setzen, kann die Funktion "Bearbeitungsmodus wechseln", die über das Icon </> im TinyMCE erreichbar ist, genutzt werden.

Für die Umsetzung einer Schaltfläche in Form eines button-Elements reicht es meist nicht aus, diese nur im HTML-Code zu hinterlegen, da beim Anklicken der Schaltfläche oft auch eine Aktion ausgeführt werden soll (beispielsweise in Kombination mit einem Eingabefeld die Anmeldung zu einem Newsletter). Deshalb wird in Shopware 6 eine Schaltfläche in den meisten Fällen über den CMS-Block "HTML" aus der Block-Kategorie "HTML" integriert, da man bei diesem unter anderem auch JavaScript-Code hinterlegen kann. Insofern das Element aber auf mehreren Seiten zum Einsatz kommt, lohnt es sich oftmals, dafür ein eigenes CMS-Element zu erstellen oder zumindest den JavaScript- und CSS-Code im eigenen Theme abzulegen