Een oud begrip

Wie de afgelopen jaren iets met webdesign te maken heeft gehad, kent hem wel: the fold, of gewoon op zijn Nederlands, de vouw. Het is een veelbesproken begrip op het internet. De term komt uit de krantenwereld. Je ziet bij dichtgevouwen kranten in de kiosk met de eerste oogopslag alleen de koppen en foto’s boven de vouw. De rest van de voorpagina zie je alleen als je de moeite neemt om de krant op te pakken en open te vouwen. Het risico bestaat dan natuurlijk dat je vóór die beslissing al compleet afhaakt op die schreeuwende kop van De Telegraaf, om dan maar naar de NRC te grijpen. Zo ook op het web. Alles wat je meteen ziet op de homepage van een website bevindt zich boven de vouw. Zodra je begint te scrollen “ontvouw” je de pagina en dan pas zie je de rest van de content.

Van oudsher wordt de belangrijkste content boven de vouw geplaatst. Het is immers het eerste wat je ziet, dus een logische keuze. Het is hét deel van de pagina dat je sowieso ziet. Iemand moet ook nog eens moeite doen, namelijk scrollen, om de rest van de pagina te zien. Daarmee loop je het risico dat dit deel van de pagina helemaal niet gezien wordt. Want mensen scrollen niet graag. Of weten niet dat ze kunnen scrollen. Toch? Voordat we hier op ingaan, gaan we het eerst nog meer over de vouw hebben.

Waar zit die vouw?

De vouw zit precies op de denkbeeldige lijn tussen hetgeen wat je meteen op je scherm ziet, en dat wat je ziet zodra je begint te scrollen. De positie van deze lijn is dus geheel afhankelijk van het formaat van je browser. En hoe groot je je browservenster hebt, is natuurlijk weer afhankelijk van je eigen voorkeur (browser maximaliseren of niet?) en van het formaat van je scherm.

De vouw zit precies op de denkbeeldige lijn tussen hetgeen wat je meteen op je scherm ziet, en dat wat je ziet zodra je begint te scrollen | Occhio


Vroeger had iedereen ongeveer hetzelfde formaat monitor op z’n bureau staan, zodat je als webdesigner alleen rekening hoefde te houden met het kleinste formaat. Toen het internet populair begon te worden onder consumenten, was dit vaak 800 x 600 pixels. De vouw zat dan op ongeveer 600 pixels vanaf de bovenrand van je monitor. Nu bestaat er een heel groot scala aan beeldschermformaten. Zo hebben wij bij Occhio op de meeste bureaus wel een grote 27” monitor staan, maar ook een laptop. En iedereen heeft bij ons natuurlijk ook een smartphone. Bovendien heb je tegenwoordig natuurlijk ook tablets, phablets en notebooks in allerlei soorten en maten. Waar zit dan die vouw ergens?

There is no fold

Het antwoord: er is geen specifieke vouw meer te noemen. Voor ongeveer 70% van de gebruikers zit de vouw tussen de 768 en 900 pixels. Maar omdat er nu zoveel uiteenlopende schermresoluties bestaan, kan de vouw op 460 pixels bestaan, maar ook op 1500 pixels (en verder, denk maar aan 4K-schermen). Wat nu? Gelukkig leven we in het tijdperk van responsive web design. De layout van een website past zich aan aan het formaat van je browser. Je hebt dan in een website dus geen standaard hoogte en breedte meer en dus geen standaard vouw. Je kunt eigenlijk niet designen voor “de” vouw.

Alles boven de vouw?

De vouw is het eerste wat je ziet en daarom kun je het beste al je belangrijkste content boven de vouw plaatsen. Zo dacht men vroeger in het krantentijdperk. Hoe zit dat nu?

Uit onderzoek blijkt dat het allerbovenste stukje van een website door 20% minder gebruikers wordt bekeken dan het gedeelte daaronder. Dit klikt raar (en onmogelijk!), maar dit komt doordat veel mensen al beginnen met scrollen voordat de pagina compleet is geladen. Mensen zijn dus zó gewend om te scrollen, dat ze dat direct doen en daarbij het eerste gedeelte van de site compleet overslaan. Bovendien blijkt uit hetzelfde onderzoek dat de pixels helemaal bovenaan de pagina gemiddeld het kortst worden gezien, namelijk maar 4 seconden. Het deel van de pagina dat het langst wordt bekeken, 12 seconden, zit op ongeveer 1200 pixels vanaf de bovenkant. Dit zit voor de meeste schermen ónder de vouw. Het deel van een site dat door de meeste gebruikers wordt gezien zit op ongeveer 550 pixels vanaf de bovenkant, dit wordt door 80% gezien.

Belangrijk is dus dat je je doelen goed hebt. Wil je dat de content door zoveel mogelijk gebruikers wordt gezien? Dan kun je het beste deze rondom de 550 pixels plaatsen. Als je wil dat de gebruiker het langst ernaar kijkt, dan kun je deze beter rondom de 1200 pixels plaatsen. Wil je het allebei? Dan is tussen de 600 en 1000 pixels de optimale plek. Nog niet overtuigd? Chartbeat onderzocht data van 2 miljard bezoeken en ondervond dat 66% van de aandacht van gebruikers onder de vouw zit. Je belangrijkste content boven de vouw plaatsen is dus niet altijd zo’n goed idee.

Scrolling, scrolling, scrolling

Mythe: mensen houden niet van scrollen of weten niet dat ze kunnen/moeten scrollen.

Waarheid: mensen scrollen, zo goed als altijd. Vaak zelfs al voordat de pagina geladen is.

Waarom is dat? Heel simpel: mensen scrollen liever dan dat ze klikken. Interfacedesigner Joshua Porter stelt:

Scrolling is a continuation; clicking is a decision. En dat klopt helemaal. Een webpagina is als een weg: je gaat net zo lang rechtdoor tot je de beslissing neemt om af te slaan. Sterker nog, mensen hebben liever een superlange webpagina dan een heel korte.

Crazy Egg testte het met hun site: ze maakten een variant van hun homepage die wel 20 keer zo lang was als de oude. Wat bleek? De lange homepage deed het 30% beter dan de korte. Een pagina kan dus bijna niet te lang zijn, zolang de content maar interessant is. Kijk maar eens naar sites zoals Facebook, Instagram en Twitter. Je kan scrollen tot je een ons weegt. Het grappig is: veel mensen zullen zeggen dat ze niet van scrollen houden, maar onderzoek toont aan dat ze liever lange pagina’s hebben dan korte.

Maar waarom scrollen mensen, en hoe weten ze dat ze moeten scrollen? Hebben ze een visuele cue nodig, of scrollen ze uit zichzelf wel? Huge Inc deed hier onderzoek naar. Ze testten een viertal cases. 1: Een controle-afbeelding zonder visuele cues om te scrollen, 2: een afbeelding met een pijl naar beneden, 3: een korte afbeelding met een gedeelte van een content-blok boven de vouw, en 4: een afbeelding met een stuiterend content-blok. De uitslag was redelijk eenzijdig. Bijna iedereen scrollt sowieso, bijna iedereen scrollt meteen én bijna iedereen scrollt ook helemaal naar beneden. Bij case 2 en 3 scrollde 100%, bij de andere twee 91%. Het maakt dus niet gek veel uit wat je doet, mensen zullen zo goed als altijd scrollen. Zeker met de komst van kleine mobiele schermen is het scrollen helemaal ingeburgerd geraakt.

Last but not least: de footer

Opvallend is ook het hoge percentage gebruikers dat helemaal naar de onderkant van de pagina scrollt. Zoals eerder gezegd: scrollen is een voortzetting en klikken is een keuze. Zodra je bij de onderkant van een pagina bent aangekomen, is dus het moment daar waar je een keuze moet maken. Daarom is het hebben van een duidelijke footer belangrijk. Een gouden regel is dat gebruikers nooit aan hun lot overgelaten moeten worden. Ze zijn onderaan gekomen dus “klaar” met de pagina, wat nu? Belangrijk is dat ze geholpen en gestuurd kunnen worden met een footer. Het is handig als de gebruiker vanuit dat punt verder kan navigeren door de site. Ook is het een goede plek om call to actions te plaatsen zoals een nieuwsbrief-aanmeldformulier, een contactmogelijkheid en socialmedia-buttons.

Wat moet ik met die vouw?

Zoveel mogelijk content boven de vouw plaatsen blijkt dus zeker niet altijd goed te werken. De kans is groot dat hier snel aan voorbij zal worden gescrolld. Een beter idee is om deze ruimte te gebruiken als inleiding van de website. Een rustig beeld met misschien één of twee duidelijke call to actions. Zo bouw je spanning op en heb je een logische introductie naar het doel van de website. Bekijk ook de ludieke site Life Below 600px om meer te lezen over de opbouw van een webpagina.

Advies nodig of wil je een redesign van je website? Neem contact met ons op!

Deel dit artikel via
X

Welkom! Deze website maakt gebruik van cookies

Geef hier aan welke cookies we mogen plaatsen. De noodzakelijke en statistiek-cookies verzamelen geen persoonsgegevens en helpen ons de site te verbeteren.

Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.

NaamAanbiederDoelVervaldatum
admin_authOcchio.nlWij gebruiken deze cookie om te onthouden of een Occhio.nl gebruiker is ingelogd in ons systeem.
October_sessionOcchio.nlDeze cookie wordt gebruikt door ons content management systeem en wordt geplaatst bij bezoek aan willekeurig welke pagina van onze website.
setCookiePreferenceOcchio.nlSlaat een cookie op om ons te laten weten dat u de cookiemelding hebt gelezen en geaccordeerd.
NaamAanbiederDoel
CollectGoogle-analytics.comWordt gebruikt om gegevens naar Google Analytics te verzenden over het apparaat en het gedrag van de bezoeker. Traceert de bezoeker op verschillende apparaten en marketingkanalen.
_first_pageviewGoogle-analytics.comDit is een cookie die aangemaakt wordt bij de eerste paginaweergave van deze sessie. Het zorgt ervoor dat sommige onderdelen van de cookies code alleen werken op de eerste pagina van het bezoek, waardoor de code sneller en efficiënter werkt.
_eventqueueGoogle-analytics.comDeze cookie bewaart een serie muisklikken waarvan wij niet zeker kunnen zijn of ze al opgeslagen zijn op onze webservers vóór de huidige pagina uit het geheugen van de browser is gehaald. Deze klikken worden verwerkt en gelogd op de volgende pagina.
_jsuidClicky.comDeze cookie bevat een willekeurig gekozen nummer dat aangemaakt wordt als iemand voor het eerst de website bezoekt. Het dient om nog beter te zien of een bezoeker al eerder de site heeft bezocht.

Occhio.nl maakt geen gebruik van marketing cookies.

Cookies

Wij maken op deze website gebruik van cookies. Een cookie is een eenvoudig klein bestandje dat met pagina’s van deze website wordt meegestuurd en door uw browser op de harde schrijf van uw computer wordt opgeslagen.

Bekijk hier onze privacy verklaring