29 dec2006

Over de “vouw” en scrollen op webpagina’s

  • reageren (14)
  • bookmark
  • e-mail
  • afdrukken
X
X
  • Plaatsen/stemmen op NUjij
  • Geef kudos

vouw papieren vliegtuigjeDe vraag of gebruikers wel of niet scrollen op webpagina’s houdt webdesigners en usability goeroe’s al lang bezig. De vouw op een webpagina is dezelfde als de vouw in de krant: het stuk dat de lezer kan zien zonder de krant om te slaan of de webpagina te scrollen.
De vraag: vinden gebruikers scrollen fijn? Scrollen ze überhaupt wel? En moet je dus alle “belangrijke” content boven de vouw plaatsen? En waar ligt die vouw eigenlijk?

Jakob Nielsen schrijft in zijn laatste boek “Prioritizing Web Usability” dat slechts 23% van zijn testgebruikers scrollen op de homepage. 42% scrollt op content pagina’s. Daaruit is te concluderen dat je maar beter kunt zorgen dat alle must-see content boven de vouw komt te staan. Dat is ook wat ik zou aanraden op basis van mijn ervaring. Maar het mag wellicht iets genuanceerder…

Enter ClickTale, een web analytics startup in beta die zegt video’s te kunnen maken van gebruikersgedrag op je website. Dat is op zich niets nieuws, het pakket Speed-Trap Prophet waar ik veel mee werk kan dat ook. Dat is alleen behoorlijk prijzig en omvat nog heel erg veel meer tools voor webstats analyse. ClickTale gaat dus (zoals ik het nu kan zien) de feature isoleren waarmee je op basis van javascript klik- en scrollgedrag video’s kunt maken. En om hun dienst alvast een steuntje in de rug te geven, schrijven ze op hun weblog artikelen als Unfolding the Fold.
Matthijs van Sitestone schreef er ook over en concludeert dat scrollen niet langer een “probleem” is. Dat gaat mij, net als veel van het stuk van ClickTale, te ver.

Een paar van de conclusies die getrokken worden, om aan te tonen dat scrollen en de magische vouw geen grote issue zijn:

De grootste groep gebruikers (22%) scrollt de hele pagina

vouw clicktale relative scrollreach

ClickTale schrijft hierover:

As shown in the previous section, visitors do scroll to the bottom of the page. But are they less likely to scroll to the page bottom if the page is really long? The answer is no, as can be seen in the next set of charts […] Visitors are equally likely to scan the entire page no matter the page size.

Dat deze groep het grootst is komt natuurlijk doordat veel gebruikers simpelweg een zwengel aan hun scrollwiel geven en dan snel bij het einde uitkomen. De conclusie dat 78% van de gebruikers niet “de hele pagina” scrollt is net zo nutteloos. Het probleem van alle metingen van ClickTale is dat niet vast te stellen is of mensen de hele pagina lezen, of dat 90% zien net zo nuttig is als 100%. Wat mij betreft heeft kwantitatieve analyse hier dus erg weinig zin.

Gebruikers scrollen (on)afhankelijk van pagina grootte (lengte)

vouw clicktale 90 procent
Uit deze grafiek blijkt dat elke pagina hoogte evenveel (geen of veel en alles er tussenin) invloed heeft op al dan niet scrollen door een gebruiker. Dat kan erop duiden dat mensen altijd scrollen, als de pagina daarom vraagt.

Maar het kan er net zo goed op duiden dat 70% van de gebruikers geen idee heeft dat ze kunnen scrollen, hoeveel of weinig er ook gescrolld kan worden.

De vouw zit altijd ergens anders!

vouw clicktale distributie hoogte

ClickTale schrijft:

As you can see, the fold location is concentrated around three peak areas. The peaks are located at about 430, 600 and 860 pixels. Do you recognize these sizes? No? These fold sizes correspond to the three most popular screen resolutions used today: 800×600, 1024×768 and 1280×1024. Except that they are missing about 170 pixels that correspond to the most common size of the non-client area of the browser. The dispersion around these peaks is accounted for by variations in screen size, window size, browsers and browser add-ons. Newer, wide screen formats add even more dispersion to the distribution of the fold. Note that the highest peak, located at 600 to 610 pixels, accounts for less that 10 percent of the folds. So, where is the fold? It’s all over the place!

Deze data toont aan dat de grootste gemene deler in de plaats van de vouw, op 610 pixels ligt. Maar slechts 10% valt binnen deze categorie. ClickTale concludeert daarom dat het geen zin heeft om je webpagina te optimaliseren voor de vouw. Die zit immers toch op een onvoorspelbare plek.

Je moet volgens mij een andere conclusie trekken. Als een substantieel deel van je gebruikers een schermresolutie van 800*600 pixels heeft, ligt je “boven de vouw” dus op maximaal 400 pixels. Als je de 800*600 pixels gebruikers kunt verwaarlozen, moet je rekening houden met 530 pixels maximale hoogte. Dat er veel mensen zijn die 540, 550, 560, etc. pixels kunnen zien, doet daar helaas weinig aan af.

Conclusie: de vouw blijft gevouwen, scrollen is wel een issue

Zoals Jakob Nielsen en ClickTale beide beweren: veel gebruikers scrollen niet. De pagina grootte of de schermresolutie hebben hier geen invloed op.

Natuurlijk is op elke site en bij elke gebruiker het gedrag anders. Natuurlijk hangt het van de manier van vormgeven en interactie ontwerpen af, of en hoe je rekening moet houden met scrollen en de vouw. Maar bij usability is de uitdaging juist om niet te proberen het perfecte ontwerp te maken. De uitdaging is om een ontwerp te maken dat werkt, onafhankelijk van al die variabelen.

Dat betekent, met betrekking tot de vouw, het volgende:

  • Zorg dat elementen die essentieel zijn voor de taak van de gebruiker op deze pagina, boven de 400/ 500 pixels liggen.
  • Zorg dat gebruikers op elke resolutie met elke schermgrootte kunnen zien dat er gescrolld kan worden.
  • Bekijk je webpagina’s dus op 380, 390, 400, …, 890 en 900 pixels hoogte. Beoordeel dan of er geen essentiële onderdelen “verstopt” worden.
  • Probeer niet je hele website in 400/ 500 pixels te proppen (zegt ClickTale ook, terecht).

Tot slot kunnen we uiteraard concluderen dat het in de praktijk brengen van deze “regels” misschien wel onmogelijk is… Moeten we de vouw dan maar vergeten? Moeten we er voor de zekerheid maar vanuit gaan dat elke pagina goed moet werken op een waardeloos klein scherm waar bijna niemand meer mee werkt?

(Foto van vliegtuigje door DragonWoman op Flickr)

Popularity: 15% [?]

Reacties (14)

Reageren
  • Ruben, goed artikel. Je hebt gelijk dat een generaliserende conclusie in dit geval weinig zin heeft. Zoveel is context afhankelijk. Om wat voor bezoeker gaat het? Om wat voor pagina? Er is bijvoorbeeld een groot verschil tussen een homepage die in enkele seconden een duidelijk overzicht moet bieden en een dieper liggende pagina met een uitgebreid artikel over een specifiek onderwerp. Waar ik zelf bijvoorbeeld een hekel aan heb is als een interessant (lang) artikel in 8 stukken geknipt is en je iedere keer weer naar de volgende pagina moet klikken. Als je dan ook nog op het laden van alle advertenties moet wachten …

  • Een punt dat hier niet aan de orde komt is dat een gebruiker ook in een oogopslag moet zien dat er meer is dan het eerste schermvol. Voorkom dus bijvoorbeeld ‘witruimte’ die over de hele breedte doorloopt of juist schijnbare afsluitende elementen, zeker tussen de ca. 400-600 pixels. Een vouw die halverwege een tekst- of beeldelement ligt is niet mooi, maar helpt de gebruiker wel op weg.

  • Raymond: goed punt, helemaal mee eens. Het lastige daarvan is echter dat je moeilijk kunt bepalen wat een gebruiker ziet, dus ook of hij het onterechte gevoel krijgt dat de pagina ophoudt.
    Heb je een idee hoe je in vormgeving ervoor kunt zorgen dat je altijd ziet dat er nog meer content is? Ik denk bijvoorbeeld aan een soort verticale lijn waarvan je ziet dat hij nog niet logisch is afgelopen ofzo…?

    Bij Jared Spool is inmiddels een aardige discussie op gang gekomen over de vouw op webpagina’s en de vraag of gebruikers wel of niet willen scrollen.

  • Goed artikel. Wel vervelend dat ik op deze pagina zo veel moet scrollen….

  • Lexapro….

    Lexapro….

  • […] voorwaarden, en eigenlijk het echte product, worden verborgen in onleesbare tekst. Die tekst staat ruim onder de vouw, waardoor de meeste gebruikers hem niet eens […]

  • Interessant artikel, al is het wel een oudje. Heb je site net ontdekt en er staan veel interessante artikelen op. Om even terug te komen op deze vraag: Heb je een idee hoe je in vormgeving ervoor kunt zorgen dat je altijd ziet dat er nog meer content is?

    Het gebruik van kolommen (bijv 2 sidebars) is daar natuurlijk een ideale oplossing voor. Mocht een witruimte in het content vak net op de vouw vallen, zie je altijd nog aan de overige kolommen dat je verder kan scrollen. Je moet er dan wel voor zorgen dat er zinvolle informatie in die kolommen staat zodat de bezoeker ook getriggerd wordt om daadwerkelijk verder te scrollen.

    Ik scroll overigens altijd, maar merk daarbij wel dat ik de informatie vluchtig scan.

  • je beweert dat “de grootste groep (22%) wel de hele pagina scrolled “. Betekend dit niet gewoon dat 78% dat dus kennelijk niet doet.

  • Vraagje: Ja, maar let wel op dat het om de “hele” pagina gaat. Zoals je in de grafiek kunt zien scrollt bijna iedereen wel een stukje, maar het percentage verschilt.

  • Bijna 3 jaar later en het onderwerp blijft actueel.

    Zo beweert cxpartners op http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm stellig dat rekening houden met de vouwlijn overbodig  is, want mensen scrollen toch. Meer nog: “minder boven de vouwlijn plaatsen kan mensen aansporen te scrollen.” Ja hallo. Zo kan ik er ook eentje uitvinden: “de belofte van een foto van een lekkere blondine onderaan de pagina, kan mensen aansporen te scrollen.”

    In een artikel op onze blog proberen we duidelijk te maken wanneer lange pagina’s kunnen en wanneer best niet.  http://usability-blog.be/paginavouw-feit-of-fictie/

  • Wanneer bezoekers in het top gedeelte niet kunnen vinden wat ze zoeken gaan ze toch vaak automatisch scrollen? Ik zelf scroll liever iets meer op een pagina die ‘optisch’ netter is opgemaakt (met ‘white space’:) dan wanneer alles op elkaar gepropt moet staan boven de veronderstelde pagina vouw. Interessant gegeven is dat beeldschermen steeds vaker widescreen zijn (16:9, 16:10). Usability/interaction designers zouden met programmeurs kunnen onderzoeken of dit misschien handigere dynamischere pagina layouts kan opleveren waarbij de pagina breedte beter benut kan worden in plaats van alles onder elkaar te plaatsen.

  • @T.Geerts,

    Ja ze scrollen, maar niet automatisch. Sommige verlaten de website voortijdig.

    Alles volproppen boven de fold is niet het issue. Het gaat erom dat je de scherm elementen prioriteiten geeft en de belangrijkste informatie bovenaan zet.

  • @Edwin,

    Ik vind het altijd een ‘gekke aanname’ om zomaar te denken dat mensen meteen weggaan en geen moeite willen doen voor iets wat ze doelgericht zoeken. Als je als bezoeker al geen poging doet om iets te vinden… Vergelijk het maar met een bijenkorf waar je binnenkomt. Als je niet in 2 seconden vind wat je zoekt, loop je de winkel dan weer uit?

    Ik ben het overigens wel eens met het prioriseren van beeldscherm elementen in de main view en dat de belangrijkste informatie bovenaan moet/kan staan.
    Vaak is het weergeven van ‘koptitels’ boven de vouw al genoeg hint dat er toch iets gescrolled moet worden.

  • @T.Geerts,


    Een combinatie van factoren is hier de oorzaak van. Op de eerste plaats moet de website scroll like zijn.

    Veel websites hebben de perceptie tegen en bij deze lijkt het of er niets te scrollen valt. Gevolg: een deel van de mensen verlaat de website.

    Een ander issue is het ‘geur informatie spoor‘. Als die krachtig is, dan willen de meeste mensen wel inspanningen doen om de webpagina verder te verkennen, o.a. door te scrollen.

    Als zij echter niets ‘ruiken‘ dan zijn ze weg.

    Mensen lezen een webpagina écht niet van A tot Z of van links boven tot rechts onder.

Reageer

(zal niet zichtbaar zijn)