Hier erfährst du, was genau ein Call to Action Button ist und wie du ihn so gestaltest, dass der Besucher deiner Website auch wirklich draufklickt. Erhalte die Basics der Button-Gestaltung und 10 Profi-Tipps zur Umsetzung!
Inhaltsverzeichnis
Was ist ein Button?
Ein Button ist ein interaktives Element auf der Benutzeroberfläche, welches bei Betätigung einen bestimmten Befehl sendet. Der Nutzer kann mit Klick auf die Schaltfläche eine Aktion auslösen, z. B. eine E-Mail versenden, ein Produkt kaufen oder einen Download starten.
Buttons heben sich durch ihre geometrische Form und den farblichen Kontrast vom Rest ihrer Umgebung ab. Sie sind besonders userfreundlich, da sie die physische Interaktion mit einem Schaltknopf imitieren. Durch diese beiden Punkte unterscheidet sich der Button vom einfachen Link. Bei einer normalen Verlinkung ist der bloße Text verknüpft.
Was ist ein Call to Action Button?
Mit Call to Action (kurz CTA) ist eine Handlungsaufforderung gemeint. Demnach soll ein CTA Button den Website-Nutzer zu einer konkreten Handlung anregen und so eine Conversion anstoßen. Der User wechselt von passiv zu aktiv, vom bloßen Besucher zum (potentiellen) Kunden. Der Text des Call to Action Buttons ist entsprechend formuliert – oft wird der Imperativ genutzt. Hier ein paar Beispiele für CTAs:
- für Newsletter anmelden
- folge uns auf LinkedIn
- weitere Beiträge lesen
- sichere dir den Rabatt
- jetzt bestellen
Ein Call to Action Button ist eine Abkürzung. Indem du dem User sagst, was der nächste Schritt ist, hilfst du ihm dabei, sich zu orientieren und er gelangt schneller ans Ziel. Sein Ziel und in diesem Fall auch dein Ziel.
Buttongestaltung – So geht‘s
Damit dein Button seine Funktion erfüllt, sollte er entsprechend gestaltet sein. Worauf du achten solltest und welche Tipps du dir zu Nutze machen kannst, erfährst du hier.
Über die Anatomie eines Buttons
Klassischerweise besteht die Schaltfläche aus einem Wort oder kurzen Text und einer geometrischen Form. Bei der Gestaltung der Button-Struktur solltest du folgende Elemente beachten:
- Farbe / Farbverlauf
- Radius der Ecken
- Innere Abstände
- Rand / äußere Begrenzung
- Textgröße und Strichbreite
- Schatten
Über verschiedene Button-Modi
Für eine bessere Usability sieht der Standard-Modus des Buttons anders aus, als wenn der Nutzer mit der Mouse darüberfährt (diese Funktion wird Hovern genannt) oder ihn anklickt. Wir unterscheiden zwischen:
- Default bzw. Standard – also der „Normalzustand“ vor dem Klick
- Hover – oft wird der Button dann farblich ausgefüllt oder die Farben umgekehrt
- Aktiviert bzw. Gedrückt – mit Klick auf den Button kann sich die Farbe ändern evtl. reduzieren
- Fokussiert – der Button wird z. B. durch einen farblich abgesetzten Rand zusätzlich hervorgehoben
- Deaktiviert – wird häufig durch Ausgrauen deutlich gemacht
Über verschiedene Arten von Buttons
Man unterscheidet zwischen primären und sekundären Buttons (teils sogar tertiären). Damit hast du die Auswahl und kannst eine Priorisierung an Klickmöglichkeiten abbilden. Der Primär-Button zeigt die favorisierte Handlungsaufforderung an (z. B. den Kauf eines Produkts). Während der Sekundär-Button eine (weniger vom Website-Betreiber favorisierte) Alternative anbietet, z. B. das Anlegen eines Merkzettels).
Der primäre Button sollte auffälliger sein als der sekundäre. (Und der tertiäre Button sollte zurückhaltender gestaltet sein als der sekundäre.)
Über die Button-Microcopy
Mit Microcopy ist der Text im Button gemeint, also ein Wort oder ein kurzer Textschnipsel. Bei einem Call to Action Button wird oft der Imperativ genutzt. Möglichst präzise und klar wird hier formuliert, was den User erwartet, wenn er auf die Schaltfläche klickt. Und das mit nur wenigen Anschlägen, z. B.:
- zum Sortiment
- Warenkorb
- Lass uns starten!
- usw.
Das könnte dich auch interessieren: UX Writing Guide
Call to Action Buttons in HTML und CSS
Technisch ist der Cta-Button zuerst einmal ein ganz normaler Textlink in HTML. Mit einer CSS-Klasse kann man diesen dann optisch in einen schicken Button verwandeln:
<a href="#" class="button-link">Anmelden</a>Die Klasse bekommt dann all die Anweisungen, die es für einen markanten Call to Action-Button benötigt. Dazu noch entsprechende Pseudoklassen für die verschiedenen Linkzustände:
See the Pen
Call to Action Button by Martin Hahn (@hahnsinn)
on CodePen.
Tipps zur Gestaltung –
das Design des Call to Action Buttons
Buttons sollten sich durch Farbe und Gestaltung vom Rest des User Interfaces abheben.
… allerdings nicht vom Corporate Design abweichen. Also bleibe bei den festgelegten Branding-Farben.
Achte auf Farbkontraste:
Der Kontrast der Schaltfläche zur Umgebung sollte mindestens das Verhältnis 3 zu 1 haben. Der Kontrast der Schriftfarbe sollte mindestens im Verhältnis von 4,5 zu 1 zum Button stehen. Hier findest du mehr zur Zugänglichkeit und Farbkontrasten.
Die Gestaltung der Buttons sollte über alle Unterseiten hinweg einheitlich sein.
Damit die Schaltfläche gut zu bedienen ist, muss sie groß genug sein. Wähle mindestens 36 Pixel.
Achte auf genügend Abstand zwischen den Buttons, mindestens 16 Pixel. Und auch zwischen Button und anderen Elementen sollte ausreichend Weißraum sein.
Entscheide dich aus Usability-Gründen lieber für ein klassisches, einfaches Button-Design statt für eine ausgefallene Lösung.
Und auch die Stelle, an der du den Button platzierst sollte bewährten Mustern folgen, z. B. unter der Headline auf der Homepage, zum Abschluss eines Formulars, im Zentrum eines Video-Vorschau-Screens, rechts oben auf der Shopping Cart usw.
Teste den Erfolg deines Buttons mittels A-B-Testing und/oder Conversion Tracking.
Setze Buttons sparsam ein, damit der Fokus nicht verloren geht. Nur die wirklich wichtigen Links sollten als Button gekennzeichnet sein, nicht jeder Link! Das hat auch mit einer gesunden Informationsarchitektur zu tun.
Ein Icon kann den Text sinnvoll ergänzen.
Der Buttontext teil klar und unmißverständlich mit, was passiert, wenn er gedrückt wird.
Und last but not least: Jeder Call-to-Action-Button hat einen klaren Zweck! Der Besucher soll dazu aufgefordert werden, eine einzige Handlung auszuführen, um einen Schritt weiterzukommen.
Weitere hilfreiche Infos zu Websitegestaltung:
User Interface Design – Der Leitfaden für ein modernes UI Design
User Experience Design – schaffe ein fesselndes Nutzererlebnis
Im Header den Login als sog. Ghost-Button und einen markanten Hauptbutton für das wichtigste Conversion-Ziel: Aus Besuchern Tester (und damit pot. Neukunden) machen. Im Hero-Teaser und Popup erscheint dieser wichtigste Call-to-Action-Button wieder, jeweils durch einen Zweit- und Dritt-Button ergänzt.
Mit jedem Klick zu mehr User-Aktion und potentiellen Kunden – und das dank einer kleinen (aber nicht zu kleinen :-D) bunten Schaltfläche. Klingt doch prima oder?
Du möchtest noch mehr über die Erstellung von Design-Konzepten und Webdesign lernen? Dann sichere dir das Design-Kit mit vielen hilfreichen Checklisten, Templates und Toolbox.
