Awareness
Obere Funnel-Stufe: Nutzer*innen kennen das Angebot noch nicht. Beispiel: Informationsseite mit Formular zur Lead-Generierung.
Keine passenden Inhalte gefunden.
1. Grundlagen: Was ist eine Landingpage?
Eine Landingpage ist eine extra erstellte Webseite, auf der Nutzer*innen nach dem Klick auf eine Werbeanzeige landen. Ihr Ziel ist eine konkrete Conversion wie Kauf, Anmeldung, Download oder Terminbuchung.
| Seitentyp | Funktion | Unterschied | Prüfungs-Merker |
|---|---|---|---|
| Startseite | Breiter Einstieg in Marke, Themen und Angebote. | Viele Wege, viele Themen. | Orientierung statt Fokus. |
| Produktseite | Produkt darstellen und Kauf ermöglichen. | Produktfokus, aber nicht zwingend auf Kampagnenziel abgestimmt. | Produkt erklären. |
| Landingpage | Nutzer*innen gezielt zu einer Entscheidung führen. | Maximal reduziert, klarer Fokus, ein Kampagnenziel. | Conversion auslösen. |
Consideration
Mittlere Funnel-Stufe: Nutzer*innen erwägen das Angebot. Beispiel: Vergleichs- oder Produktseite mit Lead-Formular.
Conversion
Untere Funnel-Stufe: Nutzer*innen sollen handeln. Beispiel: Kauf, Registrierung, Terminbuchung oder Anfrage.
Merksatz: Die Landingpage ist kein „kleiner Website-Ausschnitt“. Sie ist eine fokussierte Entscheidungsseite mit klarer Funnel-Funktion.
2. Struktur & Aufbau einer High-Conversion-Landingpage
Eine gute Landingpage arbeitet mit Above the Fold und Below the Fold. Oben muss sofort klar werden, warum Nutzer*innen bleiben sollen. Unten werden Argumentation, Vertrauen, Einwände und Pflichtinformationen ergänzt.
| Bereich | Aufgabe | Wichtige Elemente |
|---|---|---|
| Above the Fold | Sofort Orientierung und Handlungsimpuls geben. | Value Proposition, Hero-Element, CTA, Vertrauen. |
| Below the Fold | Argumente vertiefen, Einwände abbauen, Vertrauen stärken. | Argumentationskette, Social Proof, sekundäre CTAs, FAQs, Footer. |
Above-the-Fold: 4 Optimierungstipps
1Value PropositionWarum sollte ich bleiben? Welches Problem wird gelöst?
2Hero-ElementBild oder Video unterstützt Nutzen, nicht nur Deko.
3CTAKlarer Button, guter Kontrast, sichtbar positioniert.
4VertrauenSocial Proof, Expert Proof, Siegel oder Sicherheitshinweise früh zeigen.
| Below-the-Fold-Element | Aufgabe | Typischer Fehler |
|---|---|---|
| Argumentationskette | Problem benennen → Lösung präsentieren → Nutzen in Alltagssprache zeigen. | Features erklären, ohne Nutzen zu übersetzen. |
| Social Proof & Trust | Bewertungen, Case Studies, Zahlen, Logos oder Siegel einsetzen. | Fake- oder unpassende Testimonials. |
| Sekundärer CTA | Alternative für Nutzer*innen, die noch nicht bereit sind. | Konkurriert visuell mit Haupt-CTA. |
| FAQ | Hemmnisse abbauen: Zahlung, Kündigung, Versand, Datenschutz. | Juristische oder zu lange Antworten. |
| Footer | Pflichtangaben und Kontakt sichtbar machen. | Impressum, Datenschutz oder Kontakt fehlen. |
Typische Aufbaufehler: Zu viele Ablenkungen, unklare Value Proposition, überladenes Design, fehlende Trust-Elemente und keine Smartphone-Optimierung.
3. Design, UX und conversionstarke Texte
Nutzer*innen lesen Landingpages selten vollständig. Sie scannen Hotspots, Headlines, Bulletpoints, Bilder, CTAs und Vertrauenselemente. Deshalb müssen Layout und Text schnell erfassbar sein.
Scanbarkeit
Weißraum, klare Hierarchie, starke Headlines, Subheads, Bulletpoints und Chunking helfen, Inhalte schnell zu erfassen.
Bilder müssen überzeugen
Fotos und Videos sollen Nutzen erlebbar machen, nicht nur schmücken. Vorher/Nachher kann Problem und Lösung sichtbar machen.
Kein Designbruch
Anzeige und Landingpage sollten dieselben Farben, Bilder und Versprechen aufgreifen. Brüche führen zu Absprüngen.
| Bereich | Best Practice | Warum wichtig? |
|---|---|---|
| Kontraste | Bei CTAs und Formularen auf guten Mindestkontrast achten. | Lesbarkeit und Barrierefreiheit. |
| Buttons | Mindestens 44 × 44 px und genug Abstand. | Vermeidung von Fehlklicks. |
| Textgestaltung | Maximal 50–70 Zeichen pro Zeile, einfache Sprache. | Scanbarkeit und Verständlichkeit. |
| Formulare | Kurz, klare Fehlermeldungen, keine roten Ausrufezeichen ohne Erklärung. | Weniger Abbruch und Frust. |
Nutzen und Ziel klarmachen
Gute Headlines zeigen schnell, warum die Seite relevant ist. Formeln: Problem-Lösung, Zahlen und Konkretheit. Schlechte Headlines sind kreativ, aber inhaltsleer.
Aktiv und nutzenorientiert
Statt „Absenden“ besser: „Jetzt kostenlos testen“, „Mein Angebot sichern“ oder „In 2 Minuten anmelden“.
Text-Merksatz: Eine Landingpage informiert nicht nur. Sie erleichtert Entscheidungen.
4. Mobile First, Mobile UX und UX-Testing
Mobile First ist wichtig, weil viele Nutzer*innen über Smartphone, Social Media und Paid Ads kommen. Mobile Nutzung ist schnell, ablenkungsreich und stark von Micro-Moments geprägt.
| Mobile Erwartung | Was bedeutet das? | Umsetzung |
|---|---|---|
| Sofortige Ladezeiten | Mobile Nutzer*innen brechen schnell ab. | Bilder, Skripte, Fonts und Tracking reduzieren/optimieren. |
| Daumenfreundliche Bedienung | CTA muss erreichbar sein. | Thumb-Zone beachten, Sticky CTA nutzen. |
| Klarheit statt Komplexität | Kleiner Screen zeigt nur Ausschnitt. | Value Proposition, CTA und Trust Above the Fold. |
| Mobile Payments | Nutzer erwarten einfache Zahlung. | PayPal, Apple Pay, Google Pay sichtbar anbieten. |
Weniger ist mehr
Autofill, passende Tastatur, Dropdowns/Radiobuttons statt Freitext, Inline-Fehler und sofortiges Feedback.
44–48 px
Buttons sollten groß genug sein, mit Abstand zwischen interaktiven Elementen und sichtbaren Alternativen zu Gesten.
Nicht nur Desktop verkleinern
Zu kleine Texte, CTA unten versteckt, zu viele Pflichtfelder und zu komplexe Navigation führen zu Abbrüchen.
| UX-Test-Methode | Was wird sichtbar? | Beispiel-KPI |
|---|---|---|
| Remote-Usability-Test | Wie echte Nutzer*innen Aufgaben mobil lösen. | Aufgabenerfolg, Probleme, Verständnis. |
| Session Recording | Klickpfade, Abbrüche, Frustmomente. | Rage Taps, Time to Interaction. |
| Heatmap | Wo Nutzer tippen, stoppen oder ignorieren. | Scrolltiefe, CTA-Klicks. |
| Mobile Conversion Rate | Wie gut mobile Besucher konvertieren. | Conversion Rate mobil, Formularabbrüche. |
Mobile-Merksatz: Auf kleinen Screens muss das Wichtigste zuerst kommen: Value Proposition, CTA und Trust-Elemente.
5. Psychologische Trigger auf Landingpages
Menschen entscheiden online schnell, emotional und mit mentalen Abkürzungen. Landingpages müssen Vertrauen, Relevanz und Sicherheit in Sekunden erzeugen.
| Prinzip | Wirkung | Beispiel |
|---|---|---|
| System 1 | Schnell, automatisch, emotional. | „Sieht vertrauenswürdig aus – ich klicke.“ |
| System 2 | Langsam, überlegt, rational. | Versandbedingungen und Preisdetails vergleichen. |
| Cognitive Load | Zu viele Optionen oder Pflichtfelder überfordern. | 12 Pflichtfelder erzeugen Stress, 3 Felder wirken leichter. |
3 Ebenen
Technisches Vertrauen: SSL, Datenschutz, Payment. Soziales Vertrauen: Bewertungen, Fallstudien. Visuelles Vertrauen: Typografie, Weißraum, Fotos.
Andere sagen: Es funktioniert
Kundenzitate, Sternebewertungen, Zahlenbelege, Expert Proof, Media Proof und echte Testimonials.
Knappheit erzeugt Dringlichkeit
Zeitliche, quantitative, soziale oder Zugangsverknappung. Nur seriös einsetzen, nicht künstlich manipulativ.
| Social-Proof-Typ | Bedeutung | Beispiel |
|---|---|---|
| User Proof | Aussagen echter Kund*innen. | Testimonials, Bewertungen. |
| Expert Proof | Empfehlung durch Fachleute oder Institutionen. | Dermatolog*innen, Expert*innen. |
| Crowd Proof | Masse bestätigt Beliebtheit. | „Über 3000 Kund*innen vertrauen uns“. |
| Media Proof | Presse oder Blogs bestätigen Relevanz. | „Bekannt aus…“. |
Microcopy-Merksatz: Kurze Texte an Buttons, Formularen, Fehlermeldungen und Checkout-Schritten führen Nutzer*innen durch die Entscheidung.
6. Ladezeit, Performance und Core Web Vitals
Ladezeit ist ein direkter Conversion-Faktor. Langsame Seiten wirken unprofessionell, unsicher oder veraltet und können Absprünge, weniger Vertrauen und weniger Kaufbereitschaft auslösen.
| Core Web Vital | Misst | Zielwert | Conversion-Wirkung |
|---|---|---|---|
| LCP | Wann der Hauptinhalt sichtbar wird. | < 2,5 s | Geduld oder Absprung. |
| INP | Wie schnell die Seite auf Klicks/Eingaben reagiert. | < 200 ms | Vertrauen oder Frust. |
| CLS | Wie stark sich Layout-Elemente nachträglich verschieben. | < 0,1 | Sicherheit oder Fehlklicks. |
Komprimieren
Große Hero-Bilder und unpassende Auflösungen verlangsamen LCP. WebP/AVIF, Lazy Loading und srcset helfen.
Blockaden lösen
Zu viel JS verschlechtert INP. Defer/Async, Code-Splitting und ungenutzte Skripte entfernen.
Stabilität sichern
Spät geladene Fonts, fehlende Bildgrößen und dynamische Ads können CLS verschlechtern.
| Fehlerquelle | Problem | Optimierung |
|---|---|---|
| Langsamer Server | Hohe Antwortzeit. | Gutes Hosting, HTTP/3, CDN, Caching. |
| Tracking-Overload | Viele Pixel und Tools blockieren. | Script-Priorisierung, Server-Side Tagging, Tool-Audit. |
| Page Builder / Plugins | Code-Overhead. | Plugin-Reduktion, leichtes Theme. |
| Kein Caching | Alles lädt neu. | Browser Caching, GZIP/Brotli-Kompression. |
Performance-Merksatz: Schnelligkeit beeinflusst nicht nur UX, sondern auch SEO/GEO-Sichtbarkeit und SEA-Zielseitenerlebnis.
7. KI-gestützter Optimierungssprint
KI kann Landingpage-Abschnitte per Screenshot prüfen und konkrete Hinweise liefern. Die Vorschläge sind Anregungen, keine fertigen Wahrheiten. Zielgruppe, Kontext und echte Nutzerdaten ersetzt KI nicht.
Ablauf: Screenshot → Feedback → Umsetzung
1ScreenshotAbschnitt der Landingpage sichern.
2PromptKonkrete Frage an Gemini stellen.
3FeedbackVorschläge sichten und kritisch prüfen.
4UmsetzungPassende Punkte umsetzen und Vorher/Nachher zeigen.
| Etappe | Prüffokus | Leitfrage |
|---|---|---|
| 1. Above the Fold | Erstkontakt. | Ist Kernbotschaft, CTA und Nutzen sofort erkennbar? |
| 2. Below the Fold | Argumentation & Vertrauen. | Ist die Argumentationskette logisch und vertrauensbildend? |
| 3. CTA-Optimierung | Platzierung, Formulierung, Wirkung. | Führen die CTAs klar zur gewünschten Handlung? |
| 4. Footer & Pflichtangaben | Vollständigkeit und Übersichtlichkeit. | Sind Impressum, Datenschutz, Kontakt und relevante Pflichtangaben auffindbar? |
Muster erkennen
Ist die Kernbotschaft sichtbar? Wirkt der Aufbau übersichtlich oder überladen? Fehlen CTA oder Vertrauenssignale?
Echte Tests ersetzen
KI kennt Zielgruppe nicht besser als ihr selbst und kann Wirkung nicht wie echte Besucher*innen testen.
Prompt-Merker: „Bewerte anhand des Screenshots. Antworte als Stichpunktliste, maximal 5 Punkte, konkret und ohne Floskeln.“
8. Diagnose: typische Fehler & passende Maßnahmen
In Prüfungsfragen geht es oft darum, ein Symptom richtig einzuordnen und die passende Optimierung abzuleiten.
Ursache: Wertversprechen, CTA, Trust oder Kampagnen-Landingpage-Match sind schwach.
Maßnahme: Above the Fold prüfen: Value Proposition, Hero, CTA und Vertrauen.
Ursache: Seite ist nur verkleinerte Desktop-Version, CTA nicht sichtbar, Ladezeit oder Formular schlecht.
Maßnahme: Mobile First, Sticky CTA, Formular kürzen, PageSpeed prüfen.
Ursache: Zu viele Pflichtfelder, unklare Fehler, fehlendes Vertrauen.
Maßnahme: Weniger Felder, Autofill, Inline-Fehler, Microcopy und Trust-Hinweise.
Ursache: Fehlende Trust-Elemente, schlechte visuelle Qualität, zu viele Siegel oder Fake-Social-Proof.
Maßnahme: Technisches, soziales und visuelles Vertrauen sauber aufbauen.
Ursache: CTA ist nicht sichtbar, nicht handlungsorientiert oder konkurriert mit anderen Elementen.
Maßnahme: Kontrast, Platzierung, Nutzenformulierung und sekundäre CTAs prüfen.
Ursache: Große Bilder, zu viel JavaScript, Plugins, Tracking-Overload oder kein Caching.
Maßnahme: WebP/AVIF, Lazy Loading, Defer/Async, Plugin-Audit, CDN und Caching.
Finaler Prüfungs-Merker: Landingpage-Fragen laufen fast immer über Ziel → Funnel-Stufe → Aufbau → Mobile UX → Trust/Psychologie → Performance → Diagnose.