5 Design-Techniken für bessere CTA-Buttons
Wenn wir die meisten Websites besuchen, haben wir oft ein Ziel vor Augen. Um zu diesem Ziel zu gelangen, müssen wir in der Regel eine Reihe von Schritten durchführen. Der erste Schritt beginnt mit einem Klick auf eine CTA-Schaltfläche (call to action). Denken Sie an das letzte Mal, als Sie sich für einen Dienst angemeldet oder eine App heruntergeladen haben. Der Prozess beinhaltete wahrscheinlich eine Interaktion mit einem Call-to-Action-Button.
CTA-Schaltflächen sind die Schaltflächen, die Sie auf Ihrer Website verwenden, um Benutzer zu Ihrer Zielkonvertierung zu führen. Der CTA zielt darauf ab, Ihre Website-Besucher auf eine gewünschte Vorgehensweise zu lenken. Einige häufige Beispiele für CTAs sind:
- "Eine Probe starten"
- "Laden Sie die App / Buch / Guide herunter"
- "Melden Sie sich für Updates an"
- "Holen Sie sich eine Beratung"
Heute werden wir fünf Best Practices für die Gestaltung von CTA-Schaltflächen zusammen mit den besten Beispielen aus der Praxis diskutieren, um Ihnen zu helfen, die meisten Klicks auf Ihrer Zielseite zu erzielen.
1. Visuell auffallender Knopf
Deine Knopffarbe ist wichtig. In der Tat, wenn Sie nur einen einzigen Ratschlag aus diesem Artikel nehmen, sollte es dieser sein: "Betrachten Sie Ihre CTA-Schaltfläche Farbe". Durch die Verwendung von Farbe können Sie bestimmte Schaltflächen deutlicher hervorheben als andere, indem Sie ihnen mehr visuelle Sichtbarkeit verleihen.
Verwenden Sie Kontrastfarben
Kontrastierende Farben funktionieren am besten für CTA-Tasten. Mit kontrastierenden Farben lassen sich markante Tasten erstellen, die hervorstechen. Sie sollten eine kontrastierende Farbe aus dem Farbschema der Webseite auswählen, während Sie immer noch mit dem Gesamtdesign übereinstimmen. Betrachten Sie das folgende Firefox-Beispiel. Die grüne Farbe der CTA-Taste auf der Firefox-Seite springt von der Seite und erhält sofort die Aufmerksamkeit des Benutzers.
Firefox CTA-Taste ist hellgrün und fällt gut auf einem dunkelblauen Hintergrund
Ein weiterer auffälliger CTA-Button ist auf der Hipmunk-Homepage zu finden. Ein leuchtend orangefarbener Knopf fängt die Aufmerksamkeit des Benutzers ein und definiert die nächste mögliche Aktion.
Negativer Raum
Für einen CTA ist nicht nur die Farbe wichtig, sondern auch der Platzbedarf. Whitespace (oder negativer Raum) erzeugt wichtigen Raum zum Atmen und trennt Ihre CTA-Tasten von anderen Elementen in Ihrer Benutzeroberfläche. Die alte Dropbox-Homepage war ein gutes Beispiel für die Verwendung von negativem Leerzeichen, um ihren primären CTA-Pop zu machen. Das blaue "Sign up for free" CTA hebt sich vom hellen Blau des Hintergrunds ab.
2. Handlungsorientierter Text
Das Schreiben von Text für Ihre Call-to-Action-Schaltfläche, die Ihre Besucher dazu bringt, die richtigen Maßnahmen zu ergreifen, ist keine leichte Aufgabe. Glücklicherweise gibt es ein paar Dinge, die Ihnen dabei helfen können:
Beginne mit einem Verb
Sie sollten vage und langweilige Wörter wie "Geben Sie weitere Informationen ein" für Ihre CTA-Schaltflächen vermeiden und sie durch handlungsorientierte Wörter wie "Starten Sie Ihre kostenlose Testversion" oder "Jetzt Rabatt erwerben" ersetzen. Evernote hat eine der häufigsten, aber immer noch handlungsorientierte Texte für ihren CTA-Button.
Beginnen Sie mit einem Verb wie "Start", "Get" oder "Join"
Ein interessanteres Beispiel finden Sie auf der Treehouse Homepage. Die CTA auf Treehouse-Website sagt nicht nur "Starten Sie eine kostenlose Testversion"; es heißt "Beanspruchen Sie Ihre kostenlose Testversion". Der Unterschied in der Formulierung mag subtil erscheinen, aber "Claim Your Free Trial" klingt viel persönlicher.
Verwenden Sie kurze und einfach zu verstehen Text für Schaltflächen
Stellen Sie sicher, dass Sie genau angeben, was der Besucher erhält, wenn er auf das CTA klickt. Im Idealfall möchten Sie den Text der Schaltfläche zwischen zwei und fünf Wörtern beibehalten.
Wertvorschlag hinzufügen
Wahrscheinlich haben Sie bemerkt, dass viele Knöpfe die Wörter wie "frei" in ihrer Kopie haben, und das ist kein Zufall, die Verwendung solcher Wörter in der Knopfkopie unterstreicht das Wertversprechen Ihres Angebots. Versuchen Sie also, beim Schreiben Ihres CTAs einen Weg zu finden, ein (oder alle) drei überzeugende Wörter zu integrieren:
- Frei
- Bonus
- Sofort
Lassen Sie mich Ihnen ein Beispiel geben: Eine große Angst, vor der die Benutzer sich verpflichten, sich für etwas zu registrieren, ist, dass es ein Schmerz sein wird, ihr Abonnement zu kündigen, wenn sie den Service nicht mögen. Netflix entlastet diese Angst mit dem Versprechen "Cancel anytime" neben dem CTA "Join free for a month".
Erstellen Sie ein Gefühl der Dringlichkeit
Wenn Sie in Ihren CTA-Tasten ein Gefühl der Dringlichkeit entwickeln, können Sie beeindruckende Klickraten erzielen. Sie können beispielsweise einen Text wie "Jetzt anmelden und 25% Rabatt nur heute!" Verwenden. Wenn Sie die Zeit begrenzen, die jemand für die Entscheidung benötigt, werden die Nutzer ihr Angebot so lange wie möglich geltend machen können.
Hilfreiche Text
Manchmal möchten Sie vielleicht eine zusätzliche Zeile mit Informationen in Ihrem Schaltflächentext hinzufügen. Diese Vorgehensweise ist bei kostenlosen Testschaltflächen üblich. Zum Beispiel könnte ein Button für eine kostenlose Testversion "30-Tage-Testversion, keine Kreditkarte" in kleinerem Text unter der CTA-Schaltfläche mit dem Text "Starten Sie Ihre kostenlose Testversion" enthalten. Dieser zusätzliche Text sollte den Entscheidungsprozess erleichtern.
3. Machen Sie es ohne Scrollen sichtbar
Die Platzierung Ihrer Call-to-Action-Schaltflächen ist genauso wichtig wie die Farbe und die Nachricht. Ein CTA-Button sollte sich an einem leicht zu findenden Ort befinden, der organisch aus dem Fluss der Webseite folgt. Sie sollten versuchen, Ihre CTA-Taste oberhalb der Falte zu halten, damit Benutzer sie nie verpassen. Idealerweise sollte Ihr CTA-Button zu den ersten Dingen gehören, die ein Nutzer auf der Seite sieht, wenn er sie erreicht. Die zusätzliche Information sollte unterhalb der Falte bleiben, wo sie zugänglich bleibt, aber nicht ablenkt.
4. Großer Knopf mit abgerundeten Ecken
Denken Sie darüber nach, wie das Design Affordance kommuniziert. Wie verstehen Nutzer das Element als Schaltfläche? Verwenden Sie Form und Größe, um das Element wie eine Schaltfläche aussehen zu lassen.
Mach es groß genug
Der CTA sollte groß genug sein, um aus der Entfernung zu sehen, aber nicht so groß, dass die Aufmerksamkeit vom Hauptinhalt auf der Seite abgelenkt wird
Benutzer-Schaltflächen mit abgerundeten Ecken
Knopfform kann eine große Rolle spielen. Es ist ein bewiesener Fakt abgerundete Ecken sind leichter für die Augen. Im Test von ContentVerve war ein gerundeter grüner Knopf besser als ein blaues Rechteck.
5. Weniger ist mehr, wenn es um Entscheidungen geht
Denken Sie daran, wenn Sie möchten, dass Ihre Kunden aktiv werden, müssen Sie ihnen helfen, indem Sie alle möglichen Hindernisse aus dem Weg räumen. Wenn Benutzer zu viele Auswahlmöglichkeiten erhalten, neigen sie dazu, verwirrt zu werden. Also, es ist besser, den potenziellen Kunden nur eine Option anzubieten.
Wenn Sie weiterhin mehrere Schaltflächen auswählen möchten, sollten Sie einer Auswahl Vorrang vor anderen geben, um Benutzern den Zugriff auf einen bestimmten Pfad zu erleichtern. Ein gutes Beispiel ist Evernote: Sobald Sie einen unteren Teil der Evernote-Startseite erreichen, ist es ziemlich klar, dass eine bevorzugte Wahl "Kostenlos registrieren" ist, während das CTA für Benutzer, Pläne zu vergleichen, sehr zweitrangig ist.
Fazit
Um ein effektives CTA-Design zu erzielen, müssen Sie mehr als nur den Button selbst in Betracht ziehen. Es ist auch wichtig, über Hintergrundfarbe, Umgebungsbilder, umgebenden Text und viele andere Elemente nachzudenken. Das Basecamp-Team hat die Bedeutung dieser Elemente erkannt und ein perfektes Layout für die Zielseite entworfen. Selbst die Mikrokopie, die sie unter dem CTA-Button verwenden ("4.714 Unternehmen, die diese Woche unterschrieben haben!"), Steigert das Vertrauen potentieller Kunden.
Ich hoffe, dass die in diesem Artikel erwähnten Tipps Ihnen helfen werden, einen besseren Call-to-Action-Button für Ihre Website zu erstellen. Der letzte Moment ist die Wichtigkeit des Testens. Wenn Sie sich entscheiden, ein CTA auf Ihrer Site neu zu erstellen, denken Sie daran, zu testen, ob es für Ihre Zielgruppe funktioniert.