In der Natur eines digitalen Unternehmens liegt ein Nachteil für dich, im Vergleich zu persönlichen Treffen oder sogar Telefonanrufen. Zwischen dir und deinen potenziellen Kunden liegen möglicherweise ganze Kontinente, mehrere Zeitzonen und die Grenzen der Programmierung. Aber, wie bei traditionellen Verkäufen, haben sich bestimmte Techniken entwickelt, die sich zum Verkaufsabschluss in den digitalen Branchen als effektiver bewiesen haben als andere.

free estimates CTA
Ein CTA, um Kunden Kostenvoranschläge für Maler zu geben. Von Isabel Design

Was den Verkaufsabschluss angeht, dreht es sich bei diesen Techniken zumeist um einen Call-To-Action oder CTA – diese Buttons, die dich auffordern etwas zu kaufen, zu klicken, herunterzuladen oder dich anzumelden.

CTAs sind eine Designkunst für sich. Sie sind der ausschlaggebende Schritt, der aus Besuchern Kunden macht, der Pförtner für Conversions. Als solche erfordern sie ihre eigenen Designregeln, denn der Erfolg deiner CTAs ist der Erfolg deiner gesamten Marke.

In diesem Artikel schauen wir uns alle wesentlichen Dinge an, die du über CTAs wissen musst. Diese Techniken können auf jeder Art Seite angewendet werden und haben bewiesen, dass sie Conversions erhöhen. Aber lass uns zuerst darüber reden, weshalb CTAs eine Sonderbehandlung von Designern verdienen.

Warum sind CTAs wichtig?

CTAs sind das Website- oder App-Äquivalent deiner Closing Line. Statt allerdings organisch daherzukommen, wenn der Verkäufer das Gefühl hat, sein potenzieller Kunde wäre bereit, sind CTAs fest und für jeden Besucher gleich. Das macht es für sie schwieriger, einen emotionalen Ton zu treffen – aber nicht unmöglich.

Durch das richtige Designen des Aussehen, der Botschaft und der Platzierung des CTA können Designer effektiv die Erfolgsrate erhöhen. Genauso wie die richtige Wortwahl zu einem Verkauf führen kann, kann ein richtig designter CTA zu einer höheren Klickrate und mehr Engagement führen.

Und das wird nicht nur von Designern behauptet, die die Auswirkungen von gutem Design überschätzen. Die Kraft der CTAs ist gut dokumentiert:

  • E-Mails mit CTAs erhöhen ihre Klickrate um 371% und Verkäufe um 1.617% [Quelle]
  • Facebook-Seiten mit CTAs haben eine 2.85 mal höhere Klickrate [Quelle]
  • Durch das Optimieren ihrer CTA konnte das Contentmarketing-Unternehmen Brafton seinen Umsatz in nur einem Monat um 83% steigern. [Quelle]

Die Kraft der CTAs ergibt absolut Sinn, wenn man sich die Moral von Steve Krugs bahnbrechendem Design-Meisterwerk  Don’t Make Me Think vor Augen führt. Man kann nicht sagen, dass User sich lieber sagen lassen, was sie zu tun haben, aber sie folgen eher einem deutlich gekennzeichneten, vorgegebenen Weg als einem Weg, den sie sich selbst erschließen müssen.

5 Arten von CTAs

In der Einleitung haben wir CTAs mit einem Verkaufsabschluss verglichen, aber in der Praxis können sie für mehr als nur den Handel verwendet werden. Im Grunde genommen kannst du jedes Mal, wenn du möchtest, dass ein Besucher etwas tut, einen CTA nutzen, selbst, wenn er nur ein wenig länger auf deiner Seite bleiben soll.

CTAs können in 5 verschiedene Kategorien unterteilt werden:

Die Richtung weisen

Die erste Art von Call-To-Action spielt die Rolle des Wegweisers. Eine Website mag für einen Designer, der über Monate an ihr gearbeitet hat, geradlinig wirken, aber für einen Fremden, der sie zum ersten Mal sieht, ist der nächste Schritt vielleicht nicht so eindeutig. Selbst ein paar Sekunden der Verwirrung können dazu führen, dass der Nutzer die Seite verlässt.

Screenshot of Kvell’s landing page.
The home page for Kvell’s site emphasizes the “Discover” call to action as the first step for visitors to take, but it still has a smaller, less noticeable menu option to avoid restricting the user.

CTAs, die Besuchern zeigen, wie sie als nächstes fortfahren sollen, fungieren als Wegweiser und halten den Verkehr am Fließen. Die aufmerksamkeitserregenden Designs dieser Calls-To-Action machen sie wahrnehmbarer und sorgen dafür, dass die Besucher sich letztendlich zurechtfinden. Naturgemäß erhöhen wegweisende CTAs die Verweildauer auf einer Seite, aber verbessern auch das allgemeine Nutzererlebnis.

Onsite-Action („zum Einkaufswagen hinzufügen”, „Einkauf abschließen”, „Formular senden”, etc.)

CTAs helfen dem Nutzer nicht nur dabei, durch deine Seite zu navigieren, sondern können sie auch dazu anregen das zu tun, was sie tun sollen. Beim Auslösen einer Onsite-Action werden CTAs strategisch und erfordern ein bisschen mehr Feinheit beim Design.

Screenshot from Noble & Savage
Noble & Savage haben ihren CTA in einem Sticky-Menü am Ende des Bildschirms, während man sich die Produktfotos ansieht. Achte darauf, wie der kräftige, blaue Button-Hintergrund mehr Aufmerksamkeit erregt, als andere Elemente auf der Seite.

Onsite-Action-CTAs sind der Brotverdienst von E-Commerce-Seiten und helfen beim Verkaufsprozess, indem sie Produkte in den Warenkorb wandern lassen, den Warenkorb zur Kasse verschieben und sicherstellen, dass der Bezahlprozess komplett abgeschlossen ist. Natürlich kann ein CTA allein kein suboptimales Produkt verkaufen; aber ihre Anwesenheit kann den Prozess im Ganzen unterstützen.

Zusätzlich zum E-Commerce werden solche CTAs häufig zur Unterstützung bei eBook-Downloads verwendet oder um Besucher auf taktische Seiten zu führen. Sie sind ebenfalls integraler Bestandteil, wenn es darum geht, Nutzer dazu zu bringen, Formulare für jeden erdenklichen Zweck auszufüllen und zu senden.

Anmeldungen

Screenshot from Vogue.
Vogue demonstriert den neuen Trend von Entry-Popups, die um eine E-Mail-Anmeldung bitten.

Der häufigste CTA, den du heutzutage auf Seiten siehst, ist zur Anmeldung für E-Mails. Ob für Newsletter, Sonderrabatte oder als Tausch gegen einen kostenlosen Download, E-Mail-Adressen sind heute in der digitalen Welt eine wertvolle Währung. Während es einfacher ist eine E-Mail-Adresse zu bekommen als etwas zu verkaufen, braucht es doch etwas Finesse, um die Kontaktinformationen einer Person zu erhalten.

Social Media Sharing

Wir wir oben schon gesagt haben, mögen User es nicht, wenn man ihnen sagt, was sie zu tun haben, aber sind offen für Vorschläge. CTAs, die Besucher bitten, Content auf ihren Seiten in den sozialen Medien zu teilen erinnern sie sanft daran, dass es diese Möglichkeit gibt. Dieser CTA zielt auf User, denen der Content möglicherweise gut genug gefällt, um ihn zu teilen. Vergiss nicht, User wollen nicht denken, daher sind Erinnerungen gern gesehen.

Screenshot from Lady Melbourne
Social media sharing CTAs don’t need to be fancy because people already know how they work. Being present as a reminder is enough.

Engagement (Kommentare, Likes, Reviews, etc.)

Screenshot from Amazon.
Not even Amazon is above CTAs for eliciting reviews.

Und schließlich können CTAs Auslöser für mehr Engagement sein. Wie auch beim Teilen in den sozialen Medien, kann es passieren, dass User nicht daran denken, mit einem Post oder einer Seite zu interagieren, obwohl sie gewillt sind. Die bloße Anwesenheit eines CTA kann mehr Engagement entfachen und ein anständiges Design kann sogar profitable Handlungen fördern und einen Anreiz dafür schaffen.

Wie man CTAs designt

Nun, da wir die Grundlagen der CTAs abgedeckt haben, lass uns über ein paar fortgeschrittene Designtechniken reden, um die Conversions zu optimieren.

Die visuelle Gestaltung

Zuallererst müssen dein CTA-Buttons aussehen wie Buttons. Das ist kein Witz. Es muss auf den ersten Blick erkennbar sein, dass man sie anklicken kann; dies gilt nicht nur für CTAs, sondern grundsätzlich für Design.

Während die Methoden sich unterscheiden, basierend auf dem Stile und dem Motiv deiner Seite, assoziieren wir grundsätzlich längliche, rechteckige Formen mit abgerundeten Ecken mit „Buttons“. Vor ein paar Jahren war es ebenfalls üblich, Schattierung und/oder Schlagschatten zu verwenden, um dem Ganzen ein 3D-Gefühl zu verleihen, aber das ist mit der Vorliebe für Flat Design aus der Mode geraten.

Genauer betrachtet möchtest du sicherstellen, dass deine CTAs auffallen. Da sie Conversions erzeugen, sollten CTAs das auffälligste Element auf jeder Seite sein.

Screenshot from Huffington Post
Huffington Post zeigt ihr Design-Wissen mit ihren CTA Button-Visuals. Die rechteckig-ovale Mischung versinnbildlicht die heutigen CTA-Trends und die Farbe steht in schönem Kontrast zum Hintergrundbild.

Eine Möglichkeit, die Aufmerksamkeit auf sie zu lenken, ist Farbe. Eine Farbe, die im Kontrast zum Hintergrund steht, ist ein todsicherer Weg, damit der Button wahrgenommen wird. Du solltest auch mit der Farbe der Typografie innerhalb des Textes spielen. Das sind mindestens 3 Farben (Seitenhintergrund, Button-Hintergrund, Button-Text), die du miteinander abstimmen musst, um den Effekt zu maximieren.

Eine weitere visuelle Technik ist Größe: Objekte mit größeren Größen auf dem Bildschirm werden zuerst wahrgenommen. Allerdings gibt es hier eine Obergrenze, daher verschwendest du aber einer bestimmten Größe wertvollen Platz. Als Faustregel gilt, dass du CTAs größer als unwichtigere Buttons machen willst, aber nicht so groß, dass sie den gesamten Bildschirm dominieren.

Beziehung zum gesamten Design

Dein CTA sollte klar und deutlich sein, aber er sollte auch zum Rest auf dem Bildschirm passen. Vergiss nicht, dass dein Call-To-Action das sein sollte, was die Leute am dringendsten tun sollen, nachdem sie deine Seite besucht haben – betrachte ihn als Einstiegspunkt zu deinem Sales Funnel. Das soll nicht bedeuten, der CTA sollte sämtliche Aufmerksamkeit auf sich lenken sondern eher, dass sich die anderen Elemente aufbauen und organisch in den CTA münden sollten.

Dies wird am besten von Neil Patel erklärt, der herausgefunden hat, dass CTAs in der oberen Hälfte der Seite ihre Klickrate um 17% sinken lies. Seine Begründung ist, dass der Content deiner Seite sich zum CTA hin aufbauen muss, besonders mit Wertversprechen (Erklärung folgt unten). Stell dir vor, wie erfolglos ein Verkäufer ist, wenn er damit beginnt dich darum zu bitten das Produkt zu kaufen, bevor er erklärt weshalb.

Was das Erregen von Aufmerksamkeit betrifft, ist es am besten, reichlich Negativraum um die CTAs herum bereitzustellen. Negativraum ist ein schneller Trick, damit Elemente wahrgenommen werden: Je mehr Leere um einen Call-To-Action-Button umso bedeutender scheint er.

Eine weitere Strategie besteht darin, andere Optionen und Buttons abzudämpfen. Zu viele aufmerksamkeitserregende Buttons verwässern die Wirkung jedes einzelnen. Da dein CTA das Wichtigste ist, solltest du andere Buttons weniger auffällig designen. Du könntest sie zu Ghost-Buttons (transparente Buttons) machen, oder ihnen ein kontrastärmeres Farbschema geben.

Screenshot from T.C. Pharmaceuticals
Red Bulls Muttergesellschaft T.C. Pharmaceuticals nutzt CTA-Techniken gut. Ihre Farben für den „Find Out More“ Button und die Entscheidung, den „View Product“ Button transparent zu gestalten zeigt, dass Besucher eher den ersteren Button klicken sollen.

Wortwahl

Deine visuelle Gestaltung und Präsentation können nur in beschränktem Umfang helfen. Letzten Endes führen nicht cool aussehende Buttons zu Conversions, sondern die Haltung dahinter. Deshalb ist die Wortwahl in und um deinen Button eines der größten Assets, um Clickthroughs zu bekommen.

Genau gesagt, willst du dein Wertversprechen klar und deutlich ausdrücken. Das bedeutet, du musst dem Besucher einen Grund geben, deinen CTA anzuklicken. Bekommen sie einen kostenlosen Download, wenn sie ihn anklicken? Bekommen sie einen Rabatt, wenn sie sich für den Newsletter anmelden? Dies sind die Anreize, die es wert sind, im Text und um deinen CTA herum erwähnt zu werden.

Eine weitere hilfreiche Taktik besteht darin, Einwände offen anzusprechen. Nimm das häufige Beispiel von E-Mail-Adressen und Spam; der wahrscheinlich größte Einwand der Menschen, ihre E-Mail-Adresse herauszugeben ist, dass sie nicht von irgendwelchen Unternehmen vollgespamt werden wollen. Du kannst deine Conversions mit einem kurzen Disclaimer verbessern, der genau sagt, was du ihnen per E-Mail schicken wirst und in dem du ihnen versicherst, dass du ihre Adresse nicht mit Drittanbietern teilen wirst.

Screenshot from QuickSprout
Neil Patels Seite QuickSprout nutzt Worte gut: Der Text hier erklärt, was der User erwarten kann, fügt ein bisschen Humor hinzu und hält die Sache mit seiner Knappheit kurz.

Dein CTA

Was ist deine Erfahrung mit CTAs? Hast du irgendwelche Fragen? Wir wollen wissen, was du denkst, also sag uns deine Meinung unten in den Kommentaren.

Brauchst du Hilfe dabei, einen CTA für deine Landingpage oder deinen Werbebanner zu designen? Unsere Designer haben zig großartige Ideen!