Der erste sichtbare Bereich deiner Website: Ist in fünf Sekunden klar, was du anbietest und für wen?

Der erste sichtbare Bereich ist keine Geschmacksfrage, sondern ein Verständnistest. Jemand gelangt über eine Anzeige oder eine Suchmaschine auf deine Website, betrachtet kurz den Bereich oberhalb der Scrollgrenze und entscheidet, ob er weiterlesen soll. Wenn dann nicht klar ist, was du verkaufst und ob das Angebot für ihn bestimmt ist, verliert der Rest der Website seine Bedeutung.

Ratgeber zu diesem Thema enden meist bei Richtlinien: kurze Headline, ein Button, visuelle Hierarchie, Kontrast. Eine Regel sagt jedoch nur, wie du etwas gestalten sollst, nicht ob deine Version funktioniert. Dieser Text behandelt ausschließlich den zweiten Teil und ausschließlich den Bereich oberhalb der Scrollgrenze.

Wir nennen bewusst keine Zahlen wie „du hast drei Sekunden“ und keine angeblichen Aufmerksamkeitsschwellen. Solche Werte wandern ohne Quelle durch Ratgeber und lassen sich nicht von einer Branche auf eine andere übertragen — jemand, der seit einer Woche nach einer Dienstleistung sucht, liest eine Website anders als jemand, der direkt aus einer Anzeige kommt.

Drei Fragen, die der erste sichtbare Bereich beantworten muss

Die gesamte Aufgabe des ersten sichtbaren Bereichs lässt sich auf drei Antworten reduzieren. Es geht weder um Eindruck noch um Ästhetik, sondern um drei Informationen, die ein Außenstehender ohne Mühe daraus entnehmen muss.

1. Was ist das?.Eine konkrete Antwort auf die Frage, was du anbietest: „Buchhaltung für Solo-Selbstständige“, „Montage von Wärmepumpen“. Kein Wirkungsversprechen, sondern die Bezeichnung der Sache — ein Versprechen ohne Namen lässt Menschen rätseln.
2. Für wen ist es?.Wer angesprochen wird und wer nicht: Unternehmensgröße, Branche, Region oder Phase des Vorhabens. Für die richtige Person ist das das Signal „Hier geht es um mich“ — und erst dann liest sie weiter.
3. Wie geht es weiter?.Eine klar benannte Aktion, die deutlich wichtiger ist als alle anderen. Nicht drei gleichwertige Buttons und kein „Mehr erfahren“, sondern eine Handlung, die schon vor dem Klick verständlich ist.

Das klingt banal und wird gerade deshalb selten geprüft. In der Praxis beantwortet die Mehrzahl der ersten sichtbaren Bereiche nur eine von drei Fragen — nicht aus Nachlässigkeit, sondern weil das Team den Kontext kennt und die Lücke nicht sieht.

• Eine Headline über Werte statt über das Produkt„Wir schaffen Lösungen, die deine Arbeitsweise verändern“ klingt bedeutend und verrät nicht, was du bekommst. Die Antwort musst du erst im weiteren Verlauf der Seite suchen.
• Ein Bild statt eines SatzesEin großes Teamfoto nimmt den größten Teil des Bildschirms ein, der einzige Text ist der Firmenname. Das Bild beantwortet keine der drei Fragen, weil es zu jeder Branche passen würde.
• Eine Zielgruppe ohne jede Kontur„Für Unternehmen jeder Größe“ schließt niemanden aus und überzeugt niemanden. Der passende Empfänger erkennt sich darin nicht wieder.
• Mehrere gleichwertige AktionenKontakt, Preise, Demo und Blog in einer Reihe. Wenn alles wichtig ist, entscheidet sich der Besucher für nichts.

Ein Fünf-Sekunden-Test zum Selbermachen

Das ist die günstigste Prüfmethode, die ich kenne, und eine der wenigen, für die du weder Tools noch Budget brauchst. Du zeigst jemandem kurz den ersten sichtbaren Bereich, deckst ihn wieder ab und fragst, was in Erinnerung geblieben ist. Die Schwierigkeit liegt in der Disziplin: keine Hinweise geben, nichts erklären, nichts verteidigen.

1. Erstelle Screenshots, öffne nicht die Website.Zwei Screenshots — einen vom Computer, einen vom Smartphone — mit exakt dem Bereich, der ohne Scrollen sichtbar ist. Eine geöffnete Website verleitet zum Scrollen und verfälscht den Test.
2. Finde fünf Personen außerhalb des Unternehmens.Nimm beliebige Personen, die dein Angebot nicht kennen. Fünf reichen aus, damit sich wiederkehrende Antworten abzeichnen.
3. Gib einen Satz Kontext.„Ich zeige dir gleich kurz einen Ausschnitt aus einer Website.“ Nicht mehr — verrate weder, wessen Website es ist, noch aus welcher Branche das Unternehmen kommt. Jedes weitere Wort ist ein Hinweis.
4. Zeige den Ausschnitt fünf Sekunden und decke ihn wieder ab.Zähle die Zeit, dann schließe das Bild. Erlaube keinen zweiten Blick, auch wenn jemand darum bittet — schon die Bitte um eine Wiederholung ist ein Ergebnis.
5. Stelle die Fragen in einer festen Reihenfolge.Immer dieselben Fragen in derselben Reihenfolge, wortgetreu protokolliert. Formuliere die Antworten in deinen Notizen nicht um.

Die Fragen nach dem Abdecken sind wichtiger als das kurze Zeigen selbst. Die ersten drei prüfen die drei Antworten, die beiden weiteren erfassen, was in den Daten nicht sichtbar ist.

• Was bietet dieses Unternehmen an? Beschreibe es mit eigenen Worten, ohne Begriffe von der Website zu verwenden.
• Für wen ist das Angebot bestimmt, wer ist hier der Kunde?
• Was kannst du auf dieser Website tun, wenn du weitermachen möchtest?
• Was ist dir zuerst im Gedächtnis geblieben — welches Element oder welches Wort?
• War etwas unklar oder merkwürdig?

Das Ergebnis ist leicht zu lesen. Wenn drei von fünf Personen nicht sagen können, was du anbietest, behebt keine neue Buttonfarbe das Problem. Wenn alle die Branche nennen, aber niemand die Zielgruppe erkennt, liegt das Problem bei der Ansprache. Notiere Zitate statt Bewertungen — „irgendetwas mit Rechnungen für kleine Unternehmen“ ist eine Information, „war wohl ganz okay“ nicht.

Der Fünf-Sekunden-Test ist eine Forschungsmethode und keine Meetlead-Funktion — ein Screenshot, eine Stoppuhr und ein Notizblock genügen. Wenn du ihn um live ausgeführte Aufgaben erweitern möchtest, erklären wir die Durchführung solcher Sitzungen im Artikel über Usability-Tests für Websites.

Wie viel ohne Scrollen wirklich sichtbar ist

Das größte Missverständnis lautet: „Hier endet der erste sichtbare Bereich.“ Er endet nicht an einer einzigen Stelle. Die Scrollgrenze ist kein fester Wert, sondern eine Verteilung — anders auf einem hochkant gehaltenen Smartphone, anders auf einem Laptop und wieder anders auf einem großen Monitor. Derselbe Abschnitt passt bei einer Person vollständig auf den Bildschirm und endet bei einer anderen mitten im Satz. Wie weit Besucher über den ersten sichtbaren Bereich hinaus scrollen und ob sie Preis und Button erreichen, zeigt dir unser Leitfaden zum Auswerten der Scrolltiefe.

Hinzu kommt alles, was Platz verbraucht, bevor der Inhalt überhaupt zu sehen ist. Ein Entwurf im Grafikprogramm hat keine Adressleiste, keinen Einwilligungsbanner und keinen Aktionshinweis — auf einer echten Website können alle drei gleichzeitig erscheinen.

• Browser- und SystemleistenAuf dem Smartphone belegen sie einen Streifen oben und oft einen zweiten unten — mehrere Prozent der Bildschirmhöhe, die im Entwurf nie berücksichtigt werden.
• EinwilligungsbannerEr ist mitunter das größte Element im ersten sichtbaren Bereich und kann auf dem Smartphone Headline und Button gleichzeitig verdecken. Bis zur Entscheidung sieht der Besucher das Einwilligungsfenster, nicht dein Angebot.
• Fixierter Header und AktionsleisteEin festes Menü sowie ein Hinweis auf Versand oder Rabatt nehmen weitere Streifen ein. Meist werden sie einmal eingerichtet und danach nie als Teil des ersten sichtbaren Bereichs mitgerechnet.
• Schwebende ElementeChat-Launcher, Rückruf-Button oder „Nach oben“-Symbol. Auf dem Smartphone können sie den Hauptbutton verdecken, wenn beide in derselben Ecke liegen.

Daten beantworten diese Frage direkt — unter einer Bedingung: Dafür müssen sie nach Gerät getrennt sein. Eine Scroll-Heatmap zeigt, wie viel Prozent der Besucher welche Höhe erreichen; eine Klick-Heatmap zeigt, ob der Hauptbutton überhaupt angeklickt wird. Wie du die Karten selbst auswertest, erklären wir im Leitfaden darüber, wie du Heatmaps richtig liest. Die Unterschiede auf kleinen Bildschirmen behandeln wir im Artikel über Conversion auf mobilen Geräten.

Ein eigenes Thema ist das Menü: Auf dem Smartphone verbirgt es sich hinter einem Symbol und kann deshalb keine der drei Antworten tragen. Die Navigation selbst analysieren wir im Artikel über Website-Navigation. Hier genügt eine Regel: Musst du erst ein Menü öffnen, um zu verstehen, was das Unternehmen anbietet, ist der erste sichtbare Bereich durchgefallen.

Slogans ohne Aussage

Der Test für eine leere Phrase ist einfach: Wenn du deine Headline unverändert auf die Website eines Unternehmens aus einer anderen Branche setzen könntest, ist sie keine Headline, sondern ein Platzhalter. Eine zweite Variante dieses Tests: Könnte ein Wettbewerber das Gegenteil schreiben? Niemand schreibt „unkomplette Lösungen“ — also vermittelt „Komplettlösungen“ keine Information.

↔ Scrolle die Tabelle seitlich, um alle Spalten zu sehen.

Die richtigen Worte musst du meist nicht erfinden — sie kursieren bereits rund um dein Unternehmen: Suchanfragen, Chatgespräche und die ersten Sätze aus Tickets. Wenn Kunden selbst schreiben „Macht ihr auch Unfallinspektionen?“, hast du bereits einen fertigen Teil deiner Headline in ihrer Sprache.

Wenn dein Angebot für einen Satz zu komplex ist

Die häufigste Verteidigung einer unkonkreten Headline lautet: „Wir machen zu viele Dinge, um sie in einen Satz zu bekommen.“ Manchmal stimmt das — ein Unternehmen betreut drei völlig verschiedene Kundengruppen, ein Shop hat vier Kategorien ohne gemeinsamen Nenner. Die Lösung ist dann kein längerer Satz, sondern ein anderer Aufbau des ersten sichtbaren Bereichs.

1. Benenne die Kategorie, nicht alle Leistungen.Ein Satz über das Tätigkeitsfeld und darunter eine klare Aufteilung. „Technisches Gebäudemanagement“ sagt mehr als eine in die Headline gepresste Liste aus sechs Fachgebieten.
2. Verzweige direkt im oberen Bereich.Zwei oder drei sichtbare Einstiege für unterschiedliche Gruppen: „für Unternehmen“, „für Eigentümergemeinschaften“, „für Institutionen“. Das ist kein Menü, sondern die Frage, wer der Besucher ist.
3. Erstelle separate Landingpages.Wenn die Gruppen wirklich weit auseinanderliegen, leite Anzeigen-Traffic auf getrennte Seiten, deren erster sichtbarer Bereich jeweils nur eine Gruppe anspricht. Die Startseite bleibt ein Verteiler statt eines Verkäufers.
4. Prüfe jede Verzweigung einzeln.Führe den Fünf-Sekunden-Test für jede Variante separat durch. Nach jedem Pfad müssen die Testpersonen dieselben drei Fragen beantworten können.

Bevor du deine Startseite in drei Säulen gliederst, prüfe eine Annahme. Wenn die Customer Journey zeigt, dass die meisten Besucher direkt auf Leistungsseiten oder Blogartikel gelangen, ist die Startseite nicht ihr erster sichtbarer Bereich — und du musst den Test auf der jeweiligen Unterseite durchführen. Willst du mehrere Angebote in einem Karussell unterbringen, prüfe zuerst mit deinen Daten, ob überhaupt jemand die weiteren Folien sieht, wie im Leitfaden zum Slider auf der Startseite beschrieben.

Nach der Änderung erneut prüfen

Beim ersten sichtbaren Bereich ist die Versuchung groß, alles auf einmal umzubauen: neues Bild, neue Headline, neuer Button, neues Layout. Danach lässt sich nicht mehr feststellen, was funktioniert hat. Besser ist es, jeweils nur eine Sache zu ändern und vorher festzuhalten, was du erwartest.

1. Halte das Testergebnis vor der Änderung fest.Fünf Antwortsätze, wortgetreu. Ohne diesen Bezugspunkt bleibt nach der Änderung nur der Eindruck, es sei jetzt besser.
2. Ändere genau eine Sache.Die Headline, den Button oder die Grafik. Kein Gesamtpaket. Am meisten bewirkt meist eine konkrete Headline, die Dienstleistung und Zielgruppe benennt.
3. Lege fest, was sich in den Daten ändern soll.Notiere vor der Umsetzung: ein höherer Anteil von Besuchern, die unter den ersten sichtbaren Bereich scrollen, mehr Klicks auf den Hauptbutton oder weniger Fragen dazu, was das Unternehmen anbietet.
4. Wiederhole den Test mit fünf neuen Personen.Mit neuen Personen — wer die vorherige Version gesehen hat, kann die neue nicht unvoreingenommen beurteilen. Diese Prüfung funktioniert sofort, ohne auf Traffic zu warten.
5. Warte einen vollständigen Zyklus ab und vergleiche die Daten.Mindestens zwei Wochen, bei wenig Traffic länger. Vergleiche mit dem Zeitraum vor der Änderung und werte Smartphone und Computer getrennt aus.
6. Sieh dir einige Aufzeichnungen nach der Änderung an.Die Zahlen zeigen, ob es besser geworden ist. Die Aufzeichnungen zeigen, ob es aus dem von dir erwarteten Grund besser geworden ist.

• Der erste sichtbare Bereich ist eine Hypothese darüber, was ein Mensch in wenigen Sekunden versteht — und Hypothesen werden geprüft.
• Drei Fragen: Was ist das, für wen ist es und wie geht es weiter? Fehlt eine Antwort, bekommt der Rest der Website womöglich keine Chance.
• Der Bereich oberhalb der Scrollgrenze ist eine Verteilung, kein fester Wert — auf dem Smartphone nehmen Leisten und Einwilligungsbanner zusätzlich Platz ein.
• Eine Phrase, die zu jeder Branche passt, ist keine Headline, sondern ein Platzhalter.
• Eine einzelne Änderung mit einer dokumentierten Erwartung schafft Wissen; ein kompletter Umbau schafft nur ein neues Aussehen.