Gastbeitrag von Lina Borgmann
5 Web Design Tipps für Buttons, die geklickt werden
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.
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 Abbildung 2 veranschauliche ich dir, wie der Contrast Checker funktioniert:
Wichtig: Deine Buttons sollten selbstverständlich alle 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 Abbildungen 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 meiner Tipps!
Zu Launch like a brand
