Communitygithub.com

Landing-Page-Conversion und UX

Verwenden Sie diese Fähigkeit beim Entwerfen oder Überprüfen von Landing Pages, Anmelde- und Lead-Capture-Formularen, Call-to-Actions, Wertversprechen, sozialen Beweisen oder bei der Planung von UX-Forschung und Tests für ein Webprodukt. Sie liefert konkrete, testbare Regeln für Klarheit above the fold, Seiten mit einem einzigen Ziel, kurze Formulare, ehrliche Vertrauenssignale, Seitenfluss, häufige Designfehler und wie man Änderungen misst und testet, ohne sich selbst zu täuschen.

Was ist Landing-Page-Conversion und UX?

Diese Fähigkeit bietet eine umfassende Sammlung von UX- und Conversion-Optimierungsregeln, die speziell für Landing Pages entwickelt wurden, deren Ziel es ist, eine einzige Aktion zu erreichen (z. B. Anmeldung, E-Mail-Eingabe oder Anfrage). Die Regeln basieren auf einer Vielzahl von Marketing-, Conversion- und UX-E-Books (ca. 2014–2016) und konzentrieren sich auf zeitlose Verhaltensmuster, nicht auf veraltete Zahlen. Sie ist nützlich für Entwickler, Designer und Produktmanager, die datenbasierte Verbesserungen an Webseiten vornehmen möchten, ohne sich in subjektiven Meinungen zu verlieren. Die Fähigkeit deckt sechs Hauptbereiche ab: Wertversprechen und Above-the-Fold-Gestaltung, Call-to-Actions, Lead-Capture-Formulare, soziale Beweise und Vertrauen, Seitenfluss und -struktur sowie häufige Designfehler, die es zu vermeiden gilt. Jede Regel enthält eine klare Anweisung, eine kurze Begründung und ein konkretes Beispiel, was die direkte Umsetzung oder Überprüfung erleichtert. Die Fähigkeit ist plattformunabhängig und kann in jedem Webentwicklungs- oder UX-Überprüfungsprozess verwendet werden, z. B. in Verbindung mit KI-Agenten wie Claude Code oder Cursor, die diese Regeln nutzen, um automatisch Seiten zu analysieren oder Verbesserungen vorzuschlagen. Ein besonderer Schwerpunkt liegt auf testbaren Ergebnissen, da viele Regeln durch A/B-Tests oder einfache Überprüfungen (z. B. den Fünf-Sekunden-Test) validiert werden können.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whoiscarlo/agent-skills/tree/HEAD/skills/landing-conversion-ux

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Landing Page Conversion und UX

Regeln für Seiten, deren Aufgabe es ist, eine einzige Aktion zu erreichen: Anmelden, Registrieren, eine E-Mail hinterlassen, etwas anfragen. Destilliert aus einer Reihe von Marketing-, Conversion- und UX-E-Books (UserTesting, UXPin, SmartBug, Usabilla und andere, etwa 2014 bis 2016). Die darin zitierten Zahlen sind alt. Das Verhalten dahinter ist es nicht.

Jede Regel besteht aus einer Anweisung, einer kurzen Begründung und einem Beispiel. Für eine Überprüfung beginnen Sie mit der Checkliste am Ende.


1. Wertversprechen und Above the Fold

  1. Bestehen Sie den Fünf-Sekunden-Test. Warum: Besucher entscheiden innerhalb weniger Sekunden, ob eine Seite für sie geeignet ist. Wenn sie bis dahin nicht sagen können, was Sie tun, drücken sie auf Zurück. Beispiel: Zeigen Sie jemandem die Seite für fünf Sekunden, verstecken Sie sie und fragen Sie: „Was ist das und für wen ist es?“ Wenn die Person nicht antworten kann, schreiben Sie die Überschrift um, bevor Sie irgendetwas anderes anfassen.

  2. Schreiben Sie die Überschrift über das Ergebnis für den Besucher, nicht über sich selbst. Warum: Eine Seite, die über „wir“ spricht, zwingt den Leser zur Übersetzungsarbeit. „Sie“ und ein konkretes Ergebnis erledigen das für ihn. Beispiel: „Wir kuratieren Marketing-E-Mails“ wird zu „Sehen Sie, wie 400 Marken ihre E-Mails schreiben, sortiert und durchsuchbar.“

  3. Untermauern Sie die Überschrift mit zwei oder drei konkreten Gründen zum Handeln. Warum: Die Überschrift motiviert; die Gründe überzeugen diejenigen, die unentschlossen sind. Beispiel: Unter der Überschrift drei kurze Zeilen: „Jede Woche neue Marken“, „Vollständige E-Mails, keine Miniaturansichten“, „Kostenlos stöbern.“

  4. Zeigen Sie das echte Produkt, kein Stockfoto. Warum: Generische Bilder wirken wie Füllmaterial und lassen die Seite weniger vertrauenswürdig erscheinen. Ein Screenshot des Produkts beweist, dass es existiert. Beispiel: Ersetzen Sie ein Foto eines lächelnden Teams durch ein echtes Raster archivierter E-Mails.

  5. Lassen Sie den ersten Bildschirm das Angebot präsentieren, dann lassen Sie die Leute scrollen. Warum: Der Hero-Bereich muss das Wertversprechen und die Hauptaktion transportieren, aber jedes Feature above the fold zu stopfen, erzeugt Unordnung. Menschen scrollen, wenn die Hierarchie klar ist. Beispiel: Der Hero enthält Überschrift, Unterzeile, einen Button und eine Produktvorschau. Features, Beweise und FAQ leben darunter.

  6. Entwerfen Sie zuerst für den kleinen Bildschirm. Warum: Das Handy-Layout zwingt Sie, Inhalte zu priorisieren. Was auf dem Handy überlebt, ist das, was zählt, und die Desktop-Version wächst sauber daraus hervor. Beispiel: Erstellen Sie einen Drahtrahmen für die 375px-Version mit nur Überschrift, Button und einer Beweiszeile, vergrößern Sie ihn dann, bis zu viel Leerraum entsteht, und fügen Sie das nächste Element hinzu.

  7. Halten Sie den Hero-Bereich schnell. Warum: Verzögerungen von etwa einer Sekunde lassen Menschen das Gefühl haben, die Kontrolle zu verlieren, und langsame Seiten verlieren sowohl Besucher als auch Suchrankings. Beispiel: Ein komprimiertes Vorschaubild, kein automatisch abspielendes Video, kein Slider.

[Quellen: Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]


2. Call-to-Actions

  1. Geben Sie einer Landing Page ein Ziel und einen primären CTA. Warum: Jede zusätzliche Aktion konkurriert mit der gewünschten. Eine Seite, die Leute auffordert, ein Video anzusehen, sechs Erfahrungsberichte zu lesen und dann ein Formular auszufüllen, verliert sie unterwegs. Beispiel: Ein „Archiv öffnen“-Button, oben und unten wiederholt, und nichts anderes als Button gestaltet.

  2. Beschriften Sie den Button mit dem, was als Nächstes passiert. Warum: „Absenden“ und „Hier klicken“ beschreiben den Mechanismus, nicht die Belohnung. Ein Verb plus die Sache macht das Ziel der Seite offensichtlich. Beispiel: „Absenden“ wird zu „Diese Marke anfragen“; „Anmelden“ wird zu „Archiv öffnen.“

  3. Sagen Sie, was der Besucher bekommt, bevor er sich verpflichtet. Warum: Menschen fragen: „Wofür gebe ich meine E-Mail-Adresse her?“ Beantworten Sie dies mit Text und, wenn möglich, einem Bild des Ergebnisses. Beispiel: Neben einem geschützten Button eine Zeile wie „Kostenlos. Mit Google anmelden. Dauert zehn Sekunden.“ und eine Vorschau des Archivs dahinter.

  4. Lassen Sie den CTA durch Kontrast hervorstechen, nicht durch Lautstärke. Warum: Ein gesättigter Button auf einer ruhigen Seite zieht den Blick. Eine grelle Farbe, die mit der Marke kollidiert, lässt die ganze Seite billig wirken. Beispiel: Halten Sie die umgebende UI entsättigt und geben Sie nur dem primären Button die stärkste Farbe der Marke.

  5. Nur Buttons sollten wie Buttons aussehen. Warum: Umrahmte Texte oder falsche Buttons, die nichts tun, verschwenden Klicks und lehren die Leute, dem Rest der Seite zu misstrauen. Beispiel: Setzen Sie keine umrandete Pille um „400+ Marken“; gestalten Sie es als Label oder Klartext.

  6. Machen Sie Tippziele groß und gut beabstandet. Warum: Finger sind weniger präzise als Cursor. Kleine oder gedrängte Ziele führen zu Fehltipps und Doppeltipps. Beispiel: Mindestens 44 x 44 Punkte für den Hauptbutton, mit ausreichend Abstand zum nächsten Link.

  7. Verstecken Sie nichts Wichtiges hinter Hover-Effekten. Warum: Touchscreens haben keinen Hover. Informationen, die nur bei Mauskontakt erscheinen, sind für Handynutzer unsichtbar. Beispiel: Zeigen Sie den „Was Sie bekommen“-Hinweis unter dem Button an, nicht in einem Tooltip.

  8. Bieten Sie einen sanfteren Weg für diejenigen, die noch nicht bereit sind. Warum: Die meisten Besucher sind beim ersten Besuch nicht bereit für die Hauptaktion. Eine sekundäre Option mit geringerer Verbindlichkeit hält sie davon ab, mit leeren Händen zu gehen, muss aber visuell untergeordnet bleiben. Beispiel: Ein Textlink „oder eine E-Mail erhalten, wenn neue Marken landen“ unter dem Hauptbutton.

[Quellen: 33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]


3. Lead-Capture- und Anmeldeformulare

  1. Fragen Sie nur nach dem, was Sie sofort verwenden werden. Warum: Jedes Feld senkt die Abschlussrate. In einem Test erhöhte die Reduzierung eines Formulars von 11 auf 4 Felder die Anmeldungen um weit über 100 %, ohne Einbußen bei der Lead-Qualität. Beispiel: Ein Formular zur „nächsten Marke anfragen“ benötigt einen Markennamen und eine E-Mail. Keinen Namen, kein Unternehmen, keine Telefonnummer.

  2. Entfernen Sie Felder, die verwirren. Warum: Ein einziges mehrdeutiges Feld kann ein Formular ruinieren. Ein berühmter Fall entfernte ein einzelnes optionales Feld „Unternehmen“, das falsch verstanden wurde, und erzielte Millionenumsätze. Beispiel: Wenn Sie „Website“ zur Markenanfrage hinzufügen, wissen die Leute möglicherweise nicht, ob Sie ihre eigene Seite oder die der Marke meinen. Lassen Sie es weg oder beschriften Sie es exakt.

  3. Sammeln Sie später mehr, nicht alles auf einmal. Warum: Wenig bei jedem Besuch zu fragen (progressives Profiling) führt zu mehr Abschlüssen und saubereren Daten als ein langes Formular, das die Leute mit Müll füllen. Beispiel: Die erste Anfrage fragt nur nach der E-Mail; eine spätere E-Mail fragt: „In welcher Branche arbeiten Sie?“

  4. Akzeptieren Sie Eingaben in jedem vernünftigen Format. Warum: Die Ablehnung von „Nike.com“, weil Sie „Nike“ wollten, bestraft den Benutzer für Ihren Parser. Bereinigen Sie es serverseitig. Beispiel: Leerzeichen entfernen, „www.“ und „.com“ entfernen, Groß-/Kleinschreibung ignorieren.

  5. Platzieren Sie das Formular neben dem Wert, den es freischaltet. Warum: Ein Formular, das direkt nach nützlichem Inhalt steht, konvertiert weitaus besser als eine generische Seitenleiste, die die Leute ignoriert haben. Beispiel: Platzieren Sie „Marke fehlt? Anfragen“ direkt unter der Archivvorschau, nicht in der Fußzeile.

  6. Halten Sie Anmeldung und Registrierung visuell getrennt. Warum: Wenn die beiden Formulare übereinander liegen, beginnen viele neue Besucher, das falsche auszufüllen. Beispiel: Ein „Mit Google fortfahren“-Button, der beide Fälle abdeckt, oder zwei klar getrennte Felder.

  7. Geben Sie einen Passwort-einblenden-Schalter und einen sichtbaren „Passwort vergessen“-Link. Warum: Falsch eingegebene Passwörter auf dem Handy treiben Leute zu Passwort-Reset-E-Mails, die sie aus dem Flow reißen. Beispiel: Ein Augensymbol im Passwortfeld; der Reset-Link direkt darunter.

  8. Bestätigen Sie den Erfolg auf der Seite in einfachen Worten. Warum: Die Leute müssen wissen, dass das Formular funktioniert hat und was als Nächstes passiert. Beispiel: „Verstanden. Wir senden Ihnen eine E-Mail, wenn Glossier im Archiv ist.“

  9. Erklären Sie in einem kurzen Satz, was Sie mit der E-Mail machen. Warum: Datenschutzbedenken sind ein häufiger Grund, warum Leute beim letzten Feld aufhören. Klare Sprache schlägt einen Link zu rechtlichen Texten. Beispiel: „Eine E-Mail, wenn Ihre Marke hinzugefügt wird. Kein Newsletter, es sei denn, Sie fragen danach.“

[Quellen: 3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (nur Formularregeln)]


4. Sozialer Beweis und Vertrauen

  1. Verwenden Sie echte Zahlen, wenn Sie sie haben. Warum: Menschen vertrauen harten Zahlen mehr als Adjektiven. Beispiel: „2.140 E-Mails von 312 Marken“ ist besser als „eine riesige Bibliothek.“

  2. Schreiben Sie jedem Erfahrungsbericht eine reale Person zu. Warum: Ein Name, eine Rolle und ein Foto machen ein Zitat greifbar. Ein anonymes Zitat wirkt erfunden. Beispiel: „Hat mir Stunden bei unserer Begrüßungsserie gespart.“ Priya S., Lifecycle-Marketerin bei einer D2C-Marke, mit Porträtfoto.

  3. Zeigen Sie erkennbare Logos dezent. Warum: Glaubwürdigkeit durch Assoziation funktioniert, aber bunte Logos konkurrieren mit dem CTA. Beispiel: Eine einzelne Reihe von Logos in Graustufen direkt unter dem Hero-Bereich.

  4. Platzieren Sie den Beweis dort, wo der Zweifel entsteht. Warum: Ein Erfahrungsbericht in der Seitenmitte, neben der Behauptung, die er stützt, wirkt mehr als eine Wand von Zitaten am Ende. Beispiel: Nach „Vollständige E-Mails, keine Miniaturansichten“ ein Zitat von jemandem, der die Vollbildansicht genutzt hat.

  5. Testen Sie sozialen Beweis, anstatt anzunehmen, dass er hilft. Warum: Abonnentenzahlen senken manchmal die Conversion, besonders wenn die Zahl klein ist. Beispiel: A/B-Testen Sie den Hero-Bereich mit und ohne „Begleiten Sie 800 Vermarkter.“

  6. Verdienen Sie sich Vertrauen durch Professionalität und Ehrlichkeit. Warum: Visuelle Qualität ist das Erste, womit Menschen die Glaubwürdigkeit beurteilen. Tippfehler, kaputte Buttons und unordentliche Ausrichtung lesen sich wie „nicht seriös.“ Beispiel: Korrekturlesen Sie jeden Text, klicken Sie vor dem Start auf jeden Link.

  7. Verwenden Sie niemals Dark Patterns. Warum: Tricks wie versteckte Opt-ins oder schwer zu findende Kündigungslinks gewinnen einmal und verlieren den Nutzer für immer. Beispiel: Ein nicht angehaktes, klar beschriftetes Kästchen „Senden Sie mir auch den wöchentlichen Digest“, niemals ein vorab angehaktes, im Kleingedruckten verstecktes.

  8. Seien Sie transparent bezüglich Kosten und Bedingungen. Warum: Menschen ziehen es vor, den Preis früh zu sehen, und „kostenlos“-Behauptungen, die sich als bedingt herausstellen, zerstören Vertrauen. Beispiel: Wenn das Stöbern kostenlos ist, aber Downloads kostenpflichtig sind, sagen Sie dies auf der Landing Page, nicht nach der Anmeldung.

[Quellen: The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]


5. Seitenfluss und -struktur

  1. Planen Sie den Pfad, bevor Sie die Seite gestalten. Warum: Ohne einen geplanten „Was tun sie als Nächstes?“ werden Seiten zu Sackgassen. Beispiel: Schreiben Sie es auf: Landen, Überschrift lesen, Vorschau sehen, auf „Archiv öffnen“ klicken, anmelden, im Archiv landen.

  2. Entfernen Sie die Hauptnavigation von Landing Pages mit einem einzigen Ziel. Warum: Jeder Navigationslink ist ein Ausgang aus dem Angebot. Beispiel: Logo plus ein CTA in der Kopfzeile, kein „Blog/Über uns/Preise“-Menü.

  3. Setzen Sie niemals eine Splash-Seite vor die eigentliche Seite. Warum: Sie fügt einen Schritt hinzu und sagt dem Besucher nichts. Beispiel: Kein „Seite betreten“-Tor. Die Landing Page ist die Eingangstür.

  4. Lassen Sie jede Seite mit einem nächsten Schritt enden. Warum: Eine Seite, die einfach aufhört, zwingt den Besucher zum Suchen. Wenn er innerhalb weniger Sekunden nicht findet, wohin er gehen soll, geht er. Beispiel: Die FAQ endet mit dem gleichen CTA wie der Hero-Bereich.

  5. Schreiben Sie für Überflieger. Warum: Die meisten Leute lesen nur Überschriften, Zwischenüberschriften und erste Sätze. Beispiel: Kurze Absätze, klare Zwischenüberschriften, Aufzählungslisten für Funktionen.

  6. Gruppieren und beabstanden Sie Inhalte, um die kognitive Last zu reduzieren. Warum: Weißraum verbessert das Verständnis, und das Zusammenfassen verwandter Elemente ermöglicht es den Leuten, mehr aufzunehmen, ohne etwas zu entfernen. Beispiel: Gruppieren Sie Funktionen in drei Karten anstelle von neun losen Zeilen.

  7. Verwenden Sie vertraute Muster, es sei denn, Sie haben einen Beleg, dass Ihres besser ist. Warum: Erkennbare Muster lassen Menschen handeln, ohne nachzudenken. Sie zu durchbrechen, erzwingt Lernen und verursacht Fehler. Beispiel: Setzen Sie die Anmeldung oben rechts, nicht in einer versteckten Geste. Wenn Ihre Regel für ein Muster „es sei denn“ oder „außer“ benötigt, ist es Zeit, sie zu überdenken.

  8. Beschriften Sie Links mit dem, was dahinter steckt. Warum: Klare Beschriftungen geben „Informationsduft“. Witzige Beschriftungen verstecken ihn. Beispiel: „Marken durchstöbern“, nicht „Die guten Sachen.“

  9. Erfüllen Sie grundlegende Barrierefreiheit. Warum: Es ist gute UX für alle, einschließlich Menschen in heller Sonne oder mit einem langsamen Handy. Beispiel: Textkontrast mindestens 4,5:1, Fließtext mindestens 16px, Zeilenabstand etwa 1,5, echte Beschriftungen auf Formularfeldern.

  10. Gestalten Sie leere und Wartezustände bewusst. Warum: Ein leerer Bildschirm nach der Anmeldung sieht defekt aus. Ein klarer leerer oder Ladezustand sagt den Leuten, was sie erwartet, und gibt ihnen das Gefühl, die Kontrolle zu behalten. Beispiel: „Lade 2.140 E-Mails...“ mit einem Skelettraster, nicht einer weißen Seite.

[Quellen: 33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]


6. Die Designfehler, die es zu vermeiden gilt

Eine kurze Liste der Fehler, die eine Seite am häufigsten ruinieren. Jede Zeile sagt, was stattdessen zu tun ist.

  • Slider und Karussells. Sehr wenige Leute klicken auf Folien nach der ersten, und sie verlangsamen die Seite. Zeigen Sie stattdessen ein starkes Bild.
  • Automatisch abspielendes Video oder Audio. Es erschreckt die Leute, und sie gehen. Verwenden Sie einen Play-Button und lassen Sie sie wählen.
  • Kitschige Stockfotos. Sie wirken verdächtig auf einer Seite, die nach Daten fragt. Verwenden Sie echte Produktaufnahmen.
  • Mehrere konkurrierende CTAs auf einer Landing Page. Wählen Sie einen aus.
  • Standardmäßige „Absenden“-Buttons. Benennen Sie sie in die Aktion um.
  • Formulare, die länger sind, als das Angebot wert ist. Kürzen Sie auf das Minimum.
  • Unordnung. Jeder Block sollte seinen Platz verdienen. Entfernen Sie, bis es wehtut.
  • Textwüsten. Unterteilen Sie in Überschriften, kurze Absätze und Aufzählungspunkte.
  • Niedriger Kontrast oder winziger Text. Hellgrau auf Weiß scheitert an der Lesbarkeit.
  • CTAs, die nichts mit dem Seiteninhalt zu tun haben. Ein globales Seitenleisten-Angebot, das nicht zur Seite passt, konvertiert schlecht. Passen Sie das Angebot an die Seite an.
  • Über sich selbst sprechen. Ersetzen Sie „wir“ durch „Sie“ und das Ergebnis des Besuchers.
  • Mobile ignorieren, bis der Desktop fertig ist. Entwerfen Sie zuerst für das Handy.
  • Unvollständige oder nicht überprüfbare Analysen. Verfolgen Sie, ob die Analysen die Frage beantworten, die Sie stellen.

[Quellen: 33 Website Design Crimes]


7. Messen, testen, nicht selbst täuschen

  1. Definieren Sie die eine Metrik, bevor Sie etwas ändern. Warum: Ohne eine einzelne entscheidende Metrik können Sie nicht wissen, ob eine Änderung funktioniert hat. Jede Seite hat eine. Finden Sie sie. Beispiel: Für eine Landing Page ist die Metrik „Prozentsatz der Besucher, die auf den primären CTA klicken“ oder „Prozentsatz, die das Formular abschließen.“ Nicht Seitenaufrufe, nicht Verweildauer auf der Seite.

  2. Testen Sie eine Variable gleichzeitig. Warum: Wenn Sie die Überschrift, die Schaltflächenfarbe und das Heldenbild gleichzeitig ändern und die Conversion steigt, wissen Sie nicht, warum. Sie haben auch nicht gelernt, welche Änderung funktioniert hat. Beispiel: Ändern Sie diese Woche nur den Button-Text. Nächste Woche die Farbe. Dann das Bild.

  3. Wechseln Sie nicht während des Tests. Warum: Ein A/B-Test, der an einem Werktag beginnt und am Wochenende läuft, misst unterschiedliche Zielgruppen. Die Ergebnisse sind nutzlos. Beispiel: Führen Sie den Test genau 7 Tage lang durch. Oder genau 1.000 Besucher. Nicht „bis wir ein gutes Gefühl haben.“

  4. Halten Sie den Kontroll- und den Variantentraffic gleichzeitig am Laufen. Warum: Ein Test, der die alte Version im Januar und die neue im Februar zeigt, ist kein Test – es ist eine Folge von Monaten. Die Besucher unterscheiden sich. Beispiel: Verwenden Sie echten geteilten Traffic. Tools, die Besucher nach Datum aufteilen, lügen.

  5. Messen Sie das, was der Besucher tut, nicht das, was er sagt. Warum: Leute sagen, sie würden „für Qualität bezahlen“ und klicken dann auf „Kostenlos.“ Verhalten schlägt Umfragen. Beispiel: Messen Sie Klickraten, Ausfüllraten, Absprungraten. Nicht „würden Sie...?“

  6. Ignorieren Sie Ausreißer nicht, aber lassen Sie sich nicht von ihnen leiten. Warum: Einem Besucher, der 45 Minuten auf der Seite bleibt, gefällt der Inhalt vielleicht – oder er hat sich vom Computer entfernt. Ein Besucher, der nach 2 Sekunden geht, hasst die Seite vielleicht – oder hat aus Versehen F5 gedrückt. Beispiel: Verwenden Sie den Median statt des Durchschnitts für die Verweildauer auf der Seite. Betrachten Sie die Verteilung, nicht nur den einen Wert.

  7. Schreiben Sie auf, was nicht funktioniert hat. Warum: Fehlgeschlagene Tests sind Lektionen. Wenn Sie sie nicht aufschreiben, wiederholen Sie sie in sechs Monaten. Beispiel: Führen Sie ein Protokoll: Datum, Änderung, Metrik, Ergebnis, Notiz.

[Quellen: 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; Idiot Buttons: The Placebo in UX Design]


Checkliste für die Seitenüberprüfung

Gehen Sie diese Liste durch, wenn Sie eine Landing Page überprüfen. Antworten Sie auf jede Frage mit „Ja“ oder „Nein“. Jedes „Nein“ ist eine Sache, die getestet oder behoben werden muss.

Wertversprechen

  • Besteht die Seite den Fünf-Sekunden-Test? (Fragen Sie jemanden, der nicht am Projekt beteiligt ist)
  • Spricht die Überschrift das Ergebnis des Besuchers an?
  • Gibt es zwei oder drei klare Gründe, weiterzumachen?
  • Sieht der Heldenteil wie das echte Produkt aus?

Call-to-Action

  • Gibt es genau ein primäres Ziel?
  • Sagt der Button-Text, was passiert?
  • Weiß der Besucher, was er bekommt, bevor er klickt?
  • Hebt sich der CTA durch Kontrast ab?
  • Nur Buttons sehen wie Buttons aus?
  • Ist der Button fingerfreundlich (≥44×44)?
  • Ist kein CTA hinter Hover-Effekten versteckt?
  • Gibt es einen schwächeren Weg für Unentschlossene?

Formulare

  • Wird nur das Nötigste gefragt?
  • Sind alle Formularfelder klar?
  • Werden Eingaben im richtigen Format akzeptiert?
  • Steht das Formular neben dem Wert, den es freischaltet?
  • Sind Anmeldung und Registrierung klar getrennt?
  • Gibt es Passwort-einblenden und „Passwort vergessen“?
  • Wird der Erfolg bestätigt?
  • Steht da, was mit der E-Mail passiert?

Sozialer Beweis und Vertrauen

  • Werden Zahlen statt Worte verwendet?
  • Haben die Erfahrungsberichte Namen und Fotos?
  • Sind die Logos dezent?
  • Ist der soziale Beweis dort, wo er gebraucht wird?
  • Wurde der soziale Beweis getestet?
  • Sieht die Seite professionell und ehrlich aus?
  • Werden keine Dark Patterns verwendet?
  • Sind Kosten und Bedingungen klar?

Seitenfluss und -struktur

  • Ist der Pfad des Besuchers geplant?
  • Fehlt die Hauptnavigation (es sei denn, es ist eine Seite mit mehreren Zielen)?
  • Gibt es keine Splash-Seite?
  • Endet jeder Abschnitt mit einem nächsten Schritt?
  • Ist der Text überfliegbar?
  • Ist der Inhalt gruppiert und beabstandet?
  • Werden vertraute Muster verwendet (oder getestet)?
  • Sind die Links klar beschriftet?
  • Erfüllt die Seite grundlegende Barrierefreiheit?
  • Sind leere und Ladezustände gestaltet?

Designfehler

  • Kein Slider oder Karussell?
  • Kein automatisch abspielendes Video/Audio?
  • Keine kitschigen Stockfotos?
  • Nur ein primärer CTA?
  • Sind die Buttons umbenannt?
  • Ist das Formular kurz genug?
  • Ist die Seite aufgeräumt?
  • Ist der Text kurz?
  • Ist der Kontrast gut?
  • Passt der CTA zum Seiteninhalt?
  • Spricht die Seite den Besucher an (nicht „wir“)?
  • Ist die mobile Version genauso gut wie die Desktop-Version?

Testen

  • Ist eine einzelne entscheidende Metrik definiert?
  • Wird jeweils eine Variable getestet?
  • Läuft der Test unter kontrollierten Bedingungen?
  • Werden Kontrolle und Variante parallel laufen?
  • Wird das tatsächliche Verhalten gemessen?
  • Werden Ausreißer berücksichtigt?
  • Werden Fehlschläge dokumentiert?

Verwandte Skills