Buttons als Call-to-Action-Elemente

Der Button ist die Nummer eins unter den Call-to-Action-Elementen

Christoph Schäfer · Juli 2012 in Expertise

Der heiße Scheiß von damals

Dieser Artikel gehört zu unserem Frühwerk, das bedeutet: Damals waren die beschriebenen Sachverhalte aktuell, jetzt haben sie wahrscheinlich schon etwas Staub angesetzt.

Websites haben ein Ziel. Abhängig von Branche und Zielgruppe ist dieses natürlich variabel, aber es existiert. Die meisten Websites bezwecken den Abverkauf von Produkten, das Generieren von Leads oder das Bereitstellen von Informationen. Und genau dieses Ziel dürfen wir beim Interface Design sowie der späteren Umsetzung nie aus den Augen verlieren.

Gutes oder besser richtiges Interface Design leistet einen wesentlichen Beitrag zum Erreichen des Ziels, zur Wertschöpfung. Gutes Design bietet dem User nicht nur ein komfortables Bedienerlebnis (User Experience), sondern sorgt auch für eine hohe Conversion Rate. Dabei ist es unwichtig, was als Conversion gewertet wird. Es kann das Bestellen eines Produktes, das Anmelden für einen Newsletter oder das Herunterladen einer Software sein. Entscheidend ist, dass es eine zentrale Aktion gibt, die der User ausführen soll.

Also muss es folglich ein Element geben, dass diese Aktion auslöst. In den meisten Fällen ist dies ein Button. Dieser wird als Call-to-Action-Element bezeichnet und sollte idealerweise prominent platziert sein und zum Klicken animieren. Für das Gestalten und Positionieren solcher Elemente orientieren wir uns an drei Prinzipien, die sich aus unserer Sicht bewährt haben.

1) Schön groß, schön kontrastreich

Der Button bzw. das Element muss groß und flächig sein. Das klingt trivial, ist aber so zentral und so wichtig, dass es nicht oft genug gesagt werden kann. Wir beobachten immer wieder, dass Webdesignern häufig der Mut fehlt, dieses essenzielle Element in entsprechender Größe zu gestalten. Aber keine Angst: Was wichtig ist, darf groß sein.
Weiter muss sich das Element in Bezug auf Farbe deutlich vom Hintergrund abheben, um ausreichend wahrgenommen zu werden. Ob ein Element ausreichende Größe hat und kontrastreich genug ist, zeigt eine einfache Probe aufs Exempel: Augen zusammenkneifen und schauen. Wenn bei verschwommener Darstellung das Element immer noch hervorsticht, ist es gut gesetzt. Wer die Augen nicht bemühen möchte, kann auch den Unschärfe-Filter von Photoshop verwenden.

2) Klick mich, klick mich jetzt!

Über die Frage, anhand welcher grafischer Elemente ein User erkennen kann, dass ein Element klickbar ist, werden ganze Abhandlungen geschrieben. Daher hier nur die wesentlichen Elemente.
Prinzipiell müssen wir uns klarmachen, dass das Wissen darüber, welche Elemente klickbar sind, auf Erlerntem basiert. Ein Blick über den Tellerrand ist also erforderlich. Im Allgemeinen lässt sich sagen, dass unterstrichene Textfragmente als klickbar wahrgenommen werden. Noch häufiger geklickt werden jedoch Buttons. Doch was macht einen Button eigentlich zum Button?
Zum einen ist es seine rechteckige Form, wobei die Breite größer als die Höhe ist. Querformate werden besser als Buttons erkannt als Hochformate. Farbige Flächen funktionieren besser als bloße Konturen – wiederum wegen des größeren Kontrastes. Zusätzlich beobachten wir, dass eine gewisse Plastizität hilfreich ist: Dreidimensionale Elemente werden schneller als klickbar erfasst. Die typischen abgerundeten Ecken sind kein Muss. Auch ein rein rechteckiges Element wird richtig als Button interpretiert. Teilweise kann ein aktivierendes Icon neben dem eigentlichen Text den Effekt verstärken.

Unterschiedliche Arten von Buttons aus dem responsiven helllicht-Framework:

3) What’s next?

Niemand mag das Ungewisse, auch User nicht. Ein Button beziehungsweise ein Call-to-Action-Element generell sollte den User klar darüber informieren, was bei einem Klick passiert. Dies baut Barrieren ab. Beschriftungen wie „Los“, „Start“ oder Ähnliches sind daher nicht hilfreich. Besser sind Formulierungen wie „Jetzt testen“, „Kostenfrei herunterladen“ oder „Premium-Account erstellen“. Diese geben nämlich dem User bereits vor dem Klick Aufschluss darüber, was ihn auf der nächsten Seite oder im nächsten Schritt erwartet.

Schön, dass Sie hier sind!

Auch wir können auf Kekse nicht verzichten! Unsere Website nutzt Cookies. Die schmecken zwar nicht nach Schokolade, sorgen aber für ein gutes Nutzererlebnis. Weitere Informationen finden Sie auf unserer Datenschutz-Seite oder in unserem Impressum.

Wählen Sie Ihre Lieblings-Cookies

Unbedingt erforderliche Cookies

Immer aktiv

Diese Cookies sind zwingend erforderlich, damit unsere Website wie gewünscht funktioniert. Wir speichern zum Beispiel Ihre Cookie-Präferenzen in einem Cookie ;-) Genauso speichern, wenn Sie ein Overlay geschlossen haben. Wichtig zu wissen: Wir speichern keine personenbezogenen Daten in diesen Cookies, sondern nur Werte nach dem Muster 0 oder 1.

Leistungs-Cookies

Darf’s etwas mehr sein? Diese Cookies verwenden wir, um die Leistung unserer Website zu verbessern. Wir setzen Cookies, um zu verstehen wie sich Nutzer über unsere Website bewegen und welche Seiten sie aufrufen. Wir verwenden hierzu Google Analytics und Hotjar.

Cookies für Marketing-Zwecke

Marketing-Cookies nutzen wir, um mit anderen Plattformen zu kommunizieren. Wenn wir Werbung in Sozialen Netzwerken, z. B. bei Facebook oder LinkedIn schalten, helfen sie uns, die richtigen Nutzer zu finden.