Bella Mahnken

Call-to-Action Hero — Tipps für heldenhafte CTAs im digitalen Interface

Ein Fachbeitrag von Bella Mahnken   |   
27. November 2020   |   5 Minuten Lesezeit

Call-to-Action Hero

Is it a bird? Is it a plane? It’s a button!

Wer wirksame Call-to-Actions platzieren will, sollte dabei einige Grundprinzipien einhalten. Dieser Beitrag beschäftigt sich grundlegend mit dem Thema Nutzer-Aufmerksamkeit und wie man diese führen kann, um Besucher in Leads zu konvertieren.

Im digitalen Raum herrscht ein ständiger Kampf um die Aufmerksamkeit anspruchsvoller Nutzer. Heute gehört die menschliche Aufmerksamkeits­spanne bereits zu den wichtigsten Wirtschaftsgütern. Digitale Nutzererfahrungen werden deshalb bis ins kleinste Detail darauf ausgelegt, User mit den richtigen Impulsen effektiv zum Ziel zu führen. Zu den vielen strategischen UX-Komponenten zählt auch jene, die am Ende einer Seite, im Kontaktformular oder im Checkout auf den Nutzer wartet und oftmals den Unterschied zwischen Conversion und Absprung bedeuten kann: der Call-to-Action.

Was sind Call-to-Actions (CTAs)?

Allgemein kann man “Call-to-Action” mit “Handlungsaufforderung” übersetzen. Im Marketing beschreibt der CTA einen bestimmten Impuls, Nutzer zu einer gewünschten Handlung zu bewegen – beispielsweise in Form von auffälligen Buttons oder kurzen Sätzen. Zu den häufigsten Handlungen, auf die online mit CTA-Sektionen hingeführt wird, gehören Käufe und Registrierungen.

Effektive CTAs: Woher kommen die Heldenkräfte?

Die Nutzer von heute sind in vielen Fällen ungeduldig und wankelmütig: Niemand möchte sich länger durch Interfaces klicken und mit digitalen Prozessen aufhalten als nötig. Damit der CTA also wirklich die gewünschte Aktion hervorruft, muss man es Nutzern zur richtigen Zeit und an der richtigen Stelle so deutlich und so einfach wie möglich machen. Ein genaues Verständnis der menschlichen Aufmerksamkeit ist für die Gestaltung unerlässlich. Mit den folgenden Ratschlägen kann die Qualität und Überzeugungskraft von CTAs – auch ohne Superkräfte – erhöht werden:

Die Macht der Worte nutzen
Worte haben enormen Einfluss auf Stimmung, Bedeutung und Wirkung von CTAs. Wo immer eine Aktion vom User ausgelöst werden soll, ist es wichtig, dass die Botschaft begleitender Worte auffordernd, prägnant und überzeugend ist. Ein beliebtes Mittel zur Steigerung der Überzeugungskraft ist die Ansprache auf emotionaler Ebene: Botschaften, die sich persönlich und direkt an den Nutzer richten. Wer hier statt dem “Sie” das “Du” wählt, baut zusätzlich Distanz ab.

CTA Best Practice Apple
iPhone 12 und iPhone 12 mini

Der wohl wichtigste Text ist der, auf den geklickt werden soll. Die meisten halten sich momentan noch an die gängige Praxis, in CTA-Buttons Verben der Grundform zu verwenden (z. B. “Jetzt testen”, “Mehr erfahren”), während manche Anbieter bereits damit beginnen, den Trend direkter Aufforderungen mit Imperativ aus dem Englischen zu übernehmen (z. B. “Finde mehr heraus”, “Teste einen Monat gratis”, “Starte jetzt”). Solche Wordings sind für viele Nutzer noch ungewohnt, was dabei helfen kann, die Aufmerksamkeit einzufangen.

Farbe bekennen
Call-to-Actions in Form von Buttons eignen sich perfekt zur Veranschaulichung des “Restorff-Effekts”. Dieser beschreibt, dass man sich am besten an Inhalte erinnert, die sich von ihrer Umgebung unterscheiden. Während die Elemente in Interfaces meist in zusammenhängendem Stil gestaltet sind, werden CTAs optisch hervorgehoben und erscheinen “isoliert”. Das sendet dem Nutzer deutliche Signale und führt sein Handeln zur gewünschten Aktion.

CTA Farbkontrast
Praktisch nicht zu verfehlen: Der Nutzer weiß genau, wohin er klicken muss.

Für den Effekt der Isolation ist bei Buttons mehr als alles andere die Farbgebung ausschlaggebend. Primäre Schaltflächen müssen farbliche Kontraste zum Rest der Oberfläche bieten und hervorstechen. Dabei ist natürlich darauf zu achten, dass der CTA-Button eine gewisse Zugehörigkeit zum Gesamtbild beibehält – gute Sichtbarkeit sollte nicht auf Kosten von Design oder Lesbarkeit erzielt werden.

Wahre Größe zeigen
Zur optimalen Gestaltung des CTA-Buttons gehören neben der Farbe auch die Größe und die Positionierung. Natürlich sollte die Größe eines Buttons an die Umgebung angepasst sein, um nicht wertvollen Raum für andere Inhalte wegzunehmen. Noch schlimmer ist es aber, wenn winzig kleine Buttons für Nutzer zum Hindernis werden. Eine Studie zu Größe und Abständen von Buttons hat bereits 2007 einen für alle Nutzertypen passenden Standard festgelegt. Laut der Studie hatten Buttons zwischen 11 und 19 Millimeter bzw. 42 und 72 Pixeln die höchste Treffsicherheit.

CTA Größe und Positionierung
Optimale Größe für Buttons, nach Priorität abgestuft. Festgelegte Größen sollten jedoch stets mit verschiedenen Umgebungen, Bildschirmen und Geräten getestet werden.

Der rasante Aufstieg der Touchscreens in Form von Smartphones und Tablets, hat das Button-Thema über die letzten zehn Jahre nochmals grundlegend verändert: Buttons müssen heute, wie auch der Rest, oft “mobile first” gestaltet werden. Für mobile Geräte designen bedeutet, sowohl eine angenehme Größe zum “Tappen”, als auch den natürlichen Daumen-Bewegungsradius zum Wischen auf dem Smartphone im Blick zu behalten.

Immer im Flow bleiben
Gemeint ist damit der Lesefluss, denn die meisten Nutzer im westlichen Teil der Erde erforschen Seiten und Interfaces nach dem gelernten Leseschema von links nach rechts und von oben nach unten. Auf diese Weise lassen sich Bewegungen des Nutzers vorhersagen und optimal in Richtung des CTA leiten.

Dieser fast weltweit gültige Lese-Standard sollte in der digitalen Welt unbedingt aufgegriffen werden. Ein CTA-Button ist somit natürlich als “Ziel” am unteren Ende des Inhalts perfekt aufgehoben. Folgt man der “F-Form”, so muss der Button auf die linke Seite. Wer allerdings nach einem Lesemuster mit “Z-Form” oder dem Gutenberg-Diagramm designt, wird den Button bevorzugt unten rechts platzieren, da dies ein aufmerksamkeitsstärkerer Bereich ist.

Ob der Button nun links oder rechts besser aufbehoben ist, ist sicherlich von Fall zu Fall unterschiedlich. Wer die Möglichkeit hat, einen A/B-Test durchzuführen, kann hier den Favoriten bestimmen. Die Hauptsache ist aber, dass Leser nach Aufnahme der Informationen ganz natürlich zum Call-to-Action-Element geführt werden: Der Leseprozess ist abgeschlossen und der Nutzer bereit, die von ihm erwartete Aktion durchzuführen.

Fazit: Now go and be a Call-to-Action-Hero

Der Einfluss, den Call-to-Actions auf den Erfolg eines digitalen Produktes haben, ist beträchtlich. Durch kleinste Details können zahlreiche Conversions generiert werden oder auf der Strecke bleiben. Wer die Grundlagen zu Gestaltung und Inhalt stets im Hinterkopf behält und immer wieder hinterfragt, ob das eigene Interface den launischen Lesegewohnheiten moderner Nutzer standhalten kann, der ist bestens gewappnet, seinen CTA als perfekten Eyecatcher in Szene zu setzen.

Für den erfolgreichen CTA sind außerdem nicht immer kreative Quantensprünge nötig, da User bereits trainiert sind, Seiten nach einem bestimmten Schema zu erkunden und sich in gängigen Strukturen intuitiv zurechtfinden. Durch A/B-Tests lässt sich mit Gewissheit aus mehreren Optionen der beste Weg bestimmen. Zusätzlich sollte nicht gezögert werden, sich auch bei führenden Anbietern und großen Plattformen mit hohen Nutzerzahlen inspirieren zu lassen und die Effektivität etablierter, gut funktionierender Strukturen für die eigenen CTAs aufzugreifen.