Buttons auf Unternehmenswebsites werden oft während der Erstellung der Website einfach hinzugefügt: Das Template bringt einen Button in der Hauptfarbe mit, der Text lautet „Mehr erfahren“, und er wird rechts im ersten Bildschirmbereich platziert. Nach dem Livegang wird er nicht mehr angefasst, bis das Marketing feststellt, dass Besucher die Seite zwar gelesen haben, aber nicht wissen, was sie als Nächstes tun sollen. Buttons sind keine dekorativen Elemente – sie gehören zu den wenigen Stellen auf einer Seite, die gezielt eine Aktion lenken können. Ob ein Button praktisch ist, lässt sich einfach beurteilen: Kann der Besucher ihn auf einen Blick sehen und versteht er, was beim Klick passiert?
Zuerst klären, welche Aktion der Button auslösen soll
Bevor man Buttons überarbeitet, sollte man für jeden Button ein klares Aktionsziel festlegen. Es gibt einige häufige Kategorien: weiter informieren (zur Produktseite, zur Lösungsseite), Kontakt aufnehmen (anrufen, Formular ausfüllen, Kundenservice kontaktieren), Material erhalten (Dokument herunterladen, Preisinformationen ansehen), zurück zur Hauptnavigation (zur Rubrikseite, alle anzeigen). Je nach Aktionsziel sollten sich Text, Position und visuelle Gewichtung des Buttons unterscheiden.
Pro Seite sollte nur eine Hauptaktion beibehalten werden, alle weiteren Buttons werden herabgestuft. Wenn auf einem Bildschirm vier gleich auffällige Buttons nebeneinander erscheinen – „Jetzt anfragen“, „Online-Nachricht“, „Telefonkontakt“, „Angebot erhalten“ – bleiben Besucher eher stehen und vergleichen, wodurch die Aktion verzögert wird. Das Marketing kann ein Blatt Papier nehmen, alle Buttons der Seite auflisten, jeden einer Aktionskategorie zuordnen und dann beurteilen, welche sich wiederholen und welche zusammengefasst werden können.
Button-Texte sollten Aktion und Ergebnis klar benennen
Texte wie „Mehr erfahren“, „Hier klicken“ oder „Details“ haben das Problem, dass Besucher vor dem Klick nicht wissen, was sie erwartet. Praktischer ist es, Aktion und Objekt zu benennen, zum Beispiel „Produktdaten ansehen“, „Auswahlberatung erhalten“, „Vor-Ort-Termin vereinbaren“ oder „Preisinformationen herunterladen“. Die Textlänge sollte so kurz sein, dass sie auf einen Blick erfassbar ist. Im Chinesischen sind vier bis acht Zeichen meist gut geeignet; zu lange Texte beeinträchtigen die Lesbarkeit des Buttons.
Auf derselben Seite sollten verschiedene Buttons nicht mit ähnlichen Begriffen Verwirrung stiften. Wenn „Jetzt anfragen“ und „Sofort anfragen“ nebeneinander stehen, denken Besucher, es gäbe einen Unterschied, obwohl beide zur selben Seite führen. Bei der Überprüfung kann man den Quellcode oder die Backend-Inhalte durchsuchen und bedeutungsgleiche Button-Texte zu einer einheitlichen Formulierung zusammenführen.
Die Position folgt der Leserichtung, nicht nur der Optik
Wo ein Button platziert wird, hängt davon ab, ob Besucher an dieser Stelle bereits eine Handlungsbereitschaft entwickelt haben. Buttons im ersten Bildschirmbereich eignen sich für klare übergreifende Aktionen wie „Lösungen ansehen“. Buttons nach einem Produktvorstellungsabschnitt eignen sich für Aktionen wie „Angebot erhalten“ oder „Auswahlberatung“, die erst nach einer gewissen Information ausgelöst werden. Buttons am Seitenende dienen als Absicherung und bieten einen Ausweg für diejenigen, die noch unentschlossen sind.
Mobile Ansichten müssen separat betrachtet werden. Auf dem Smartphone ist der erste Bildschirmbereich begrenzt. Wenn ein Button erst nach dem Scrollen sichtbar wird, ist er praktisch nicht vorhanden. Das Marketing sollte die Seite im mobilen Browser öffnen, ohne zu scrollen, und prüfen, ob der Hauptbutton im ersten Bildschirm sichtbar ist. Falls nicht, sollte man den Button nach oben verschieben oder Text und Bilder oberhalb reduzieren.
Mehrere Buttons auf einem Bildschirm: Prioritäten durch Hierarchie unterscheiden
Wenn in einem Bereich zwei oder mehr Buttons erscheinen, sollte man Haupt- und Nebenaktionen durch unterschiedliche Stile unterscheiden: Der Hauptbutton erhält eine gefüllte, kontrastreiche Hintergrundfarbe, der Nebenbutton eine Umrandung oder einen Textlink. Zwei gleich auffällige gefüllte Buttons nebeneinander bedeuten keine Hierarchie. Bei der Farbwahl sollte sich der Hauptbutton deutlich vom Seitenhintergrund und von Bildern abheben, damit er nicht auf einem farblich ähnlichen Bild untergeht.
Um den Button herum sollte ausreichend Weißraum bleiben. Wenn ein Button direkt am Rand von Text oder Bildern klebt, kann man beim Klicken leicht versehentlich einen benachbarten Link treffen. Bei der Überprüfung kann man auf dem Smartphone mehrmals tippen und schauen, ob der Finger leicht danebengeht.
Vor dem Livegang die Nutzbarkeit jedes Buttons prüfen
Ein fertig gestellter Button ist nicht automatisch funktionsfähig. Vor der Veröffentlichung oder einem Relaunch sollte man die folgende Reihenfolge durchgehen:
- Jeden Button einzeln anklicken und prüfen, ob das Ziel korrekt ist und nicht auf die Startseite, eine 404-Seite oder eine alte Version führt.
- Prüfen, ob der Telefonbutton auf dem Smartphone direkt die Wählfunktion öffnet und ob nach dem Absenden eines Formulars eine klare Erfolgsmeldung erscheint.
- Prüfen, ob der Button-Text mit dem Inhalt der Zielseite übereinstimmt – vermeiden, dass „Angebot erhalten“ zur Unternehmensvorstellung führt.
- Die Seite sowohl auf dem Smartphone als auch am Computer ansehen und sicherstellen, dass der Button nicht verdeckt ist, nicht über den Bildschirm hinausragt und der Text nicht abgeschnitten wird.
- Prüfen, ob dieselbe Aktion an verschiedenen Stellen der Seite auf dasselbe Ziel verweist, um mehrere Einstiege zu unterschiedlichen Seiten zu vermeiden.
Diese Prüfungen erfordern keinen technischen Hintergrund und können vom Marketing selbst durchgeführt werden. Entscheidend ist, daraus eine feste Routine zu machen, die bei jeder neuen Seite oder Inhaltsanpassung durchlaufen wird.
Buttons in die laufende Pflege einbeziehen, statt sie einmalig zu erledigen
Zielseiten von Buttons ändern sich, und auch geschäftliche Schwerpunkte verschieben sich. Das Marketing kann vierteljährlich die Buttons der Hauptseiten überprüfen: Passen die Texte noch zum aktuell beworbenen Geschäft? Sind die Verlinkungen noch gültig? Haben sich neue doppelte Buttons angesammelt? Bei Anpassungen sollte man jeweils nur eine Variable ändern und eine Weile beobachten, um nicht gleichzeitig Text, Position und Farbe zu verändern – sonst lässt sich bei Problemen nicht erkennen, welche Änderung sie verursacht hat.
Buttons sind kleine Elemente auf einer Website, aber sie bestimmen direkt, wohin Besucher nach dem Lesen der Inhalte gehen. Sie als Teil der Inhalte zu pflegen, ist wertvoller, als wiederholt das visuelle Design anzupassen.
