Scriptorama.nl

Header image showing a keyboard, mouse, laptop and books on design patterns

Help je bezoekers aan een scroll-vinger

Internet begint steeds belangrijker te worden. Ontwierpen reclamebureaus vroeger vaak alleen de flyers en folders voor een bedrijf, tegenwoordig komt daar ook de website bij. Bij het ontwerpen van een website komen echter hele andere aspecten kijken. Een flyer zal altijd in dezelfde vormgeving en op dezelfde manier weergegeven worden. Bij een website ben je echter afhankelijk van de browser waarin het getoond wordt. Doordat het een heel ander medium is, komen er hele andere ontwerp aspecten bij kijken.

In de reclame branche is vaak een gebrek aan kennis op dit gebied. Het gevolg is dat websites vaak als een flyer gepresenteerd worden. De website heeft een vaste hoogte en breedte, waardoor er minder ruimte is voor de werkelijke informatie op de pagina. Roger Johansson deelt deze websites in zijn artikel Let your users scroll in twee categorieën in:

  1. Websites waarbij de inhoud in korte fragmenten gehakt wordt en er dus veel pagina's met weinig inhoud zijn.
  2. Websites die wel lange inhoud willen tonen en daardoor binnen de website een scrollend vlak aanbrengen.

Beide categorieën zorgen ervoor dat de toegankelijkheid van de website minder wordt. In het eerste geval zullen bezoekers onnodig veel moeten klikken om een volledig verhaal te kunnen lezen. Zelf ben ik wel een voorstander van beknopte informatie op een website, maar zodra de inhoud afhankelijk wordt van de layout gaat het de verkeerde kant op.

Het tweede geval haal je de scrollbalk van de rechterkant van het scherm naar binnen de layout. Op deze manier haal je een basis element van de browser interface weg van een logische positie. Mensen zullen meer moeten zoeken naar de scrollbalk binnen de layout. Het wordt alleen maar erger zodra de scrollbalk wordt vervangen door een JavaScript variant omdat op die manier de layout nog meer gecontroleerd kan worden.

Het is natuurlijk heel interessant om alle gegevens boven The Fold te houden. Volgens een artikel van William Weinman is uit een studie gebleken dat gebruikers heel weinig of zelfs helemaal niet scrollen. Daarom zouden belangrijke gegevens van een pagina in de eerste 600 tot 700 pixels moeten staan. Dat betekend echter niet dat de hele pagina maar 700 pixels hoog mag zijn.

Natuurlijk zullen de "vaste afmetingen websites" niet alleen gemaakte worden door onkunde in webdesign, maar door bepaalde keuzes die ontwerpers maken. Een interessant voorbeeld hiervan is afkomstig van Ethan Kaplan:

The argument was whether or not the page should scroll. Creative (understandably) wants the pretty headers to remain up top the entire time, and have static visual elements. My self and the tech team wants to conform to the user interface that is given and the expectations of the user. It boils down to Human Computer Interaction. Scrolling is an endemic paradigm, not something we should subjugate for the purpose of aesthetics.

Hieruit blijkt maar weer welke kloof er nog steeds bestaat tussen de creatieve mensen en de technische mensen. De creatieve mensen proberen creatief te zijn en 'outside the box' te denken. Alleen verliezen ze hierbij soms het medium uit het oog. Er valt namelijk helemaal niets te zeggen over de manier waarop de website bekeken wordt, dus moet je dat zo weinig mogelijk van tevoren vast proberen te leggen. Een vaste hoogte en breedte gaat in veel gevallen te ver.

Ik daag de reclamebureaus uit om ook eens 'outside the box' te denken en werkelijk buiten de 4 rechte lijnen van een fixed-size website te gaan denken.

Reageer ook!

Ook een bepaald gegeven is de eerste informatie interessant moet genoeg moet zijn om de lezer te loken naar de rest van de pagina.

Zo staat bij naarvooren.nl een artikel over goede text samen stellen, je moet ze door de alinea heen begeleiden...

Zo leest de bezoeker zonder dat deze het door heeft, gewoon door en gaan zo toch automatich scrollen.
Ik heb één website gemaakt met inline scrolling en dat werkt... voor geen meter!(Redesigning is in de planning)

Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>