Kein Tech-Produkt ohne Buttons. Und die entsprechenden Button-Texte auf der Website sind zwar kurz, haben aber ausgesprochen viel Potenzial.
Technisch gesehen sind Buttons Schaltflächen. Im Produkt ist ein Text auf einem farblichen Hintergrund zu sehen und im Hintergrund wird ein Link gesetzt. Wenn die Fläche geklickt oder getippt wird, dann öffnet sich die Zielseite.
Wie Button-Texte der Website formuliert sind, hat einen direkten Einfluss auf die Conversion Rate. Beispiele sind „Jetzt kostenlos herunterladen“, „Anmelden“ oder „Kostenpflichtig bestellen“.
Wann brauchst du Buttons?
Buttons sind immer dann wichtig, wenn du klar machen willst, was Benutzer machen sollen. Ohne einen gescheiten Button-Text bleiben sie buchstäblich auf der Seite hängen. Beispiele sind:
- die Anmeldung zu deinem Newsletter
- der Download eines Freebies
- eine E-Mail-Anfrage zu deinen Leistungen
- der Kaufabschluss im Online-Shop
- die Buchung auf deiner Event-Website
- Leadgewinnung auf deiner Landingpage
Buttons sind der Kitt, der deine Website und das Benutzererlebnis zusammenhält.
Der Zweck von Button-Texten
In der Liste oben siehst du, dass Buttons für 2 verschiedene Dinge eingesetzt werden können:
- Für die Navigation einer Website (oder einer App)
- Als Aufforderung zum Handeln, auch CTA genannt (engl.: call to action)
Ersteres gehört zum Produkt-Design und zielt darauf ab, Nutzer zum nächsten Schritt zu bringen. Zweites gehört zum Marketing und soll dazu anleiten, eine gewünschte Aktion auszuführen.
Sowohl Buttons als auch CTAs haben einen direkten Einfluss auf die Conversion Rate. Von gutem UX Writing profitieren beide.
Das Anklickbare griffig machen
Buttons und CTAs gehören zu den wichtigsten interaktiven Elementen einer Website. Wir verbringen viel Zeit im Web mit der Suche nach dem nächsten Ding, das wir anklicken können. Auch wenn sie noch so klein sind, es lohnt sich, ganz genau hinzusehen, um das Potenzial voll auszuschöpfen. Um die gewünschte Handlung zu fördern, ist es elementar, dass Button-Texte unmissverständlich sind.
Wenn nicht klar ist, welche Aktion deine Besucher auf der Website ausführen sollen, beeinträchtigt das deine Conversion Rate und du machst weniger Umsatz.
Das Potenzial von Buttons liegt darin, dass sie Besucher magisch anziehen. Nutze diese Aufmerksamkeit zu deinem Vorteil.
Was macht einen Button effektiv?
Das Naheliegende ist die Sichtbarkeit und die ansprechende Gestaltung. Buttons und CTAs müssen auf Anhieb zu sehen sein und sich deutlich vom restlichen Inhalt abheben. Das heißt: Augen auf, bei der Farbwahl.
Bei der Farbwahl steht die Lesbarkeit an erster Stelle, nicht die Kreativität.
Hast du bereits eine Primärfarbe für deine Website festgelegt? Mit dem kostenlosen Tool coloors kannst du eine dazu passende, kontrastreiche Farbe aussuchen, um deine Farbpalette zu erweitern. Mit der visuellen Gestaltung ist es allerdings noch nicht getan.
Ein guter Button steht und fällt mit der richtigen Wortwahl. Der Text muss klar formuliert sein und punktgenau beschreiben, was sich hinter dem Klick verbirgt. Zudem sollte er deine Überschrift als eine Art Dialog weiterführen (Thema Einheitlichkeit, dazu komme ich weiter unten).
Microcopy à la „Hier klicken“ oder „Details“ ist so gut wie immer eine vertane Chance. Eine Ausnahme können Prozesse mit mehreren Schritten sein, wie der Checkout in einem Online-Shop. Die Geschichte vom sogenannten 300-Millionen-Dollar-Button zeigt eindrücklich, wie groß die Auswirkung einer solchen kleinen Änderung sein kann.
Kniffe, um deine Buttons unwiderstehlich zu machen
Wenn es um die Benutzererfahrung auf einer Website geht, haben selbst kleine Details eine große Auswirkung. Die präzise Wortwahl ist bei Button-Texten elementar.
Damit du das Beste aus deinen Buttons herausholen kannst, habe ich ein paar konkrete UX Writing Tipps zusammengestellt, die du ohne großen Aufwand auf deiner Website umsetzen kannst.
Klarheit
Je präziser, desto besser. Der Text auf den Buttons sollte eindeutig aussagen, welche Aktion der Benutzer ausführt, wenn er darauf klickt. Wenn mit dem Klick die Zahlung abgeschlossen wird: „Zahlung abschließen“. Wenn sich jemand für den Newsletter anmeldet: „Anmelden“.
✅ „Zahlung abschließen“ oder „Anmelden“
❌ „Hier klicken“
Navigationsschaltflächen können eine Ausnahme sein. Hier kann – manchmal! – ein knappes „Weiter“ oder „Zurück“ zielführender sein.
Kürze und Prägnanz
Bandwurm-Buttons sind generell tabu. Du solltest nach Möglichkeit nicht mehr als drei Wörter pro Schaltfläche benutzen, maximal fünf. Auf mobilen Bildschirmen passen ohnehin nur wenige Zeichen, das solltest du beim Texten berücksichtigen.
Aber! Die Klarheit hat eine höhere Prio. Wenn also mehr Text nötig ist, um klarzumachen, was sich hinter einem Button verbirgt, dann verwende mehr Wörter.
Einheitlichkeit
Wähle Wörter so, dass sie zum vorherigen Inhalt passen. Wenn die Überschrift lautet: „Melde dich für tolle Angebote an“, dann sollte der Text des Buttons auch „Anmelden“ lauten. Die einheitliche Schreibweise kommt deinen Nutzern zugute. Eine klare Linie hilft ihnen, dein Produkt leichter zu verstehen.
Insbesondere wenn dein Unternehmen wächst, ist es hilfreich, ein Glossar anzulegen und als Referenz greifbar zu haben.
Das kann eine einfache Excel-Tabelle sein, in der du Begriffe und Schreibweisen dokumentierst und wo du bei einem neuen Projekt ratzfatz nachschlagen kannst, welche Wörter du bei vorherigen Projekten oder Posts verwendet hast, und welche eben nicht.
Dringlichkeit
Manchmal kann es passend sein, Dringlichkeit zu vermitteln. Mögliche Formulierungen sind „Jetzt“, „Sofort“ oder „Nur heute“.
Persönlichkeit
Es darf auch persönlich sein, das prägt die Wahrnehmung im Außen. Branding geht weit über das Visuelle hinaus. Auch dein Sprachstil und die Tonalität sind ein Teil davon. Vielleicht hast du sogar bereits einen Styleguide, in dem deine Markensprache dokumentiert ist?
Aber auch hier gilt: Die Klarheit hat eine höhere Prio als die Persönlichkeit. Nutzer wollen oft einfach nur auf kurzem Wege etwas erreichen oder erledigen. Bei Buttons geht es nicht um Unterhaltung und die Persönlichkeit sollte entsprechend nur spärlich eingesetzt werden.
Sonderfall Landingpage: nur ein Button
Ein zentrales Element einer Landingpage ist der CTA. Der gehört auf jeden Fall in den Bereich, den du ohne zu scrollen siehst, also ganz oben auf der Seite. Du kannst ihn zudem mehrfach auf der Seite platzieren. Allerdings sollten die Buttons – ohne Ausnahme! – so gestaltet werden:
➡️ Form und Farbe aller Buttons identisch
➡️ Wortwahl auf allen Buttons identisch
➡️ Link bei allen Buttons identisch (z. B. zum Anmeldeformular)
Ein Nutzer muss mit einem Blick verstehen, was hinter dem CTA liegt. Und auch, dass alle Buttons zur gleichen Zielseite führen, egal wo sie auf der Seite platziert sind.
Denn eine Landingpage hat genau eine Aufgabe und genau das macht sie so wertvoll. Eine Aufgabe, ein CTA, so einfach ist das.
Handfeste Beispiele für Buttons
Große Unternehmen haben oft eine Vielzahl an Produkten und verschiedene Zielgruppen, sodass sie nicht alle mit einem einzigen Button abholen können. Das kann auch für Solo-Selbstständige gelten.
Trotz aller Komplexität muss es für Nutzer und potenzielle Kunden einfach sein, die Optionen zu verstehen und das für sich jeweils Richtige auszusuchen, und zwar ohne viel Geklicke. Um das zu erreichen, solltest du wichtige Buttons immer oben platzieren, sodass deine Besucher die Optionen auf Anhieb und ohne zu scrollen sehen (engl. above the fold).
Ein weiterer Trick ist es, mit 2 Farben und 2 verschiedenen Platzierungen zu arbeiten – einmal im Header-Bereich oben rechts sowie die übliche Platzierung mittig, oft eher links ausgerichtet. Wenn du mehrere Buttons hast, dann bietet es sich an, mit zwei Farben zu arbeiten. Diese kannst du mit den Farben des Logos abstimmen, genauer gesagt die Farben von dort übernehmen.
Schau, wie Zoom, Quentn, HubSpot, Slack und Netflix ihre Buttons derzeit – also im Februar 2024 – gestalten.
Zoom
Buttons:
- Vertrieb kontaktieren
- Kostenlos anmelden
- Preise anzeigen
- Demo anfordern
Quentn
Buttons:
- Login
- Jetzt testen
- Kostenlos loslegen
Dieses Beispiel zeigt noch einen Hebel, mit dem du ansetzen kannst, um deine Buttons zu verbessern. Mit Microcopy in der Nähe der Buttons kannst du auf die Ängste und Sorgen deiner Nutzer eingehen oder ihnen einen motivierenden Ausblick auf das geben, was sie hinter dem Button erwartet. Und zwar mit kleinen Beschreibungen direkt unter oder neben dem Button.
Quentn nutzt zwei einfache Ergänzungen, um Transparenz zu schaffen: „14 Tage Gratis-Test“ und „Keine Kreditkarte erforderlich“.
HubSpot
Buttons:
- Demo anfordern
- Jetzt kostenlos loslegen
- Demo anfordern
- Jetzt kostenlos starten (Warum ist der Text nicht wie unter Nummer 2?)
Auch HubSpot arbeitet mit Microcopy, auch wenn diese nicht ganz so knackig formuliert ist: „Fordern Sie eine Demo unserer Premiumsoftware an und legen Sie mit unseren kostenlosen Tools los“.
Slack
Buttons:
- Vertrieb kontaktieren
- Kostenlos testen
- Mit E-Mail-Adresse registrieren
- Account erstellen mit Google
Auch Slack verwendet Microcopy, um Transparenz zu schaffen: „Du kannst Slack beliebig lange kostenlos testen“.
Netflix
Buttons:
- Einloggen
- Loslegen
Trend? Kurz und knapp statt kreativ
Spannend finde ich, dass das Wording bei allen Beispielen minimalistisch ist.
Vor einigen Jahren war es noch üblich, Buttons als Teil des Brandings zu nutzen und in der Formulierung die Persönlichkeit des Unternehmens durchscheinen zu lassen. Da wurde zuweilen kreativ geklotzt.
Das Ding ist, als Nutzer wollen wir im Netz meistens einfach nur ohne Umwege etwas erledigen. Originelle Formulierungen verlieren schnell ihren Glanz, wenn wir solche Buttons täglich klicken müssen.
Die obigen Beispiele sind alles große Unternehmen mit entsprechendem Budget. Ich vermute daher, dass sie verschiedene Button-Texte mit A/B-Tests untersucht haben, um herauszufiltern, welche Variante ihre Nutzer bevorzugen, und diese gezielt einzusetzen.
Bildquellen: Screenshots aus dem Netz, Headerbild mit Canva erstellt
Im Digitalen ist eine klare und deutliche Sprache zielführend. Und zum Thema aktive Verben, da hat Johann Wolfgang von Goethe es uns schon vorgemacht:
Der Morgenwind blies stark und schlug sich mit einigen Schneewolken herum und jagte abwechselnd leichte Gestöber an den Bergen und durch das Tal. Nach neune trafen wir in Oberwald an und sprachen in einem Wirtshaus ein, wo sich die Leute nicht wenig wunderten, solche Gestalten in dieser Jahreszeit erscheinen zu sehen.
Wir fragten, ob der Weg über die Furka noch gangbar wäre? Sie antworteten, dass ihre Leute den größten Teil des Winters drüber gingen; ob wir aber hinüberkommen würden, das wüssten sie nicht.
Das sind ganze 12 aktive Verben in einem Text von nur 80 Wörtern. Wow.
