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.

1) Ein Button ist ein Website-Button ist eine Schaltfläche

Wir alle sind täglich im Internet unterwegs. Und mit den Jahren haben wir gelernt, wie die Elemente einer Internetseite normalerweise funktionieren. Dieses Wissen sollten Sie bei der Gestaltung Ihrer Call to Action (CTAs) im Hinterkopf behalten: Ein Button muss auch aussehen wie einer, sonst erkennen ihn User schwer oder gar nicht. Verwenden Sie also Elemente wie farbliche Hervorhebungen, Schatten, farbliche Begrenzung und Mouse-over.

2) Die richtige Ansprache im Button

Es lohnt sich, ein paar Gedanken auf die wenigen Worte zu verwenden, mit denen Sie per Schaltfläche den User ansprechen. Allzu knappe, generische Formulierungen wie „Senden“ oder „Download“ wirken nicht sehr reizvoll. Besser ist es, direkt und einladend zu sagen, was den Besucher im Anschluss erwartet: »Newsletter abonnieren«, »Jetzt mitmachen« oder »Mehr zum Thema« sind Beispiele für kurze, aber freundliche Formulierungen. Auch eine persönliche Ansprache wie »Meinen Account anlegen« ist eine Möglichkeit, wenn das zu Ihrem Unternehmen passt.

Aber übertreiben Sie es auch nicht mit der netten Ansprache: Zu viele Wörter auf einem Button erhöhen das Risiko, dass er übersehen wird – wir User sind knappe Schaltflächen einfach gewöhnt – oder dass er unnötig verwirrt.

Denken Sie an die Suchmaschinen! Eine Schaltfläche ist eine Verlinkung und gibt Suchmaschinen wichtige Signale, die für das Ranking relevant sind. Wenn die Seite, auf die Sie durch den Button verlinken, in Suchmaschinen gut gelistet werden soll, dann sollten Sie dies bei der Bezeichnung berücksichtigen. Weitere Informationen zu Verlinkungen finden Sie in meinem Artikel: „…“.

3) Gestaltung des Buttons darf sein

Es gibt keinen Grund, warum ein Button nicht attraktiv aussehen sollte. Solange er auf den Punkt bringt, worum es geht, und sich deutlich als CTA präsentiert, können Sie ihn nach Gusto gestalten. Starke Farben und Kontraste ziehen die Aufmerksamkeit an und heben Ihre Buttons aus den 08/15-Angeboten heraus. Achten Sie darauf, dass Ihre Schaltfläche gut sichtbar und leicht zu finden ist.

Vorsicht mit roten CTAs: User klicken nicht gerne rote Schaltflächen, denn sie signalisieren unserem instinktiven Part nichts Gutes, sondern eher Gefahr. Wenn Sie aufgrund der Corporate Identity oder aus anderen Gründen Rot verwenden müssen, setzen Sie auf sanftere Abstufungen oder einen Farbverlauf, um dem Rot das Grelle zu nehmen.

Haben Sie sich für eine Art der Gestaltung entschieden, bleiben Sie dabei. Definieren Sie Form, Größe und Farbpalette für die verschiedenen Zwecke (zum Beispiel könnte „Jetzt … kaufen“ einen anderen Farbton aufweisen als „Mehr … erfahren“) und halten Sie sich daran. Wichtig ist, dass Ihre Besucher die CTAs auf den ersten Blick wiedererkennen.

4) Seien Sie auch mobile friendly beim Button

Mobile Devices sind aus unserem Leben nicht wegzudenken. Und immer mehr Menschen verwenden sie sogar vorrangig, um ins Netz zu gehen. Ihre Buttons sollten also auf Mobilgeräten wie Smartphones und Tablets ebenso benutzerfreundlich sein wie in der Desktopversion. Abgeschnittene Ränder, lesefeindliche Schriftgrößen oder eine hakelige Bedienung erhöhen die Absprungrate enorm. Kein Wunder – wer kennt nicht den steigenden Blutdruck angesichts einer kaum bedienbaren, nicht mobiloptimierten Seite.

Großzügige, übersichtliche Schaltflächen und Eingabefelder hingegen machen es Ihren Besuchern auch mobile leicht, sich auf den nächsten Schritt einzulassen.

5) Buttons mehrfach einsetzen

Nehmen wir an, Sie haben einen knackigen, gut gestalteten, attraktiven CTA-Button, der Besucher zu einem Download führen soll. Sie haben ihn an der perfekten Stelle platziert – soweit alles bestens. Es gibt aber keinen Grund, warum diese Schaltfläche nur einmal auf Ihrer Webpage auftauchen sollte. Sie können ihn ohne Weiteres mehrfach verwenden. Achten Sie lediglich darauf, dass er sinnvoll eingebunden ist und dem Nutzer einen Mehrwert bietet. Und natürlich: dass die entsprechende Verlinkung auch zuverlässig zum beworbenen Angebot führt.

Extratipp: Eine gute Methode, um die Platzierung und Gestaltung Ihrer CTAs zu überprüfen, sind A/B-Tests. So finden Sie zuverlässig heraus, welche Art von Button auf Ihrer Internetseite am besten funktioniert.

 Zwei Beispiele zum Schluss

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.

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.