BRANDNEU – Guide: „So baust du eine kauffreudige Newsletter Community auf!“ jetzt für 0€ sichern! >>>

Blog

Mit diesem Web Design werden deine Buttons besser geklickt

Damit Buttons auf Websites geklickt werden, gibt es einige bewährte Web Design Tipps. In diesem Artikel möchte ich dir als Brand, E-Learning & Web Designerin diese Tipps ans Herz legen, damit die Buttons auf deiner Website besser geklickt werden, du deine Conversion steigerst und am Ende des Tages besser verkaufst.

Lass uns mit den 5 Web Design Tipps für deine Buttons starten!

Tipp 1: Das richtige Button Design

Deine Buttons sollten ein angenehmes Button Design besitzen – ohne das Gefühl zu vermitteln, dass der Button einen direkt anspringt oder aggressiv sagt: “KLICK MICH, KLICK MICH, KLICK MICH!”. Dabei spielen die richtige Schriftgröße sowie Farbe und der richtige Kontrast eine extrem wichtige Rolle.

Die richtige Schriftgröße

Ist die Schriftgröße deiner Buttons zu klein und man muss die Augen beim Lesen zusammen kneifen oder zu groß, dass sie unprofessionell wie in einem Kinderbuch wirken, werden deine Buttons weniger geklickt und die Conversion ist direkt negativ beeinträchtigt.

Ich empfehle dir die Schriftgröße deiner Buttons auf die gleiche Größe wie deinen Fließtext einzustellen. Ist dein kompletter Website Fließtext zum Beispiel 20px groß, sollte die Schriftgröße deiner Buttons auch auf 20px eingestellt sein.

Die richtige Farbe und Hierarchie

Deine Buttons sollten in deinen Branding Farben gestaltet werden, damit sich dein Branding konsistent durch deine Website zieht und du so einen hohen Wiedererkennungswert mit deiner Marke erzielst. Nimm am besten auffällige Farben aus deiner Branding Farbenpalette!

Außerdem ist es wichtig, dass du durch immer wiederkehrende Button-Designs klar machst, welcher Button dein Hauptbutton ist und welche deine sekundäre Buttons sind, die eher in den Hintergrund treten sollen. 

So könnte zum Beispiel dein Button Design Set für deine komplette Website aussehen:

Abbildung 1

Der richtige Kontrast

Bitte beachte, dass der Kontrast zwischen Hintergrundfarbe und Textfarbe auf deinen Buttons ausreichend ist. Die Textfarbe sollte sich sehr stark von der Hintergrundfarbe abheben. 

Wenn du unsicher bist, ob deine Buttons genügend Kontrast besitzen, kannst du den Contrast Checker nutzen. Der Contrast Checker wertet in wenigen Sekunden für dich aus, ob deine Farben gut übereinander funktionieren.

Auf der folgenden Abbildung veranschauliche ich dir, wie der Contrast Checker funktioniert:

Abbildung 2

Wichtig: Deine Buttons sollten so gestaltet sein, dass sie auf verschiedenen Geräten und Bildschirmgrößen wie Tablet und Smartphone gut funktionieren.

 

Tipp 2: Der richtige Button Text

Buttons haben nicht nur die Funktion designtechnisch aufzufallen, sondern auch inhaltlich treffend zu beschreiben, was passiert, wenn Website Besucher:innen drauf klicken.

Daher brauchen Buttons im Web Design eine klare und eindeutige Beschriftung. Ein treffender Button-Text beeinflusst übrigens auch deine Suchmaschinenoptimierung (SEO) enorm positiv.

Treffende Button-Texte enthalten relevante Begriffe und aktivieren sehr stark. Hier sind einige gute Beispiele, ich habe dir die relevanten Begriffe immer markiert:

  • “Jetzt E-Book herunterladen
  • “Jetzt Platz sichern
  • Angebot sichern!”
  • “Jetzt kaufen
  • “Für 0€ herunterladen
  • “Zum gratis Download
  • Rabatt sichern
  • “Jetzt Onlinekurs starten
  • “Jetzt loslegen

Button-Texte, die keine konkreten Begriffe enthalten, sind unklar, lasch und animieren nicht zum Klicken. Diese Beispiele solltest du weitestgehend vermeiden:

  • “Mehr erfahren” 
  • “Ich will dabei sein”
  • “Ich will das”
  • “Genau das brauche ich”

Tipp 3: Die richtige Button Platzierung

Deine Website-Buttons sollten an einer Stelle platziert werden, an der sie leicht zu finden und zu erreichen sind. Die beste und logischste Möglichkeit ist es, Buttons in der Nähe des Inhalts zu platzieren, auf den sie sich beziehen. 

Hier ein Beispiel:

Auf der folgenden Abbildung siehst du eine Sektion, in der ein Programm vorgestellt wird. Als Abschluss soll ein Button gesetzt werden, der mit dem Text “Jetzt Platz sichern” zur Buchung des Programms führt. Wo gehört jetzt der Button hin?

In Abbildung 3a siehst du, dass der Leseweg deiner Website Besucher:innen (in Rot) lang und nicht intuitiv ist. Leser:innen verschwenden Zeit, in dem sie ihren Kopf am Ende des Textes nach links wenden müssen. Die Benutzerführung, dass der Button unter dem Bild erscheint, welches überhaupt nichts mit “Jetzt Platz sichern” zu tun hat, ist weder logisch noch Conversion optimiert umgesetzt.

Abbildung 3a

Auf Abbildung 3b ist der Button richtig platziert. Sobald die Website-Besucher:innen den Text gelesen haben, kommt der Button als logischer Abschluss. Wenn Buttons direkt in der Nähe von den dazugehörigen Inhalten platziert werden, werden sie öfter geklickt und die Conversion steigt.

Abbildung 3b

Fazit:

Ein gutes Button Design, der richtige Button-Text und die richtige Platzierung tragen aktiv dazu bei, die Benutzererfahrung deiner Website zu verbessern, die Konversionsrate zu erhöhen und dein Branding erlebbar und spürbar zu machen.

Viel Spaß beim Umsetzen der Tipps!
Deine Lina Borgmann

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Die Autorin

Aktuelle Beiträge:

0€ Launchplan + video

Dein gratis *Launchplaner* für mehr Verkäufe

Mit dem Planer erhältst du eine Übersicht, wann du welche Sales E-Mail raussendest, bekommst eine Designvorlage für deine Mails und steigerst mit E-Mail Marketing und Branding sofort deine Verkäufe!

Sicher dir jetzt den gratis *Launchplaner*, um deine Verkaufsphase strategischer und erfolgreicher anzugehen!

Scroll to Top