5 Tipps, wie Sie mit Buttons die Performance Ihrer Website steigern

Zu viel Kreativität kann nach hinten losgehen. Ja, das habe ich wirklich gesagt. Und ja, ich bin nach wie vor überzeugt von der Kraft kreativer Werbung. Es gibt allerdings Ausnahmen: Immer dann, wenn ein User zügig verstehen soll, was eine Webpage von ihm will, empfiehlt sich klare Kommunikation statt Spielerei. Das ist zum Beispiel für Kontaktformulare der Fall, aber auch für die oft stiefmütterlich behandelten »Call-to-Action«-Buttons, die man auf vielen Websites findet. Wie Sie Buttons auf Ihrer Internetseite am geschicktesten einsetzen und was Sie bei der Gestaltung beachten sollten, erfahren Sie in diesem Blogartikel.

Download: Mini Guide Website Optimierung

1) Buttongestaltung – So sollte er aussehen

 

Wir alle sind täglich im Internet unterwegs und haben gelernt, wie Webseiten normalerweise funktionieren. Nutzen Sie dieses gewohnte Nutzerverhalten für eine klare Button-Gestaltung:

Eindeutige Erkennbarkeit: Ein Button muss als solcher erkennbar sein. Verwenden Sie farbliche Hervorhebungen, Schatten, Umrandungen und Mouse-over-Effekte.


Visuelle Abhebung: Der CTA sollte sich deutlich von anderen Designelementen abheben – durch Farbe, Kontrast oder Größe.


Konsistenz im Design: Einheitliche Farben und Formen helfen, eine klare Nutzerführung zu schaffen. Definieren Sie eine Farbpalette und halten Sie sich daran.


Positionierung: Platzieren Sie CTAs an strategisch sinnvollen Stellen wie am Seitenanfang, nach einem Textabschnitt oder am Ende der Seite.

Vorsicht mit roten Buttons: Rot wird oft mit Warnsignalen oder Stoppschildern assoziiert. Falls Rot in Ihrem Corporate Design vorkommt, verwenden Sie sanftere Abstufungen oder Farbverläufe, um die Wirkung abzumildern.

 

2) Die richtige Ansprache im Button

 

Ein Button besteht oft nur aus wenigen Worten – aber diese sollten wohlüberlegt sein:

Vermeiden Sie generische Begriffe wie „Senden“ oder „Download“.


Klar formulieren, was passiert: „Jetzt kostenlos testen“, „Mehr erfahren“, „Newsletter abonnieren“.


Nutzer direkt ansprechen: Eine persönliche Formulierung wie „Meinen Account anlegen“ kann eine höhere Conversion-Rate erzielen.

SEO-Tipp:
Eine Schaltfläche ist eine Verlinkung und gibt Suchmaschinen wichtige Signale. Überlegen Sie sich daher relevante Begriffe für die Button-Beschriftung, um das Ranking Ihrer Zielseite zu verbessern.

 

3) Attraktives Design für maximale Aufmerksamkeit

 

Ein CTA-Button darf auffällig sein, aber er muss funktional bleiben.

Farbwahl gezielt einsetzen: Kontraste helfen, den CTA hervorzuheben.


Größe beachten: Buttons sollten nicht zu klein oder zu groß sein.


Klarheit geht vor Design-Experimenten: Nutzer müssen den Button auf den ersten Blick erkennen.


Einheitlichkeit beachten: Wenn sich Ihre Buttons in Farbe, Form oder Größe stark unterscheiden, kann das Nutzer verwirren.

Tipp:
Gestalten Sie verschiedene Buttons für verschiedene Aktionen, z. B. einen grünen Button für „Jetzt kaufen“ und einen blauen für „Mehr erfahren“.

 

4) Seien Sie auch mobile friendly beim Button

 

Immer mehr Menschen besuchen Websites über mobile Geräte. Daher sollten Ihre CTAs für Smartphones & Tablets optimiert sein:

 

Ausreichend große Buttons, damit sie einfach per Touch bedienbar sind.


Kein abgeschnittener Text oder Button-Ränder.


Buttons, die sich gut in die mobile Ansicht einfügen, ohne die Nutzererfahrung zu stören.


Abstände beachten: Ein Button, der zu nah an anderen Elementen liegt, kann versehentlich gedrückt werden.

Tipp:
Testen Sie Ihre CTA-Buttons regelmäßig auf mobilen Geräten, um sicherzustellen, dass sie problemlos funktionieren.

 

5) Buttons mehrfach einsetzen

 

Sie haben einen gut gestalteten CTA-Button an der perfekten Stelle platziert? Super! Aber es spricht nichts dagegen, ihn mehrfach zu verwenden.

Setzen Sie CTAs an mehreren Stellen ein, um die Wahrscheinlichkeit eines Klicks zu erhöhen.


Achten Sie auf den Kontext: Der Button sollte immer inhaltlich passend eingebunden sein.


Vermeiden Sie eine „Button-Flut“: Zu viele CTAs können Nutzer überfordern.

Extra-Tipp:
Nutzen Sie A/B-Tests, um herauszufinden, welche Platzierung und Gestaltung am zuverlässigsten funktionieren.

 

 

 Zwei Beispiele zum Schluss

guter-button.jpg

 

Ein verständliches Beispiel dafür, wie man Schaltflächen sinnvoll einsetzt, habe ich auf der Internetseite unseres Systempartners HubSpot für Inbound Marketing gefunden.

Alle Elemente des Teasers wurden auf das Ziel ausgerichtet, die Klickrate des Buttons zu fördern:

  • Der Helm in der Hand der Frau signalisiert einen Raketenstart.
  • Der Text konzentriert sich auf das Produktversprechen.
  • Der Button sticht farblich hervor und ist durch die Platzierung, die zentrierte Beschriftung und einen Mouse-over-Effekt eindeutig zu identifizieren.
  • Die Buttonbeschriftung »Jetzt kostenlos starten« ist auffordernd und deutet an, worum es geht.
  • Die Subline unterhalb der Schaltfläche verstärkt den Anreiz und konkretisiert das kostenlose Angebot.

 schlechter-button.jpg

 

Ein Beispiel, wie man es nicht machen sollte, habe ich auf der Internetseite eines Maschinenbauers gefunden. Das Unternehmen möchte durch den Teaser auf drei Bereiche seines Leistungsportfolios verweisen, für die es jeweils eine Landingpage gibt. Ich habe hier absichtlich ein Beispiel gewählt, das nicht vordergründig abstoßend wirkt, wie leider viele andere im Internet. Ich finde das Design dieses Teasers ambitioniert, farblich stimmig, formal sauber und ausgewogen. Aber leider funktioniert es nicht hinsichtlich der Usability und leider auch nicht im Sinne des Marketings.

  • Die Bilder sind nicht eindeutig, sondern bemüht, die Themen spannend in Szene zu setzen. Dabei bezweifle ich, dass es für potenzielle Kunden relevant ist, ob Drehen, Bohren oder Fräsen spannende Tätigkeiten sind. Er will sie ja schließlich nicht selbst ausführen, sondern beauftragen. Es wäre sinnvoller, an dieser Stelle den Kundennutzen in den Vordergrund zu stellen und diesen durch Bilder oder Grafiken zu kommunizieren.
  • Diesem Teaser mangelt es vor allem an Inhalt! Und damit meine ich eine textliche Erläuterung der einzelnen Segmente des Portfolios.
  • Die Schaltflächen sind zu dezent, heben sich nicht ausreichend vom Hintergrund ab und sind formal nicht eindeutig zu identifizieren. Sie enthalten keine Aufforderung.
  • Im Übrigen sind die Bilder nicht verlinkt – was hier sinnvoll wäre (auch hinsichtlich SEO), weil der eine oder andere Besucher vermutlich auf die Bilder klicken wird.

 

Fazit zur Button-Performance

Es ist wirklich kein Hexenwerk, Ihre Websiteperformance mit gut konzipierten Buttons anzukurbeln. Eine Handvoll simpler Regeln reicht schon aus, um eine sichtbare Verbesserung zu erzielen. Wenn Sie sich an die oben besprochenen Tipps halten, werden Sie den Effekt schon bald merken. Denken Sie daran, wenn Sie sich mit dem nächsten Website-Relaunch oder einer Website Optimierung beschäftigen. 

Was Sie über Buttons hinaus noch an Ihrer Website optimieren können, um die Kundengenerierung zu pushen, erfahren Sie in unserem kostenlosen Mini Guide Website Optimierung.

 

Mini Guide Website Optimierung jetzt downloaden

Christoph Weimann
Als Partner und Gründer von vierviertel berät er unsere Kunden mit Schwerpunkt Strategie. Er ist begeisterter Wellenreiter, Grillmeister und Tennis-Sandplatzspezialist!
Kommentare

Newsflash abonnieren

Unser Newsflash kommt per Mail und bringt aktuelle Marketing-Insights und Neuigkeiten aus der Agentur – immer dann, wenn es etwas wichtiges zu berichten gibt.