Buttons richtig machen!

· Sascha Klapetz
Buttons richtig machen!

Buttons sind ein elementarer Bestandteil eines jeden User Interfaces (UI). Kaum eine Landingpage, Webseite oder App kommt ohne Buttons aus.

Bedenken Sie diese Punkte, wenn Sie bei Ihrem nächsten Web-Projekt über Links, Buttons und Navigationselemente nachdenken:

1. Der Buttontext ist wichtig

Oft wird viel Arbeit in das Aussehen eines Buttons gesteckt, dabei zählen wie so oft die inneren Werte: der Buttontext.

Ist der Text nicht aussagekräftig oder womöglich abschreckend, werden die Nutzer den Button weder klicken noch berühren. Die gewünschte Aktion bleibt aus.

Beispiele:

  • Kontakt aufnehmen statt Absenden
  • Anmelden statt Abonnieren
  • Kostenlos anfordern statt Abonnieren

Hat der Button genügend Platz - auch in der mobilen Ansicht - kann auch ein längerer Buttontext verwendet werden, der den Nutzen deutlich macht, z.B. XY-Tipps herunterladen.

2. Die Lösung für Wurstfinger

Natürlich haben Ihre Nutzer keine Wurstfinger. Trotzdem gilt: Buttons fallen auf mobilen Endgeräten nicht nur auf, sondern sind auch besser bedienbar als herkömmliche Links im Fließtext.

Da Buttons eine deutlich größere (erkennbare) Touch-Fläche haben, sind diese leichter zu „treffen“. Aber: Das ist nur der Fall, wenn der Button zu anderen Buttons und verlinkten Elementen genügend Abstand hat.

Button vs. Link

3. Weniger ist mehr

Wenn Buttons so toll sind, warum dann nicht alle Links als Buttons darstellen? Ganz einfach: Wenn alle „schreien“, sind alle gleich laut, und keiner kann verstanden werden.

Buttons sollten daher sparsam und mit Bedacht eingesetzt werden:

Buttons sind für Aktionen gedacht, wie

  • eine Seite teilen
  • einen E-Mail-Newsletter anfordern
  • ein Produkt in den Warenkorb legen
  • eine Kontaktanfrage stellen usw.

Verweise auf andere Seiten sollten weiterhin als Link in der Navigation, im Fließtext und anderen Elementen dargestellt werden. Ausnahme: Der Link führt zum Beispiel im Fließtext zu einer Seite, die Teil des Conversion Flows ist, wie z.B. Kontakt aufnehmen.

4. Button ist nicht gleich Button

In der Regel gibt es auf Webseiten folgende Buttons:

  • Primäre Buttons
  • Sekundäre Buttons
  • Share-Buttons

Primäre Buttons

Verwenden Sie primäre Buttons für das primäre Conversion-Ziel der jeweiligen Seite.

Primärer Button

Primäre Buttons sollen hervorstechen. Das erreicht man zum Beispiel mit der Verwendung einer Komplementärfarbe. Beispiel: Ist Ihre Brand Grün, bietet sich Orange als Buttonfarbe an. Aber Vorsicht: Der Buttontext muss gut lesbar bleiben und Farben wie Rot haben Ihre eigene, womöglich negative Bedeutung.

Wichtig ist aber auch, dass primäre Buttons weder nebeneinanderstehen, noch in unmittelbarer Nähe zueinander. Idealerweise sieht man sowohl in der Desktop- als auch mobilen Ansicht nur max. einen primären Button beim Scrollen. Warum? Noch mal: Wenn alle schreien, wird keiner gehört.

Sekundäre Buttons

Sekundärer Button

Sekundäre Buttons sind zum Beispiel für eine einfache Landingpage in der Regel nicht notwendig, sondern eher für Seiten, die nicht auf eine einzelne Aktion optimiert werden können. Beispiel: Mehr Informationen statt Herunterladen.

Sekundäre Buttons sollten optisch nicht in Konkurrenz zu den primären Buttons stehen. In den meisten Fällen eignet sich ein Grauton als Buttonfarbe. Aufgrund der Optik ist es auch möglich, das sekundäre Buttons neben oder nah zu primären Buttons stehen, ohne diesen „die Show zu stehlen“.

Share-Buttons

Share-Button

Eigentlich ist das kein richtiger „Button-Typ“, da sie aber auf den meisten Seiten zu finden sind, sollten sie an dieser Stelle nicht unerwähnt bleiben.

Die Buttonfarbe kann der des jeweiligen Social Networks entsprechen, also Facebook-Blau für Facebook, Twitter-Hellblau für Twitter usw., da der Nutzer das gleich erkennt. Hier muss man allerdings im Einzelfall abwägen, ob das gesamte Layout dann zu bunt wirkt oder die Share-Buttons von einem primären Button ablenken. Generell sollten die Share-Buttons kleiner als die primären Buttons sein, aber auch die Regel ist nicht in Stein gemeißelt.

Ein Tipp: Oft werden die Share-Buttons nur mit Logo des jeweiligen Netzwerks dargestellt. Fügen Sie doch noch einen Buttontext hinzu, der zum Teilen oder Twittern auffordert.


Die hier angesprochenen Punkte sind nur die Spitze des Eisberges und ich könnte noch mehrere Seiten nur über Buttons schreiben. Übertrieben? Nein! Ein so kleiner Teil Ihrer Webseite und Ihres User Interfaces (UI) kann so wichtig für den Erfolg Ihres Unternehmens sein.

Titelbild: Pixabay / aitoff
Webseiten-Konzeption mit über 10 Jahre Praxiswissen
Egal, ob Webseiten Relaunch oder Update: Ich unterstütze Sie bei der Webseiten-Konzeption - mit über 10 Jahre Erfahrung aus Web-Entwicklung und Online-Marketing.
Mehr erfahren