Het einde van de vouw, lang leve de scrollbar?

Een steeds terugkerende wens van onze klanten tijdens het ontwerpproces van hun webwinkel is om zoveel mogelijk content “boven de vouw” (above the fold) te plaatsen. Maar bestaat “de vouw” zoals we die kennen eigenlijk nog wel?

Even kort terug in de tijd: de term vouw is ontstaan in het papieren tijdperk en refereert aan de bovenste helft van een dubbelgevouwen (folded) krant die je in het rek ziet hangen. Hier wordt het meest belangrijkst nieuws getoond, letterlijk boven de vouw. Wat er getoond wordt moet zoveel mogeljk mensen aanspreken want er moeten uiteraard zoveel mogelijk krantjes verkocht worden. Belangrijke keuzes maken dus.

Snel weer terug naar Internet. De term vouw is hier overgenomen en het idee is eigenlijk hetzelfde. Uiteraard hier geen dubbelgevouwen versie maar de content die je in één oogopslag ziet zonder te hoeven scrollen. De vouw op Internet wordt ook wel paginavouw, fold, pagefold, knip of viewport genoemd. Ook hier dezelfde belangrijke keuzes die gemaakt moeten worden want deze content bepaald immers of je gebruikers doorklikken of afhaken.

Maar waar is nu precies de vouw?
De plaats waar de vouw is wordt bepaald door de hoogte van de viewport (het kijkvenster van je browser) en wat je in één oogopslag ziet zonder te hoeven scrollen. De viewport wordt op zijn beurt weer bepaald door een flink aantal factoren:

Welk apparaat? (pc, laptop, mobiel, mini-pc, tablet, game console etc.)

Welk operating systeem? (Windows XP/ Vista / 7 / Apple OSX / Apple iOS etc.)

Welke browser en welke versie? (Internet Explorer 6/7/8/9, Firefox 3 t/m 7, Google Chrome, Safari etc.

Welke afmetingen en resolutie van het beeldscherm?

Hoeveel toolbars heeft de bezoeker geïnstalleerd die de hoogte opsnoepen?

Google doet met Browsersize op een aantal van bovenstaande punten al wat onderzoek voor ons: http://browsersize.googlelabs.com/
Let wel: het zijn wereldwijde cijfers gebaseerd op mensen die Google bezoeken, dus niet alleen in Nederland. Verschillen tussen landen kunnen best groot zijn.

Met deze handige tool kun je een URL invullen en direct zien hoeveel procent van de bezoekers die site zonder te scrollen kunnen bekijken. Als we kijken naar de grote webwinkels in Nederland zoals Wehkamp, Bijenkorf, Miss Etam of Bol.com dan zie je dat 50% van de bezoekers eigenlijk niet verder komt dan de hoofdvisual en dat je voor de rest van de content moet doorscrollen. Probeer zelf eens wat webwinkels uit, je zult zien dat een score van 80% waarbij de gehele homepage getoond wordt niet vaak behaald wordt.

Vouw of vouwen?
Beter is om zelf te gaan meten met Google Analytics want het gaat tenslotte om jouw klanten. Zo krijg je een nog beter en eerlijker beeld dan de Google Browsersize tool die wereldwijd cijfers verzameld. En je zult zien dat steeds meer klanten naast de desktop PC (en laptops) via een mobiel apparaat of een tablet je webwinkel bezoeken. En deze apparaten hebben hun eigen beeldschermformaten en bijbehorende resoluties en dus ook hun eigen vouw. We spreken dus eigenlijk niet meer van “de vouw” maar van “vouwen”. Gelukkig kun je hier bij het ontwerp van je webwinkel rekening mee houden en via stylesheets elk apparaat zijn eigen layout geven. Geoptimaliseerd voor zijn eigen vouw.

Veel te melden
Als webwinkel heb je best veel te vertellen. Naast je brand ID wil je het assortiment tonen, search, klantenservice, winkelmand en inlogmogelijkheden. Om het vertrouwen te vergroten liefst ook nog een telefoonnummer vermelden. Dat is al best veel informatie en dan moet het retailen nog beginnen! Scrollen lijkt hiermee onvermijdelijk zoals we ook bij de eerder genoemde voorbeelden al hebben kunnen zien.

Vouwtips
Maar is de vouw dan iets om helemaal geen rekening mee te houden? Uiteraard plaats je de belangrijkste informatie nog steeds zoveel mogelijk bovenaan je pagina. Het ‘donate’ voorbeeld van Google Browsersize gaf dit al goed aan.

Stel jezelf bij elke pagina de vraag: “wat verwacht mijn bezoeker op deze pagina en hoe kan ik hier het beste aan voldoen?” Plaats deze content zo hoog mogelijk op de pagina. En het liefst zo gepresenteerd dat bezoekers getriggerd worden om door te scrollen. Omdat bijvoorbeeld een product half in beeld staat of een kleurvlak opeens ophoudt. Of omdat je de tekst net niet meer kunt lezen. Plaats daaronder de andere content. Vooral op een homepage is het aan te bevelen meer diverse content te tonen onder vouw. Je weet immers nog niet waar je klant naar op zoek is. Als je bovenstaande goed doet zul je in je statistieken zien dat je klanten niet meer zoveel scrollen. Niet omdat ze niet weten hoe het moet maar omdat je boven de vouw al direct de juiste informatie aanbiedt waardoor je jouw klanten snel verder helpt.

Scrollen moet!
Ok, scrollen mag dus best maar de laatste tijd zien we een trend in verticaal scrollen waarbij scrollen zelfs een voorwaarde is om je verhaal te vertellen. Paar voorbeelden ter inspiratie:

Nike Better World verteld zijn verhaal dmv parallax scrollen (een techniek waarbij lagen over elkaar schuiven voor een pseudo 3D effect).
Nest heeft een heldere productpresentatie hoe je in 365 dagen tijd geld kunt besparen met hun zelflerende thermostaat. Let op het meescrollende bolletje met de dagaanduiding.
Als laatste dit prachtige voorbeeld van Lost World’s Fairs. Een parallax scrollende infomercial. Weinig webwinkel maar wel prachtig gemaakt!

Webwinkels vouwen
Mijn conclusie is dat we niet meer met “de vouw” te maken hebben zoals we dat alleen van de desktop PC kennen maar tegenwoordig rekening moeten houden met ”meerdere vouwen”. Verschillende apparaten en hun beeldschermen vragen om een scherpe blik hoe je je content moet presenteren. Goed meten en optimaliseren. Tegelijkertijd is het onmogelijk (en zoals we gezien hebben niet marktconform) om alle content boven de vouw te tonen. Scroll ze!

Iwan Blokzijl is Art Director bij De Nieuwe Zaak

Deel dit artikel: