Alles wat je moet weten over de website fold
fold blog
share

Ik zat laatst in de trein en wierp een blik op een dubbelgevouwen krant die een tafeltje verder lag. Een grote foto van Arjen Robben staarde me aan. Hij had alles gegeven voor de laatste wk-kwalificatie wedstrijd van Nederland, aldus de grote titel. Ik pakte de krant op en vouwde hem open zodat ik het artikel zelf kon lezen. De artikel-tekst stond onder de vouwlijn van de krant, oftewel the fold.

De online vouwlijn

Op websites classificeren we alles wat we zonder te scrollen, in één oogopslag zien als “boven de fold”. Alles wat hieronder komt, vergt actie vanuit de gebruiker. Zij moeten namelijk scrollen om verder te gaan.

Hoe belangrijk is de vouwlijn?

De locatie van deze vouwlijn verschilt natuurlijk per apparaat en dat maakt het een lastig onderwerp. Een befaamde groep onderzoekers die gespecialiseerd zijn in de gebruikerservaring op websites, Nielsen Norman Group, heeft hier een aantal artikelen over geschreven, waarvan de meest recente in 2015. Zij concluderen dat informatie boven de vouwlijn veel vaker en beter bekeken wordt. Google concludeert in haar onderzoek hetzelfde. Niet verrassend is de fold dus zeker belangrijk.

Drie best practices

Betekent dit echter dat we alle informatie bovenin het scherm moeten stoppen? Nee, dat is gelukkig niet nodig. Een krant doet dat immers ook niet. Kranten weten al eeuwen dat de kunst is om mensen te triggeren om verder te willen kijken. Zo werkt het op een website ook. Het volproppen van de header met informatie (die wordt immers beter bekeken, toch?) werkt juist averechts. Mensen denken -net als mijn baas- namelijk heel snel “pff, hier heb ik geen tijd voor”.

Het is belangrijk om ervoor te zorgen dat informatie boven de vouwlijn interessant en uitdagend is zodat de gebruiker meer wil zien. Drie best practices waar je op kunt letten bij het indelen van een webpagina, rekening houdend met de vouwlijn:

  1. Informatie boven de vouwlijn moet aantrekkelijk zijn en aanzetten tot actie (scrollen);
  2. Zet elementen OP de vouwlijn, waardoor een deel van de informatie niet zichtbaar is (deze valt eronder). Hierdoor scrolt de gebruiker al automatisch om de rest van de inhoud te kunnen bekijken;
  3. Zet geen Call to Action, zoals een knop, boven de fold die een beslissing van de gebruiker vraagt die hij nog helemaal niet kan maken. Daarvoor heeft hij eerst meer informatie nodig. Vergelijk het met het ontmoeten van je grote liefde: je kunt bij de eerste ontmoeting niet meteen om een date vragen, je zult eerst een leuk gesprek op gang moeten brengen.

Zelf checken waar de fold zit

Ben je zelf een pagina aan het maken in WordPress en ben je benieuwd waar de fold precies zit, zodat je hier rekening mee kunt houden? Volg dan deze stappen:

  • Bekijk (of preview, als hij nog niet gepubliceerd is) je landingpage in Google Chrome
  • Klik ergens in het scherm rechtermuisknop – element inspecteren
  • Je ziet nu een schermpje met een boel code openen. Klik op de drie puntjes rechtsbovenin dat schermpje:

  • Vervolgens klik je op de ‘2 raampjes’, zodat dit nieuwe schermpje losgekoppeld wordt van je landingpage:

  • Klik weer ergens op het scherm van je landingpage
  • Pak nu rechtsonderin het scherm vast, en versleep de grootte.
  • Goed opletten, je ziet nu rechtsbovenin het scherm een wit vakje met de afmetingen van je pagina. Het tweede getal is de hoogte van je scherm, in pixels.
  • Sleep hem eerst naar 900 pixels. Dit is de meest voorkomende fold. Je ziet nu perfect wat erboven valt.
  • Sleep hem vervolgens ook nog even naar 740 pixels. Dit is fold die veel voorkomt op bijvoorbeeld kleinere laptops.

Zelf testen of de verdeling goed is

Wil je zelf eens kijken hoe effectief jullie informatie boven de fold is?

Je kunt dit zelf te testen met programma’s als HotJar of Smartlook. Deze applicaties kunnen zogenaamde Heatmaps maken die je inzicht geven in de hoeveelheid bezoekers die er zijn op elk gedeelte van je pagina. Zo kun je zien hoeveel mensen daadwerkelijk verder de pagina op scrollen.

De fold is en blijft een belangrijk onderdeel van een website, houd er dus rekening mee. Dit betekent echter niet dat alle informatie boven in het scherm moet komen te staan. Scrollen wordt namelijk steeds meer een gewenning, zeker op mobiele apparaten.

Contact

Geen irritant salespraatje of hyperactief funnel-management. Gewoon ouderwets een vraag stellen en snel antwoord krijgen.

Je kunt ons ook bellen op 024 8200 231

    • Dit móeten we mededelen:
      Wanneer je op versturen drukt ga je akkoord met ons privacy policy.
    • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.