3.Kapitel des Landing Page Kurs

Gestaltung & Platzierung der Call-To-Action Elemente

Die Handlungsaufrufe (CTA) ist das wichtigste Element auf deiner Landingpage. Es ist der letzte Punkt in der Handlungskette von der Aufmerksamkeit bis zur Conversion.

In diesem Teil erfährst du wie und wo du die CTA innerhalb und ausserhalb des sichtbaren Bereichs (bezogen auf das Browserfenster platzierst.

Platzierung der Handlungsaufforderung

Je nach Zweck und Vorinformationsgrad des Users kann eine CTA überhalb oder auch erst später auf der Landingpage eingebunden werden. Du würdest beim ersten Date auch nicht gleich Hochzeitpläne schmieden.

CTA above the fold – Überhalb der „Kante“

Sehr oft wird die Handlungsauforderung in den sichtbaren Bereich der Landingpage gesetzt. Untersuchungen zeigen, dass viele User nicht scrollen. Eigene Erfahrungen belegen das jedoch nicht so eindeutig. Die User scrollen wenn sie glauben, dass es Sinn macht.

Ein Lösungsansatz wäre eine Art Minilandingpage zu bauen welche alles wichtige Elemente „above the fold“ dem User platziert. Conversion unterstützender Inhalt ist dann einfach erreichbar über die Scrollfunktion.

So kann ein noch nicht überzeugter User Zusatzinfos erhalten die ihn motivieren eine Entscheidung zu treffen.

Diese 6 Elemente gehören auf so eine Landingpage:

  1. Eine aussagekräftige und beschreibende Überschrift: Denk einfach an die Zeitung mit den vier Buchstaben. Jeden Tag muss die Zeitung neu verkaufen.
  2. Eine ergänzende Unterüberschrift (Subheadline): Damit bleibt die Hauptschlagzeile kurz und prägnant und du kannst zusätzliche Infos liefern und noch mehr Emotionen freizusetzen 🙂
  3. Hero Shot: Optimales Foto, Video, Visualisierung des Angebots. Versuche den Nutzen für den Kunden so plastisch wie möglich darzustellen.
  4. Erklärung zum Nutzen: Beschreibe die Vorteile->Nutzen deines Angebotes und du die Schmerzen des Kunden löst.
  5. Eine Handlungsaufforderung die genau darstellt was der User bekommt und was er jetzt machen soll
  6. Vertrauensignale senden: Untermauer deine Unique Value Proposition mit glaubhaften Kundenmeinungen oder Vertraussiegel (z.B. Trusted Shops)

Handlungsaufforderung „unterhalb der Kante“

Wenn der User noch „kalt“ ist macht es Sinn mit der AIDA Modell deinen Kunden vom Angebot zu überzeugen.

Es steht für Attention (Aufmerksamkeit), Interest (Interesse), Desire (Wunsch), Action (Aktion) und basiert auf der Idee, dass ein Besucher eine Reihe von linearen Schritten auf seinem Weg zu einer Entscheidung zum Handeln durchläuft.

Wir liefern dir mit dem untenstehenden Wireframe ein Beispiel wie der User „heiß“ gemacht wird.

Im Wireframe nutzen wir das AIDA Prinzip um den Nutzer von Stufe zu Stufe des Verkaufsebene zu führen.

Aufmerksamkeit: Du gewinnst die Aufmerksamkeit deines Besucher mit einer relevanten und einprägsamen Überschrift.

Interesse: Durch den Einsatz des Videos gewinnst du das Interesse des Users.

Verlangen: Mit einer Funktionsbeschreibung und Vorteilen, die die Bedürfnisse Ihres Besuchers ansprechen, entsteht Begehrlichkeit.

Handlung: Und schließlich vervollständigt ein starker Handlungsaufruf die Geschichte an dem Punkt, an dem der Besucher davon überzeugt ist, dass du eine Lösung für sein Problem lieferst. Die CTA nutzt Kontrast / Farbe und kommuniziert, was der User bekommt wenn er auf den Button klickt.

Wann solltest du die CTA nach unten setzen?

Die Daumenregel sagt: Um so komplexer und teurer das Angebot desto mehr Infos braucht der User. In der Regel kommt er auch mehrmals mit verschiedenen Suchintentionen.

Eine Lösung kann eine dynamische Landingpage sein. Hier erkennt ein Algorithmus den „Wärmegrad“ deines Users. Wenn der User schon mal auf der Landingpage war speichert sie die wahrgenommenen Elemente. Beim nächsten Besuch zeigt sie dann eine angepasste Version an.

Call to Action – Button Design

Du wirst es kaum glauben, aber der Button hat einen starken Einfluss auf die Conversion Rate deine Landingpage. Deshalb gibt es hier praxiserprobte Buttons und die psychologischen Hintergründe dazu.

7 Gesetze von conversionstarken Buttons

Kontrast

Starke Kontraste unterstützen die Wahrnehmung der wichtigen Elemente auf der Landingpage. Nutze z.B: Komplimentärfarben (Gegenüberliegende Farbe im Farbkreis) um den Button vom Rest der Seite abzuheben.

Klickbarkeit

Der User sollte verstehen, dass der Button auch ein Button ist. Lass ihn wie ein Knopf zum Drücken aussehen. Flat-Design sieht zwar schick aus, jedoch kann es passieren, dass der User deinen Button nicht als Schaltfläche sieht.

Größe

Stelle deinen Button so groß wie möglich dar (übertreibe es aber auch nicht 🙂

Richtungsweisende Hinweise

Nutze den Visual Clueing Effect um die Aufmerksamkeit deines User auf die CTA Schaltfläche zu lenken.

Call to Action Texte

Die Button Beschriftung ist sehr wichtig. Beschreibe was der User tun soll und was für ihn dabei herauskommt. Zum Beispiel: „Download des kostenloses Playbook“. Bitte niemals einfach nur „Abschicken“ oder „Hier Klicken“ nutzen.

Unterstützende Infos

Liefere ein kurzen Hinweis damit der User den Zweck der Handlung noch besser versteht. So kannst du noch weitere Details liefern. Dazu kannst du einen kleinen Text unterhalb des Haupttextes im Button nutzen.

Weissraum liefern

Gib deinem Button Platz „zum atmen“. Damit ist der Platz ausserhalb und innerhalb des Buttons gemeint.

Beispiele für Buttons

Beispiel 1 – 3D Effekt

Abb: 3D-Effekt durch Schatten

Beispiel 2 – Starker Kontrast

Abb: Button mit starken Kontrast

Beispiel 3 – Unterstützende Infos & richtungsweisende Hinweise

Abb: Button mit Infos und Hinweisen. Hier mit Verknappung 🙂

Technik für schöne Buttons

Schöne 3D Effekte für deine Buttons bekommst du mit CSS 3. Damit kannst du sehr einfach Eigenschaften definieren um deine Buttons kontraststark in Szene zu setzen. Die wichtigsten Eigenschaften lauten:

box-shadow für Schatten

background: linear-gradient für Farbverlauf im Button

border-radius für runde Ecken

Weiter zum nächsten Kapitel

Erfahre wie du deine Landingpage-Besucher mit Texten, die verkaufen im Texterkurs für Landingpage begeisterst.