Drei Sekunden. So lange schaut ein Mensch im Schnitt auf einen Button, bevor er klickt oder weiterzieht. In diesen drei Sekunden entscheidet sich, ob aus Interesse Handlung wird. Oder ob die Seite ihn wieder ausspuckt.

Ein Call-to-Action ist die Türschwelle zwischen Lesen und Tun. Wer sie sauber baut, lädt ein. Wer sie übersieht, baut Wände.

Ein guter Call-to-Action beginnt mit einem Verb, benennt die Handlung klar und macht den nächsten Schritt sofort verständlich.

Definition

Ein Call-to-Action (CTA) ist ein interaktives Steuerelement, meist Button oder Link, das Besucherinnen und Besucher gezielt zur nächsten, klar benannten Handlung führt. „Angebot anfordern“, „In den Warenkorb“, „Demo buchen“. Wirksame CTAs verbinden vier Dinge: präzise Microcopy, sichtbare Priorisierung im Layout, barrierearme Interaktion (Fokus-Indikator, Touch-Zielgröße) und messbare Wirkung über Events und Conversions.

Die maßgeblichen Leitlinien zu Ankertext, visueller Stabilität (Cumulative Layout Shift) und Interaktionszugänglichkeit liefern Google und W3C/WAI.

Warum CTAs geschäftskritisch sind

Ein CTA übersetzt Marketing-, Produkt- und Geschäftsziele in konkretes Nutzerverhalten. Er reduziert Entscheidungskosten, schafft Orientierung in der visuellen Hierarchie und markiert die Messpunkte im Funnel: Klick, Conversion, Completion.

Psychologisch wirkt er als Prompt in BJ Foggs Behavior Model: Verhalten entsteht, wenn Motivation, Fähigkeit (geringer Aufwand) und ein Auslöser zur selben Zeit am selben Ort zusammenfallen. Der CTA ist genau dieser Auslöser. Fehlt er im Moment der Handlungsbereitschaft, passiert nichts. Auch dann nicht, wenn die Motivation hoch wäre.

Und hier liegt die paradoxe Wahrheit: Ein guter CTA verkauft nicht. Er führt. Er nimmt jemandem ab, sich den nächsten Schritt selbst suchen zu müssen.

Arten von CTAs

Primärer CTA

Pro Seite oder Screen genau einer. „Jetzt kaufen“. „Termin buchen“. „Demo starten“. Design-Systeme empfehlen, ihm den größten visuellen Vorrang zu geben über Größe, Kontrast und Platzierung. Konkurrierende Aktionen werden bewusst zurückgenommen.

Sekundäre und tertiäre CTAs

Unterstützende Handlungen wie „Zur Wunschliste“ oder „Später speichern“. Sie erscheinen optisch schwächer (Outline, Ghost-Button, Textlink). Eine konsistente Reihenfolge entlang der Leserichtung reduziert Fehlklicks.

Inline- und Link-CTAs

Kontextuelle Handlungen im Fließtext. Beschreibender Linktext wie „Leistungen ansehen“ ist klarer als generische Formulierungen wie „hier klicken“. Google empfiehlt das in seinen Crawling-Richtlinien ausdrücklich, weil Ankertext Nutzern und Crawlern den Zielinhalt signalisiert.

Sticky CTAs

Fixierte Fuß- oder Kopfleisten können stark konvertieren. Aber sie dürfen keine Layout-Verschiebungen erzeugen und keine Inhalte verdecken. Dimensionen vorher reservieren. Späte Einblendungen vermeiden. Sonst kostet der Conversion-Gewinn dreifach an anderer Stelle.

E-Mail-CTAs

Viele Clients blockieren Bilder. „Bulletproof Buttons“ in HTML und CSS, gegebenenfalls mit VML-Fallback für Outlook, sichern Klickbarkeit auch ohne geladene Bilder. Generatoren liefern Litmus und Campaign Monitor.

Mobile CTAs

Plattformkonventionen beachten: Apple HIG empfiehlt rund 44 pt, Material Design rund 48 dp als Touch-Zielgröße, dazu Abstand zwischen den Zielen.

Anatomie eines wirksamen CTA

Sprache und Microcopy

Ein guter Button-Text ist ein Vertrag in fünf Wörtern. Er sagt, was passiert. Er sagt, was es kostet. Er sagt, was nicht passiert.

Das Rezept: Verb zuerst. „Jetzt testen“. „Termin buchen“. Dann der Erwartungsmodifikator: „Ohne Kreditkarte“. „Dauer: 2 Minuten“. „Antwort in 24 Stunden“. Diese kleinen Zusätze senken Reibung dramatischer als jeder Farbwechsel.

Anti-Pattern: leere Platzhalter wie „Weiter“, „Mehr“, „Hier klicken“. Sie verraten dem Leser nichts und dem Crawler ebenfalls nicht. Google nennt in seinem Leitfaden aussagekräftige, prägnante, kontextrelevante Ankertexte. Studien aus dem E-Commerce belegen Fehlentscheidungen durch generische Bezeichnungen.

Visuelle Hierarchie

Der Primär-CTA ist der visuelle Anker. Fläche, Kontrast, Weißraum spielen ihm zu. Maximal einer pro Screen. Alles andere stuft sich sichtbar zurück.

Drei Zustände müssen klar unterscheidbar sein: Default, Hover, Focus, Active, Disabled. Vor allem der sichtbare Fokus ist Pflicht (WCAG 2.4.7). Seine Mindest-Sichtbarkeit präzisiert 2.4.13. Und er darf nicht verdeckt werden (2.4.11) durch Sticky-Bars, Cookie-Banner oder Chat-Bubbles.

Touch-Ziele und Abstände

Was klein ist, wird verfehlt. Was eng beieinander steht, wird verwechselt. WCAG 2.2 2.5.8 definiert eine Mindestgröße oder Mindestabstand als AA-Kriterium. web.dev rät praxisnah zu rund 8 px Abstand zwischen Zielen und genügend Padding.

Wer das ignoriert, verschenkt nicht nur Komfort. Er schließt Menschen mit motorischen Einschränkungen aus.

Performance und Stabilität

Ein CTA, der sich beim Laden noch um 40 Pixel verschiebt, ist ein Tritt ans Schienbein. Cumulative Layout Shift entsteht durch späte Einblendungen, nachladende Assets ohne Dimensionen, Schriftwechsel zur Laufzeit. Lösungen sind bekannt: Platzhalter reservieren, Schriften präloaden, Animationen ohne Layout-Wirkung wählen. Google dokumentiert Ursachen und Fixes.

Platzierung und Timing

Ein CTA gehört dahin, wo Motivation hoch und Aufwand niedrig ist. Fogg nennt das den „richtigen Moment“. Konkret heißt das: nahe an Preisangaben, Social Proof, USPs, Zusammenfassungen, am inhaltlichen Wendepunkt. Bei langen Seiten am Ende erneut platzieren, weil nicht jeder linear liest.

Sticky-CTAs in mobilen Transaktionsflows (Produktdetail, Checkout) sind ein bewährter Hebel. Aber ohne CLS-Sprünge. Ohne Fokus-Verdeckung. Ohne Inhalt zu kannibalisieren.

Eine Frage zur Selbstprüfung: Erkennt jemand, der zum ersten Mal auf Ihrer Seite landet, innerhalb von drei Sekunden, was Sie von ihm möchten?

Psychologische Grundlagen, knapp

Hick’s Law: Mehr Optionen, längere Entscheidung. Ein klarer Primärpfad beschleunigt.

Fitts’s Law: Je größer und näher das Ziel, desto schneller und fehlerärmer die Auswahl. Begründung für großzügige Buttons und durchdachte Abstände.

Fogg (B=MAP): Ohne Prompt passiert trotz Motivation und Fähigkeit nichts. Der CTA ist der Prompt.

Drei Gesetze, ein Befund: Klare Wahl. Großes Ziel. Richtiger Moment.

E-Commerce: wo es zählt

Auf Produktdetail- und Checkout-Seiten entscheidet sich, ob ein Einkauf zustande kommt. Baymard dokumentiert seit Jahren, was hier konsistent wirkt: präzise Labels, konsistente Platzierung, eindeutige Button-Stile.

„In den Warenkorb“ oder „Jetzt kaufen“? Das ist keine Geschmacksfrage. Es ist eine Frage darüber, was als Nächstes passiert. Wer das verschleiert, verliert.

Und: Redundante Bestätigungsschritte, „Apply“-Buttons in Formularen, Mehrfach-Klicks für eine Aktion. Jedes davon kostet Abschlüsse. Baymard empfiehlt, sie konsequent zu entfernen.

E-Mail-CTAs

Eine Newsletter-Mail mit einem Button, der nur ein PNG ist? Bei jedem zweiten Empfänger erscheint dort ein leerer Kasten. Bilder werden blockiert oder schlicht nicht geladen.

Setzen Sie auf HTML- und CSS-Buttons mit Live-Text, gegebenenfalls mit VML-Fallback für Outlook. Litmus und Campaign Monitor bieten erprobte Patterns. Mailchimp empfiehlt zusätzlich deskriptive Linktexte. Auch in Mails gilt: „Hier klicken“ verrät nichts.

SEO-Bezug

CTAs sind kein direkter Rankingfaktor. Aber sie wirken indirekt, und zwar an mehreren Stellen.

Erstens: Interne Verlinkung. Jeder Inline-CTA mit sprechendem Ankertext gibt Google und dem Leser ein Signal. Google verlangt dafür crawlbare <a href>-Links, keine JavaScript-Ersatzkonstrukte.

Zweitens: Core Web Vitals. CLS-Sprünge durch Sticky-Bars oder spät erscheinende Buttons drücken die Page Experience.

Drittens: Usability-Signale. Wer länger bleibt, weiter klickt, sein Anliegen löst, sendet positive Verhaltenssignale. CTAs sind das Gelenk dafür.

Tracking, Metriken, A/B-Testing

Was nicht gemessen wird, lässt sich nicht verbessern. Die Basis-Kennzahlen:

• CTR des CTA (Klicks pro Sichtbarkeit, nicht pro Pageview)
• Conversion-Rate nach Klick
• Abbruchrate je Funnel-Schritt
• Time-to-Click und Scrolltiefe bis zum CTA

Ein sauberes Event-Setup im Tag Manager verknüpft Micro-Events („CTA geklickt“) mit Macro-Conversions („Kauf abgeschlossen“). Erst diese Verknüpfung zeigt, ob ein neuer Button wirklich gewinnt oder nur den nächsten Schritt verlagert.

Bei A/B-Tests gilt eine harte Disziplin: Mindest-Effekt und Stichprobengröße vorher festlegen, typischerweise mit 80 % Statistical Power. Hilfsmittel: Optimizely, CXL. Mindestens einen Business-Zyklus laufen lassen, also rund sieben Tage. Kein Peeking. Wer zu früh abbricht, glaubt Geistern.

Und vor allem: Nicht nur auf CTR schauen. Wenn ein neuer Button doppelt so oft geklickt, der Abschluss aber halbiert wird, war es ein schlechter Button.

Einwilligungs-CTAs: Recht und Ethik

Cookie-Banner sind das Schaufenster für die Frage, wie ernst ein Unternehmen seine Nutzer nimmt.

Die Regeln sind klar: Einwilligung muss freiwillig, spezifisch, informiert und unmissverständlich sein. Keine vorangekreuzten Checkboxen. Keine Kopplung „Zustimmen = Zugang“. So die EDPB-Leitlinien (05/2020) und das EuGH-Urteil Planet49. Recital 32 DSGVO verlangt eine „klare, bestätigende Handlung“.

Was das gestalterisch heißt: Gleichwertige Sichtbarkeit von „Akzeptieren“, „Ablehnen“ und „Einstellungen“. Kein Confirm-Shaming. Widerruf jederzeit auffindbar.

Ein „Akzeptieren“-Button in giftgrün, daneben „Ablehnen“ als verwaschener Textlink, ist keine UX-Entscheidung. Es ist eine Wette darauf, dass niemand hinschaut. Diese Wette geht zunehmend verloren.

Häufige Fehler

Zu viele konkurrierende CTAs. Drei „wichtige“ Buttons sind null wichtige Buttons. Einen Primärpfad definieren, alles andere zurückstufen.

Vage Labels. „Weiter“ sagt nichts. „Zur Lieferadresse“ sagt etwas.

Mobile Ziele zu klein. 44 pt oder 48 dp als Praxiswerte plus Abstand. Sonst verfehlen Daumen das Ziel und Geduld den Käufer.

Unsichtbarer Fokus. Wer mit Tastatur navigiert, sieht ohne Fokus-Stil nichts. WCAG 2.4.7 und 2.4.13 sind nicht Kür.

CLS-Sprünge. Späte Sticky-Bars verschieben den Klick. Dimensionen vorher reservieren.

E-Mail-Buttons als reine Bilder. Halb sichtbar, halb leer. Bulletproof bauen.

„Apply“-Buttons im Checkout. Eingabefelder, die zusätzliche Bestätigung verlangen. Streichen.

Praxis-Leitfaden

1. Ziel und Nutzerabsicht klären. Welche eine Handlung ist hier am wertvollsten? Wo ist Motivation hoch (Preisnähe, Social Proof, USPs)? Dort gehört der CTA hin.

2. Text entwerfen. Verb + Objekt + Erwartungsmodifikator. „Demo buchen – 15 Minuten“. „Preis berechnen – unverbindlich“. „Whitepaper herunterladen – 12 Seiten“.

3. Design um den Primär-CTA bauen. Größe, Kontrast, Weißraum für den Anker. Sekundär als Outline. Tertiär als Textlink. Reihenfolge konsistent.

4. Barrierefreiheit integrieren. 44 pt oder 48 dp, ausreichend Abstand, sichtbarer Fokus, Fokus nicht verdeckt.

5. Performance absichern. Keine layout-verschiebenden Elemente. Dimensionen reservieren.

6. Messen und experimentieren. Events sauber, Stichprobe vorher berechnet, Laufzeit festgelegt.

7. Iterieren entlang der Wahrheit, nicht der Klicks. Downstream-KPIs schlagen kurzfristige CTR-Gewinne.

Präzise CTA-Formulierungen

• B2B/Lead-Gen: „Angebot anfordern“, „Technische Beratung buchen“, „Whitepaper herunterladen – 12 Seiten“
• SaaS: „Kostenlos testen – 14 Tage, ohne Kreditkarte“, „Live-Demo vereinbaren“
• E-Commerce: „In den Warenkorb“, „Jetzt sicher bezahlen“, „Lieferung in 2 bis 3 Tagen“
• Dienstleistung: „Erstgespräch vereinbaren“, „Vor-Ort-Termin prüfen“
• Content/Newsletter: „Leitfaden lesen“, „Newsletter abonnieren – 1× pro Monat“

Das Muster ist immer dasselbe: Verb, Objekt, Erwartung. Drei Bestandteile, die zusammen eine Versprechung machen, die der Leser nachprüfen kann.

Fazit

Ein Call-to-Action ist kein Deko-Button. Er ist das Scharnier zwischen Nutzerintention und Geschäftsziel. Klein, aber tragend.

Seine Wirkung entsteht aus dem Zusammenspiel von klarer Sprache, hierarchischer Priorisierung, barrierefreier und stabiler Umsetzung, kontextsensitiver Platzierung, sauberer Messung. Wer entlang dieser Leitplanken baut und mit disziplinierten Tests nachschärft, verbessert Nutzbarkeit und Conversion zugleich. Nachhaltig, nicht zufällig.

Was wäre, wenn Sie auf Ihrer wichtigsten Seite heute den einen Satz schreiben, der dem Leser ehrlich sagt, was als Nächstes passiert?