Scrollen is het nieuwe klikken

Scrollen is het nieuwe klikken

15 juli 2015

Een webdesign maken waarbij alle informatie ‘boven’ de vouw staat, is niet meer toepasbaar. We leggen je in deze blogpost uit waarom we de ‘vouw’ moeten loslaten en het 'scrollen' moeten omarmen.

Voor onze online vakbroeders natuurlijk niets nieuws meer, maar voor een opdrachtgever kan het best even wennen zijn: langere webpagina’s waar je doorheen moet scrollen! Dat is niet zo gek wanneer je bedenkt dat de oude website vaak nog uit een periode stamt dat er een ‘ boven de vouw’ en ‘onder de vouw’ bestond.

We nemen je mee in onze ‘scrolvisie’ aan de hand van de volgende punten:

1) Het gaat nooit meer boven de vouw passen

Er zijn tegenwoordig veel verschillende schermformaten (waarvan heel veel ‘kleine’ schermformaten). Er zijn meer dan 300 verschillende vouwen te definiëren (niemand weet het precieze aantal). Om tot een goed ontwerp te komen, moeten we loslaten dat alles op de bovenste helft van het scherm zal passen (van welk scherm dan?). Hoe te beginnen met loslaten?


Laat het eigen schermformaat los
Een valkuil is om de eigen internetbeleving als ‘de standaard’ te zien waaraan de nieuwe website moet voldoen. Naast dat je met een ander gebruiksdoel naar je eigen website kijkt dan dat de gebruiker doet, heb je waarschijnlijk ook een ander formaat desktopbeeldscherm en een ander type mobiele telefoon binnen handbereik. Zo begin je met het loslaten van je eigen schermformaten:

  • Kijk naar de webstatistieken en identificeer de meest gebruikte schermformaten. Maar staar je daar ook weer niet helemaal blind op: elke maand komt er weer een nieuw device met nieuwe schermformaten op de markt.
  • Installeer op je browser een handige add-on om te schakelen tussen verschillende schermformaten. Denk bijvoorbeeld aan de Chrome add-on Window Resizer

Bovenstaand de Add-on in actie

Laat überhaupt schermformaten los
Met de komst van steeds meer verschillende schermformaten kun je het schermformaat niet meer centraal stellen in het ontwerpproces. Waarom niet?

  • Het is praktisch (en budgettair) niet meer haalbaar om in je ontwerp rekening te houden met alle schermformaten van smartphones, tablets, netbooks, laptops en desktops. Kijk maar eens op deze website met schermformaten
  • Je kunt niet meer gokken op de 3 populairste schermformaten omdat het landschap enorm versnipperd is. Dit zie je vooral bij smartphones en in toenemende mate bij tablets.
  • Wanneer je een website bouwt voor de komende 3 jaar, moet het design ook goed tonen op ‘nieuwe’ nog onbekende schermformaten.

Deze ontwikkelingen zorgen ervoor dat we niet meer op een statisch canvas kunnen ontwerpen, maar vanuit een flexibel en schaalbaar systeem moeten ontwerpen. De elementen waarmee de website is opgebouwd, moeten zich op een bepaalde manier rangschikken en aanpassen zodat het op elk scherm goed oogt. Dit uitgangspunt wordt toegepast bij een ‘responsive’ design.

 

Onze testopstelling om het responsive ontwerp op te testen (8 verschillende vouwen)

2. Scrollen is het nieuwe klikken

Naar beneden ‘scrollen’ of ‘swipen’ is op dit moment een natuurlijk gedrag van website-gebruikers. Er zijn enorm veel onderzoeken naar gedaan (en artikelen over geschreven) die dit ondersteunen: neem eens een kijkje op Google. Een mooie samenvatting vonden wij op UXMYTHS

Waarom vinden mensen scrollen (of swipen) zo prettig?

  • Scrollen is voor veel mensen sneller dan klikken.
  • Scrollen is gemakkelijker dan klikken omdat je de muis niet naar een precies punt hoeft te bewegen.
  • Scrollen is natuurlijk omdat het de leesbeweging ondersteund .
  • Wanneer je kunt scrollen en kunt klikken op een website, wordt het verschil voor de gebruiker duidelijker tussen: het binnen hetzelfde onderdeel blijven (scrollen) en naar een ander onderdeel toe springen (klikken).
  • Wanneer je uitgaat van een scrolbeweging, kun je webpagina’s langer maken. Dit zorgt ervoor dat je de website minder gelaagd hoeft aan te bieden. Voor veel gebruikers wordt een website daarmee overzichtelijker (minder een doolhof).


Waar moet je bij je ontwerp rekening mee houden?

Bij het ontwerpen van een lange pagina kun je rekening houden met het volgende:

  • Minder content boven de vouw stimuleert dat de gebruiker naar beneden zal scrollen.
  • Geef in je ontwerp signalen af waarmee je aangeeft dat de pagina langer is.
  • Wek niet de indruk dat de gebruiker bij de ‘footer’ is aangekomen wanneer hij dat niet is. Gebruik geen sterke horizontale lijnen en laat niet te grote gaten ontstaan.
  • Biedt ondersteuning aan met bijvoorbeeld een navigatie die meebeweegt en aangeeft op welk onderdeel binnen de pagina je bent. Dit hebben we toegepast bij de website van de Brandgrens.
  • Stel bij het ontwerpen van de experience de scrol scentraal. Wat bieden we aan bij scrol 1, scrol 2, scrol 3 etc. Je kunt hier bijvoorbeeld het AIDA model op toepassen.

Attention en Interest: landing op de pagina
Desire: scrol 1
Action: scrol 2

Bovenstaand de ondersteunende navigatie voor het lezen van de langere pagina's op Brandgrens.nl

3. Denk ruim en groot

Denk ruim en groot omdat:

  • Het is prettig wanneer een lange pagina voldoende rust heeft en overzicht biedt. Tekst kan daar veel in betekenen: hier schreven we een andere blogpost over.
  • Een lange pagina moet ook een bepaald ritme hebben. Een smakelijke afwisseling van onderdelen om de scrollende User Experience sprankelend te houden. De gebruiker willen we niet in slaap sussen (een slapende gebruiker converteert slecht).
  • Groter en ruimer denken voor het ontwerp, is niet alleen belangrijk voor de opzet van een prettige lange pagina. Het is ook essentieel voor een ‘touch-friendly’ interface. Knoppen en tekst(links) moeten goed aangeraakt kunnen worden op een smartphone met een vinger.

De nieuwe opzet van de online Vrij Nederland. Een van de vele websites die in de loop der jaren meer wit, ruimere interlinie en een grotere fontsize is gaan gebruiken.