Footer 101: Wat moet je in jouw website footer zetten?

De footer, je vindt hem bijna op elke webpagina. In totaal verschillende vormen, afhankelijk van het type website. De footer krijgt vaak weinig waardering omdat het helemaal onderaan de pagina staat. 

Maar onderschat niet hoe gewend we zijn om informatie in de footer te vinden. Dingen zoals contactgegevens, de link naar een privacyverklaring en doordachte navigatie zijn belangrijk voor een behulpzame footer.

Laten we eerst kijken wat een footer precies is en welke rollen het vervult. Op basis daarvan bepalen we wat je in jouw footer moet en kan zetten.

Inhoud

  1. Wat is een footer?
  2. Hoe gebruiken mensen de footer?
  3. Welke onderdelen horen in de footer?
  4. Optionele footer onderdelen
  5. Overzicht houden met secties

Wat is een footer?

Laten we bij het begin beginnen. De footer is het onderste gedeelte van een pagina dat op elke pagina van de website herhaald wordt.

Grofweg bestaat een webpagina uit 3 secties: header, body en footer. De pagina begint met de header (menu plus logo). De body is de sectie tussen de header en de footer. De body bevat de unieke content van de pagina. 

De header en footer op een webpagina
VB. De header en footer van Dribbble. Alles ertussen is de body.

Terug naar de footer. Vaak bestaat een footer uit 2 delen

Het onderste deel is een dunne balk met de copyright regel en eventueel juridische links (e.g. privacyverklaring). Het bovenste deel kan veel verschillende elementen bevatten, zoals contactgegevens, navigatie, social media links, branding, zoekbalk, certificaten, etcetera.

De term “footer” komt uit de drukwereld. Daar is de footer een ontwerp-element dat op elke pagina van een document consistent terugkomt.

De footer van ChartMogul met 2 duidelijke deel
De uitgebreide footer van ChartMogul bestaat uit 2 duidelijke delen, gescheiden door een horizontale lijn.

Hoe gebruiken mensen de footer?

De footer wordt vaak ontworpen als nagedachte. De ontwerpfocus ligt op elementen boven de “vouw” — het deel van de pagina dat zonder scrollen in beeld is — omdat we daar de meeste tijd besteden, volgens onderzoek

Dat betekent niet dat de footer geen aandacht krijgt van bezoekers. In tegendeel, het heeft 2 belangrijke rollen. Volgens gebruikersonderzoek van Nielsen Norman Group en Baymard Institute bekijken we de footer voornamelijk in deze situaties:

  1. Gebruikers kunnen de juiste informatie niet vinden in de body van de pagina en scrollen naar de footer als laatste redmiddel.  
  2. Gebruikers scrollen opzettelijk direct naar de footer omdat ze daar de informatie die ze zoeken verwachten te vinden.      

Scenario 1: De footer als laatste redmiddel

Een goede footer kan als veiligheidsnet fungeren. Wanneer we een pagina doorlezen en de informatie die we zoeken niet kunnen vinden, werpen we vaak een kritische blik op de footer. We zien de footer als een laatste redmiddel voor moeilijk vindbare informatie.

Bijvoorbeeld, toen ik na mijn afstuderen op banenjacht was, spoorde ik vaak de footer van interessante bedrijven af voor informatie over vacatures, omdat ze “werken bij…” pagina’s doorgaans niet in de globale navigatie plaatsten.

De careers pagina in de footer van Hotjar
De Careers pagina van Hotjar is alleen in de footer te vinden.

Scenario 2: Bewust de footer opzoeken

Gebruikers scrollen soms ook rechtstreeks naar de footer, omdat het type informatie die ze zoeken doorgaans daar staat. We zijn getraind om dingen zoals een adres en privacyverklaring in de footer te verwachten.

Bijvoorbeeld, in dit Baymard onderzoek scrolden sommige gebruikers stug naar de footer voor informatie over verzendkosten en negeerden daarbij de content hogerop de pagina. Eén gebruiker zei: “I go to the bottom because that’s where it usually has all those things [like return policies]”.

Baat het niet, dan schaadt het niet

Hoewel deze scenario’s misschien niet de hoogste prioriteit hebben op jouw website, is een goede footer zeker de moeite waard. Juist omdat de footer onderaan de pagina ligt, zal het nooit in de weg staan voor bezoekers die hun behoeftes al hogerop de pagina vervuld hebben.

Zolang je jouw footer niet volpropt met dingen die de laadsnelheid vertragen (bv. een fotogalerij), geldt: Baat het niet, dan schaadt het niet.   

Welke onderdelen zet je in de footer?

De footer is dus een plek waar we bepaalde informatie verwachten te vinden, en kan als plek voor elders moeilijk vindbare informatie fungeren. Maar wat moet je nou precies in je footer zetten?

Laten we eerst kijken naar de onderdelen die de meeste footers horen te hebben, omdat bezoekers die informatie daar nou eenmaal verwachten.

Vaak bevat de footer helemaal onderaan een copyright regel. Dit is overgewaaid uit de Verenigde Staten. De meningen verschillen over hoeveel het toevoegt onder het Nederlandse recht (er is al veel bescherming), maar het kan in ieder geval geen kwaad.

Bijvoorbeeld, mijn footer gebruikt “© 2021-2022 Brander & Brander”. Het kan ook iets zoals “Copyright © Brander & Brander. Alle rechten voorbehouden” zijn.

Doorgaans staat deze regel helemaal onderaan de footer.

De copyright regel in de footer van AirBnB
De footer van AirBnB heeft een copyright regel.

De footer is ook de logische plek voor links naar pagina’s met juridische informatie zoals de privacyverklaring en algemene voorwaarden. 

Sinds de AVG privacywet in 2018 in werking is, hebben bezoekers recht op informatie over hoe jij met hun persoonsgegevens omgaat (bv. hoe lang jij contactformulier inzendingen bewaart). 

Deze informatie moet op elke pagina makkelijk vindbaar zijn. Maar is niet zó belangrijk voor de gemiddelde bezoeker dat het in de menubalk hoeft. Daarom is de footer de perfecte (en verwachtte) plek.

Deze links staan meestal helemaal onderaan de footer, in de buurt van de copyright regel. Sites met veel verschillende pagina’s (zoals een webshop) kunnen ze ook in een aparte kolom zetten, onder het kopje “Legal” o.i.d.

Tip: VeiligInternetten heeft een privacyverklaring generator

De privacy en voorwaarden links in de footer van AirBnB
De footer van AirBnB heeft ook juridische links.

Contactgegevens 

Gebruikers navigeren vaak ook direct naar de footer om de contactinformatie van een bedrijf te vinden. Heb je dit al in de header staan? Herhaal het nog een keertje in de footer. Bezoekers kunnen blind langs de header scrollen.

Link in ieder geval naar jouw contactpagina en/of klantenservice. 

Daarnaast zou ik ook gelijk jouw e-mailadres, telefoonnummer, openingstijden en/of bedrijfslocatie tonen in de footer.

Contact informatie in de footer van Wesotronic
De footer van Wesotronic geeft verschillende manieren voor mensen om contact op te nemen.

Bijkomend voordeel is dat dit goed voor SEO is. 

Ten eerste is het vermelden van zulke gegevens voor Google een teken dat jij een legitiem bedrijf bent. De gedachte erachter is: een oplichter wil niet dat gedupeerden contact kunnen opnemen.

Ten tweede is het goed voor lokale SEO. Door volledige bedrijfsinformatie toe te voegen snapt Google sneller of jij relevant bent voor bepaalde locatie(s). Simpeler gezegd, als jij je op Utrecht richt, moet dit ook op jouw website naar voren komen.

De footer hoort ook navigatie te bevatten. Het is niet de bedoeling dat je hier linkt naar élke pagina op jouw site (tenzij je er maar een handvol hebt).

Aan de ene kant wil je linken naar de populairste pagina’s op jouw site die iedereen nodig heeft. En aan de andere kant wil je ook linken naar essentiële maar niet per se populaire pagina’s (klantenservice, vacatures, etcetera). 

Daarom kun je navigatie links in 3 categorieën opdelen:

  1. Deurmat navigatie
  2. Klantenservice informatie
  3. Secundaire informatie

Navigatie: Deurmat navigatie

Deurmat navigatie bevat dezelfde links als in de globale navigatie (i.e. de menubalk bovenaan de pagina). Dit is handig op websites met lange pagina’s. Het voorkomt dat bezoekers weer helemaal omhoog moeten scrollen wanneer ze naar een andere pagina willen.

Het heet “deurmat navigatie” omdat het het eerste is wat je ziet wanneer je arriveert en het laatste is wat je ziet als je de pagina verlaat (net zoals een fysieke deurmat). De term is bedacht door de NNGroup.

Deurmat navigatie in de footer van VillaCapra
VillaCapra herhaalt de globale navigatie in de footer.

Navigatie: Klantenservice informatie

Lever je fysieke producten? Dan zul je doorgaans pagina’s hebben over retourneren, garanties, leveringen, bestellen, enzovoorts. Bezoekers verwachten deze informatie in de footer terug te vinden.   

Let op dat je ze niet wegstopt onder nietszeggende namen zoals Help. Een studie van Baymard toont aan dat gebruikers hier snel overheen lezen. Gebruik woorden waar mensen specifiek naar scannen zoals “Bestellen & Leveren” en “Contact”. 

Klantenservice in de footer van Etos
Etos heeft een duidelijke sectie voor klantenservice pagina’s

Navigatie: Secundaire informatie

Daarnaast kun je navigatie maken voor dingen die slechts een deel van jouw bezoekers aantrekt. Zoals links naar een vacaturepagina, media kits, affiliaties en documentatie.

De footer is een goede plek voor pagina’s die niet in de menubalk thuishoren, maar wel te vinden moeten zijn voor een deel van jouw publiek

Bijvoorbeeld, het hoofdpubliek van Bol.com zijn consumenten. Daar is de menubalk in de header op ingericht. Maar in de footer staat een aparte navigatiekolom voor hun zakelijke publiek: de mensen die via of voor Bol.com willen vérkopen.

De sectie voor zakelijke klanten in de footer van Bol.com
De footer van Bol.com heeft een sectie voor zakelijke klanten.

Vaak krijgt elke categorie zijn eigen kolom in de footer, met een duidelijke kop. Dit maakt het behapbaarder voor bezoekers.

Optionele footer onderdelen

Dat waren de musts. Laten we kijken welke onderdelen ook vaak terug te vinden zijn in een website footer.

Links naar social media accounts

De meeste bedrijven hebben tegenwoordig wel een of meerdere social media accounts. Vaak wordt er in de footer naar die accounts gelinkt. We verwachten ze daar te zien, dus plaats ze daar ook als je ze hebt.

Social media in de footer van Grammarly
Grammarly linkt naar hun verschillende social media accounts in de footer.

Keurmerken, reviews en/of awards

De footer is ook een goede plek om awards, certificaten of keurmerken in het zonnetje te zetten om zo aan jouw bezoekers te tonen dat jij een legitiem en betrouwbaar bedrijf bent.

Webshop tonen vaak ook de geaccepteerde betaalmethodes in de footer.

Certificaten en keurmerken in de footer van Etos
Etos legt de focus op betrouwbaarheid met hun certificaten en keurmerken.

Talenmenu

Heeft jouw website meerdere talenversies? Het is gangbaar om een talenmenu zowel in de header als de footer te plaatsen.  

Taalopties in de footer van Hubspot
HubSpot geeft je in de footer de optie om van taal te wisselen.

Branding

Je kunt in de footer ook jouw logo en kernboodschap herhalen (of herformuleren) om jouw merk nog een keer te benadrukken.  

De creatieve footer van design studio BlueStag
De design studio BlueStag gebruikt de footer om hun creativiteit te onderstrepen met een animatie.

Nieuwsbrief inschrijfformulier

Heb je een nieuwsbrief? De footer is een handige plek om bezoekers hiervan op de hoogte te stellen (of eraan te herinneren) met een inschrijfformulier. 

Nieuwsbrief optie in de footer van HEMA
De footer van HEMA heeft een inschrijfformulier voor hun nieuwsbrief.

Zoekbalk

Een zoekbalk vind je normaalgesproken in de header bovenaan de pagina, maar je kunt hem ook herhalen in de footer. Als allerlaatste valnet voor bezoekers die de informatie die ze zochten nergens op de pagina (ook niet in de footer) hebben kunnen vinden. 

Overzicht houden met secties

Je kunt dus een hele waslijst aan onderdelen in de footer kwijt. Maar let op dat het geen onoverzichtelijke stortplaats wordt. Baymard Institute adviseert om een footer op te delen in secties die visueel gescheiden en semantisch gegroepeerd zijn. Om zo het overzicht voor bezoekers te verbeteren.  

De footer opdelen in visueel gescheiden secties

Door jouw footer op te delen in duidelijke secties maak je het voor bezoekers makkelijk om de informatie snel te kunnen scannen.

Verdeel de footer in aparte kolommen en geef voldoende ruimte ertussen. Geef erboven ook kopjes met een onderscheidende opmaak. 

De footer van KaarsKoffie heeft duidelijke secties
KaarsKoffie heeft 7 duidelijke secties met opvallende kopregels.

Maar het is nutteloos als jouw groepen niet op semantische basis gescheiden zijn. Simpel gezegd, je hebt niets aan de groepen Fruit en Groente als je broccoli alsnog onder Fruit zet. 

De footer opdelen in semantisch gegroepeerde secties

Semantisch groeperen betekent dat onderdelen die met elkaar te maken hebben bij elkaar gezet worden en een duidelijk kopregel krijgen. 

Zaken zoals contact opnemen, retourneren en garantie hebben allemaal met klantenservice te maken. Deze kun je logischerwijs groeperen in één kolom met het kopje “Klantenservice” erboven.

3 logische kolommen in de footer van Bol.com
Bol.com deelt de footer-navigatie in 3 logische kolommen op.

Overzicht behouden op kleine schermen

Kolommen werken heel goed op grote schermen, maar wat doe je met een klein smartphone schermpje? Als je een stuk of 3 korte kolommen hebt, kun je deze simpelweg onder elkaar zetten met voldoende witruimte ertussen. 

Maar als je veel (of lange) kolommen hebt, kun je er ook voor kiezen om een in- en uitklapfunctie te gebruiken. De kolom wordt dan pas uitgeklapt en getoond wanneer iemand op de kopregel klikt.

Aangezien er dan veel informatie verborgen wordt, is het gebruik van goede, logische kopregels hierbij extra belangrijk!

De mobiele footer van Mattador
De footer van Mattador gebruikt in/uitklapvelden op mobiel.

Voorbeeld: Het belang van juiste naamgeving

Nielsen Norman Group heeft een mooi voorbeeld van het belang van duidelijke naamgeving. In hun studie kreeg een gebruiker de opdracht om het telefoonnummer van One King’s Lane te vinden op hun site. 

Hij ging een aantal keer tevergeefs op en neer tussen de header en footer: “I’m looking for a Contact Us but I’m not seeing it anywhere.” Hij probeerde daarna de About Us pagina en wendde zich uiteindelijk tot Google en vond het nummer op hun Facebookpagina.

De pagina met het telefoonnummer was in de footer te vinden via het linkje “Help”, maar dit sloeg duidelijk niet aan bij deze gebruiker.

Footer 101 Conclusie

De footer wordt vaak ondergewaardeerd omdat het helemaal onderaan de pagina staat. Terwijl een goede footer juist een boost aan het gebruiksgemak van een website kan geven. 

We richten ons doorgaans tot de footer in deze 2 situaties:

  1. De informatie die we zoeken is elders op de pagina niet te vinden.  
  2. We scrollen opzettelijk naar de footer omdat we daar de informatie die we zoeken verwachten te vinden.

Een footer hoort in ieder geval contactgegevens, navigatie, een copyright regel en een privacyverklaring link te hebben. Die navigatie kan linken naar jouw klantenservice pagina’s (als je die hebt), secundaire informatie (vacatures, affiliates, etc.) en de populairste pagina’s. 

Omdat we footers op een bepaalde manier gewend zijn, is de conversie ook het hoogste als je je hieraan vast houdt.

Daarnaast maak het onopdringende karakter van de footer het een goede plek voor dingen zoals links naar social media, keurmerken, awards, branding, een nieuwsbrief inschrijfformulier, talenmenu en/of zoekbalk.

Maar let op, hoe groter de footer, hoe belangrijker overzicht houden is. Deel de footer op in logische secties. Geef voldoende witruimte aan de aparte kolommen en zorg voor duidelijke naamgeving.

Toch liever een professionele website laten maken?

Wij maken websites voor ondernemers. Je krijgt een website die bezoekers het vertrouwen geeft: ik zit hier goed. Verkoop jezelf (nog) makkelijker met je eigen professionele website.

  • Mooi en overzichtelijk webdesign
  • High-end fotografie die je divers kunt inzetten
  • Volgens de laatste SEO/Google richtlijnen
  • Een WordPress website die technisch klopt

Je werkt met Linsey en Mandy, twee zussen. De een webdeveloper & webdesigner, de ander fotograaf.

Ook pakkende webteksten nodig? We werken samen met twee leuke en ervaren copywriters.

Linsey, auteur, webdeveloper

Geschreven door