Above the Fold: Gestaltung des Erstkontakts mit Besuchern

Wenn jemand auf Ihrer Website landet, fällt er ein vorschnelles Urteil, lange bevor er einen Satz liest oder einen einzigen Pixel scrollt. Der Teil der Seite, der im Browserfenster erscheint, bevor überhaupt gescrollt wird, wird als Bereich „above the fold“ (über dem Falz) bezeichnet, und er trägt einen unverhältnismäßig großen Anteil der Arbeit, die Ihre Website leisten muss. Hier entscheiden Besucher, ob sie am richtigen Ort sind, ob Sie ihr Problem verstehen und ob es sich lohnt, ein paar Sekunden länger zu bleiben.

Der Begriff stammt aus Zeitungen, wo Redakteure die wichtigste Geschichte über den physischen Falz platzierten, damit sie am Kiosk sichtbar war. Im Web gibt es keinen einzigen Falz mehr, da Bildschirme in jeder Größe erhältlich sind. Aber die Idee bleibt bestehen: Der erste Bildschirm, den ein Besucher sieht, gibt den Ton für alles Folgende an. Dieser Leitfaden erklärt, was über dem Falz gehört, wie man ihn für Klarheit statt Unordnung gestaltet und welche häufigen Fehler Unternehmen stillschweigend ihre besten Besucher kosten.

Warum der erste Bildschirm so wichtig ist

Menschen surfen schnell und ungeduldig im Web. Sie scannen eher als zu lesen und verlassen Seiten, die ihre Erwartungen nicht innerhalb von Sekunden bestätigen. Der erste Bildschirm ist Ihre einzige verlässliche Chance, drei stille Fragen zu beantworten, die jeder Besucher mitbringt: Was ist das? Ist es für mich? Was soll ich als Nächstes tun? Wenn der Bereich über dem Falz alle drei klar beantwortet, haben Sie die Erlaubnis erhalten, das Gespräch fortzusetzen. Wenn er keine davon beantwortet, greift der Besucher zum Zurück-Button.

Das bedeutet nicht, dass Besucher niemals scrollen. Das tun sie, und guter Inhalt unter dem Falz hält sie in Bewegung. Aber die Aufmerksamkeit ist stark auf den Anfang konzentriert. Was auch immer in diesem ersten Ansichtsfenster sitzt, wird von fast jedem gesehen, während Inhalte weiter unten von immer weniger Menschen gesehen werden. Das macht den oberen Bereich der Seite zu Ihrer wertvollsten Immobilie, und er verdient Ihre sorgfältigste Überlegung.

Der Mythos, dass niemand scrollt

Jahrelang herrschte die populäre Annahme, dass man alles Wichtige über dem Falz unterbringen musste, weil Besucher überhaupt nicht scrollen würden. Diese Annahme ist veraltet. Moderne Besucher scrollen natürlich und erwarten dies. Das eigentliche Ziel ist nicht, jedes Detail auf dem ersten Bildschirm unterzubringen, sondern den ersten Bildschirm so überzeugend zu gestalten, dass sich das Scrollen lohnt. Betrachten Sie es als den Anfang einer Geschichte, nicht als die ganze Geschichte.

Was gehört über den Falz

Ein starker Bereich über dem Falz besteht aus wenigen Elementen, die zusammenwirken. Jedes hat eine Aufgabe, und das Überladen des Raumes mit Extras verwässert sie alle. Hier sind die Komponenten, die ihren Platz verdienen.

Eine klare, spezifische Überschrift

Ihre Überschrift ist der wichtigste Text auf der Seite. Sie sollte in einfacher Sprache sagen, was Sie tun und wem Sie helfen. Vermeiden Sie cleveres Wortspiel, das eine zweite Lektüre erfordert, und vermeiden Sie vage Slogans, die zu jedem Unternehmen passen könnten. Ein Besucher sollte Ihre Überschrift überfliegen und sofort verstehen können, ob er am richtigen Ort ist. Spezifisch schlägt clever fast immer.

Eine unterstützende Unterüberschrift

Unter der Überschrift fügt eine kurze unterstützende Zeile die Details hinzu, die die Überschrift ausgelassen hat. Wenn die Überschrift das Ergebnis angibt, kann die Unterüberschrift erklären, wie Sie es liefern oder für wen. Zusammen bilden sie ein kompaktes Wertversprechen, das ein beschäftigter Besucher in wenigen Sekunden aufnehmen kann.

Eine primäre Handlungsaufforderung

Jeder Bereich über dem Falz sollte den nächsten Schritt offensichtlich machen. Das bedeutet in der Regel eine klar gestaltete Schaltfläche mit handlungsorientiertem Text. Widerstehen Sie dem Drang, mehrere konkurrierende Schaltflächen gleicher Wichtigkeit anzubieten, denn ein Besucher, der mit zu vielen Optionen konfrontiert ist, trifft oft keine. Wählen Sie die einzige Aktion, die Sie am meisten von den Leuten wünschen, und geben Sie ihr visuelle Priorität. Eine sekundäre, weniger betonte Option ist in Ordnung, aber die Hierarchie sollte unmissverständlich sein.

Ein relevantes Bild

Ein Bild, eine Illustration oder ein kurzes Loop-Video kann Kontext schneller vermitteln als Worte. Das Schlüsselwort ist relevant: Das Bild sollte Ihre Botschaft verstärken, nicht nur den Raum schmücken. Ein generisches Stockfoto von Händeschütteln fügt nichts hinzu, während ein klares Bild Ihres Produkts in Gebrauch oder des Ergebnisses, das Sie liefern, dem Besucher hilft, sich selbst als Nutznießer vorzustellen.

Ein kleines Vertrauenssignal

Ein einzelnes, ehrliches Vertrauenssignal kann einen Erstbesucher beruhigen. Das kann eine kurze Zeile sein, die angibt, wie viele Kunden Sie betreuen, ein wiedererkennbares Logo eines Kunden oder Partners oder eine kurze Bewertung. Eines ist genug. Eine Wand von Abzeichen über dem Falz wirkt eher ängstlich als selbstbewusst, wählen Sie also das stärkste Signal und lassen Sie es alleine stehen.

Gestaltung für Klarheit, nicht für Unordnung

Der häufigste Fehler über dem Falz ist nicht zu wenig, sondern zu viel. Wenn jedes Element um Aufmerksamkeit konkurriert, gewinnt nichts. Die Disziplin des guten Designs über dem Falz ist meist die Disziplin, Dinge wegzulassen. Ein paar Prinzipien helfen.

Eine klare visuelle Hierarchie etablieren

Hierarchie ist die Reihenfolge, in der Ihr Auge Dinge bemerkt. Ihre Überschrift sollte das prominenteste Element sein, Ihr Call-to-Action das auffälligste interaktive Element und alles andere unterstützend. Nutzen Sie Größe, Gewicht, Farbe und Abstände, um die Aufmerksamkeit bewusst zu lenken. Wenn Sie unsicher sind, ob Ihre Hierarchie funktioniert, kneifen Sie die Augen auf dem Bildschirm zusammen: Die Elemente, die sichtbar bleiben, sind diejenigen, die die Botschaft tragen.

Elementen Raum zum Atmen geben

Großzügige Abstände heben wichtige Dinge hervor und signalisieren Qualität. Enge Layouts wirken stressig und billig. Weißraum ist kein verschwendeter Raum, er ist das Werkzeug, das Ihrer Überschrift und Schaltfläche die nötige Prominenz verleiht. Im Zweifelsfall entfernen Sie ein Element, anstatt die Abstände zu verkleinern.

Verschiedene Bildschirmgrößen respektieren

Da es keinen festen Falz gibt, müssen Sie für die verschiedenen Geräte gestalten, die Ihre Besucher tatsächlich verwenden. Ein Layout, das auf einem großen Desktop-Monitor ausgewogen aussieht, kann Ihren Call-to-Action auf einem Telefon weit unter den ersten Bildschirm verschieben. Auf kleineren Bildschirmen sollten Überschrift und Hauptschaltfläche immer noch ohne Scrollen erscheinen, auch wenn das unterstützende Bild verschoben oder verkleinert wird. Zeigen Sie die Oberseite Ihrer Seite immer auf einem Telefon an, nicht nur auf einem Laptop.

Die Ermutigung zum Scrollen

Ein subtiles, aber wirkungsvolles Detail ist der Hinweis darauf, dass sich mehr darunter befindet. Wenn Ihr erster Bildschirm wie ein vollständiger, in sich geschlossener Block mit einer harten Kante am unteren Rand aussieht, gehen einige Besucher davon aus, dass dies alles ist. Sie können zum Scrollen einladen, indem Sie den nächsten Abschnitt am unteren Rand des Ansichtsfensters hervorblitzen lassen, sodass ein kleiner Teil des folgenden Inhalts oder ein Teilausschnitt eines Bildes andeutet, dass die Geschichte weitergeht. Diese kleine Überschneidung schiebt die Menschen ohne jede Anweisung nach unten.

Vermeiden Sie auch das gegenteilige Problem. Ein erster Bildschirm, der so hoch ist, dass er das gesamte Ansichtsfenster mit einem einzigen Bild und sonst nichts füllt, kann Besucher unsicher machen, was zu tun ist. Das Ziel ist ein vollständiger Gedanke über dem Falz, gepaart mit einem sanften Versprechen auf mehr.

Häufige Fehler vermeiden

Auch gut gemeinte Entwürfe tappen in einige wiederkehrende Fallen. Wenn Sie darauf achten, ersparen Sie sich die teuersten Fehler.

Beginn mit einer vagen Überschrift

Wenn Ihre Überschrift zu jedem Unternehmen in jeder Branche passen könnte, erfüllt sie ihren Zweck nicht. Phrasen, die beeindruckend klingen, aber nichts Spezifisches aussagen, verschwenden Ihren wertvollsten Moment. Ersetzen Sie sie durch eine Formulierung, die das Problem des Besuchers oder das gewünschte Ergebnis benennt.

Verstecken des Call-to-Actions

Manchmal ist die wichtigste Schaltfläche so unauffällig gestaltet, dass sie im Hintergrund verschwindet, oder sie sitzt so tief, dass sie auf gängigen Geräten nie auf dem ersten Bildschirm erscheint. Wenn ein Besucher den nächsten Schritt nicht schnell findet, werden viele nicht danach suchen. Machen Sie die primäre Aktion sichtbar und einladend.

Langsam ladende Hero-Bilder

Ein großes, schönes Bild oberhalb des Falzes ist wertlos, wenn es mehrere Sekunden zum Laden benötigt. Während es lädt, starren Besucher auf einen leeren oder defekten Bereich und bilden einen schlechten Eindruck. Optimieren Sie Bilder sorgfältig, damit der obere Bereich Ihrer Seite schnell gerendert wird, und überlegen Sie, wie das Layout aussieht, bevor das Bild vollständig geladen ist.

Versuchen, alles zu sagen

Der Instinkt, Ihren vollen Wert auf dem ersten Bildschirm zu beweisen, führt zu überladenen, überwältigenden Designs. Vertrauen Sie darauf, dass der Rest der Seite seine Aufgabe erfüllt. Der Falz ist die Überschrift Ihrer Geschichte, nicht das ganze Kapitel.

Eine praktische Checkliste

Bevor Sie einen "Above the Fold"-Bereich als fertig bezeichnen, führen Sie einen kurzen Test durch. Kann ein Fremder innerhalb weniger Sekunden erkennen, was Sie tun? Gibt es einen offensichtlichen nächsten Schritt? Funktioniert das Layout auf einem Telefon? Ist der wichtigste Text der prominenteste? Lädt etwas so langsam, dass es einen Besucher frustriert? Wenn Sie diese Fragen ehrlich beantworten und Mängel beheben können, wird Ihr erster Bildschirm bereits viel mehr leisten als die meisten.

Der Bereich über dem Falz ist klein, aber sein Einfluss ist groß. Ihn als die wichtigste Designentscheidung Ihrer Website zu behandeln, anstatt ihn als nachträglichen Gedanken zu sehen, zahlt sich aus in Besuchern, die bleiben, verstehen und handeln. Für eine umfassendere Ansicht, wie dies in ein komplettes Projekt passt, sehen Sie sich unseren Leitfaden zum individuellen Webdesign an und erfahren Sie, wie der erste Bildschirm mit den Faktoren, die eine Website konvertieren lassen, und dem eng verwandten Handwerk des Designs eines großartigen Hero-Bereichs zusammenhängt.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group, "Scrolling and Attention" — nngroup.com
2. Nielsen Norman Group, "First Impressions Form Quickly on the Web" — nngroup.com

Bereit, Ihren ersten Bildschirm effektiver zu gestalten? Erfahren Sie mehr über unseren Ansatz zum Webdesign, oder kontaktieren Sie uns, um Ihr Projekt zu besprechen.