# Above the fold: wat hoort echt in de eerste scroll van je homepage? ## 57% van de aandacht gaat naar wat je direct ziet Nielsen Norman Group deed jarenlang eye-tracking onderzoek en kwam op een cijfer dat je niet mag negeren: bezoekers besteden gemiddeld 57% van hun kijktijd aan het deel van de pagina dat ze zien zonder te scrollen. Alles onder die denkbeeldige vouw krijgt samen 43%. En dat is als mensen überhaupt scrollen. Dat maakt "above the fold" nog steeds een van de belangrijkste beslissingen die je op je homepage neemt. Niet alles hoeft boven de vouw, maar wat daar staat moet de vraag beantwoorden waarmee de bezoeker kwam. ## Wat "above the fold" vandaag betekent De term komt uit de krantenwereld. De voorpagina werd dubbel gevouwen voor de kiosk, en wat boven de vouw zat bepaalde of iemand de krant pakte. Op het web is het de zichtbare ruimte voordat je scrollt. Het lastige: die ruimte verschilt per bezoeker. Een iPhone SE heeft ongeveer 667 pixels verticaal, een desktop met 27-inch scherm heeft er 1440. Je "fold" verschuift afhankelijk van apparaat, browser, adresbalk, bookmarks-balk en toolbars. De praktische vuistregel: ontwerp voor de kleinste veelvoorkomende hoogte (ongeveer 600-700 pixels op mobiel) en laat het natuurlijk uitlopen op grotere schermen. ## De vier dingen die er altijd in horen ### Wat je doet De kernvraag die elke bezoeker binnen 3 seconden stelt: "Zit ik hier goed?" Je antwoord moet klip en klaar zijn, liefst in één zin. Geen marketingtaal, geen jargon. Gewoon: wat je levert, voor wie. Vergelijk deze twee hero-koppen: - "We ontgrendelen digitale potentie voor toekomstgerichte organisaties" - "Premium websites voor MKB-bedrijven, opgeleverd in 1 tot 3 weken" De eerste klinkt duur en zegt niks. De tweede vertelt een bakker in Utrecht precies wat hij krijgt en wanneer. ### Voor wie het is Niet iedereen is je doelgroep, en dat moet boven de vouw duidelijk worden. Als je specifiek voor horeca werkt, zet "horeca" in je hero. Dat filtert de verkeerde leads eruit en bevestigt bij de juiste dat ze thuis zijn. Verwar dit niet met beperkend zijn: specifiek zijn verhoogt juist je conversie omdat de mensen die passen zich herkennen. ### Waarom jij anders bent Eén concrete differentiator is genoeg. Niet drie, niet vijf. Kies er één die écht waar is: een prijs, een snelheid, een werkwijze, een garantie. Iets wat je concurrenten niet zomaar kunnen naschrijven. Voorbeelden die werken: - "Binnen 14 dagen live of geld terug" - "Vaste prijs, geen meerwerk achteraf" - "Gebouwd door één senior, niet door een team van stagiairs" ### Wat de volgende stap is Eén primaire call-to-action. Niet drie knoppen naast elkaar. De bezoeker heeft twee opties nodig: "ja, ik ben geïnteresseerd" (de primaire CTA) of "ik wil eerst meer weten" (dat is scrollen, geen knop). Een secundaire CTA mag, maar moet duidelijk ondergeschikt zijn (bijvoorbeeld een text link in plaats van een knop). ## Wat er absoluut niet in hoort **Lange teksten.** Niemand leest een paragraaf van 6 regels als hero-tekst. Als je het in één zin kunt zeggen, doe dat dan. Kan het niet in één zin? Dan is je propositie nog niet scherp genoeg. **Autoplay video met geluid.** Bezoekers op kantoor of in het openbaar vervoer sluiten je tab binnen een seconde. Een mute-video kan werken, maar test hem eerst op mobiel: veel browsers lazyloaden videos niet snel genoeg en je hero is dan leeg bij eerste laadpoging. **Cookie-banners die de hele fold afdekken.** Als je banner 60% van het scherm vult op mobiel, is jouw "above the fold" feitelijk de cookie-banner. Los dit op met een subtiele balk onderaan, niet met een volledig-scherm-overlay. **Te veel navigatie-opties.** Een menu met 9 items dwingt de bezoeker eerst te kiezen. Houd de hoofdnavigatie bij 5 tot 7 items, en gebruik dropdowns spaarzaam. **Generieke stockfoto's.** Een foto van een groep mensen in pakken die een scherm aanwijzen vertelt niks over wat jij doet. Liever een screenshot van je eigen werk, een foto van een echte klant of een custom illustratie. ## Mobile is waar de slag gewonnen wordt Op mobiel heb je ongeveer 600 pixels hoogte voordat de scroll begint. Dat is minder dan je denkt. Gemiddeld past daar één kop, één regel subtekst, één knop en een klein stukje beeld. Punt. De beste mobile homepages zijn niet verkleinde desktops. Ze zijn opnieuw gedacht voor een schermgrootte waar elke pixel telt. Dat betekent: - Kop van maximaal twee regels - Subtekst van maximaal één regel - CTA-knop breed genoeg voor een vinger (minimaal 44 pixels hoog) - Beeld als achtergrond of onder de CTA, niet ernaast Als je twijfelt of iets nog boven de vouw past op iPhone SE: het past waarschijnlijk niet. Gooi iets weg. ## Testen is de enige manier om zeker te weten Aannames over wat werkt zijn vaak fout. Gebruik scroll-heatmaps (Hotjar, Clarity van Microsoft is gratis) om te zien waar bezoekers stoppen met scrollen. Gebruik session-recordings om te zien wat ze aanklikken. En als je genoeg verkeer hebt: draai een A/B-test op je hero-kop. Een andere volgorde van dezelfde drie elementen kan zomaar 15 tot 20% verschil maken. Bij Web Design by Kick bouwen we elke homepage met een hero die één ding doet: de bezoeker binnen 3 seconden laten weten wat hij krijgt en wat de volgende stap is. Alles daaronder is onderbouwing, geen voorwaarde. ## Conclusie Above the fold is geen plek om alles kwijt te kunnen, maar juist om keuzes te maken. Wat je doet, voor wie, waarom anders, en wat de volgende stap is. Meer hoort er niet, minder mag niet. Test het op mobiel als eerste, daar wordt het verschil het scherpst. --- ## Bronnen - [Nielsen Norman Group - The Fold Manifesto](https://www.nngroup.com/articles/scrolling-and-attention/) - [Nielsen Norman Group - How Long Do Users Stay on Web Pages](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/) - [Microsoft Clarity - Free heatmap tool](https://clarity.microsoft.com/) - [web.dev - Largest Contentful Paint](https://web.dev/articles/lcp) - [Baymard Institute - Homepage UX Research](https://baymard.com/research/homepage-design) --- Bron: https://webdesign.bykick.nl/blog/above-the-fold-eerste-scroll-homepage