UX Writing, Content und Konzeption – Inge Bateman

6 UX Writing Tipps, die direkt zu mehr Button-Klicks führen

Kein Tech-Produkt ohne Buttons und CTAs. Tech­nisch gesehen sind sie Schalt­flä­chen. Im Hinter­grund setzt du einen Link und wenn die Fläche geklickt bzw. getippt wird, dann öffnet sich die Zielseite. 

Das Wording ist Teil des UX Writings und hat einen direkten Einfluss auf die Conver­sion Rate. Beispiele sind „Jetzt kostenlos herun­ter­laden“, „Anmelden“ oder „Kosten­pflichtig bestellen“.

Wann brauchst du Buttons?

Buttons und CTAs sind immer dann wichtig, wenn du klar machen willst, was Benutzer tun sollen. Ohne einen Button bleiben sie buch­stäb­lich auf der Seite hängen. Beispiele sind:

  • die Anmel­dung zu deinem Newsletter
  • der Down­load eines Freebies
  • eine E‑Mail-Anfrage zu deinen Leistungen
  • der Kauf­ab­schluss im Online-Shop
  • die Buchung auf deiner Event-Website
  • Lead­ge­win­nung auf deiner Landingpage

Buttons sind der Kit, der deine Website und das Benut­zer­er­lebnis zusammenhalten.

Der Zweck von Buttons und CTAs

In der Liste oben siehst du, dass Buttons für zwei verschie­dene Dinge einge­setzt werden können:

  1. Für die Navi­ga­tion einer Website (bzw. einer App)
  2. Als Auffor­de­rung 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. Zwei­teres gehört zum Marke­ting und soll dazu anleiten, eine gewünschte Aktion auszuführen. 

Sowohl Buttons als auch CTAs haben einen direkten Einfluss auf die Conver­sion Rate. Von gutem UX Writing profi­tieren beide.

Das Anklickbare griffig machen

Buttons und CTAs gehören zu den wich­tigsten inter­ak­tiven Elementen einer Website. Wir verbringen jede Menge Zeit im Web mit der Suche nach dem nächsten Ding, das wir ankli­cken können. Auch wenn sie noch so klein sind, es lohnt sich ganz genau hinzu­sehen, um das Poten­zial auszu­schöpfen. Um die gewünschte Hand­lung zu fördern, ist es elementar, für Klar­heit zu sorgen. 

Wenn nicht klar ist, welche Aktion deine Besu­cher auf der Website ausführen sollen, beein­träch­tigt das deine Conver­sion Rate und du machst weniger Umsatz.

Das Poten­zial von Buttons liegt darin, dass sie Besu­cher instinktiv anziehen. Nutze diese Aufmerk­sam­keit zu deinem Vorteil.

Was macht einen Button effektiv?

Das Nahe­lie­gende ist die Sicht­bar­keit und die anspre­chende Gestal­tung. Buttons und CTAs müssen auf Anhieb zu sehen sein und sich deut­lich vom rest­li­chen Inhalt abheben. 

Hast du hast bereits eine Primär­farbe für deine Website fest­ge­legt? Mit dem kosten­losen Tool coloors kannst du eine dazu passende (kräf­tige) Farbe aussu­chen, um deine Farb­pa­lette zu erwei­tern. Mit der visu­ellen Gestal­tung ist es aller­dings noch nicht getan. 

Ein guter Button steht und fällt mit dem rich­tigen Wording. Der Text muss klar formu­liert sein und punkt­genau beschreiben, was sich hinter dem Klick verbirgt. Zudem sollte er deine Über­schrift als eine Art Dialog weiter­führen (Thema Einheit­lich­keit, dazu komme ich weiter unten). 

Micro­copy à la „Hier klicken“ oder „Details“ ist so gut wie immer eine vertane Chance. Eine Ausnahme können Prozesse mit mehreren Schritten sein, wie beispiels­weise der Checkout in einem Online-Shop. Die Geschichte vom soge­nannten 300-Millionen-Dollar-Button zeigt eindrück­lich, wie groß die Auswir­kung einer solchen Ände­rung sein kann.

UX Writing Kniffe, um deine Buttons unwiderstehlich zu machen

Wenn es um die Benut­zer­er­fah­rung auf einer Website geht, haben selbst kleine Details eine große Auswir­kung. Das präzise Wording von Buttons ist elementar. 

Damit du das Beste aus deinen Buttons raus­holen kannst, habe ich ein paar konkrete UX Writing Tipps zusam­men­ge­stellt, 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 abge­schlossen wird: „Zahlung abschließen“. Wenn sich jemand für den News­letter anmeldet: „Anmelden“.

✅ „Zahlung abschließen“ oder „Anmelden“
❌ „Hier klicken“

Navi­ga­ti­ons­schalt­flä­chen können eine Ausnahme sein. Hier kann – manchmal! – ein knappes „Weiter“ oder „Zurück“ ziel­füh­render sein.

Kürze und Prägnanz

Band­wurm-Buttons sind gene­rell tabu. Du soll­test nach Möglich­keit nicht mehr als drei Wörter pro Schalt­fläche benutzen, maximal fünf. Auf mobile Bild­schirmen passen eh nur wenige Zeichen, das soll­test du beim Texten im Hinter­kopf behalten. 

Aber! Die Klar­heit hat eine höhere Prio. Wenn also mehr Text nötig ist, um zu klar­zu­ma­chen, was sich hinter einem Button verbirgt, dann verwende mehr Wörter. 

Einheitlichkeit

Wähle Wörter so, dass sie zum vorhe­rigen Inhalt passen. Wenn die Über­schrift lautet: „Melde dich für tolle Ange­bote an“ dann sollte der Text des Buttons auch „Anmelden“ lauten. Die einheit­liche Schreib­weise kommt deinen Nutzern zugute. Eine klare Linie hilft ihnen, dein Produkt leichter zu verstehen.

Wenn dein Unter­nehmen wächst, kann es auf lange Sicht hilf­reich sein, ein Glossar anzu­legen und als Refe­renz greifbar zu haben. 

Das kann eine einfache Excel-Tabelle sein, in der du Begriffe und Schreib­weisen doku­men­tierst und wo du bei einem neuen Projekt ratz­fatz nach­schlagen kannst, welche Termi­no­logie und Schreib­weisen du bei vorhe­rigen Projeten oder Posts verwendet hast.

Dringlichkeit

Manchmal kann es passend sein, Dring­lich­keit zu vermit­teln. Mögliche Formu­lie­rungen sind: „Jetzt“, „Sofort“ oder „Nur heute“.

Persönlichkeit

Es darf auch persön­lich sein, das prägt die Wahr­neh­mung im Außen. Bran­ding geht weit über das Visu­elle hinaus. Auch dein Sprach­stil und die Tona­lität sind ein Teil davon. Viel­leicht hast du sogar bereits einen Style­guide, in dem deine Marken­sprache doku­men­tiert ist?

Aber auch hier gilt: Die Klar­heit hat eine höhere Prio als die Persön­lich­keit. Nutzer wollen oft einfach nur auf kurzem Wege was errei­chen bzw. erle­digen. Bei Buttons geht es nicht um Unter­hal­tung und die Persön­lich­keit sollte entspre­chend nur spär­lich einge­setzt werden. 

Sonderfall Landingpage: nur ein Button

Ein zentrales Element einer Landing­page ist der CTA. Der gehört auf jeden Fall in den Bereich, den du ohne zu scrollen siehst, also oben. Du kannst ihn zudem mehr­fach auf der Seite plat­zieren. Aller­dings sollten die Buttons – ohne Ausnahme! – so gestaltet werden:

➡️ Form und Farbe aller Buttons iden­tisch
➡️ Wording auf allen Buttons iden­tisch
➡️ Link bei allen Buttons iden­tisch (z. B. zum Anmeldeformular) 

Ein Nutzer muss mit einem Blick verstehen, was hinter dem CTA liegt. Und auch, dass alle Buttons zur glei­chen Ziel­seite führen, egal wo sie auf der Seite plat­ziert sind. 

Denn eine Landing­page hat genau eine Aufgabe und genau das macht sie so wert­voll. Eine Aufgabe, ein CTA, so einfach ist das.

Handfeste Beispiele für Buttons

Große Unter­nehmen haben oft eine Viel­zahl an Produkten und verschie­dene Ziel­gruppen, so dass sie nicht alle mit einem einzigen Button abholen können. Das kann auch durchaus für Solo-Selbst­stän­dige gelten.

Trotz aller Komple­xität muss es für Nutzer und poten­ti­ellen Kunden einfach sein, die Optionen zu verstehen und das für sich jeweils Rich­tige auszu­su­chen, und zwar ohne viel Geklicke. Um das zu errei­chen, soll­test du wich­tige Buttons immer oben plat­zieren, sodass deine Besu­cher die Optionen auf Anhieb und ohne zu scrollen sehen (engl. above the fold). 

Ein weiterer Trick ist es, mit 2 Farben und 2 verschie­dene Plat­zie­rungen zu arbeiten – ein Mal im Header-Bereich oben rechts sowie die übliche Plat­zie­rung mittig, oft eher links ausge­richtet. Wenn du mehrere Buttons hast, dann bietet es sich an, mit zwei Farben zu arbeiten. Diese kannst du mit den Farben des Logos abstimmen bzw. die Farben von dort übernehmen.

Schau, wie Zoom, Quentn, HubSpot, Slack und Netflix ihre Buttons derzeit – also im März 2024 – gestalten. 

Zoom

Buttons: 

  1. Vertrieb kontak­tieren
  2. Kostenlos anmelden
  3. Preise anzeigen
  4. Demo anfor­dern

Quentn

Buttons:

  1. Login
  2. Jetzt testen
  3. Kostenlos loslegen

Diese

Dieses Beispiel zeigt noch einen Hebel, mit dem du ansetzen kannst, um deine Buttons zu verbes­sern. Mit Micro­copy in der Nähe der Buttons kannst auf die Ängste und Sorgen deiner Nutzer eingehen oder ihnen einen moti­vie­renden Ausblick auf das geben, was sie hinter dem Button erwartet. Und zwar mit kleinen Beschrei­bungen direkt unter oder neben dem Button. 

Quentn nutzt zwei einfache Ergän­zungen, um Trans­pa­renz zu schaffen: „14 Tage Gratis-Test“ und „Keine Kredit­karte erforderlich“.

HubSpot

Buttons:

  1. Demo anfor­dern
  2. Jetzt kostenlos loslegen
  3. Demo anfor­dern
  4. Jetzt kostenlos starten (Warum ist der Text nicht wie unter Nummer 2?)

Auch HubSpot arbeitet mit Micro­copy, auch wenn diese nicht ganz so knackig formu­liert ist: „Fordern Sie eine Demo unserer Premi­um­soft­ware an und legen Sie mit unseren kosten­losen Tools los“.

Slack

Buttons:

  1. Vertrieb kontak­tieren
  2. Kostenlos testen
  3. Mit E‑Mail-Adresse registrieren
  4. Account erstellen mit Google

Auch Slack verwendet Micro­copy, um Trans­pa­renz zu schaffen: „Du kannst Slack beliebig lange kostenlos testen“.

Netflix

Buttons:

  1. Einloggen
  2. Loslegen

Trend? Kurz und knapp statt kreativ

Span­nend finde ich, dass das Wording bei allen Beispielen mini­ma­lis­tisch ist.

Vor einigen Jahren war es noch gang und gäbe, Buttons als Teil des Bran­dings zu nutzen und im Wording die Persön­lich­keit des Unter­neh­mens durch­scheinen zu lassen. Da wurde zuweilen kreativ geklotzt.

Das Ding ist, als Nutzer wollen wir im Netz meis­tens einfach nur ohne Umwege was erle­digen. Origi­nelle Formu­lie­rungen verlieren schnell ihren Glanz, wenn wir solche Buttons täglich klicken müssen. 

Die obigen Beispiele sind alles große Unter­nehmen mit entspre­chendem Budget. Ich vermute daher, dass sie verschie­dene Button-Texte mit A/B‑Tests unter­sucht haben, um heraus­zu­fil­tern, welche Vari­ante ihre Nutzer bevor­zugen und diese gezielt einzusetzen.

Im Digi­talen ist eine klare und deut­liche Sprache ziel­füh­rend. Und zum Thema aktive Verben, da hat Johann Wolf­gang von Goethe es uns schon vorge­macht:

Der Morgen­wind blies stark und schlug sich mit einigen Schnee­wolken herum und jagte abwech­selnd leichte Gestöber an den Bergen und durch das Tal. Nach neune trafen wir in Ober­wald an und spra­chen in einem Wirts­haus ein, wo sich die Leute nicht wenig wunderten, solche Gestalten in dieser Jahres­zeit erscheinen zu sehen.

Wir fragten, ob der Weg über die Furka noch gangbar wäre? Sie antwor­teten, dass ihre Leute den größten Teil des Winters drüber gingen; ob wir aber hinüber­kommen würden, das wüssten sie nicht.


Das sind ganze 12 aktive Verben in einem Text von nur 80 Wörtern. Wow.

Hashtag Team UX

Bild­quelle: Mit Canva erstellt

Nach oben scrollen