Was ist Below the Fold im Design und was bedeutet er im UI und Print?
Warum spielt der Bereich Below the Fold eine so zentrale Rolle für den Erfolg eines Mediums? Inwiefern prägt dieser Bereich das anfängliche Nutzererlebnis sowohl auf deiner Webseite als auch im Printmedium? Welche sind die gängigsten Designfehler im Below the Fold-Bereich und wie können diese vermieden werden?
Was ist Below the Fold?
Below the Fold bezieht sich ursprünglich auf den Bereich einer physischen Zeitungsseite, der unterhalb der Mittelfalte liegt und daher nicht sofort sichtbar ist, wenn die Zeitung gefaltet und auf einer Ablage oder in einem Zeitungsständer präsentiert wird.
Im Kontext des Webdesigns und der digitalen Medien wurde der Begriff adaptiert und bezieht sich auf den Teil einer Webseite, der nicht sofort sichtbar ist, wenn die Seite geladen wird, und den man erst sieht, wenn man nach unten scrollt. Es ist der Gegensatz zum Bereich Above the Fold, welcher den sofort sichtbaren Bereich einer Webseite ohne Scrollen beschreibt.
Definition: Below the Fold
Der Begriff «Below the Fold» hat seinen Ursprung im Zeitungswesen und bezeichnet den Teil der Titelseite, der unterhalb der Faltlinie liegt und den man erst sieht, wenn man die Zeitung öffnet. In der modernen digitalen Welt wird dieser Terminus vor allem im Bereich des Webdesigns und der Nutzeroberflächen-Gestaltung, bekannt als User Experience oder UX, verwendet.
Nutzen und Wichtigkeit des Below the Fold
Sowohl in Printmedien als auch im UI- und Screendesign spielt der Below the Fold-Bereich eine zentrale Rolle. Dieser Fold wird in beiden Kontexten intensiv betrachtet und optimiert, um die Aufmerksamkeit des Lesers oder Benutzers optimal zu führen und wichtige und unwichtige Aspekte zu platzieren.
Bedeutung für Printmedien
- Priorisierung von Inhalten: Das, was oberhalb der Falte liegt, gilt als wichtiger und zieht mehr Aufmerksamkeit auf sich. Inhalte unter der Falte werden als sekundär oder weniger dringlich betrachtet.
- Optimierung des Layouts: Die Platzierung von Werbeanzeigen, Bildern und Artikeln unterhalb der Falte kann helfen, den Raum optimal zu nutzen und gleichzeitig den Lesefluss zu erhalten.
- Steigerung der Neugier: Durch das Verstecken von Teilen einer Story oder Anzeige unter der Falte werden die Leser ermutigt, die gesamte Zeitung zu durchblättern.
- Verlängerung der Verweildauer: Inhalte, die interessant genug sind, um den Leser zum Umblättern zu animieren, können die Gesamtzeit, die mit dem Medium verbracht wird, erhöhen.
Bedeutung im Screen-, Web- und UI-Design
- Priorisierung digitaler Inhalte: Wie bei Printmedien zeigt der sichtbare Bereich (oberhalb des Falz) den Nutzern die wichtigsten Informationen, während sekundäre oder ergänzende Inhalte oft unterhalb des Falz platziert werden.
- Förderung der Benutzerinteraktion: Durch das Scrollen, um Inhalte below the fold zu sehen, interagieren die Nutzer aktiv mit der Webseite oder App und werden dadurch möglicherweise stärker eingebunden.
- Platz für ergänzende Informationen: Der Bereich below the fold bietet Raum für detaillierte Produktinformationen, Kundenbewertungen, FAQs und andere ergänzende Inhalte.
- Optimierung der Seitennavigation: Der sichtbare Bereich kann genutzt werden, um Hauptfunktionen und -nachrichten zu präsentieren, während sekundäre Navigationslinks oder weniger wichtige Funktionen im Bereich below the fold platziert werden können.
- Design-Flexibilität: Webdesigner – wie wir als Webdesigner Zürich – haben die Freiheit, kreative Layouts zu erstellen, die den Benutzer ermutigen, weiter zu scrollen und mehr Inhalte zu entdecken.
Abgrenzung: Below the Fold vs. Above the Fold
Die Begriffe «Above the Fold» und «Below the Fold» stammen ursprünglich aus der Zeitungsbranche. Sie bezeichneten den sichtbaren (Above) und den verdeckten (Below) Teil einer gefalteten Zeitung. In der digitalen Ära haben diese Begriffe jedoch eine neue Bedeutung erlangt, insbesondere im Bereich des Webdesigns.
| Below the Fold | Above the Fold | |
|---|---|---|
| Definition | Teil der Webseite, der erst durch Scrollen sichtbar wird. | Bereich einer Webseite, der ohne Scrollen sofort sichtbar ist. |
| Wichtigkeit | Wichtiger Bereich für tiefer gehende Informationen, trotz weniger sofortiger Sichtbarkeit. | Kritisch für den ersten Eindruck. Hier entscheiden viele Nutzer über ihr Verbleiben. |
| Inhalt | Weiterführende Informationen, zusätzliche Artikel, Fusszeileninformationen, Links zu anderen Bereichen der Webseite. | Logo, Hauptnavigationsmenüs, Schlagzeilen, Call-to-Action-Buttons. |
| Optimierung | Nicht vernachlässigen; nützliche Informationen bieten, um den Nutzer zum Weiterlesen zu animieren. | Klar, ansprechend und informativ gestalten. |
Eigenheiten und wichtige Prinzipien für Below the Fold Design
Von statischem zum dynamischem Verständnis
In den Anfangszeiten der Printmedien war das Konzept Below the Fold einfach zu verstehen: Es bezog sich auf alles, was unterhalb der oberen Hälfte der gefalteten Zeitung lag, und während es vielleicht nicht die primäre Aufmerksamkeit erregte, trug es dennoch wesentliche Informationen. Doch in der digitalen Ära haben sich die Dinge gewandelt. Mit veränderten Lesegewohnheiten und neuen digitalen Interaktionen, insbesondere durch das Scrollen, wurde Below the Fold zu einem Bereich mit verborgenen Schätzen und Potential. Dieses Umdenken hat uns zu einer dynamischeren Auffassung von Below the Fold geführt.
Scroll-Verhalten und veränderte User-Erwartungen
Anfangs folgten Websites dem Above the Fold-Prinzip, wobei essenzielle Infos oben standen, da man annahm, Nutzer würden nicht scrollen. Doch mit der Mobilen Revolution wurde Scrollen üblich, und User-Erwartungen verschoben sich hin zu interaktiven, multimedialen Online-Erlebnissen, unabhängig vom Gerät.
A/B-Tests zur Optimierung
Der direkt sichtbare Bereich einer Webseite prägt den ersten Eindruck. A/B-Tests, bei denen zwei Webseitenversionen verglichen werden, helfen herauszufinden, welches Design oder welche Platzierung am besten funktioniert und die Zielgruppenansprache optimiert.
Erfolgreiche Einsatz von Below the Fold im Marketing
- Medium: Die Blogging-Plattform nutzt den Below the Fold-Bereich, um weitere Artikel vorzustellen, die auf den Lesevorlieben des Benutzers basieren. Dies fördert das Engagement und die Verweildauer.
- Airbnb: Nachdem Nutzer Suchergebnisse Above the Fold sehen, bietet der Bereich Below the Fold detaillierte Einblicke in die Unterkünfte, einschliesslich Fotos, Bewertungen und Preise.
- Apple: Die Produktseiten verwenden den Below the Fold-Bereich, um technische Details, Kundenbewertungen und Zubehör vorzustellen, was den Kaufanreiz erhöht.
Wie kann der Below the Fold optimiert werden?
Below the Fold im Screen-, Web- und UI-Design optimieren
Während der Above the Fold-Bereich für den ersten Eindruck verantwortlich ist, spielt Below the Fold eine wichtige Rolle für das Nutzerengagement und die Informationsvermittlung. Hier erhalten Benutzer weitere, vertiefende Informationen und Inhalte.
- Nutzerführung: Verwendung von visuellen Hinweisen, um das Scrollen anzuregen (z.B. Pfeile, fade-out Inhalte). Kurz und prägnant beginnen, um das Interesse zu wecken.
- Qualitativ hochwertiger Content: Verwendung von attraktiven Bildern und Grafiken, Engagierende und relevante Inhalte. Die zum Weiterlesen anregen.
- Mobile Optimierung: Beachtung von unterschiedlichen Displaygrössen und Scrollverhalten auf mobilen Geräten. Einfache und intuitive Navigation
- Call to Action (CTA): Platzierung von weiteren CTA-Elementen Below the Fold, um Konversionen zu fördern. A/B-Tests, um die beste Position und Formulierung für CTAs zu finden
- Geschwindigkeit und Ladefehler: Sicherstellen, dass Inhalte Below the Fold schnell geladen werden, um die Benutzererfahrung zu optimieren. Überprüfung und Behebung von möglichen Ladefehlern
- Fortsetzung des Designflows: Das Design Below the Fold sollte eine nahtlose Fortsetzung dessen sein, was Above the Fold begonnen wurde.
Below the Fold im Printdesign optimieren
Die Optimierung des Below the Fold-Bereichs in Printmedien, insbesondere bei Tages- und Wochenzeitungen, erfordert eine sorgfältige Betrachtung des Designs, Inhalts und der Struktur.
- Klare Hierarchie der Informationen: Wie bei digitalen Medien sollte auch im Printdesign eine klare Reihenfolge und Gewichtung der Informationen gegeben sein.
- Bildnutzung: Nutzen von qualitativ hochwertigen Bildern, die die Aufmerksamkeit auf sich ziehen und die Botschaft des Druckerzeugnisses unterstützen.
- Konsistente Typografie: Ein konsistentes Schriftbild hilft, den Lesefluss zu erhalten und macht das Druckerzeugnis insgesamt harmonischer.
- Nutzen von Farbhighlights: Durch gezielte Farbakzente kann die Aufmerksamkeit auf bestimmte Bereiche gelenkt werden.
- Einbindung von Infografiken: Diese können komplexe Informationen vereinfachen und visuell ansprechend darstellen.
- QR-Codes und Verweise: Im Zeitalter der Digitalisierung können QR-Codes oder Verweise auf Online-Plattformen den Print- mit dem Digitalbereich verknüpfen und so den Mehrwert eines Druckerzeugnisses steigern.
- Fortsetzung des Designflows: Das Design Below the Fold sollte eine nahtlose Fortsetzung dessen sein, was Above the Fold begonnen wurde.
