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:
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:
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.
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.
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
