Was eine Website-Startseite haben muss, damit Besucher zu Anfragen werden

Die meisten Startseiten, die du als Webdesigner erbst, sind ein Gemischtwarenladen: ein Slider mit drei Stockfotos, irgendwo „Herzlich willkommen“, Leistungen quer verteilt, der Kontaktbutton versteckt im Menü. Das Problem ist nicht der Geschmack, sondern die Reihenfolge. Eine Startseite ist kein Designobjekt, sondern ein Entscheidungspfad: jede Sektion hat genau eine Aufgabe, nämlich den Besucher dazu zu bringen, die nächste Sektion zu lesen, bis er anfragt.

Dieser Artikel baut die konvertierende Startseite Sektion für Sektion von oben nach unten, und begründet jede Entscheidung mit Nutzerverhalten statt mit Designvorlieben. Die Reihenfolge folgt zwei Logiken gleichzeitig: der abnehmenden Aufmerksamkeit von oben nach unten und dem aufbauenden Vertrauen im Kopf des Besuchers. Erst verstehen, dann glauben, dann handeln.

Das Zeitfenster: Du hast Sekunden, nicht Minuten

Bevor wir über einzelne Sektionen reden, musst du verstehen, wie wenig Zeit eine Startseite überhaupt bekommt. Eine vielzitierte Studie der Carleton University zeigt, dass Besucher den ersten visuellen Eindruck in rund 50 Millisekunden bilden. Eine Eye-Tracking-Untersuchung der Missouri University of Science and Technology fand, dass es weniger als 2/10 Sekunden dauert, bis eine erste Meinung steht, und weitere 2,6 Sekunden, bis sich der Blick so fokussiert, dass dieser Eindruck sich verfestigt.

Diese erste Meinung ist nicht nur ästhetisch. Eine Stanford-Studie aus dem Web Credibility Project ergab, dass 75 Prozent der Konsumenten die Glaubwürdigkeit eines Unternehmens am Website-Design festmachen. Eine veraltete Seite sagt also nicht nur „altmodisch“, sie sagt „unseriös“. Genau das ist der Hebel, mit dem du Kunden den Wert einer neuen Seite verkaufst, und genau diese veralteten Seiten findet findflix automatisiert in deiner Region und bewertet ihren Design-Score, bevor du überhaupt anrufst.

Die letzte Zahl ist die unsichtbare Voraussetzung jeder Sektion: Google-Daten zeigen, dass bei einem Anstieg der Ladezeit von 1 auf 3 Sekunden die Absprungwahrscheinlichkeit um 32 Prozent steigt, bei 5 Sekunden um 90 Prozent. Die schönste Hero-Sektion konvertiert nicht, wenn sie nach 4 Sekunden erscheint. Bevor du an Layout denkst, komprimiere die Bilder und rendere den oberen Bereich zuerst.

Die Aufmerksamkeit fällt nach unten ab, plane die Seite danach

Der wichtigste Grund für eine feste Sektions-Reihenfolge ist, dass Aufmerksamkeit keine konstante Ressource ist, sondern von oben nach unten abnimmt. Die Nielsen Norman Group hat das in einer Eye-Tracking-Analyse mit über 57.000 Fixationen quantifiziert: 57 Prozent der gesamten Betrachtungszeit fallen above the fold, also auf den ersten sichtbaren Screen. 74 Prozent liegen in den ersten zwei Screens, 81 Prozent in den ersten drei. Darunter wird es zu einer flach auslaufenden Long-Tail-Verteilung.

Übertragen auf konkrete Startseiten-Sektionen bedeutet das: Jede Sektion startet mit weniger Aufmerksamkeit als die vorherige. Das ist keine Frage von gut oder schlecht gebauten Inhalten, das ist Physik des Scrollens. NN/G fand außerdem einen scharfen Knick direkt an der Fold-Kante: die 100 Pixel unmittelbar über der Falz wurden 102 Prozent häufiger betrachtet als die 100 Pixel direkt darunter. Was oben steht, gewinnt.

Dazu kommt, wie gelesen wird, nämlich gar nicht richtig. NN/G dokumentiert seit 2006 das F-Muster: Nutzer scannen, sie lesen nicht. Auf einer durchschnittlichen Seite werden maximal 28 Prozent der Wörter gelesen, realistisch eher 20 Prozent. Das heißt für jede Sektion: kurze Überschriften, scanbare Häppchen, ein klarer Fokus pro Bildschirm. Ein Fließtext-Absatz über die Firmengeschichte im Hero ist verschenkt.

Der Bauplan: acht Sektionen, jede mit einer Aufgabe

Jetzt der eigentliche Bauplan. Lies ihn als Pfad von oben nach unten, bei dem jede Sektion die nächste vorbereitet. Die Reihenfolge ist kein Vorschlag, sondern folgt der Aufmerksamkeitskurve oben und der Vertrauensbildung im Kopf des Besuchers.

1. 1. Hero: was, für wen, welcher Nutzen

   Die H1 beantwortet in unter drei Sekunden die Frage „Bin ich hier richtig?“. Konkrete Sprache schlägt Floskeln: „Wir gestalten Lebensräume“ ist Geschmack, „Webseiten für Handwerksbetriebe, die Anfragen bringen“ ist verstanden. Dazu eine Subheadline, ein primärer CTA und ein erster Trust-Anker wie eine Sternebewertung oder eine Kundenzahl.

2. 2. Problem spiegeln

   Direkt unter dem Hero benennst du das Bedürfnis des Besuchers in seinen Worten. Wer sich wiedererkennt, scrollt weiter. Diese Sektion verkauft noch nichts, sie schafft Resonanz.

3. 3. Lösung und Leistungen, scanbar

   Maximal drei bis vier Leistungen nach der Rule of Three, jede mit einer kurzen Überschrift und einem Satz Nutzen. Keine Leistungsliste mit zwölf Punkten, die niemand liest.

4. 4. Beweis: Referenzen, Logos, Vorher-Nachher

   Jetzt, wo der Besucher versteht, was du tust, braucht er Gründe zu glauben. Logos bekannter Kunden und echte Projektbeispiele wirken als Trust-Anker.

5. 5. Testimonials mit Namen und Foto

   Zitate mit Gesicht sind glaubwürdiger als anonyme Sterne. 88 Prozent der Konsumenten vertrauen Online-Bewertungen so stark wie persönlichen Empfehlungen (BrightLocal-Daten).

6. 6. Ablauf in drei Schritten

   Ein klarer Prozess senkt das gefühlte Risiko: „Anfrage, Gespräch, Umsetzung“. Der Besucher weiß, worauf er sich einlässt, bevor er handelt.

7. 7. Wiederholter CTA und Kontaktformular

   Am Punkt der höchsten Kaufbereitschaft kommt die Handlung: derselbe CTA wie oben, plus ein kurzes Formular und eine sichtbare Telefonnummer.

8. 8. Footer: Recht und Vertrauen

   Impressum, Datenschutz und echte Adresse mit Telefonnummer (NAP). Pflicht und Trust-Signal in einem.

Warum genau diese Reihenfolge? Weil Vertrauen sequenziell entsteht. Niemand kauft, bevor er versteht, und niemand glaubt einem Beweis, dessen Behauptung er noch nicht kennt. Würdest du die Testimonials vor das Wertversprechen schieben, lobte ein Fremder eine Leistung, von der der Besucher noch nichts weiß.

Das Wertversprechen entscheidet, ob der Rest gelesen wird

Die teuerste Schwachstelle auf den meisten Startseiten lokaler Betriebe ist die Hero-Headline. Der Standard-Check dafür ist der 5-Sekunden-Test: Zeig die Seite fünf Sekunden lang einem Fremden, dann blende sie aus. Kann er sagen, was angeboten wird und für wen? Falls nicht, ist die Headline durchgefallen, unabhängig davon, wie schön sie aussieht.

Wie groß der Effekt von Klarheit ist, zeigt ein Value-Proposition-Test von MarketingSherpa: vor der Optimierung verstanden nur 6 Prozent der Befragten, was ein Unternehmen macht. Nach dem Tausch von Headline und Subheadline waren es 20 Prozent, also mehr als das Dreifache, ohne dass am Angebot selbst etwas geändert wurde.

Beweis, CTA und Formular: wo Anfragen gewonnen oder verloren werden

Sobald der Besucher verstanden hat, braucht er Gründe zu glauben. Sichtbarer Social Proof kann die Conversion deutlich heben: Branchen-Benchmarks reichen von rund 34 Prozent Plus durch gut platzierten Social Proof bis zu 29 Prozent durch nutzergenerierten Content. Im B2B stützen laut Erhebungen 79 Prozent der Käufer ihre Entscheidung auf Social Proof. Behandle diese Zahlen als typische Spannen, nicht als Garantie, die Richtung ist aber robust: Beweis gehört sichtbar in die oberen Screens und nochmal direkt vor den finalen CTA.

Beim Call-to-Action ist der häufigste Fehler die Auswahlqual. Ein vielzitierter Test zeigte, dass die Reduktion auf einen einzigen CTA die Conversion um 266 Prozent steigerte. Nicht fünf konkurrierende Buttons, sondern ein und dieselbe klare Handlung, oben und an jedem Sektionsende wiederholt. Bei der Farbe gibt es übrigens keinen magischen Ton: Laut CXL entscheidet nicht die Farbe, sondern der Kontrast zum Umfeld, weil ein kontrastreicher Button schneller gesehen wird.

Das Formular selbst ist der letzte Engpass. Eine HubSpot-Analyse von über 40.000 Landingpages zeigt: drei Felder erzielen mit rund 25 Prozent die höchste Conversion, schon der Sprung auf vier Felder bringt einen scharfen Einbruch. Mehrzeilige Textfelder und Dropdowns senken die Conversion stärker als zusätzliche einzeilige Felder. Frag also nur ab, was zur Bearbeitung wirklich nötig ist.

Der Footer als Recht- und Trust-Sektion (DACH)

Der Footer wird oft als Resterampe behandelt, ist aber für deutsche Seiten doppelt wichtig: rechtlich Pflicht und gleichzeitig Vertrauenssignal. Nach dem Digitale-Dienste-Gesetz (DDG, vormals TMG) brauchst du ein klar benanntes Impressum, dazu einen getrennten Link zur Datenschutzerklärung, beide von jeder Seite mit maximal zwei Klicks erreichbar. Eine echte Adresse und Telefonnummer (NAP) im Footer erfüllen die Pflicht und wirken zugleich als Trust-Anker.

Beim Kontaktformular machen viele Designer einen gut gemeinten Fehler, der gleich zwei Probleme verursacht. Eine erzwungene „Ich stimme der Datenschutzerklärung zu“-Checkbox ist bei einer Kontaktanfrage in der Regel nicht nötig, weil die Verarbeitung ohnehin auf der Anbahnung und Bearbeitung der Anfrage beruht (Art. 6 Abs. 1 lit. b bzw. f DSGVO). Sie kann sogar abmahnbar sein, weil sie eine zulässige Verarbeitung fälschlich als einwilligungspflichtig darstellt. Dieser rechtliche Rat deckt sich praktischerweise mit der Conversion-Empfehlung: weniger Felder, kein Pflichthäkchen.

Wenn du diese acht Sektionen in dieser Reihenfolge baust, hast du keine schöne Broschüre gebaut, sondern einen Entscheidungspfad: oben holst du die Aufmerksamkeit ab, wo sie am höchsten ist, und führst sie Schritt für Schritt zum einzigen Ziel der Seite, der Anfrage. Wer wissen will, wie weit die Startseiten lokaler Betriebe in der eigenen Region von diesem Bauplan entfernt sind, kann sie mit findflix automatisiert bewerten lassen und sieht sofort, welcher veralteten Seite genau dieser Pfad fehlt.