Usability: ontwerpen voor scrollen of niet? Zin en onzin van de pagefold

Het webdesign concept ‘pagefold’ of ‘vouw’ gaat over de informatie die op een webpagina wordt getoond zonder dat daarvoor hoeft te worden gescrolled. Hoe belangrijk is deze ‘pagefold’ bij het ontwerpen van een website of webshop? En wat zeggen de statistieken over het verticale scrollen van gebruikers op langere webpagina’s?

Twee maanden geleden kreeg ik een telefoontje. Of een bepaalde designklus iets voor mij was. Drie maanden lang pixels verschuiven, fulltime, bij één van de grootste Nederlandse telecom bedrijven.

Binnen de lijntjes kleuren
Al eerder deed ik daar mijn ding en ik kende dus de voors en tegens. Tof team, goed betaald maar wel binnen de lijntjes van de corporate huistijl kleuren én een nogal stroperige organisatie. Toch leek het me wel wat. De mobiele tak zou nu mijn voornaamste speelveld worden en gezien tegenvallende verkoopcijfers op ‘mobiel’ meteen een erg interessante.

Specialistische kennis
Heilig geloof ik in de scheiding van disciplines bij het design van webpagina’s. Simpel gezegd: ieder moet doen waar hij in uitblinkt. Het internet is anno 2009 zo ver gegroeid dat er voor elk onderdeel in het ontwikkelproces specialistische kennis nodig is. En terecht.
Natuurlijk zijn er genoeg generalisten te vinden. Maar techniek én design van een webshop neerleggen bij dezelfde webdesigner is vooral passend bij kleine projecten. Internet is een serieuze economische factor van belang en de trajecten zijn complex geworden. Trajecten die vragen om specialistische kennis van verschillende bronnen.

Met mijn specifieke kennis van vormgeving voor het web hoopte ik, net als de vorige keer, verschil te kunnen maken. Anderhalf jaar geleden werd ik al gevraagd om mijn kennis en ervaring ook op een wat abstracter niveau in te zetten. Niks is mooier dan je eigen advies en visie te mogen doorvertalen naar een succesvolle website / webshop.

Wordt de pagefold overschat of niet?
Twee weken geleden ontstond er in de organisatie een interessante discussie. Over het fenomeen ‘pagefold’. En of gebruikers wel bereid zijn om te scrollen op een webpagina? Een snelle zoektocht bij Google geeft veel informatie die stelt dat gebruikers zeker wel bereid zijn te scrollen. Maar wat zegt dat over het nut van een pagefold? En wat zijn de voorwaarden waaraan een webdesign moet voldoen om de gebruiker tot op de smeuige bodem te laten scrollen?

Gevouwen kranten
De term pagefold of paginavouw is te herleiden tot de opmaak van ‘offline’ kranten. Belangrijk nieuws in een krant staat op de voorpagina maar het grote fysieke formaat van een krant zorgt ervoor dat de krant vaak gevouwen wordt aangeboden. Als een lezer het minder belangrijke nieuws, of een verdieping van het voorpagina nieuws zoekt, dan moet de pagina omgeslagen worden.

Structurering en waardering van de aangeboden informatie is daarom onvermijdelijk. Simpel gezegd: wat is belangrijk genoeg om meteen bij de allereerste aanblik te worden bekeken? Een pagefold bestaat dus wel degelijk. Bovendien blijkt de waardering van informatie ook nog eens onafhankelijk van het gebruikte medium.

Helder en duidelijk een boodschap overbrengen
Uit verschillende, toonaangevende onderzoeken blijkt dat anno 2009 veel gebruikers scrollen. Maar zo vanzelfsprekend was dat niet, in de donkere prehistorie van het internet. Vóór 1994 werd een webpagina gezien als een applicatie, een programma. Afgebroken informatie aan de onderkant van het computerscherm werd geïnterpreteerd als een fout in het programma, niet als een uitnodiging om verder te lezen.

Web 2.0
Recent Web 2.0 design gebruikt koppen en broodtekst in een groot lettertype, grote buttons en veel ruimte op de pagina om de boodschap zo helder en duidelijk mogelijk over te brengen. Door dergelijke design keuzes te maken, en gulzig gebruik te maken van de beschikbare ruimte, neemt de kans op scrollen onvermijdelijk flink toe. Maar wat is belangrijker: alles of selectief communiceren?

Internet op mobiele devices
Naast een verbeterd inzicht in het duidelijk overbrengen van een boodschap zijn er ook technische factoren. Standaardisering in beeldschermen is ver te zoeken. Het aantal verschillen in schermresoluties neemt eerder toe dan af.  Technische ontwikkelingen maken enerzijds steeds grotere beeldschermen (TV-scherm én computermonitor) mogelijk. Anderzijds neemt mobiel internet explosief toe waarbij het kleine formaat van het scherm van een mobiel apparaat de schermresolutie juist beperkt.

Verder zijn webbrowsers door de gebruiker zelf uit te breiden met allerlei ‘ruimte consumerende’ toevoegingen (browser add-ons) waardoor de positie van de pagefold voor elke gebruiker en in verschillende situaties, anders is.

Bovendien is het bij een groeiend aantal websites mogelijk om de lettergrootte waarin de tekst wordt getoond, direct aan te passen aan de voorkeuren van het moment.

Statistieken
Uit een 120.000 page-views omvattend onderzoek, uitgevoerd door ClickTale, in de periode november tot december 2006(!) zijn de volgende cijfers te halen:

•    91% van de page-views had de beschikking over een scroll-bar.
•   76% van de page-views mét een scroll-bar, gebruikte deze ook om te scrollen.
•    22% van de page-views die van de scroll-bar gebruik maakten, scrollde door tot aan de onderkant van de pagina.

Meer en uitgebreidere gegevens zijn beschikbaar via een recenter ClickTale onderzoek uit 2007, bekijk hier deel 1 en deel 2.

Voor 98% van de gebruikers die beschikken over een scrollbar blijkt de pagefold géén belemmering om de informatie onder de pagefold te bekijken. Ook blijkt uit het onderzoek dat de lengte van de webpagina nauwelijks van invloed is op de beslissing om wel of niet scrollen.

Is de pagefold daarom onzin?
Nee. Het is niet overbodig om bij het ontwerp van een website rekening te houden met een pagefold. Om de aanvullende informatie te bekijken, is er immers een extra handeling nodig en dus een extra drempel voor de gebruiker. Vooral bij webshops lijkt een bestelknop boven de paginavouw wel degelijk te zorgen voor meer conversie.

Maar niet alleen bij webshops is het aanbrengen van een hierarchie in de informatie van belang. Naar mate de hoeveelheid informatie toeneemt, gaat een gebruiker sneller filteren. Door belangrijke informatie of een verwijzing naar meer informatie boven de paginavouw te plaatsen, hou je de aandacht van de bezoeker langer vast.

Advies bij het ontwerpen van een webpagina
1. Probeer niet dé pagefold te vinden, die is er niet omdat de gebruiker teveel mogelijkheden heeft de pagefold zelf te beïnvloeden.
2. Denk goed na over een duidelijke hierarchie en structuur in de informatie. Wat is écht belangrijk en welke content kan na scrollen of doorklikken ook prima worden weergegeven.
3. Zorg ervoor dat een gebruiker snel doorklikt of scrollt als er meer informatie beschikbaar is. Hou het échte doel van een webpagina in de gaten. Voor een homepage en een productoverzicht is dat meestal doorverwijzen i.p.v. uitgebreid informeren.

Nuttige links en bronnen
ClickTale Blog – Unfolding the Fold
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/

Boxes and Arrows – Blasting the Myth of the Fold
http://www.boxesandarrows.com/view/blasting-the-myth-of

Wikipedia – Above the Fold
http://en.wikipedia.org/wiki/Above_the_fold

Jakob Nielsen – Screen resolution and Page Layout
http://www.useit.com/alertbox/screen_resolution.html

Boagworld – 10 techniques  for an effective ‘Call to Action’
http://boagworld.com/design/10-techniques-for-an-effective-call-to-action

UIE Brain Sparks – Utilizing the Cut-off Look to Encourage Users To Scroll
http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/

Vragen en of opmerkingen
Mocht je vinden dat bovenstaand artikel onvolledig is of onjuist? Laat het me weten door een reactie hieronder te plaatsen. Ook relevante links naar vergelijkbare informatie zijn erg welkom!

Een verkorte versie van dit artikel is ook terug te vinden bij Idealize.nl (Platform rondom vernieuwing in Nederland).