Button Design – Tipps für mehr Call-to-Action

Du und ich, wir wissen, wie wichtig diese kleinen bunten Buttons sind, oder? Sie sind wie Wegweiser, die uns auf unserer Reise begleiten und den Schlüssel zu mehr Erfolg und Interaktion darstellen.

Mit nur einem Klick kannst du aus einem stillen Website-Besucher einen engagierten (möglichen) Kunden machen. Das ist die Magie der Call-to-Action-Buttons!

In diesem Beitrag lernst du, was ein Call-to-Action-Button ist und wie du ihn so kreierst, dass du deine Webseitenbesucher tatsächlich zum Klicken, also zur Handlungsaufforderung, bewegst. Kennst du die grundlegenden Prinzipien zur Button-Gestaltung?

Ein Button, ein Link, was ist der Unterschied?

Ein Button ist ein interaktives Element auf der Benutzeroberfläche, das auf einen bestimmten Befehl reagiert, sobald du es anklickst. Wenn du auf einen Button klickst, kannst du verschiedene Aktionen auslösen, wie beispielsweise das Versenden einer E-Mail, den Kauf eines Produkts oder den Start eines Downloads. Buttons zeichnen sich durch ihre klare, geometrische Form und den deutlichen Farbkontrast zu ihrer Umgebung aus. Sie sind äußerst benutzerfreundlich, weil sie die Idee eines physischen Schalters nachempfinden. Aufgrund dieser beiden Eigenschaften unterscheiden sich Buttons von einfachen Links.

Bei einem normalen Link ist lediglich der Text verknüpft:

Was ist ein Call-to-Action-Button?

Call to Action (du kennst den Begriff sicher unter CTA) ist eine Handlungsaufforderung für deine Leser. Der CTA Button soll also deine Website Nutzer zu einer konkreten Handlung auffordern und so eine Conversion anstoßen – z. B. einen Kauf, eine Anmeldung oder das Herunterladen einer Datei = User-Interaktion.

Somit wird dein Leser zum aktiven Kunden.

Die Button-Gestaltung

Die Bausteine eines Buttons

Ein klassischer Button setzt sich in der Regel aus einem Wort oder einer kurzen Textzeile und einer klaren geometrischen Form zusammen. Wenn diesen gestaltest, solltest du folgende Elemente im Blick behalten:

• Farbfüllung oder Farbverlauf
• Farbe der Kontur
• Der Radius der Ecken
• Innenabstände
• Der äußere Rand oder die Begrenzung
• Textgröße und Schriftstärke
• Schatten

Verschiedene Button-Modi im Überblick

Für eine verbesserte Benutzerfreundlichkeit sieht ein Button je nach Interaktion des Nutzers unterschiedlich aus.

Dies umfasst den Standard-Modus vor dem Klick, den Hover-Zustand (wenn der Nutzer mit der Maus darüberfährt), den aktivierten Modus nach einem Klick und den fokussierten Modus, bei dem der Button beispielsweise durch einen farblich abgesetzten Rand hervorgehoben wird.

Hier sind die Modi im Detail. Du musst nicht alle 4 Modi umsetzen. Sinnvoll ist auf alle Fälle eine optische Veränderung des Buttons, wenn der Nutzer mit dem Mauszeiger über den Button fährt (Hover).

1. Standard-Modus (Default): Dies ist der Normalzustand des Buttons vor dem Klick.
2. Hover: Wenn der Nutzer mit der Maus über den Button fährt, kann sich die Darstellung ändern, beispielsweise durch das Ausfüllen mit Farbe oder eine Farbänderung.
3. Aktiviert (Gedrückt): Nach dem Klick kann sich die Farbe ändern oder reduziert werden, um anzuzeigen, dass der Button aktiviert wurde.
4. Fokussiert: In diesem Modus wird der Button zusätzlich hervorgehoben, beispielsweise durch einen farblich abgesetzten Rand, um zu signalisieren, dass er ausgewählt oder in den Fokus genommen wurde.

Hier je ein Beispiel für Standard, Hover, aktiviert, fokussierter Button:

Primäre und sekundäre Buttons

Buttons lassen sich in primäre und sekundäre Kategorien unterteilen, um unterschiedliche Klickmöglichkeiten zu priorisieren. Der Primär-Button signalisiert die bevorzugte Handlungsaufforderung, wie zum Beispiel den Kauf eines Produkts, während der Sekundär-Button eine alternative Option anbietet, die vom Website-Betreiber weniger bevorzugt wird, wie das Hinzufügen eines Artikels zur Wunschliste oder den Wechsel zu einer Unterseite der Website.

→Der primäre Button sollte auffälliger gestaltet sein als der sekundäre Button.

Die Macht der Button-Microcopy

Unter Button-Microcopy versteht man den Text, der auf einem Button erscheint – sei es ein einzelnes Wort oder ein kurzer Textausschnitt. Hättest du erraten, was das Wort „Button-Microcopy“ bedeutet? Bei Call-to-Action-Buttons wird in wenigen präzisen Worten klargestellt, was den Nutzer erwartet, wenn er auf die Schaltfläche klickt. Dies geschieht mit nur wenigen, prägnanten Worten, wie zum Beispiel:

• „Gespräch buchen“
• „Kaufen“
• „Lass uns starten!“

Das Design deines Call-to-Action-Buttons

Bei der Gestaltung deiner Buttons ist es wichtig, dass sie sich visuell vom Rest der Benutzeroberfläche abheben, ohne jedoch von deinen Brand-Design-Farben abzuweichen. Achte darauf, die festgelegten Farben deines CI beizubehalten.

• Achte auf ausreichende Farbkontraste
• Stelle sicher, dass das Design deiner Buttons konsistent über alle Unterseiten hinweg ist.
• Die Schaltfläche sollte groß genug sein, um problemlos bedient werden zu können. Wähle eine Größe von mindestens 36 Pixel.
• Achte auf ausreichenden Abstand zwischen den Buttons (mindestens 16 Pixel) und zwischen dem Button und anderen Elementen, um genügend Weißraum zu gewährleisten. Normalerweise stellst du maximal 2 nebeneinander. Tests belegen, je mehr Buttons du auf einer Seite hast, je weniger wird geklickt. Deine Leser können sich nicht mehr entscheiden und verlassen deine Seite, ohne auf eine Handlungsaufforderung geklickt zu haben.
• Aus Gründen der Benutzerfreundlichkeit ist es ratsam, ein einfaches und klassisches Button-Design zu wählen, anstelle einer auffälligen Lösung. Sagt man. Und doch, einzelne Buttons dürfen auch durch ein individuelles Design hervorstechen.
• Die Platzierung deines Buttons sollte bewährten Mustern folgen, wie beispielsweise unter der Überschrift auf der Homepage, am Ende eines Formulars, im Zentrum eines Video-Vorschaubildschirms, oben rechts im Warenkorb und so weiter.
• Bei Bedarf kann ein Icon den Text sinnvoll ergänzen.

Fazit

Es gibt sehr viele Möglichkeiten für die Gestaltung eines Call-to-Action. Selbst über die Platzierung scheiden sich die Geister.

Unstrittig ist: dass sich der Button durch seine Farbe klar vom Rest der Seite abheben muss, um maximale Aufmerksamkeit zu erzeugen.

In Bezug auf die Anzahl der Buttons bewegt man sich schnell auf einem schmalen Grat – zu viele Buttons können schnell als aufdringlich empfunden werden. Im Grunde ergibt es wenig Sinn, gleich nach der ersten Informationsquelle einen CTA einzufügen, wenn der Leser noch nicht wirklich weiß, worum es geht.

Dennoch sollte man im Headerbereich nicht auf einen ersten CTA verzichten. Hier bietet sich beispielsweise ein „Kontakt“ oder „Unser Angebot“ an. Also kein Button, der verkauft, sondern einfach nur ein Button für eine gute Nutzerführung.

Hier eine weitere Möglichkeit für die Microcopy, also die Text-Formulierung des Buttons. Der CTA muss eine deutliche, klare Aufforderung sein.

Für die Handlungsaufforderung kannst du auch den emotionalen Wunsch deiner Nutzer in einem Text vorausschicken und gleich daneben die Lösung in Form eines Buttons platzieren.

Hier ein paar Beispiele:

Welche Erfahrungen hast du mit Buttons und Call-to-Action gemacht? Schreib mir gerne deine Gedanken zu diesem Thema in die Kommentare.