Effektive Calls-to-Action für höhere Conversion Rates (Definition und Beispiele)

Nehmen wir mal an, du hast ein wohldurchdachtes Unternehmenskonzept, eine klare Kommunikationsstrategie und nach Monaten der sorgfältigen Vorbereitung bist du endlich bereit, dein Produkt oder deine Dienstleistung zu vermarkten.

Deine Homepage ist live und spiegelt deine Marke perfekt wider. Auch die Gestaltung deiner Landing-Pages, auf denen du Besuchern deine Angebote präsentieren wirst, hast du dir gut überlegt.

Aber hast du auch an deine Calls-to-Action (CTAs) gedacht?

Bei einem Call-to-Action handelt es sich wortwörtlich um eine „Handlungsaufforderung“. Die auffällige Schaltfläche hat die wichtige Aufgabe, Besucher in potenzielle Kunden zu verwandeln.

Design, Positionierung und Botschaft deiner CTAs müssen daher präzise auf die Bedürfnisse und Absichten deiner Besucher abgestimmt sein.

In diesem Leitfaden werden wir zunächst den Begriff Call-to-Action noch einmal genau unter die Lupe nehmen und anschließend seinen Bezug auf das Konzept des „Affordance“ erklären.

Darüber hinaus geben wir dir Tipps für die Erstellung eines perfekten Call-to-Action, mit denen du deine Click Rate und damit auch deine Conversion Rate steigern kannst.

Was ist ein Call-to-Action oder CTA?

Bei einem Call-to-Action (CTA) handelt es sich um anklickbares Element, dessen Ziel es ist, Website-Besucher dazu zu motivieren, eine bestimmte Aktion durchzuführen. Im Allgemeinen leitet diese Schaltfläche Besucher auf eine Seite weiter, auf der sie ein Produkt kaufen oder eine Dienstleistung abonnieren können.

CTAs sind gängige Hilfsmittel in der zweiten Phase der Inbound-Marketing-Methodik, vor dem entscheidenden Moment des Kaufs. Ihr Hauptziel ist daher die Conversion, das heißt die Verwandlung von Besuchern in Leads. Aus diesem Grund ist die Wirkung deiner CTAs ausschlaggebend für die Effektivität deiner Website.

CTAs kommen in allen Formen und Farben vor und es gibt sie als traditionelle Schaltflächen (Buttons), aber auch als Banner, die mit einem Bild oder einem Textlink ausgestattet sind.

Durch den Klick auf einen CTA werden Besucher entweder direkt auf eine Landing-Page weitergeleitet oder es öffnet sich ein Pop-up-Fenster. Dort können Besucher:

• sich auf einer Plattform registrieren;
• ein Whitepaper herunterladen;
• eine Bestellung aufgeben;
• einen Newsletter abonnieren;
• eine Demo anfordern;

Es ist wichtig, dass die mit einer CTA-Schaltfläche verknüpfte Landing-Page eine Erweiterung dieses CTA ist und Besuchern genau die Handlung ermöglicht, zu der dieser CTA sie aufgefordert hat. Ist das nicht der Fall, könnte das zu Verwirrung oder Enttäuschung führen.

CTAs und Affordance

CTA-Buttons müssen zunächst als Schaltflächen erkennbar sein, um wirksam zu sein.

Trifft das auf deine CTAs zu?

Wenn die Schaltflächen deinen Besuchern nicht direkt ins Auge springen und wenn der Button-Text nicht unmissverständlich ist, sind deine CTAs nicht effektiv.

 Diese Fähigkeit eines Objekts, seine eigenen Nutzungsmöglichkeiten zu verdeutlichen, hat einen Namen: Affordance, zu Deutsch auch als „Aufforderungscharakter“ beschrieben.

Abgeleitet von dem englischen Verb „to afford“ (zu Deutsch: „etwas tun können“ und/oder „etwas anbieten“) beschreibt Affordance die Handlungsmöglichkeiten, die durch die Merkmale des Objekts – also in diesem Fall des CTA – gegeben sind.

Der Aufforderungscharakter deiner CTAs sollte also auf den ersten Blick unmissverständlich klar sein.

Um das zu erreichen, sollten sich die Schaltflächen vom Rest der Seite abheben, sich jedoch gleichzeitig den üblichen Designregeln unterwerfen.

Wie bereits erwähnt sollten deine CTAs für Besucher als Schaltflächen erkennbar sein, also musst du wissen, wie Nutzer sich anklickbare Elemente vorstellen.

Wenn du nicht dafür sorgst, dass Besucher anklickbare Elemente leicht von nicht anklickbaren Elementen unterscheiden können, dann gilt selbst das schönste Website-Design als mangelhaft. Nutzer werden dann bestenfalls das Gefühl haben, dass die Website-Navigation recht komplex ist. Schlimmstenfalls sind sie aber vielleicht frustriert oder enttäuscht von der Browsing-Erfahrung auf deiner Website.

Das gilt insbesondere für mobile Erfahrungen. Hier ist Affordance wirklich der einzige Indikator, der Nutzern ermöglicht, klickbare Elemente vom Rest der Website zu unterscheiden.

So gibt es auf Mobilgeräten beispielsweise keinen Mauszeiger, der einem bei der Bewegung über die verschiedenen Website-Elemente anzeigt, welche davon klickbar sind.

Nutzern von Mobilgeräten bleibt also nichts anderes übrig, als die jeweiligen Elemente zu klicken, um herauszufinden, ob es sich dabei um aktive Elemente handelt.

Call-to-Action-Schaltflächen und das mobile Internet

Das Aussehen deiner CTAs wirkt sich demnach entscheidend auf ihre Effektivität aus – vor allem wenn deine Website auf Mobilgeräten aufgerufen wird.

Diese Nutzererfahrung unterscheidet sich natürlich wesentlich von derjenigen auf einem Desktopgerät.

Wenn Internetnutzer in der Bahn, in einem Geschäft, am Strand oder zu Fuß unterwegs sind, haben sie nämlich nicht die Möglichkeit, mit der gleichen Präzision wie mit einer Maus oder einem Touchpad auf Seiten online zu navigieren.

Aus einer Studie von Steven Hoober (Forscher und Berater zum Thema UX) unter 1.333 Personen ging hervor, dass 49 % der mobilen Benutzer ihr Smartphone mit einer Hand bedienen (in 67 % der Fälle mit rechts).

Basierend auf dieser Beobachtung wurde das Konzept der Thumb Zone – also des Daumenbereichs – entwickelt. Die Thumb Zone beschreibt den Bildschirmbereich, in dem antippbare Elemente positioniert werden müssen, damit ein Nutzer sie leicht mit dem rechten Daumen antippen kann. Dabei spielen sowohl die Größe des Geräts als auch die Art seiner Verwendung eine Rolle

Die Benutzerfreundlichkeit eines Mobiltelefons ist zudem stark abhängig von der Generation und dem soziokulturellen Hintergrund des Nutzers.

Du siehst, dass die Nutzerfreundlichkeit deiner CTAs alles andere als nebensächlich ist.

Wie entwerfe ich effiziente CTAs?

Um dir bei der Gestaltung des perfekten CTA zu helfen, haben wir unsere UX-Experten aus Paris, New York, London und München gebeten, ihre Erfahrungen bei der Erstellung von CTAs mit uns zu teilen.

Ihre besten Tipps zur Erstellung effektiver CTAs haben wir hier für dich zusammengefasst.

1.   Gut sichtbare CTAs

Manchmal ist es gut, die Grundlagen noch einmal durchzugehen, also: Ein effektiver CTA muss zunächst einmal sichtbar sein.

Das bedeutet:

• CTAs müssen im direkt sichtbaren Bereich der Webseite positioniert werden. Das gilt vor allem für Buttons mit Texten wie „Zum Warenkorb hinzufügen“.
• CTAs müssen farblich mit dem Rest des Seitendesigns kontrastieren.
• CTAs müssen von ausreichend Whitespace umgeben sein, damit ihr interaktiver Charakter besser hervorgehoben wird.
• Wenn du mehrere CTAs auf einer Webseite verwendest, sollte der primäre CTA größer und farblich auffälliger sein als die sekundären.

Wichtig ist zudem, dass du dich in deine Nutzer hineinversetzt. Überlege dir, in welchem Bereich deiner Webseite sie CTAs erwarten würden. Genau dort solltest du die Schaltflächen dann positionieren. Einen Warenkorb-Button würden viele zum Beispiel oben rechts am Bildschirmrand suchen.

Zu guter Letzt möchten wir auch noch auf einige bewährte Designmethoden für CTAs hinweisen. Die folgenden CTA-Designs haben sich immer wieder als effektiv herausgestellt:

• Einfarbige Schaltflächen mit rechteckigen Kanten
• Einfarbige Schaltflächen mit abgerundeten Kanten
• Einfarbige Schaltflächen mit Schatten
• Ghost-Schaltflächen

2.   Leicht erkennbare CTAs

CTAs müssen nicht nur gut sichtbar, sondern auch als solche erkennbar sein (siehe auch weiter oben das Konzept des Affordance).

Ein gut erkennbarer CTA:

• ist zweckbetont, wie z. B. ein Hamburger-Symbol für die Menüauswahl, ein Herz oder ein Daumen für eine „Gefällt mir“-Angabe, ein Einkaufswagen, um zur Produktauswahl zu gelangen usw.;
• passt hinsichtlich Farbe und Design zum Grafiklayout und Farbschema der Seite;
• ist mit Hover-Effekt ausgestattet (auf Desktopgeräten).

3.   CTAs mit einer klaren Botschaft

Der Text deiner CTAs – sofern sie Text enthalten – muss aussagekräftig sein.

Der Text:

• soll unmissverständlich die Funktion der Schaltfläche erklären (sofern möglich),
  • „Bestellen“, „Bestätigen“, „Löschen“ ;
• soll Besuchern wenn möglich einen Vorteil bieten,
  • „Laden Sie unseren kostenlosen Leitfaden herunter“, „Profitieren Sie von einem kostenlosen Probemonat“ usw.;
• soll mit dem Inhalt der Webseite oder des Pop-up-Fensters, zu der/dem Nutzer weitergeleitet werden, übereinstimmen;
• kann ein Gefühl der Dringlichkeit beim Nutzer erwecken, indem beispielsweise auf die begrenzte Verfügbarkeit eines Angebots hingewiesen wird.

4.   Klickbare CTAs

Wie bereits erwähnt können CTAs nur richtig effektiv sein, wenn Nutzer sie problemlos anklicken bzw. antippen können.

Eine Studie des Massachusetts Institute of Technology Touch Lab belegte, dass die durchschnittliche Breite eines Fingers zwischen 10 und 14 mm und die der Fingerspitze zwischen 8 und 10 mm liegt. Die Mindestgröße eines klickbaren Objekts sollte daher idealerweise 10 mm x 10 mm betragen.

Du siehst, dass hier Präzisionsarbeit gefragt ist.

5.   CTAs mit Feedback

Zu guter Letzt solltest du sicherstellen, dass dein CTA-Design Nutzern Feedback gibt.

Damit meinen wir, dass der Klick auf einen CTA zum Beispiel mit einem visuellen oder einem akustischen Signal bestätigt wird.

Wird ein Klick nicht bestätigt, denkt der Nutzer unter Umständen, dass seine Handlung nicht vom Gerät oder der Website registriert wurde, woraufhin er dann wahrscheinlich versucht, die Aktion noch einmal durchzuführen.

Indem du ein Feedback-System implementierst, ersparst du deinen Besuchern, dass sie ihre Handlungen unnötig wiederholen müssen.

…………………………………………………………………………………………………………….

Nun da du die Regeln der CTA-Erstellung kennst, möchtest du bestimmt gleich eigene CTAs auf deiner Website oder in deiner App erstellen.

Denke aber daran, dass die Effektivität deiner CTAs auch von deiner jeweiligen Zielgruppe abhängt. Du solltest vorher also sicherstellen, dass du ihre Bedürfnisse und Erwartungen kennst, damit du Design und Text präzise auf diese Kriterien abstimmen kannst.

Wichtig ist auch, dass du nicht zu viele CTAs auf deine Webseiten packst, denn ein Übermaß an klickbaren Schaltflächen kann Besucher schnell überfordern.

Und zu guter Letzt gilt auch für CTAs das oberste Gebot: Testen, testen, testen! Größe, Farbe, Form, Position und andere Faktoren müssen durch A/B-Tests und Datenanalysen immer wieder neu evaluiert werden, damit du deine Hypothesen zu den Erwartungen deiner Nutzer wissenschaftlich validieren kannst.

Und jetzt viel Spaß beim Kreativ sein!