• Ik ontwerp en bouw websites voor
    desktop, tablet en smartphone

  • Ik bouw mijn websites met
    html5, css3 & JQuery

  • Integratie met social media en online branding
    zijn voor mij vanzelfsprekend

  • Ik geef advies over online branding
    en begeleid projecten

Above the fold

PDF Afdrukken Email

The FOLDAls jij een nieuwe website ontwerpt of laat ontwerpen, wil je dan persé dat de homepage op het beeldscherm past? Of vindt je het niet erg dat bezoekers van jouw website naar beneden moeten scrollen om informatie te lezen of te klikken? Als je de eerste vraag met ja hebt beantwoord, dan geloof je misschien in een bestaande internetmythe dat bezoekers niet kunnen scrollen!

Postzegels

Know How communityToen ik in 2005 de opleiding 'Professional Webdesigner' volgde, was het nog een veelgehoorde richtlijn: de homepage van een website moest in zijn geheel zichtbaar zijn. Met andere woorden, de bezoeker moest niet hoeven te scrollen om alle informatie te zien. In 2005 was schermresolutie 1024x768 al sterk in opkomst, maar veel mensen gebruikten nog 800X600 of lager. In het begin van mijn carrière als webdesigner heb ik nog veel websites ontworpen die in de moderne brede schermen van nu, het formaat postzegel hebben!

Boven de vouw

Het principe dat bezoekers van een website zonder te scrollen de belangrijkste informatie op het scherm zien, wordt in de webdesign wereld samengevat in 3 woorden: 'above the fold' of, in goed Nederlands, 'boven de vouw'.

Waar komt het begrip vandaan?

Het begrip 'above the fold' is oorspronkelijk afkomstig uit de krantenwereld. De meeste kranten liggen dubbelgevouwen in de schappen. Mensen zien alleen de bovenste helft van de voorpagina: een krachtige foto en een aansprekende kop. Informatie die mensen aanspoort de krant te kopen. De ruimte boven de vouw is ook populair bij adverteerders. Dit begrip heeft zich vertaald naar het internet. 

De eerste websites

Het is waar dat in de eerste jaren van het internet mensen niet gewend waren om de scrollbar (= schuifbalk) te gebruiken bij het bekijken van een webpagina. Ze keken alleen naar de informatie die zichtbaar was op het scherm. Was de informatie interessant genoeg, dan besloten ze te blijven of te klikken. Het succes van een website werd in deze periode (1994-1996) in hoge mate bepaald door de positie van de belangrijkste informatie. Als deze te laag in het scherm stond ('below the fold'), dan was dit een garantie voor mislukking. Een schrikbeeld dat velen goed in hun oren hebben geknoopt en in hoge mate heeft bijgedragen aan het misverstand dat op een homepage alles boven de paginavouw gepropt moet worden.

Maar waar is de vouw?

Tijden zijn veranderd. De beslissing voor welke schermresolutie je een website moest ontwerpen was altijd al lastig, maar de materie wordt steeds complexer. Bezoekers bekijken een website op hun smartphone, een ipad of op een beeldscherm met een hoge resolutie. De terechte vraag is dan ook: waar zit die vouw dan?

De positie van de vouw is niet alleen afhankelijk van het platform waarop een website wordt bekeken, maar ook van de browser die wordt gebruikt. Werkbalken en tabbladen in de browser nemen ook ruimte in beslag die de hoogte van de pagina boven de vouw beïnvloedt.

Er zijn handige tools waarmee je kunt zien waar de 'fold' van een website zich bevindt op een computerscherm. Op de website whereisthefold.com kun je een webadres invoeren en bekijken wat bezoekers van jouw website zien bij verschillende schermresoluties. Ook Google heeft een website waar je kunt beoordelen wat gebruikers kunnen waarnemen: browsersize.googlelabs.com. Hieronder zie je waar de paginavouw zich in mijn website bevindt bij verschillende schermresoluties.

Boven de paginavouw 

Het belang van de vouw

De meeste webdesigners zijn het er over eens dat scrollen tegenwoordig voor de meeste gebruikers geen mysterie meer is. De opkomst van de smartphone en tablet heeft ertoe geleid dat scrollen heel gewoon is geworden. Op dit moment worden zelfs veel websites ontwikkeld als één heel lange pagina omdat bezoekers liever scrollen dan klikken.

Toch is de ruimte boven de vouw nog altijd erg waardevol. Onderzoek toont aan dat bij een bezoek aan de homepage van een website 80% van de aandacht uitgaat naar de informatie boven de vouw! Hoewel mensen wel hebben geleerd te scrollen, besteden ze slechts 20% van de tijd aan de informatie die onder de vouw staat. Proportioneel gaat er weer meer aandacht uit naar de informatie in de footer.

Hieronder zie je de resultaten van onderzoek waarbij de oogbewegingen van gebruikers zijn vastgelegd. Duidelijk te zien is dat de aandacht verslapt naarmate de gebruiker meer moet scrollen.

Scrollen op een website

 

De ruimte 'above the fold' is dus dè plek bij uitstek om te vertellen wie je bent, wat je doet en wat jij te bieden hebt. Bovendien moet je bezoekers nieuwsgierig maken naar wat er onder de vouw staat zodat ze de moeite nemen om te scrollen. Een goed vormgegeven, gebruiksvriendelijke website met leesbare webteksten is daarbij essentieel.

Inhoud, adverteren en de vouw

De discussie over de vouw is sinds kort weer nieuw leven ingeblazen door een update van Google in januari 2012. Deze versie gebruikt een nieuw algoritme dat de inhoud van elke webpagina kritisch beoordeelt. Te weinig relevante inhoud of teveel advertenties boven de vouw wordt door Google bestraft en resulteert in een lagere waardering van een website. Google doorzoekt alle inhoud boven de vouw op de aanwezigheid van relevante zoekwoorden. Als er te weinig zoekwoorden worden gevonden, is dat slecht voor jouw ranking. Een goed argument om ervoor te zorgen dat je webteksten op orde zijn.

Verleiden om te scrollen: do's en dont's

Hoewel de ruimte boven de vouw dus tot op de laatste pixel benut moet worden, is het niet haalbaar om alles in deze kleine ruimte te etaleren. Bovendien weet niemand precies hoe groot de beschikte ruimte is, omdat de positie van de paginavouw nogal eens varieert.

In de meeste gevallen redt je het niet om alles wat je wilt vertellen, boven de vouw te proppen. Zeker als je mensen een product of dienst wilt verkopen, heb je soms behoorlijk wat tekst nodig. Wat te doen? Gelukkig blijkt uit usability testen dat mensen helemaal geen probleem hebben met scrollen als je ze weet te overtuigen dat jouw boodschap de moeite waard is.

Het is dus de kunst om mensen te verleiden om te scrollen. Maar hoe doe je dat? De volgende tips kunnen helpen.

1. Vermijdt horizontale lijnen of balken vlakbij de vouw. Deze kunnen de indruk wekken dat de pagina daar eindigt.

horizontal-bar

Deze website gaat nog verder onder de paginavouw. Door de oranje balk wordt echter de indruk gewekt dat er niet gescrolld hoeft te worden.

Het tegenovergestelde van deze regel is ook waar. Als de inhoud van een pagina aan de onderkant wordt afgekapt (tekst of afbeelding) dan geeft dit een visuele clue dat de pagina doorloopt. Dit kun je eenvoudig bereiken door de inhoud van een webpagina over een aantal kolommen te verdelen. Ook bij een verschuivende paginavouw is er dan wel altijd een kolom die visueel wordt afgekapt.

2. Gebruik schaduw voor de bovenkant, linker- en rechterkant van de webpagina of geef de achtergrond een andere textuur. Ook dit geeft gebruikers een aanwijzing dat de pagina nog doorgaat.

3. Vertel bezoekers in de tekst dat ze naar beneden moeten scrollen om de rest van de pagina te lezen. Geef ze ook een reden waarom dat aantrekkelijk voor ze is. Schrijf bijvoorbeeld: Scroll naar beneden voor een kortingsbon van 10 euro! Voorbeeld

4. Plaats een afbeelding of knop boven de vouw om te laten zien dat bezoekers kunnen scrollen.

 

afbeelding om te scrollen

Op deze website is duidelijk te zien dat er nog meer is onder de paginavouw!

5. Maak een menu met hyperlinks (ankers) naar delen van de pagina die zich onder de vouw bevinden.

6. Denk na over de structuur van je pagina. Wat wil je mensen vertellen, hoe bouw je het verhaal op en hoe leidt je mensen door het verhaal heen. Goede voorbeelden vind je als je zoekt op 'one page websites'. Bij het zoeken naar informatie over deze blog vond ik dit leuke voorbeeld van een goed uitgedachte manier om bezoekers door een webpagina te leiden: Life below 600.

Life below 600

7. Besteed extra aandacht aan de informatie die je in de footer van je website zet. Onderzoek toont aan dat bezoekers relatief veel aandacht besteden aan het einde van een website. Maak goed gebruik van deze wetenschap en gebruik de footer om mensen verder te laten klikken of voor contactinformatie.

Conclusie

Extra aandacht voor de informatie die je boven de paginavouw kwijt wil, is zeker niet achterhaald. Bezoekers geven veel aandacht aan de bovenste pixels. Ook Google kijkt extra kritisch naar informatie 'above the fold'.

Het is wel een hardnekkig misverstand dat mensen niet willen scrollen. Het is de kunst om ze ertoe te verleiden om 'below the fold' te gaan. Dit kun je doen door visuele aanwijzingen te geven. Bovendien kan je de vormgeving en inhoud van je website zo aanpassen dat mensen als het ware door je webpagina geleid worden. Vergeet niet de pagina een duidelijk eind te geven en bezoekers de mogelijkheid te bieden verder te klikken.

Ik ben benieuwd wat jullie bevindingen zijn! Heb je zelf een voorkeur voor korte volle homepages of voel je je meer aangetrokken tot webpagina's die alle ruimte nemen om een verhaal te vertellen?


Reacties
(Er zijn nog geen reacties)
Laat een reactie achter
Captcha

Lydie PolakDagelijks bezig met websites, social media, zoekmachines, Google, e-marketing en branding. Verder kan ik niet genoeg krijgen van films, detectives (ja, ook Midsommer Murders), boeken, pinnen, bloggen, mijn gezin, katten en mijn iPhone. Benieuwd naar mijn werk? Kijk dan op mijn website www.lydiepolak.nl.