Call-to-Action-Buttons: Design, das Klicks erzielt

Stellen Sie sich vor, Sie haben einen Gast durch Ihr ganzes Haus geführt, ihm jeden Raum gezeigt, jede Frage beantwortet, und dann, an der Haustür, nuscheln Sie etwas, das er nicht richtig versteht, und starren auf Ihre Schuhe. Genau das bewirkt ein schwacher Call-to-Action-Button. Die ganze Seite hat auf diesen einen Moment hingearbeitet, und dann vermasselt der Button alles.

Ein Call-to-Action-Button, oft als CTA abgekürzt, ist das anklickbare Element, das einen Besucher auffordert, den nächsten Schritt zu tun: jetzt kaufen, einen Anruf buchen, eine Testversion starten, den Leitfaden herunterladen. Er ist klein, trägt aber ein enormes Gewicht, denn er ist genau der Punkt, an dem Interesse in Aktion umgewandelt wird. In diesem Leitfaden werden wir erläutern, was einen Button unwiderstehlich macht und was ihn stillschweigend ignorieren lässt, alles in einfacher Sprache und mit Beispielen, die Sie heute anwenden können.

Warum ein einziger Button eine Seite zum Erfolg führen oder scheitern lassen kann

Alles andere auf einer Seite – die Überschrift, die Bilder, der Text – existiert, um jemanden zu einer Entscheidung zu bewegen. Der Button ist der Ort, an dem diese Entscheidung getroffen oder verpasst wird. Sie können eine brillante Seite haben und trotzdem enttäuschende Ergebnisse sehen, weil der Button zu vage, zu klein oder zwischen anderen Dingen, die um Aufmerksamkeit konkurrieren, versteckt ist.

Deshalb beschäftigen sich durchdachte Designer obsessiv mit CTAs. Ein Button ist keine Dekoration; er ist das Scharnier, an dem sich eine Seite dreht. Ihn richtig zu gestalten, steigert die Ergebnisse oft mehr als eine größere Neugestaltung, ähnlich wie die Prinzipien, die hinter dem, was eine Website konvertierbar macht, eher auf eine Handvoll hochwirksamer Details als auf tausend kleine zurückzuführen sind.

Formulierung: Sagen Sie den Leuten genau, was passiert

Die Worte auf einem Button leisten mehr Schwerstarbeit als alles andere daran. Generische Beschriftungen wie „Senden“, „Hier klicken“ oder „Weiter“ sagen den Leuten nichts darüber, was sie erhalten werden. Der stärkste Button-Text ist spezifisch und, wo möglich, aus der Sicht des Besuchers geschrieben.

Vergleichen Sie „Senden“ mit „Meine Anfrage senden“. Letzteres sagt Ihnen genau, was der Button tut und formuliert es um Sie herum. „Meine kostenlose Testversion starten“ ist besser als „Registrieren“. „Mein Angebot erhalten“ ist besser als „Anfragen“. Das Wort „mein“ lässt die Aktion stillschweigend persönlich und zu eigen werden. Halten Sie es kurz, beginnen Sie mit einem Verb und stellen Sie sicher, dass die Beschriftung ehrlich beschreibt, was nach dem Klick passiert. Diese gleiche einfache, menschliche Stimme macht ein gutes Webformular einladend statt bürokratisch.

Passen Sie die Worte dem Moment an

Ein Besucher, der gerade gelandet ist, befindet sich nicht in derselben Verfassung wie jemand, der jedes Wort gelesen und Ihre Optionen verglichen hat. Zu Beginn passt eine unverbindliche Formulierung wie „Sehen Sie, wie es funktioniert“ zum Moment. Weiter unten, wenn jemand bereit ist, passt ein selbstbewusstes „Meinen Anruf buchen“. Der Button sollte die Menschen dort abholen, wo sie sind, und nicht gleich bei der ersten Verabredung auf eine Hochzeit drängen.

Farbe und Kontrast: unübersehbar sein

Ein Button kann nur geklickt werden, wenn er gesehen wird, und er kann nur gesehen werden, wenn er auffällt. Die wichtigste Regel für die CTA-Farbe ist der Kontrast: Der Button muss sich deutlich von allem, was ihn umgibt, abheben. Eine kräftige, gesättigte Farbe vor einem ruhigeren Hintergrund zieht das Auge fast automatisch an.

Es gibt keine einzige magische Farbe. Wichtig ist, dass der Button sich von seiner Umgebung abhebt und für die Aktion reserviert ist, die die Nutzer am häufigsten ausführen sollen. Wenn jedes Element auf der Seite schreit, tut es das am Ende nichts. Wählen Sie einen deutlichen Akzent für Ihre primären Buttons und setzen Sie ihn sparsam ein, damit die Farbe zu einem Signal wird, das besagt: „Das ist das Element, das geklickt werden soll.“ Die umfassenderen Überlegungen dazu finden Sie in unserem Leitfaden zu Website-Schriften und -Farben.

Größe, Form und das Antippziel

Ein Button muss groß genug sein, um bemerkt zu werden, und groß genug, um angetippt zu werden. Auf einem Telefon führt ein Button, der zu klein ist oder zwischen anderen Elementen eingezwängt ist, zu Fehlbedienungen und Frustration. Geben Sie Buttons großzügige Abstände, damit der anklickbare Bereich bequem bemessen ist, und lassen Sie genügend Freiraum um sie herum, damit niemand versehentlich das Falsche antippt.

Die Form ist weniger wichtig, als man denkt, aber Konsistenz ist sehr wichtig. Wählen Sie einen Button-Stil – abgerundet oder eckig, gefüllt oder umrissen – und verwenden Sie ihn konsistent, damit Buttons sofort als Buttons erkennbar sind. Eine subtile Veränderung beim Hovern, wie eine leichte Abdunkelung oder Anhebung, beruhigt die Leute, dass das Element interaktiv ist. Diese kleinen, ausgefeilten Hinweise sind Teil der umfassenderen Kunst der Mikrointeraktionen.

Platzierung: Treffen Sie Menschen am Höhepunkt der Absicht

Der beste Button der Welt versagt, wenn er im falschen Moment erscheint. Ziel ist es, einen CTA genau dort zu platzieren, wo ein Besucher am ehesten bereit ist zu handeln. Bei einem einfachen Angebot könnte das weit oben auf der Seite, im ersten sichtbaren Bereich, sein, wie in unserem Beitrag zum Above-the-Fold-Design behandelt.

Bei einem wohlüberlegten Kauf müssen die Leute zuerst Informationen aufnehmen, daher ist es besser, den Button an natürlichen Entscheidungspunkten zu wiederholen, zum Beispiel nachdem Sie die Vorteile erklärt haben, nach einem Social Proof und noch einmal am Ende. Eine lange Verkaufsseite kann denselben Call-to-Action mehrmals tragen, immer mit identischer Formulierung, damit der Button sofort verfügbar ist, sobald sich jemand bereit fühlt. Die Kunst besteht darin, zu erkennen, wo die Absicht ihren Höhepunkt erreicht, was für ein gutes Landingpage-Design zentral ist.

Primär, Sekundär und die Falle zu vieler Auswahlmöglichkeiten

Die meisten Seiten haben eine wichtigste Aktion und ein paar weniger wichtige. Der Fehler besteht darin, sie alle gleich wichtig aussehen zu lassen. Wenn fünf Buttons gleichzeitig rufen, erstarrt der Besucher, weil die Wahl zur Arbeit wird. Psychologen nennen dies das Paradoxon der Wahl, und es tötet stillschweigend Konversionen.

Die Lösung ist Hierarchie. Geben Sie Ihrer wichtigsten Aktion einen kräftigen, ausgefüllten primären Button. Machen Sie jede sekundäre Option visuell ruhiger, vielleicht einen einfachen Umriss oder einen einfachen Textlink. Auf diese Weise wird das Auge zuerst auf die Aktion gelenkt, die Sie am meisten wünschen, während die Alternative für diejenigen verfügbar bleibt, die sie benötigen. Eine laute Stimme und ein paar Flüstern sind weitaus effektiver als ein Raum voller Geschrei.

Reduzieren Sie das Risiko rund um den Klick

Menschen zögern beim letzten Schritt, wenn der Klick riskant oder aufwändig erscheint. Eine kurze Beruhigungszeile direkt neben dem Button kann dieses Zögern auflösen. „Keine Karte erforderlich“, „Jederzeit kündbar“ oder „Dauert zwei Minuten“ beseitigen jeweils eine spezifische Sorge genau in dem Moment, in dem sie aufkommt.

Das funktioniert, weil die Worte um den Button herum Teil der Aufgabe des Buttons sind. Eine selbstbewusste Beschriftung plus eine kleine Dosis Beruhigung verwandelt „vielleicht später“ in „warum nicht“. Derselbe Instinkt, die wahrgenommenen Kosten des Ja-Sagens zu senken, zieht sich durch eine gut gestaltete Kontaktseite und eine vertrauenswürdige Preisseite.

Testen, dann erneut testen

CTAs gehören zu den lohnendsten Dingen, mit denen man experimentieren kann, da sie leicht zu ändern sind und oft große Auswirkungen haben. Probieren Sie eine andere Beschriftung, eine andere Farbe oder eine andere Position aus und beobachten Sie, was passiert. Schon einfache Vorher-Nachher-Vergleiche lehren Sie viel über Ihr spezielles Publikum.

Was für eine Website funktioniert, muss nicht für eine andere funktionieren. Betrachten Sie daher Ratschläge, einschließlich alles hier Genannte, als Ausgangspunkt und nicht als Evangelium. Die zuverlässige Gewohnheit besteht darin, jeweils eine klare Änderung vorzunehmen, ehrlich zu messen und das Beizubehalten, was gewinnt. Tun Sie dies konsequent, und Ihre Buttons werden sich stillschweigend verbessern und mehr Wert aus dem bereits vorhandenen Traffic ziehen. Wenn Sie eine neue Perspektive auf eine Seite wünschen, die nicht konvertiert, können Sie sich jederzeit an uns wenden.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group. „Call-to-Action Buttons: Placement, Wording, and Design.“ nngroup.com.
2. Google. „Material Design: Buttons.“ material.io.
3. Baymard Institute. „Call-to-Action Button Usability.“ baymard.com.