“Mach das doch mal” - oder wie sagt man das auf einer Website?

Nicht zu bunt, gut lesbar, groß genug, mobil optimiert - die Anforderungen an eine Website sind groß und die Erwartungen der User an eine Website und das Erlebnis dort werden auch nicht kleiner. 
⁠Eine Website muss beeindrucken, egal ob den Erstbesucher oder sogar schon einen Wiederkehrenden. Und das ist gar nicht so einfach, denn es gibt ca. 1.9 Mrd. Websites im Internet - und da soll genau eine hervorstechen. 
⁠Für die Gestaltung eines Webauftritts gibt es eine ganze Menge zu beachten, aber auch sinnvolle Elemente, die auf jeden Fall nicht fehlen sollten. Ein solches Element schauen wir uns heute mal an. 

Was ist eigentlich ein CTA?

“CTA” ist nicht die Abkürzung für einen besonders coolen Roboter oder ein neues Jugendwort. Das Akronym CTA steht für “Call-to-Action” und wird im Marketing als Abkürzung für eine Handlungsaufforderung genutzt. 
Es gibt ebenso viele Kanäle im Marketing wie Möglichkeiten einen CTA zu platzieren: Während in einem TV-Spot die Handlungsaufforderung in einer akustischen (oder auch visuellen) Aussage bestehen kann, doch mal eine Probefahrt zu vereinbaren, ist im Online Marketing der CTA (auf z.B. Websites) meist ein Button oder Link wie “Jetzt testen” oder “Hier fündig werden”. 
⁠Ein CTA ist auch innerhalb eines Texts oder einer Textanzeige ein wichtiger Baustein des Marketings. In einem Social Media Post kann das z.B. die Aufforderung sein, einer Seite zu folgen oder einen Beitrag zu liken. Aber auch das “Jetzt zum Newsletter anmelden” ist ein direkter CTA. 
⁠Man kann eine Handlungsaufforderung natürlich auch indirekt formulieren und durch eine Weiterleitung auf eine Seite platzieren, wie z.B. die Nutzung eines Pfeils in Kombination mit “Alle News” oder durch das simple Wörtchen “mehr”.  

Tipps für CTAs

Jetzt wo wir wissen, was ein CTA ist, schauen wir uns doch mal an, wie man einen solchen CTA auf einer Website gestalten kann. Auf folgendes sollte man achten: 

1. Benennung bzw. Formulierung
⁠Wenn CTAs auf einer Website platziert werden, ist es wichtig, dass der Text auf dem Button klar aussagt, worum es geht und welches Ziel für das Unternehmen verfolgt wird. Das klingt vielleicht einfach, ist aber enorm wichtig, denn wenn das primäre Ziel ist, Kontaktanfragen zu bekommen, sollte die Formulierung z.B. “Jetzt Kontakt aufnehmen” sein. Ist es hingegen wichtiger, dass ein Whitepaper heruntergeladen wird, sollte der CTA-Button dementsprechend darauf hinweisen.

 
2. Platzierung
⁠Die Wahl des richtigen Platzes auf der Website ist das absolute A und O. Natürlich sollte der CTA dem Besucher schnell ins Auge springen, aber nicht direkt das erste sein, was gesehen wird. Neben den CTAs sollten auch die Headline prägnant und eingängig sein und idealerweise dafür sorgen, dass der Besucher weiterlesen möchte. Sind die Benefits noch so platziert, dass sie innerhalb der ersten Augenblicke gesehen werden können, ist schon ein guter Einstieg geschafft. Diese 3 Elemente sollten aufeinander abgestimmt werden, der CTA sollte dabei auf jeden Fall gut sichtbar, aber nicht einnehmend platziert werden. 

3. Whitespace
⁠Tipp Nr. 3: Sorge dafür, dass rund herum um deinen CTA genügend Whitespace (freie Fläche) vorhanden ist. Dieser Tipp knüpft direkt an Tipp 2 an, denn der CTA sollte auf keinen Fall untergehen  oder zwischen anderem Text verloren gehen. Daher - Platz außenrum schadet hier nicht. 
⁠

4. Kontraste nutzen 
⁠Anknüpfend an die ersten 3 Tipps können auch farbliche Elemente hier extrem hilfreich sein. Der Whitespace dient dazu, dass ein CTA nicht verschwindet oder übersehen wird, die Nutzung von farblichen Kontrasten kann das ganze zusätzlich unterstreichen. Die meisten Unternehmen haben ein Corporate Design, das aus mehr als einer Farbe besteht, daher kann man hier gezielt auch eine Farbe einsetzen, die sonst eher weniger genutzt wird, aber zum bestehenden Schema passt. 

5. Anzahl an CTAs
⁠Auch die Anzahl der CTAs ist wichtig - denn hier gilt: weniger ist mehr. Der Besucher der Website soll nicht überfordert werden, daher ist es besser, nur einen klaren CTA pro Seite zu haben. Natürlich kannst du je Landingpage einen anderen haben. Wenn du zum Beispiel eine Jobseite in deiner Website integriert hast, sollte hier der CTA eher “jetzt bewerben” sein als “jetzt Produkt gratis testen”.
⁠Pro Landingpage sollte idealerweise nur ein CTA vorhanden sein und sofern sich die CTAs um das gleiche Thema drehen, sollte hier keine Variierung vorgenommen werden. Es ist also wichtig, dass klar ist, welcher der Haupt-CTA ist. 

6. Handlungsaufforderung + Wertversprechen 
⁠Kommen wir zum Eingemachten: Das Wertversprechen. Hier geht es darum, dass der Button direkt kommunizieren soll, welchen Nutzen der User davon hat, wenn er auf den Button klickt. Aussagen wie z.B. “Jetzt gratis testen” erklärt direkt, dass der User etwas umsonst erhält oder umsonst ausprobieren kann. Die Formulierung sollte kurz sein, aber direkt zeigen, welchen Mehrwert ein Klick erzeugen kann. 
⁠

7. Verknappung
⁠Der Einsatz von Limitierung bzw. Verknappung ist eine Hard-Sell-Methode aus dem Marketing. Das geht auch bei CTAs. Man kann z.B. auf einer Website auf eine zeitlich begrenzte 20% Rabattaktion hinweisen und den CTA-Button drunter mit “Jetzt sparen” versehen. 
⁠

8. Testen 
⁠Dieser achte Tipp hat nicht primär etwas mit CTAs zu tun, er gilt so gut wie überall im Marketing: Es ist wichtig zu testen. Verschiedene Formulierungen, Farbvariationen oder auch andere Platzierungen von CTAs können getestet werden und wenn Formulierung (A) nicht oft genug zur gewünschten Handlung führt, kann alternativ Formulierung (B) genutzt werden, um nach einer gewissen Zeit zu sehen, ob diese Formulierung für den CTA-Button zu mehr Handlungen geführt hat.  

Beispiele 

Stadtwerke Schorndorf 
⁠Der hier platzierte CTA zeigt klar, was passiert, wenn man auf den Button klickt: man hat die Möglichkeit, den richtigen Ansprechpartner zu finden, wenn man sich z.B. für Ökostrom interessiert. 
Zudem ist um den CTA herum das Wertversprechen platziert (100% öko, günstig und einfach) und die freie Fläche, um den CTA hervorzuheben, ist ebenfalls gegeben. 

CTAs können auch bei der Erklärung eines Prozesses hilfreich sein. Wie das umgesetzt wird, zeigt die Seite der Stadtwerke Schorndorf ebenso auf einer anderen Landingpage: Privatpersonen, die sich für eine Wallbox (Ladestation für E-Autos für Zuhause) interessieren, werden Schritt für Schritt durch den Prozess geleitet. 

Beginnend mit der Auswahl der entsprechenden Wallbox (mit der Möglichkeit sich weiter zu informieren), endet der Prozess mit der Anfrage eines Termins für einen Vor-Ort-Check zum Überprüfen für die anstehende Installation. 

Fenster Mack 
⁠Auch auf dieser Landingpage zum Thema “altersgerechtes Wohnen” ist der CTA auffällig und mit Whitespace platziert. Die Formulierung “Vor-Ort-Beratung-sichern” gibt eine klare Auskunft darüber, was ein Kunde zu erwarten hat und wie es nach dem Klick auf den Button weitergehen wird. Der CTA-Button wurde in der Corporate Design Farbe grün hinterlegt, um durch den gezielt platzierten Kontrast sichtbar zu sein. 

Foti Finanz 
⁠Die Website des Finanzberaters startet gleich zum Einstieg mit einer klaren Handlungsaufforderung. Auch dieser CTA ist gut sichtbar platziert und erzeugt durch den farblichen Kontrast die nötige Aufmerksamkeit. 

⁠Ulm Schneider Logistik 
⁠Bei diesem Beispiel sind die CTAs ohne direkte Handlungsaufforderung, aber mit dem Hinweis, wie Kontakt aufgenommen werden kann (Telefon oder E-Mail). Wem die Formulierungen auf CTA-Buttons teilweise zu plakativ erscheinen, der kann auch diese subtilere Variante wählen. 

⁠Netflix 
⁠Der Streamingdienst hat eine klare Handlungsaufforderung mit “Loslegen” und gibt gleichzeitig noch das Wertversprechen ab, dass Netflix zum einen jederzeit kündbar ist und zum anderen unbegrenzt Filme, Serien und weiteres anbietet. Die farbliche Kontrast Gestaltung ist hier ebenso ausgeprägt und der Whitespace teasert im Hintergrund einige Inhalte der Plattform an. Für einen User ist damit ersichtlich, was zu tun ist. 

Hubspot
⁠Das Unternehmen Hubspot platziert seine CTAs auch direkt auf der Startseite und hier ist die Besonderheit, dass es gleich mehrere Handlungsaufforderungen im Sichtfeld eines Besuchers gibt. 
⁠Der Button, um eine “Demo anzufordern” sowie der Button “Jetzt kostenlos starten” ist in doppelter Ausführung vorhanden. Diese Vorgehensweise ist aus folgendem Grund gewählt: Scrollt ein Besucher weiter durch die Seite oder besucht eine andere Landingpage, dann bleiben die beiden CTAs in der rechten oberen Ecke dauerhaft sichtbar. Die Handlungsaufforderungen begleiten den User damit auf seiner ganzen Reise durch die Seite von Hubspot.

Kamado Joe
⁠Der amerikanische Hersteller von Premium Keramikgrills setzt beim Farbkontrast seiner CTAs auf das markante Corporate-Design-Rot. Die Sichtbarkeit ist damit gegeben. Das Wertversprechen platziert dieses Unternehmen nicht mit im CTA, aber direkt darüber erkennbar.
⁠Der Hinweis, “mehr zu erfahren” oder “mehr zu lernen” auf diesem CTA ist eine subtile Variante, um einem Besucher den Einstieg in die Welt dieser hochwertigen Grills zu ermöglichen. 
⁠Aber dieser Hinweis ist dort nicht ohne Grund: Die Benutzung eines solchen Grills will gelernt sein und das zeigt Kamado Joe gleich zum Einstieg.

Summary 

Wir haben uns ein Element zur Webseiten-Gestaltung näher angeschaut: den CTA. Das Akronym für eine Handlungsaufforderung an einen Besucher einer Website kann in vielen Varianten gestaltet und platziert werden. Oft in Verbindung mit einem Wertversprechen. 
⁠Wie man das richtig macht, zeigen viele Beispiele aus der Praxis. Wichtig ist dabei jedoch immer, dass die Wahl des CTAs und die jeweilige Formulierung klar zur Zielsetzung des Unternehmens passt. 

⁠Für alle Leseratten gibt es weitere Artikel in unserem Blog. Wer mehr über unsere Projekte erfahren möchte, der kann sich ja ein paar unserer Case Studies anschauen.