24. Paginalay-out

De vormgeving van een webpagina speelt een grote rol in de mate waarin een bezoeker een taak goed kan afronden. Een overzichtelijke lay-out maakt het uitvoeren van een taak veel makkelijker. Verder moet je er als redacteur rekening mee houden dat de de weergave verschilt per beeldscherm (mobiel of desktop).

Omslag van ''

24.1 Verschillen in de lay-out bij de bezoeker

De vorm waarin een website bij de bezoeker wordt getoond hangt af van de soft- en hardware die hij gebruikt. In elke situatie ziet de website er weer anders uit. Dit is het grote verschil tussen een website en bijvoorbeeld een brochure. Bij een brochure is er 1 vorm, namelijk de vorm die de brochure heeft als hij is gedrukt. Het product is onveranderlijk. Bij een website is het product in feite een co-productie tussen zender en ontvanger: de ontvanger bepaalt mede het eindproduct, het uiterlijk van de site.

De vormgever en de webbouwer moeten er voor zorgen dat de site goed werkt:

  • in verschillende browsers (zoals Firefox, Chrome, Safari, Microsoft Edge, en Opera)
  • op verschillende beeldschermen (hoge en lage resoluties, tablets, mobiele telefoons)
  • in verschillende besturingssystemen (Windows, Apple, Chrome OS, Linux)
  • bij spraakuitvoer en braille-uitvoer
  • bij lage verbindingssnelheden
  • enzovoort

En aan jou de taak om jouw website hierop te testen. Zorg daarom dat je op je werkplek toegang hebt tot in ieder geval verschillende browsers en een aantal testtools.

Opmerking:
Verschillende testtools bespreken wij in ons e-book Webtechniek voor niet-techneuten.

24.2 Responsive: verschillende lay-outs voor verschillende beeldschermgroottes

Beeldschermgroottes

De lay-out van een webpagina verschilt vaak per beeldscherm. Zo'n lay-out heet dan responsive. Als de beeldschermgrootte onder een bepaald aantal pixels komt, krijgt de browser via de css een andere vormgeving aangeboden. Het punt waarbij de lay-out wordt aangepast, heet het breekpunt (breakpoint). In het algemeen kijk je naar:

  1. desktop
  2. tablet, staand
  3. tablet, liggend
  4. mobiel, staan
  5. mobiel, liggend

Test je website op deze beeldschermgroottes.

Menu

Vaak is het menu op een mobiel anders dan in desktopweergave. Veel sites bieden een zogenaamd hamburger-menu, 3 liggende streepjes. Zie hieronder.

Hamburgermenu bij de provincie Gelderland

Een hamburger-menu blijkt niet altijd duidelijk. Ook herkennen veel mensen het hamburger-icoontje niet. Als je het wel gebruikt, zet er dan de tekst 'Menu' bij.

Verder lezen? Zie Hamburger Menus and Hidden Navigation Hurt UX Metrics - Nielsen Norman Group

Sommige sites bieden altijd het hamburger-menu, ook bij de weergave op een desktop. Dat is niet nodig, bied voor desktop het gewone menu aan.

Het is ook mogelijk om een aangepast menu te gebruiken zonder hamburger. Daarvoor hebben wij gekozen op onze website. Op basis van onze bezoekersstatistieken weten we dat de onderwerpen trainingen, e-books en artikelen het meest bekeken worden. Die staan in het mobiele menu. Onder de knop "meer" staan de onderdelen die minder populair zijn.

Alternatief voor hamburgermenu in mobiele weergave

Verschillende content voor desktop en mobiel? Niet doen

Het lijkt soms handig om voor mobiel wat minder informatie te bieden dan voor desktop. Het probleem is dan echter dat iemand die jouw site mobiel bekijkt en jou via Google vindt, de content niet kan vinden. Voor de bezoeker is dit verwarrend. Kies daarom voor dezelfde content op desktop én mobiel.

Decoratieve afbeeldingen kun je in een mobiele weergave wel weglaten, zoals een headerfoto.

24.3 Indeling webpagina

Vrijwel elke webpagina bevat de volgende 5 onderdelen:

  • een header: de bovenkant van de pagina
  • een logo: vaak staat dat links, soms rechts
  • de content: het onderwerp van de pagina
  • een footer: deze begrenst de pagina aan de onderkant
  • een menu: vaak boven of links (soms rechts) van de content

De weergave is vaak op een desktop anders dan op een mobiel of tablet.

Header

De header bevat de corporate elementen van de organisatie, zoals het logo en de pay-off. De header is qua uitstraling vaak voor elke pagina in de hele site gelijk. Hieronder een voorbeeld van de header van de Nielsen Norman Group (kader met groen gearceerde lijn).

Header, kader met groen gearceerde lijn, bron: Nielsen Norman Group

De header is vaak de plek waar organisaties willen zenden, dus bijvoorbeeld een grote foto willen plaatsen. Doe dat liever niet. Maak de header ook voor desktop zo klein mogelijk, bijvoorbeeld maximaal 100 pixels hoog. Voor mobiele weergave kan deze vaak nog kleiner.

Andere algemene functies zitten ook vaak in de header geplaatst, zoals:

  • het inlogdeel
  • de zoekfunctie
  • de taalkeuze

De meest gebruikelijke plaats in desktopweergave voor al deze 3 functies is rechtsboven. Heb je ze alle 3, dan is het wel een uitdaging om ze alle 3 toch een zichtbare plaats te geven. Voor mobiel lukt dat meestal niet en dan staan ze in het uitklapmenu.

Het logo staat links, soms rechts, soms in het midden (rijksoverheid). Het is aanklikbaar en de link leidt naar de homepage van de site. De beste plek blijkt volgens onderzoek van de Nielsen Norman Group nog altijd linksboven.

Contentdeel

Het contentdeel bevat alles wat inhoudelijk direct met het onderwerp te maken heeft. We noemen het ook wel de primaire content.

Het contextueel begint altijd met de titel (met opmaak h1). Deze is qua vormgeving ook herkenbaar als titel: vaak groter, soms andere kleur of vetgedrukt.

Vaak is er ook een broodkruimelpad. Het laat de positie van de pagina in de inhoudsstructuur van de site zien. We noemen dit broodkruimelpad ook wel de secondaire navigatie.

Omdat dit broodkruimelpad bij de content hoort, maar toch geen primaire content is, staat het direct boven de titel. En niet eronder en ook niet ver erboven in de header.

Er zijn enkele sites die de titel in het broodkruimelpad plaatsen. Dit is een onlogische keus. Voor de oog ontbreekt de titel.

Op de website defensie.nl (okt 2023) lijkt de titel te missen. Deze is 'verstopt' in het broodkruimelpad. Ook de zoekfunctie zit verkeerd, die zit nu onder de titel, in het contentdeel.

Het contentdeel bestaat in desktopweergave vaak uit een linkerkolom voor de gewone content en een rechterkolom voor gerelateerde of andere informatie. Steeds vaker staat de gerelateerde informatie onder de content. Soms staat het menu ook links. Dan staat de content in de middenkolom.

Hieronder een voorbeeld van het Nibud (Geldzaken tijdens de studie), met in de rechterkolom gerelateerde informatie (Studiefinanciering).

Contentpagina met rechts gerelateerde informatie, nibud.nl

In de tablet en mobiele weergave is het bijna altijd 1 kolom. Ook bij het Nibud:

Mobiele weergave bij het Nibud

Footer

De footer staat onderaan de pagina en is vaak ook op elke pagina gelijk. Het bevat soms ook nog een menu (ondermenu). In dit menu staan items die voor de bezoeker van minder belang zijn, zoals een disclaimer en een sitemap.

Soms is de footer uitgebreid en fungeert het als een sitemap, zoals in het voorbeeld hieronder. Dit noemt men een fat footer. Deze fat footer lijkt intussen alweer op zijn retour, op veel sites zijn ze weer weggehaald.

Fat footer

Menu

Het menu staat in desktopweergave meestal bovenaan (horizontaal menu) of links (verticaal menu).

Trend: vooral minder

De bovengenoemde elementen van een pagina zijn tegenwoordig niet meer zo vanzelfsprekend. De laatste jaren zijn websites steeds eenvoudiger in opbouw geworden. Minder is het credo. Dat zie je ook in de lay-out van pagina's:

  • Veel sites hebben geen menu meer, zoals de gemeente Vught.
  • Het broodkruimelpad is vaak weggelaten, zeker als de site niet erg ingewikkeld is, zoals onze site.
  • Het contentdeel is vaak slechts nog 1 kolom, zie de pagina Paspoort op Venlo.nl.
  • De fat footer is grotendeels weer verdwenen.

24.4 Gestaltprincipes

Hoewel websites nog maar kort bestaan, gelden voor de waarneming daarvan oeroude wetten. Rond 1930 hebben enkele wetenschappers onderzocht hoe mensen waarnemen. Op basis daarvan hebben zij enkele 'waarnemingswetten' opgesteld, de zogenaamde Gestaltprincipes of Gestaltwetten. Ze beschrijven de wetmatigheden van hoe wij waarnemen. Deze wetenschappers – zoals Max Wertheimer – hielden zich bezig met vragen zoals:

  • Waarom zie we het ene als voorgrond en het andere als achtergrond?
  • Hoe kan het dat we vormen kunnen onderscheiden?
  • Hoe en waarom zien we samenhang tussen dingen?
  • Welke eigenschappen van een ding zorgen ervoor dat we het kunnen onderscheiden van andere dingen?

De Gestaltpsychologen gingen ervan uit dat de waarneming van objecten niet primair wordt bepaald door een optelsom van de delen, maar door het geheel. Mensen nemen niet waar zoals een fototoestel, maar maken in de hersenen een voorstelling (representatie) van wat ze zien.

We bespreken hier 3 principes:

  • Principe van Nabijheid (Law of Proximity)
  • Principe van Geslotenheid (Law of Closure)
  • Principe van goede Continuïteit (Law of Continuation)

Principe van Nabijheid (Law of Proximity)

Dingen die zich dicht bij elkaar bevinden, zien we als groep. Dingen die zich ver van elkaar bevinden, zien we als losstaand.

Hieronder een voorbeeld waarbij de rondjes bij A als 1 geheel gezien worden, en de rondjes bij B en C als losstaand.

Principe van nabijheid

We zien soms in formulieren dat dit mis gaat, bijvoorbeeld in de afstand van de tekst bij een invoerveld. Hieronder staan 2 afbeeldingen van een formulier. Links zie je dat de afstand tussen de tekst en het bijbehorende invoerveld even groot is als met de tekst eronder die bij het andere invoerveld hoort. Het is daardoor iets minder duidelijk bij welk veld de tekst hoort. Rechts zie je dat de afstand tussen tekst en invoerveld kleiner is, waardoor het direct aan elkaar gekoppeld zal worden.

Nabijheid bij de velden van een formulier

Principe van Geslotenheid (Law of Closure)

Niet-complete vormen worden op een logische wijze compleet gemaakt. Hieronder maken we dit duidelijk met 2 tekeningen. Links zie je waarschijnlijk een cirkel. Het is geen complete cirkel, er missen stukjes, maar ons brein completeert dit automatisch zodat we een cirkel waarnemen. Rechts staan losse lijntjes die je waarschijnlijk waarneemt als een rechthoek.

Principe van Geslotenheid: incomplete vormen maken wij compleet

Een mooi voorbeeld van dit principe zie je in het logo van het Wereld Natuur Fonds. Onze waarneming maakt van de zwarte vlakken een pandabeer.

Principe van geslotenheid zichtbaar in logo Wereld Natuur Fonds

Voor het web zie je dit vaak terug bij de wijze waarop een header is vormgegeven. Hieronder zie je een 1e schets van de vormgever voor de website van de Stichting Aap. Het menu staat boven de header. Uit gebruikerstesten die wij uitvoerden, bleken mensen dit menu niet te zien. In het definitieve ontwerp werd het menu onder de headerfoto geplaatst en toen zagen de proefpersonen wel het menu. Blijkbaar werkt de header als een afsluiting en starten mensen met het lezen onder de header.

Menu boven de header (concept, www.aap.nl, najaar 2008)
Menu onder de header (definitieve versie, www.aap.nl, najaar 2008)

Een ander voorbeeld stond op de website van de PO-raad.

Principe van geslotenheid: titel is afgescheiden van de tekst van het artikel

De titel van het artikel (Het jonge kind – Portret van Stichting Prodas) staat in een rood vlak, de tekst van het artikel in een wit vlak. Door deze vormgeving lezen bezoekers de titel niet, onze waarneming laat ons starten in het witte vlak.

Het Principe van goede Continuïteit (Law of Continuation)

Visuele elementen die op een lijn liggen zien we als meer gerelateerd dan wanneer ze niet op 1 lijn liggen. Wanneer elementen goed zijn uitgelijnd, ervaren we dit als rustiger.

Op de oude website van de Algemene Rekenkamer zien we dit goed terug. Als je lijntjes trekt om de verschillende contentelementen zie je dat de lijntjes niet overeenkomen. Je kunt heel veel lijntjes trekken. De uitlijning is niet goed en dit geeft een onrustige vormgeving.

Onrustige vormgeving door slechte uitlijning
Naar boven