De Header en Footer. Vaste waarden.

Menno Dijk   •  13 februari 2012

Als designer van webwinkels van MKB, MKB+ en grotere bedrijven heb ik niet alleen te maken met bepaalde trends in vormgeving en interactie ontwerp maar ook met conventies; wat verwacht de consument voor herkenbare elementen aan te treffen op een webwinkel waardoor deze als betrouwbare webwinkel wordt ervaren.

Het (functionele) design van een webwinkel bestaat uit een aantal vaste onderdelen waaronder de header en de footer. Deze termen, die hun oorsprong in de krantenwereld vinden, staan voor de bovenkant van een pagina (header) en de onderkant van een pagina (footer).

Ondanks dat ik geen ‘golden rule’ rondom het design en de opmaak van deze ‘kop en kont’ van de website hanteer, merk ik wel dat consumenten tegenwoordig een aantal dingen in de header en footer ‘verwachten’ als zij een webwinkel bezoeken, en deze zaken wil ik in dit artikel uiteenzetten.

1. De Header
De header is het eerste / bovenste gedeelte van iedere pagina van een website, en daarmee écht de eerste indruk die een bezoeker krijgt.

De header van een webshop bevat vaak het logo en/of de naam van de webshop, een inlog mogelijkheid voor terugkerende klanten, een zoekveld, de winkelmand en links naar bijvoorbeeld een contactformulier, de klantenservice en ‘home’. Vaak zit het hoofdmenu van een site verwerkt in de header of er aan vast.

Naast deze basis items tonen webwinkels steeds vaker een ´direct contact´ telefoonnummer en diverse vertrouwenwekkende logo´s zoals het Thuiswinkelwaarborg logo en het Trustpilot logo. Uiteraard zijn deze klikbaar en leiden tot de juiste informatie pagina´s. Het zonder link plaatsen van deze logo´s werkt averechts. Ook al heeft u een goede Trustpilot rating en bent u al 3 jaar Thuiswinkelwaarborg lid, als de logo´s niet klikbaar zijn vermoed men zwendel. Deze bewustwording bij de consument is uiteraard prima. Met bijna 40.000 Nederlandse webwinkels om uit te kiezen, wil men wel weten wat voor vlees men in de kuip heeft.

Ook zie ik steeds vaker de vermelding van de verzendkosten (geen, of een laag maximum), de levertijd (mits voor een bepaalde tijd besteld) en de verzekering dat men het product kan retourneren. Wat hierbij opvalt is dat vooral de grote webwinkels dit vermelden in de header, terwijl men verwacht dat een winkel als Bol.com of Coolblue.nl dit niet nodig zou hebben. Het tegendeel is echter waar; de grote jongens paraderen met het hoge serviceniveau dat ze kunnen leveren, hiermee onderscheiden ze zich van de rest.

Ook bij het vermelden van verzendkosten, lever- en retourtijden geldt weer: wie dit niet waar kan maken gaat nat. De consument heeft Twitter, Facebook en de diverse vergelijkingssites zo gevonden en een slechte review is sneller geschreven dan een goede!

Met alle bovengenoemde items dreigt een header al gauw rommelig, vol en onoverzichtelijk te worden. Een goed design door een vakkundige designer kan hier écht het verschil maken. De volgende 2 voorbeelden, die uiteraard puur subjectief zijn, geven dit goed weer. Om iedere schijn van partijdigheid te voorkomen heb ik de headers van Amerikaanse sites gekozen.

Voorbeeld van een rommelige header:

Wow. Een fotografische achtergrondplaat, een groot cartoonesk logo, een telefoonnummer, allerlei secundaire links, het winkelmandje, allerlei logo’s… door alle drukte vallen de belangrijkste elementen, de zoekbox en het hoofdmenu gewoon weg. Dat is natuurlijk niet de bedoeling!

Ondanks dat er met allerlei zekerheden wordt gesmeten doormiddel van logo’s en allerlei beloftes oogt het geheel toch niet heel professioneel en wellicht daardoor onbetrouwbaar.

Voorbeeld van een strakke header:

Ook in deze header gebeurt VEEL. Logo met pay-off, secundair menu, logo’s, telefoonnummer, winkelmand, een zoekbox, zoeksuggesties.

Ondanks dat hier veel wordt verteld, voelt deze header veel rustiger aan. Waarom? Geen wilde achtergrond plaat, rustige en niet geen heel scala aan kleuren, duidelijke call-to-action…

Beide bovengenoemde headers zijn niet ‘best of the best’, want voor iedere webwinkel is ‘de beste header’ weer net iets anders. En niet iedere webwinkelier kan een designer / bureau betalen dat zich een week lang stort op het design van de header. Wel is en blijft het een feit dat een rustig, strak opgemaakte header, met verzekerende boodschappen die waargemaakt kunnen worden, de consument een vertrouwd gevoel geven.

2. De footer
De footer is de onderkant van iedere pagina van een website. In vroeger dagen, we hebben het hier over een paar jaar terug, was de footer van een website niet meer dan een stukje tekst, meestal ‘copyright 2005’ en als je geluk had een paar linkjes naar bijvoorbeeld de contact pagina en de sitemap.

In de loop van de jaren is de footer uitgegroeid tot een heuse ‘afsluiter van formaat’. Ondanks dat ook ‘normale’ websites tegenwoordig een fikse footer hebben is de webwinkel hier de aanjager van geweest.

De reden hiervoor is simpel; er kwamen steeds meer informatie pagina’s bij op webshops en de ingang hiernaar moest een vaste plek hebben. Omdat het vaak om service gerichte pagina’s ging, en het toch wel handig en service-gericht zou zijn om deze op iedere pagina te tonen, werd besloten deze links onderaan iedere pagina te tonen. Naarmate het aantal informatieve pagina’s toe nam en zelfs in categorieën in te delen waren, groeide de grootte / hoogte en daarmee het belang van de footer.

Visueel gezien is de footer altijd de afsluiter van de pagina. De footer begint meestal met het einde van het content gedeelte/ vlak en hoe onbelangrijker de content in de footer, hoe kleiner het font is. Hierdoor voelt de footer aan als een natuurlijk einde van een pagina zonder overbodig te lijken.

Zaken die tegenwoordig zeker niet meer mogen onderbreken in de footer zijn een kolom met links die gaan naar informatie over het bedrijf zelf, de historie, vacatures, nieuws & persberichten, etcetera. Deze kolom heeft van de titel ‘Over bedrijf xxx’. Daarnaast is een kolom genaamd ‘klantenservice’ al standaard footer content geworden. Hier vindt de consument links naar het contactformulier, de meestgestelde vragen, informatie over verzending en retournering en andere links naar consument relevante content.

Tegelijk in opkomst met de groeiende footer waren social media platformen als Facebook en Twitter waar consumenten een webshop kunnen volgen. Dat met de opkomst van social media ook de footer groeit, is mijn inziens geen toeval; de logo’s van Twitter, Facebook en Youtube zijn niet heel erg fraai in te passen in de header, want ze moeten herkenbaar blijven, en daarom vinden ze vaak een plek in de footer. In geen enkele footer van grote webshops ontbreken de logo’s van de grote sociale platformen die direct linken naar de desbetreffende profielen of pagina’s.

Ook treft men vaak de mogelijkheid tot het inschrijven op een nieuwsbrief van de webwinkel in kwestie. Een korte titel, omschrijving, invulveld en verzendknop voldoet tegenwoordig om de consument te verwittigen dat er een nieuwsbrief is waarop men zich kan abonneren. Mensen die lid willen worden van een nieuwsbrief van een webwinkel scrollen tegenwoordig automatisch naar de footer.

Omdat een footer naast de ‘te verwachten’ zaken ook gevuld kan worden met niet heel belangrijke maar daarom niet minder interessante zaken zie je vaak dat footers gebruikt worden om bijvoorbeeld wat foto’s van een showroom te tonen of een leuk visueel grapje uit te halen.

Naast de plichtmatige links naar disclaimers, algemene voorwaarden, etcetera worden ook vaak logo’s van betaalmethodes en thuiswinkel.org (nogmaals) getoond. De waarde hiervan is puur de diversiteit tonen van de verschillende betaalmethodes en de consument nogmaals te verzekeren dat ze met een betrouwbare partij van doen hebben.

Voorbeelden:
Slechte footers tonen lijkt me niet zo van toepassing omdat een ‘slechte’ footer een afwezige footer is en dus zal ik hier een aantal footers tonen van Nederlandse webshops die hun footer prima op orde hebben, maar ieder op zijn eigen manier. Uiteraard is het zaak dat u helemaal naar onderen scrollt:

Coolblue

Een prima footer; visueel afsluitend, netjes opgemaakt, een hoop informatie en zelfs nog ruimte voor 3 personen met gereedschap. Het schoolvoorbeeld van een goede footer anno 2012

RJshop

Bij De Nieuwe Zaak luidde het in 2009 gelanceerde redesign van RJShop het ‘grote footer’ tijdperk in, en hoe! Nog steeds is dit één van de schoolvoorbeelden van een prima footer die aan duidelijkheid en design niet te wensen overlaat.

Hema

Bij de Hollandse Eenheidsprijzen Maatschappij Amsterdam houden ze niet van klein met als resultaat een footer die in hoogte vaak de rest van het contentgedeelte overschrijdt. Toch blijkt de HEMA consument dit op prijs te stellen.

Uiteraard bestaat een webshop niet alleen uit een header en footer. Juist tussen de header en footer vindt de conversie plaats. Maar zonder strakke, heldere en vertouwenwekkende header en duidelijke, informatieve footer zal een consument zich toch twee keer achter de oren krabben voordat men tot aankoop overgaat.

Menno Dijk,
Sinds 2007 webshop designer bij De Nieuwe Zaak

Deze column is eerder geplaatst op de site van de Webwinkel Vakdagen

Menno Dijk is sinds 2007 werkzaam bij De Nieuwe Zaak als Designer. Binnen De Nieuwe Zaak houdt hij zich bezig met het bedenken en ontwerpen van verfrissende en converterende webshops, websites en online campagnes.
Blijf op de hoogte

Meld u aan voor onze wekelijkse e-commerce nieuwsbrief en blijf op de hoogte van het laatste e-commerce nieuws!

© 2018 De Nieuwe Zaak