Warum Above the Fold ein Verhalten ist und keine Pixelhöhe

Was bedeutet Above the Fold?

Inhalte Above the Fold sind alles, was ein Besucher ohne Scrollen sieht, was es zu einer Eigenschaft seines Bildschirms macht statt zu einer Zahl, die Sie in eine Designdatei schreiben können. Der Begriff stammt von Broadsheet-Zeitungen, die für die Auslage am Kiosk in der Mitte gefaltet wurden, sodass einem Käufer nur die obere Hälfte der Titelseite zugewandt war. Die Redaktion setzte dort die Geschichte hin, die die Ausgabe verkaufen musste.

Das Web hat die Idee geerbt, weil Bildschirme immer noch irgendwo enden. Amy Schade von der Nielsen Norman Group hat den Mechanismus 2015 klar benannt: "What is visible on the page without requiring any action is what encourages us to scroll." Der Falz hält Menschen nicht auf. Er entscheidet, ob sie sich die Mühe machen.

Warum ist eine feste Pixelhöhe der falsche Weg, den Falz zu definieren?

Weil es keinen einzelnen Falz zu definieren gibt. Schades Argument gegen eine feste Zahl ist direkt: "A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for." Jeder Wert, den Sie wählen, ist für eine Minderheit Ihrer Besucher richtig und für alle anderen falsch.

Die Höhe, die Ihrem Inhalt zur Verfügung steht, verschiebt sich aus Gründen, die nichts mit Ihrem Layout zu tun haben:

• Browser-Chrome. Symbolleisten, Tableisten und Lesezeichenleisten fressen auf jedem Browser und Betriebssystem unterschiedlich viel.
• Die mobile Adressleiste, die beim Scrollen einklappt, sodass der Viewport nach dem ersten Wisch physisch höher ist als davor.
• Anzeigeskalierung des Betriebssystems und die Standardschriftgröße des Besuchers.
• Zoomstufe, die häufiger von null verschieden ist, als Designer annehmen.
• Geräteausrichtung, die die Zahl mit einer Drehung halbiert oder verdoppelt.

Behandeln Sie den Falz als Verteilung statt als Linie. Die nützliche Frage ist nicht "wo ist der Falz", sondern "was sieht das 25. Perzentil meiner Besucher, bevor es scrollt", und das lässt sich aus Ihren eigenen Daten beantworten statt aus der Zahl in einem Blogbeitrag.

Was sagt die Forschung über Scrollen und Above the Fold?

Die Nielsen Norman Group führte Eyetracking über Nachrichten-, E-Commerce-, Blog-, FAQ- und enzyklopädische Seiten durch, mit 120 Teilnehmenden an Bildschirmen mit 1920 mal 1080 und über 130.000 erfassten Blickfixierungen. Therese Fessenden veröffentlichte die Ergebnisse am 15. April 2018. Die Schlagzeile lautet, dass Menschen scrollen und dass sich die Aufmerksamkeit trotzdem stark oben staut.

Bereich der Seite	Anteil der Betrachtungszeit
Above the Fold	57%
Erste zwei Bildschirmhöhen (bis 2160px)	74%
Erste drei Bildschirmhöhen	81%
Oberste 20% der Seite	mehr als 42%
Oberste 40% der Seite	mehr als 65%

Die Veränderung über die Zeit ist der Teil, über den zu streiten sich lohnt. In der NN/g-Studie von 2010, durchgeführt auf Monitoren mit 1024 mal 768, wurden 80% der Betrachtungszeit Above the Fold verbracht. Bis 2018 waren es 57%. Scrollen wurde normal, der Falz wurde also weniger absolut und stärker relativ, aber er hörte nicht auf zu zählen: Mehr als 65% der Betrachtungszeit Above the Fold konzentrierten sich auf die obere Hälfte des Viewports, was heißt, dass die Aufmerksamkeit schon innerhalb der ersten Bildschirmhöhe ausdünnt, nicht erst danach.

Schades Messung der Grenze selbst aus dem Jahr 2015 ist die schärfste Fassung des Effekts. Die 100 Pixel direkt oberhalb des Falzes wurden 102% häufiger betrachtet als die 100 Pixel direkt darunter, und über ihre Daten hinweg lag der durchschnittliche Unterschied im Umgang mit Informationen ober- und unterhalb des Falzes bei 84%. Eine einzelne Pixelzeile Bewegung ändert sehr wenig; das Überschreiten der Grenze verdoppelt grob die Chance, dass Inhalt gesehen wird.

Above the Fold: damals und heute

Studie 201080 %

Studie 201857 %

Wie weit nach unten kommen Leser tatsächlich?

Farhad Manjoo veröffentlichte Chartbeats Scroll-Daten für Slate am 6. Juni 2013, und die Zahlen sind besser gealtert als die meisten Web-Statistiken, weil sie ein Verhalten beschreiben und keine Technologie.

Verhalten	Slate	Chartbeat-Netzwerk
Ankommen und ohne Engagement wieder gehen	38%	nicht genannt
Überhaupt nie scrollen	etwa 5%	etwa 10%
Median-Leser erreicht	etwa 50% des Artikels	etwa 60%
Kommen über das 1600. Pixel hinaus	25%	nicht genannt

Manjoos Zuspitzung war der einprägsame Teil: Von 161 Menschen, die auf der Seite landeten, waren etwa 61 schon wieder weg, und von den 100, die blieben, würden fünf nie scrollen. Der Befund, den er vergraben hat, ist der, der das Verhalten ändern sollte. Es gibt nur einen sehr schwachen Zusammenhang zwischen Scrolltiefe und Teilen, die am meisten geteilten Artikel sind also nicht die am tiefsten gelesenen. Wer Shares als Beleg dafür nimmt, dass Inhalt konsumiert wurde, misst etwas ganz anderes.

Aus dem Nebeneinander der NN/g- und Chartbeat-Zahlen folgen zwei Dinge. Die meisten Menschen scrollen, alles Wichtige in den ersten 600 Pixeln zu verstecken ist also unnötig. Und die Aufmerksamkeit fällt steil ab, die Reihenfolge Ihrer Inhalte zählt also weit mehr als die Frage, ob ein bestimmtes Element eine gedachte Linie überschreitet. Wenn Sie wissen wollen, wo Ihre eigenen Leser aufhören statt wo Slates Leser 2013 aufhörten, ist dafür Scrolltiefen-Tracking da.

Was ist ein falscher Boden, und warum kostet er mehr als eine lange Seite?

Ein falscher Boden ist der Fehlerfall, den der Falz tatsächlich verursacht. Kim Flaherty nannte ihn am 17. Januar 2016 bei NN/g die Illusion der Vollständigkeit: "The illusion of completeness happens when the visible content on the screen appears to be complete, when in fact more information exists outside of the viewable area."

In einem von ihr beschriebenen Usability-Test scrollten sechs von acht Teilnehmenden eine Seite überhaupt nicht nach unten, und 75% der Teilnehmenden wurden frustriert, nachdem sie persönliche Daten eingegeben hatten und dann feststellten, dass der Dienst in ihrer Region nicht verfügbar war, weil sie nie bemerkt hatten, dass unterhalb mehr Inhalt existierte. Die Seite war nicht zu lang. Sie sah an der Grenze fertig aus.

Die Abhilfe ist visuell statt strukturell. Lassen Sie etwas die Linie überschreiten. Eine halb abgeschnittene Überschrift, ein Bild, das über den Rand hinausläuft, eine Kartenreihe, in der die vierte angeschnitten ist: All das sagt dem Auge, dass die Seite nicht zu Ende ist. Hero-Bereiche über den vollen Viewport mit einer sauberen waagerechten Kante unten sind der zuverlässigste Weg, einen falschen Boden zu fabrizieren.

Wie sollte die Vielfalt der Viewports ändern, was Sie nach oben stellen?

Hören Sie auf, für den Falz zu gestalten, und gestalten Sie für die erste Bildschirmhöhe Ihres tatsächlichen Traffics. Drei praktische Schritte:

• Messen Sie Ihre eigene Viewport-Verteilung. window.innerHeight beim Seitenaufbau, gebucketet und berichtet, zeigt Ihnen die reale Form. Kombinieren Sie es mit visualViewport, wenn Sie Zoom und Bildschirmtastaturen berücksichtigen wollen. Eine nach Geräteklasse segmentierte Heatmap zeigt dasselbe räumlich, worüber sich meist leichter streiten lässt; unser Leitfaden zum Lesen einer Website-Heatmap behandelt, wie Sie sie nicht überinterpretieren.
• Nutzen Sie Viewport-Einheiten, die von der Adressleiste wissen. CSS bietet svh, lvh und dvh neben vh genau deshalb, weil der mobile Viewport während eines Scrollvorgangs die Größe ändert. Ein Hero mit 100vh läuft im kleinen Viewport über und lässt im großen eine Lücke.
• Stellen Sie das Versprechen Above the Fold, nicht die ganze Seite. Die erste Bildschirmhöhe hat eine Aufgabe: bestätigen lassen, dass jemand richtig ist, und zeigen, dass es weitergeht. Alles andere darf darunter liegen, denn die Forschung sagt, dass die Leute dort ankommen.

Geschwindigkeit greift in all das ein. Inhalt, der technisch Above the Fold liegt, aber noch nicht gezeichnet wurde, liegt über gar nichts, und deshalb wird Largest Contentful Paint am größten Element innerhalb des Viewports bewertet statt an der Seite als Ganzes. Ein Hero-Bild, das nach vier Sekunden eintrifft, liegt in jeder für den Besucher relevanten Hinsicht unterhalb des Falzes. Wenn Sie an einer konkreten Seite arbeiten, bringt unsere Anleitung dazu, wie Sie eine Landingpage analysieren, diese Prüfungen in eine Reihenfolge.

Häufig gestellte Fragen

Zählt der Falz noch, wo doch alle scrollen?

Ja, aber als Gewichtung statt als Mauer. NN/g maß 2018 57% der Betrachtungszeit Above the Fold und einen Unterschied von 102% zwischen den 100 Pixeln direkt oberhalb der Grenze und den 100 direkt darunter. Menschen scrollen daran vorbei; sie schenken beiden Seiten davon nicht dieselbe Aufmerksamkeit.

Welche Pixelhöhe hat der Falz?

Es gibt keine. Ein responsives Design hat so viele Falze wie Zielbildschirmgrößen, und Browser-Chrome, Zoom, Anzeigeskalierung und die einklappende mobile Adressleiste verschieben die Grenze auf jedem Gerät erneut. Messen Sie Ihre eigenen Besucher, statt eine Zahl zu übernehmen.

Sollte der Call to Action immer Above the Fold stehen?

Nur wenn der Besucher bis dahin genug Informationen zum Handeln hat. Auf einer Seite, die etwas Vertrautes verkauft, funktioniert ein CTA in der ersten Bildschirmhöhe. Auf einer Seite, die erst etwas erklären muss, wird ein früher CTA ignoriert, und die nützliche Platzierung liegt hinter dem Argument. Ihn zu wiederholen ist meist besser, als ihn zu verschieben.

Wie viel Inhalt gehört in die erste Bildschirmhöhe?

Genug, um "bin ich hier richtig" zu beantworten, plus ein sichtbares Signal, dass die Seite weitergeht. NN/g fand, dass mehr als 65% der Aufmerksamkeit Above the Fold in der oberen Hälfte des Viewports landen, die obere Hälfte der ersten Bildschirmhöhe leistet also den Großteil der Arbeit, egal wie viel Sie hineinpacken.

Schneiden lange Seiten schlechter ab als kurze?

Nicht allein wegen der Länge. Chartbeats Daten zeigten, dass der Median-Leser etwa auf halber Strecke eines Artikels aufhört, was Füllmaterial bestraft und nicht Länge. Eine lange Seite mit dem Wert vorn schlägt eine kurze Seite, die am Falz fertig aussieht.

Woher kommt der Begriff Above the Fold?

Von Zeitungen. Broadsheets wurden für die Auslage in der Mitte gefaltet, sodass jemandem, der am Kiosk vorbeiging, nur die obere Hälfte der Titelseite sichtbar war, und die stärkste Schlagzeile kam dorthin. Das Web hat das Wort übernommen, als sich zeigte, dass Bildschirme dieselbe Eigenschaft haben.

Wie viel weniger Aufmerksamkeit bekommt Content unterhalb des Falzes?

Nielsen Norman Group fand heraus, dass die 100 Pixel direkt über dem Falz 102 % mehr Blicke bekamen als die 100 Pixel direkt darunter. Über Schades gesamten Datensatz betrug der durchschnittliche Unterschied in der Aufmerksamkeit oberhalb versus unterhalb des Falzes 84 %. Das Überschreiten der Grenze verdoppelt ungefähr die Chance, dass ein Besucher etwas bemerkt.

Warum verschiebt sich der Falz auf dem Handy, sobald man zu scrollen beginnt?

Die Adressleiste im mobilen Browser klappt beim Scrollen ein, sodass der Viewport nach dem ersten Wischen körperlich größer ist als beim Laden der Seite. Dieselbe Seite hat beim Öffnen einen anderen Falz als eine Sekunde später, auf demselben Telefon. Das ist ein weiterer Grund, warum eine einzelne Pixelzahl den Falz nicht beschreiben kann.

Was ist die Illusion der Vollständigkeit?

Kim Flahertys Begriff für eine Seite, die am Bildschirmrand fertig aussieht, obwohl darunter noch mehr Inhalt steht. In einem von ihr beschriebenen NN/g-Test scrollten sechs von acht Teilnehmern überhaupt nicht, und 75 % der Teilnehmer wurden frustriert, nachdem sie persönliche Daten eingegeben hatten und dann feststellten, dass der Dienst in ihrer Region nicht verfügbar war. Die Seite war nicht zu Ende, sie sah nur so aus.

Beweisen Shares in sozialen Netzwerken, dass ein Artikel gelesen wurde?

Laut den Chartbeat-Daten hinter Farhad Manjoos Slate-Artikel von 2013 nicht. Der Zusammenhang zwischen Scrolltiefe und Shares war sehr schwach, und die am häufigsten geteilten Artikel waren nicht die am tiefsten gelesenen. Share-Zahlen messen etwas anderes als tatsächliches Leseverhalten.