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:
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
.
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.
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
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
.
In der Regel gibt es auf Webseiten folgende Buttons:
Primäre Buttons
Verwenden Sie primäre Buttons für das primäre Conversion-Ziel der jeweiligen Seite.
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ä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
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.
Mein Name ist Sascha Klapetz und ich mache Website-Konzepte, UX/SEO-Audits, Landingpages, Pagespeed-Optimierung, Leadgenerierung und Webentwicklung. Immer mit dem Ziel: Potenzielle Kunden für Ihr Unternehmen begeistern. Machen Sie jetzt Ihr Online-Marketing rentabler!
Auf LinkedIn vernetzenIch unterstütze Sie bei Konzept und Realisierung Ihrer Online-Marketing Kampagnen oder Webseiten, mit über Erfahrung aus 100 Online-Projekten in den letzten 14 Jahren.
Leistungen ansehenProjectival - Sascha Klapetz
Lichtstraße 21, 50825 Köln
sascha@projectival.de
0221 - 169 09 347