Das Conversion-Design-Dreieck

Jede hochkonvertierende Seite balanciert drei Dinge:

1. Klarheit: Der Besucher weiß sofort, was das Produkt macht, für wen es ist und welchen Nutzen es bietet. Keine Mehrdeutigkeit, kein Jargon. 2. Vertrauen: Der Besucher glaubt, dass das Produkt hält, was es verspricht. Beweise durch Social Proof, Zahlen, echte Screenshots. 3. Dringlichkeit / Relevanz: Der Besucher hat einen Grund, jetzt zu handeln, nicht später. Kostenloser Test, zeitlich begrenztes Angebot, oder einfach: "Das löst mein aktuelles Problem."

Bei einem deutschen Geschäftspublikum: Klarheit und Vertrauen sind wichtiger als künstliche Dringlichkeit (gefälschte Countdown-Timer und "Nur noch 3 verfügbar"-Tricks). Deutsche B2B-Käufer durchschauen Manipulationstaktiken schnell und reagieren negativ darauf.

Visuelle Hierarchie in WeWeb aufbauen

Visuelle Hierarchie lenkt Aufmerksamkeit in der Reihenfolge: (1) Headline, (2) Hero-Bild/Screenshot, (3) CTA-Button, (4) Social Proof, (5) Features.

Um das in WeWeb umzusetzen: - H1-Headline: Schriftgröße 48-64px, Fontgewicht 700-800, max. 2 Zeilen auf Desktop - CTA-Button: Primärfarbe (kontrastreich), Größe min. 48px Höhe für Mobile-Touchfreundlichkeit - Social Proof: 10-15 % kleiner als Body-Text, gedämpfte Farbe, wichtig, aber nicht konkurrierend - Feature-Icons: einheitliche Größe (48px), einheitliche Farbe (Sekundärfarbe deines Brandings)

WeWebs Design-System unterstützt Token für Farben, Abstände und Typografie, definiere diese einmal und wende sie auf der gesamten Seite an.

Reibungsfreies Onboarding

Die ersten 5 Minuten nach der Registrierung entscheiden, ob ein Nutzer aktiviert wird. Jeder Schritt, der nicht essentiell ist, ist Reibung.

Optimaler Onboarding-Flow: 1. Bei der Registrierung nur E-Mail + Passwort (noch keine Telefonnummer, kein Name) 2. Ein-Bildschirm-Setup-Assistent: maximal 3 Fragen, Fortschrittsanzeige sichtbar 3. Landung auf einem vorbefüllten Dashboard, nicht auf einem leeren Zustand 4. Der erste "Gewinn" innerhalb von 60 Sekunden: etwas, das der Nutzer sofort sehen, anklicken oder tun kann

In FlutterFlow: Nutze eine Bedingung beim App-Start. Wenn onboarding_complete = false ist, navigiere zum Onboarding-Flow. Setze onboarding_complete = true in Supabase, wenn der Nutzer Schritt 3 abgeschlossen hat.

Leere Zustände sind Conversion-Killer. Befülle sie mit Beispieldaten oder einem Beispiel, damit der Nutzer den Wert sieht, bevor er echte Daten eingegeben hat.

Miss deine Onboarding-Abschlussrate gnadenlos. Wenn du PostHog nutzt, definiere einen Onboarding-Funnel mit Events für jeden Schritt (step_1_completed, step_2_completed, activation_achieved). Der Drop-off-Report zeigt dir genau, an welchem Schritt du Nutzer verlierst. Die meisten SaaS-Produkte verlieren 40 bis 60 % der neuen Registrierungen vor der Aktivierung, oft weil das Onboarding Informationen verlangt, die der Nutzer nicht griffbereit hat, oder weil der erste Bildschirm nach der Registrierung ein leerer, unbefüllter Zustand ist, der keinen Wert zeigt.

Copy ist Design

Die Worte auf deiner Oberfläche sind genauso wichtig wie das Layout. Schlechte Copy kostet Conversions, selbst bei einem wunderschönen Design.

Copy-Änderungen mit hoher Wirkung: Button-Text: Aktionsverb plus Ergebnis. "Speichern" wird zu "Änderungen speichern". "Absenden" wird zu "Mein Konto erstellen". "Loslegen" wird zu "Kostenlosen Test starten". Fehlermeldungen: konkret und hilfreich. "Ungültige E-Mail" wird zu "Prüfe das E-Mail-Format, es sollte wie name@firma.de aussehen". Leere Zustände: sage dem Nutzer, was er tun soll, nicht was fehlt. "Noch keine Projekte" wird zu "Erstelle dein erstes Projekt, es dauert 2 Minuten". Tooltips: erkläre das Warum, nicht das Was. "Klicken zum Exportieren" wird zu "Als CSV für Excel oder Google Sheets exportieren".

Prüfe jeden Text in deiner App. Behebe die 10 schlechtesten und beobachte, wie deine Support-Tickets zurückgehen.

Die am meisten vernachlässigte Copy in No-Code-Apps sind Fehlermeldungen. Entwickler (und No-Code-Builder) schreiben Fehlermeldungen für sich selbst, sie verstehen, was "Error: 422 Unprocessable Entity" bedeutet. Nutzer nicht. Jede Fehlermeldung sollte dem Nutzer in einfacher Sprache sagen, was schiefgelaufen ist, und idealerweise, was er dagegen tun kann. In WeWeb und FlutterFlow wird Fehlerbehandlung in Actions implementiert, ersetze die Standard-Fehleranzeige durch eine benutzerdefinierte Nachrichtenkomponente, die je nach Fehlertyp eine verständliche Beschreibung zeigt.

Trust Signals strategisch platzieren

Trust Signals sind Conversion-Katalysatoren, sie beseitigen die Einwände, die Besucher vom Handeln abhalten. Platzierung nach Zone:

Hero-Zone (über dem Fold): Logo-Leiste oder eine einzelne starke Zahl ("Genutzt von 500+ Unternehmen").

Nach dem Feature-Abschnitt: Ausführlicheres Testimonial mit Name, Foto, Unternehmen und konkretem Ergebnis ("Seit der Einführung sparen wir 10 Stunden pro Woche bei der Budgetgenehmigung").

Neben dem primären CTA: Micro-Trust-Signale, "DSGVO-konform", "ISO 27001-zertifiziert" (wenn zutreffend), "Keine Kreditkarte erforderlich", "Kostenlos kündbar".

Für den deutschen Markt: DSGVO-Compliance als Trust-Signal ist mächtiger als in anderen Märkten. Deutsche Unternehmen haben echte rechtliche Bedenken hinsichtlich Datenschutz und würdigen explizite Compliance-Bekundungen.

Mobile ist ein Screen erster Klasse

Bei B2C-Apps und Mobile-First-SaaS finden 60 bis 80 % der Nutzung auf Mobile statt. Bei internen Tools und B2B-SaaS sind es immer noch 30 bis 40 %, mehr als die meisten Teams annehmen.

Mobile-spezifische Designregeln: Tap-Ziele mindestens 48 mal 48px (Daumen sind keine Mauszeiger). Bottom-Navigation für die primäre App-Navigation (Daumenzone). Vermeide Hover-Zustände als einzigen Weg, Informationen aufzudecken. Formulare: den richtigen Tastaturtyp nutzen (E-Mail-Eingabe type="email", Telefon type="tel"). Tabellen: versuche nicht, Datentabellen auf Mobile funktionieren zu lassen, wandle sie stattdessen in Karten-Listen um.

In FlutterFlow: Baue dein Mobile-Layout zuerst in 375px Breite, dann passe es für Tablet und Web an. FlutterFlows responsiver Widget-Baum macht das unkompliziert, wenn du Mobile-first startest, nachträgliches Anpassen ist deutlich schwieriger.

Teste auf echten Geräten über verschiedene Betriebssysteme hinweg. Chromes Mobile-Geräte-Simulator und FlutterFlows Preview-Modus sind nützlich für schnelle Iteration, bilden aber das Verhalten echter Geräte nicht präzise ab. Scroll-Trägheit, das Verhalten der Tastatur-Einblendung und die Handhabung des sicheren Bereichs (die iPhone-Notch und der Home-Indikator) verhalten sich auf echter Hardware alle unterschiedlich. Buche eine monatliche Testsitzung, in der du den aktuellen Build auf einem iPhone, einem High-End-Android und einem Mid-Range-Android testest. Diese drei Geräte decken den Großteil deiner Nutzerbasis ab.

Reibung im Conversion-Flow reduzieren

Reibung ist alles, was einen Besucher daran hindert, die gewünschte Aktion durchzuführen. Häufige Reibungsquellen und ihre Lösungen:

Zu viele Formularfelder: Reduziere auf Name + E-Mail für erste Berührung. Mehr Informationen bei dem Onboarding sammeln. Unklare nächste Schritte nach dem CTA: Schreibe unter den Button, was passiert: "Du erhältst innerhalb von 24 Stunden eine Demo-Buchungsanfrage." Langsame Ladezeit: Jede Sekunde Verzögerung senkt die Conversion um ca. 7 %. Bilder in WeWeb auf WebP konvertieren. Schlechte Mobile-Erfahrung: CTA-Buttons zu klein, Text zu klein, horizontales Scrollen. WeWeb Responsive Editor, teste auf iPhone SE (375px). Fehlende DSGVO-Transparenz: Für deutsche Nutzer ist das ein echter Conversion-Blocker. Klare Datenschutzhinweise erhöhen das Vertrauen.

Reibung in Formularen reduzieren

Formulare sind der Ort, an dem der höchste Anteil an Conversion-Versuchen scheitert. Ein Nutzer, der ein Formular erreicht, hat bereits entschieden, dein Produkt auszuprobieren, Formular-Reibung verwandelt eine Absicht in einen Abbruch. Jede Design- und UX-Entscheidung in deinen Formularen sollte an einer Frage gemessen werden: Verringert oder erhöht das die Chance, dass ein motivierter Nutzer das Formular abschließt?

Die Feldanzahl ist der größte Reibungshebel. Frage bei jedem Pflichtfeld: Was verlieren wir, wenn wir das an diesem Schritt nicht erfassen? Bei den meisten Erstkontakt-Formularen lautet die Antwort für alles außer E-Mail "nichts Kritisches". Telefonnummer, Unternehmensgröße, Anwendungsfall und Berufsbezeichnung können alle nach der Registrierung in einem Onboarding-Flow erfasst werden, wo der Nutzer mehr Kontext hat, warum du danach fragst. Reduziere dein Formular auf seinen minimal funktionsfähigen Feldsatz und miss die Veränderung der Conversion-Rate, sie ist fast immer positiv.

Inline-Validierung, das Anzeigen von feldbezogenen Fehlermeldungen während der Nutzer tippt, übertrifft bei der Conversion konsequent die Validierung beim Absenden. Wenn ein Nutzer ein Formular mit 5 Feldern absendet und auf einmal 3 Fehlermeldungen bekommt, bricht er das Formular oft komplett ab. Wenn jedes Feld validiert wird, während er zum nächsten wechselt, werden Fehler in Echtzeit erkannt und korrigiert, ohne die psychologische Entmutigung eines fehlgeschlagenen Absendevorgangs. Implementiere in WeWeb Inline-Validierung, indem du eine Validierungs-Action beim Blur-Event jedes Feldes auslöst, nicht beim Submit-Event des Formulars.

Microcopy, das Vertrauen aufbaut

Microcopy bezeichnet die kleinen Textelemente, die über eine Oberfläche verstreut sind, Feldbeschriftungen, Platzhaltertext, Hilfetext, Button-Beschriftungen, Bestätigungsnachrichten und Fehlerzustände. Trotz ihrer Größe haben diese Elemente einen überproportionalen Einfluss auf die Conversion, weil sie die Fragen des Nutzers genau in dem Moment beantworten, in dem er zögert.

Beruhigende Hinweise unter Feldern beseitigen Zögern in den kritischsten Conversion-Momenten. Unter einem E-Mail-Feld: "Wir geben deine E-Mail nie weiter. Jederzeit abbestellbar." Unter einem Kreditkartenfeld: "Gesichert durch Stripe. Wir speichern niemals Kartendaten." Unter einem Telefonfeld: "Optional. Wird nur für dringende Kontobenachrichtigungen verwendet." Jeder dieser Hinweise fügt dem Formular 5 bis 10 Wörter hinzu, adressiert aber einen konkreten Einwand, der sonst zum Abbruch führen würde. Der Aufwand ist vernachlässigbar, der Conversion-Vorteil ist messbar.

Bestätigungsnachrichten nach wichtigen Aktionen sind eine weitere wirkungsstarke Microcopy-Fläche. "Dein Konto ist bereit, prüfe deine E-Mail für den Bestätigungslink" ist deutlich besser als "Konto erfolgreich erstellt", weil es dem Nutzer sagt, was als Nächstes zu tun ist. "Deine Zahlung von 49 € ist eingegangen. Deine Rechnung ist unterwegs zu name@email.com" ist besser als "Zahlung erfolgreich", weil es konkrete Bestätigungsdetails liefert, die Vertrauen aufbauen. In WeWeb und FlutterFlow werden Bestätigungsnachrichten in Action-Sequenzen nach einem erfolgreichen API-Aufruf angezeigt, nimm dir die zusätzlichen 5 Minuten, um sie richtig zu schreiben.

Exit-Intent-Strategien

Exit Intent, das Erkennen, wenn ein Besucher im Begriff ist, die Seite zu verlassen, und das Anzeigen einer Intervention, ist eine der Taktiken mit dem höchsten ROI für Landing Pages, die auf kalten Traffic abzielen. Ein Besucher, der 80 % deiner Landing Page gelesen, aber nicht konvertiert hat, ist nachweislich interessiert. Ein Exit-Intent-Popup, das seinen Haupteinwand adressiert, kann 5 bis 10 % dieser abspringenden Besucher konvertieren.

Die wirksamsten Exit-Intent-Interventionen sind spezifisch, nicht generisch. Ein generisches Popup "Melde dich für unseren Newsletter an" beim Verlassen wird ignoriert. Ein Popup, das sagt "Warte, die meisten Teams, die uns ausprobieren, starten mit dieser Vorlage. Kostenlos ansehen." adressiert das konkrete Zögern (nicht zu wissen, wie man anfängt) mit einem konkreten Angebot (einer Vorlage). Je spezifischer deine Exit-Intervention zur Seite passt, die der Besucher gerade gelesen hat, desto höher die Conversion-Rate.

Implementiere Exit Intent in WeWeb mit einem JavaScript-Event-Listener auf das mouseleave-Event des document-Elements, das feuert, wenn der Cursor des Nutzers über die Browser-Chrome-Leiste bewegt wird (in Richtung Zurück-Button oder Adressleiste). Löse eine Änderung einer WeWeb-Variable aus (showExitPopup: true), die ein Modal sichtbar macht. Das Modal sollte einen klaren Schließen-Button, ein einziges überzeugendes Angebot und einen CTA haben, der sich vom Haupt-CTA der Seite unterscheidet. Zeige nicht dasselbe Angebot, das bereits abgelehnt wurde. Nutze auf Mobile ein zeitverzögertes Popup (30 bis 45 Sekunden auf der Seite) statt mouseleave, da Mobile-Nutzer keine Maus zum Bewegen haben.

Mobile-Conversion-Optimierung

Mobile-Conversion-Raten für SaaS-Landing-Pages liegen typischerweise 40 bis 60 % unter Desktop, nicht weil Mobile-Nutzer weniger interessiert sind, sondern weil die meisten Landing Pages zuerst für Desktop designt und optimiert werden. Diese Lücke zu schließen ist eine der Aktivitäten mit dem höchsten ROI für jedes SaaS mit nennenswertem Mobile-Traffic.

Die größten Mobile-Conversion-Killer sind Formularlänge, Tap-Ziel-Größe und Ladegeschwindigkeit. Auf Mobile ist jedes zusätzliche Formularfeld proportional schmerzhafter als auf Desktop, weil Tippen langsamer und fehleranfälliger ist. Das Mobile-Formular sollte weniger Felder haben als die Desktop-Version, oder idealerweise denselben minimalen Satz. Tap-Ziele kleiner als 44px sind das Mobile-Äquivalent zum Verstecken des Buttons: Sie sind klickbar, aber frustrierend, und Frustration verursacht Abbruch. Setze in WeWeb alle Button-Höhen über deine Design-Tokens auf mindestens 48px, damit die Vorgabe global durchgesetzt wird.

Ladegeschwindigkeit hat einen überproportionalen Effekt auf die Mobile-Conversion, weil Mobile-Netzwerke weniger zuverlässig und langsamer als Breitband sind. Eine Seite, die auf Desktop in 1,5 Sekunden lädt, kann auf einer 4G-Verbindung mit mäßiger Überlastung 4 Sekunden brauchen. Führe deinen Lighthouse-Audit im Mobile-Modus aus (er nutzt simuliertes Mobile-Netzwerk-Throttling), du wirst möglicherweise feststellen, dass dein Mobile-Score deutlich schlechter ist als dein Desktop-Score. Behebe zuerst die mobile-spezifischen Probleme: nicht optimierte Bilder sind fast immer die Hauptursache, gefolgt von render-blockierenden Third-Party-Skripten.

Messen und iterieren

Conversion-Design ohne Messung ist Spekulation. Einrichten in WeWeb:

1. Google Analytics 4 (nach DSGVO-Einwilligung): Verfolge CTA-Button-Klicks als Events (mit data-ga-event-Attributen oder Google Tag Manager). 2. Hotjar (Heatmaps und Session Recordings): Sieh, wo Besucher abbrechen, was sie anklicken und wo sie aufhören zu scrollen. 3. A/B-Test: Teste eine Variante der Headline alle 2 Wochen. Die meisten Teams testen nie, du wirst einen Wettbewerbsvorteil haben.

App Studio liefert Landing Pages und Web-Apps mit eingebauten Analytics-Setups, die Conversion-Tracking von Tag eins ermöglichen. Mehr als 50 Projekte in Produktion. Kontaktiere uns auf /contact.