Naar
boven

Waarom de headergrootte zo belangrijk is, en hoe hij vaak verkeerd wordt ingezet.

Je hebt ze vast wel ooit gezien, of misschien heb je er zelf wel één. Zo’n prachtige grote header, met de mooiste afbeelding die je hebt kunnen vinden. Want bezoekers moeten toch verwelkomd worden nietwaar? En mijn etalage moet er dus fantastisch uitzien.

Maar waar draait het eigenlijk om? Je wil toch dat bezoekers datgene doen wat je van ze verwacht? En dat ze dus ook datgene zien wat je wil dat ze zien?

Hoe bezoekers jouw pagina’s zien

Alles wat men kan zien op jouw website zonder te hoeven scrollen noemen we de content boven de “fold”, oftewel de inhoud boven de vouw.

Bekijk de onderstaande afbeelding eens:

We zien hier drie vakken:

  1. Het blauwe vak. In dit geval wordt ongeveer 16% in beslag genomen door onze browser. Dit is een vrij normaal browsergedeelte. Met andere woorden, bij de meeste bezoekers van je website zal het browservak een dergelijke grootte hebben.
  2. Het rode vak. Dit is dus de header. Een header herken je vaak aan het feit dat deze op elke pagina terugkomt, en bevat vaak een navigatiegedeelte, logo, en zoekvenster. In dit geval beslaat de header ongeveer 22% van alles wat onze bezoekers boven de vouw kunnen zien.
  3. Het groene vak. Dit is dus de daadwerkelijke inhoud waar het om draait. En waar de bezoeker, als het goed, is gaat kijken. In dit geval beslaat dit vak ongeveer 62%.

Conclusie is dat in het bovenstaande voorbeeld bijna 40% “verloren” gaat van het scherm wat we aan de bezoekers willen laten zien.

We hebben het hier nog niet gehad over de verschillende formaten van beeldschermen, maar ik neem aan dat het voorbeeld duidelijk is. In het geval van onze weblog zouden we dus nog wat winst kunnen behalen door bijvoorbeeld het logo wat kleiner te maken, en de header nog wat in te krimpen. Maar over het algemeen is onze header nog redelijk compact.

Hoe het niet moet

Zeer regelmatig kom ik websites tegen die een veel grotere header hebben. Met een prachtige foto of afbeelding. Allemaal erg leuk en misschien wel mooi, maar feit is dat we op die manier wel onze waardevolle pixels verspillen.

Om de websites waar ik het over heb niet publiekelijk aan de “digitale schandpaal” te nagelen vind je hieronder een voorbeeld van wat ik bedoel, ik denk dat je zelf de conclusies wel kan trekken”¦

Het bovenstaande is echt geen uitzondering, maar feit is wel dat er op deze manier bijna 70% “verloren” gaat”¦

Conclusie

We moeten zuinig omgaan met de beschikbare pixels. Mijn advies is dan ook: bekijk je eigen header eens, bereken eens hoeveel ruimte er “verloren” gaat, en hoe je dit percentage kunt verkleinen!

Onze Expertise Nodig?

Vul het onderstaande formulier in of bekijk onze online marketing cursussen en online marketing diensten.


Over de auteur:

Dit artikel is geschreven door .

Karel Geenen
Karel Geenen is medeoprichter van KG Online Marketing. Hierbinnen vallen dit weblog, onze Academy met online marketing cursussen en het Bureau voor online marketing diensten.
21 reacties op "Waarom de headergrootte zo belangrijk is, en hoe hij vaak verkeerd wordt ingezet."
  • Alex zegt:
    21 Nov, 2010 om 19:53

    Eigenlijk geef je hier dus aan dat hoe kleiner de header hoe beter. In veel gevallen kan ik me hier ook wel in vinden. Zeker in dit voorbeeld van een weblog over internet marketing. Want wat voor een foto moet je hier bij zetten die vertelt wat je doet. En dat is volgens mij nu net de grens.

    Ik kan me ook veel markten voorstellen waarbij een grote header wel goed werkt om het product of de dienst duidelijk te maken. Of bijvoorbeeld om de potentiele klanten in de sfeer te brengen die past bij het product.

    Reageren
    • Karel Geenen zegt:
      21 Nov, 2010 om 20:02

      Dag Alex,

      Bedankt voor je reactie! Ik snap ook volledig wat je bedoelt, en er zullen zeker voorbeelden zijn waarbij een grotere header wel kan werken, om inderdaad bijvoorbeeld een bepaalde stemming op te roepen.

      Maar dan heeft de grote header een doel, en dat is precies waar dit artikel om draait.

      Mijn advies/tip is om eens te kijken of dat je de toch al spaarzame ruimte op een website goed inzet, en dat je nutteloze zaken zoveel mogelijk beperkt. Een (te) grote header is daar vaak het voorbeeld van.

      Groeten,

      Karel

    • fitnessapparatuur zegt:
      22 Nov, 2010 om 16:06

      Inderdaad, ik vind ook dat niet iedereen een zo klein mogelijke header als voorbeeld moet nemen. Maar het standpunt is duidelijk. Waar draait het om? Sfeer of nuttig benutten van de ruimte… Dat zul je uit moeten zoeken en zo kun je je header daarop aanpassen

    • Karel Geenen zegt:
      22 Nov, 2010 om 17:08

      Precies!

  • Jente zegt:
    22 Nov, 2010 om 10:32

    Karel, heb je hier eventueel A/B test resultaten van die je stelling zwart op wit bewijzen?

    Reageren
    • Karel Geenen zegt:
      22 Nov, 2010 om 10:44

      Dag Jente,

      Wij hebben dit inderdaad getest voor een klant van ons. Maar zoals ik in het artikel al aangaf wil deze klant dit niet openbaar.

      Ik heb wel een voorbeeld van een header ongeveer gelijk aan de testcase:

      http://www.alphanetcom.com/

      Deze mag dus zeker met 50% gereduceerd worden. Daardoor konden we de producten hoger plaatsen, en dat leidde uiteindelijk tot meer pageviews van de productpagina’s en meer contactaanvragen.

  • Koen Delvaux zegt:
    22 Nov, 2010 om 10:40

    En wat vind je dan van de website van webgiraf.be?
    Grote header mét inhoud als startpage en kleine header op de andere pagina’s.

    Reageren
    • Karel Geenen zegt:
      22 Nov, 2010 om 10:47

      Dat noem ik in dit geval geen header, maar een afbeelding op de homepage, om inderdaad de stemming te zetten.

      Wat ik met het artikel bedoel is de header die continu in beeld is. In jullie geval dus prima…

      Overigens mis ik wel de meerwaarde van jullie homepage. Ik kan geen enkele duidelijk call-to-action vinden, behalve dan de linkjes helemaal bovenin (en na lang zoeken de link met “website”, de mij dan meteen op de prijspagina doet landen?!)

  • Koen Delvaux zegt:
    22 Nov, 2010 om 11:10

    Call-to-action is wel waar, moet ik nog eens bekijken hoe dit beter kan. Prijspagina is niet de beste ingang in de sales funnel.

    Reageren
  • Renate Jansen zegt:
    23 Nov, 2010 om 08:24

    Ik ben het zeker niet zomaar eens met deze stelling.

    Van zeer groot belang is in welke branche het bedrijf actief is, wat zij willen uitstralen en wat hun doel is.

    Zomaar stellen dat een grote header niet positief werkt voor een website is een gevaarlijke stelling.

    Reageren
    • Karel Geenen zegt:
      23 Nov, 2010 om 09:17

      De vraag is een beetje wat je onder de header verstaat natuurlijk. Maar ik begrijp wat je bedoelt. Maar ik bedoel met de header datgene wat op elke pagina terugkomt.

      Maar feit is dat je het nooit zeker weet, en daarom is het belangrijk om altijd te testen!

  • Edwin zegt:
    28 Nov, 2010 om 08:51

    Een grote header op de Home pagina is geen goed idee. Daar kan deze immers werken als drempel/intro pagina. Dat soort pagina’s zijn bijna uitgestorven omdat we weten dat mensen en masse er op afhaken.

    Een giga header kan hetzelfde effect hebben als zo’n drempel/intro pagina. Als niet onmiddellijk duidelijk is wat de bedoeling is van de website, dan denken veel mensen na enkele seconden al “verkeerd verbonden”, waarna ze gebruik maken van de populairste button in hun browser: de back button.

    Een grote header op alle pagina’s is sowieso out of the question. De grote header wordt dan zo irritant als muziek op een website.

    @Renate, de branche speelt nooit een rol, wel het profiel van je gebruikers, wat ze doen en in welke context. De branche is totaal irrelevant. Het is een excuus om te kunnen zeggen ‘Het kan allemaal wel waar zijn, maar in MIJN branche is het anders’. Ik zeg je hier en nu: je dwaalt.

    Mensen als Karel gaan niet af op persoonlijke emotionele gevoeltjes en meningen. Die zijn immers van weinig tot geen waarde (sorry).

    Wat Karel doet is meten en zien wat de gevolgen zijn.

    Als dan blijkt dat een website met een kleine header beter is voor je verhouding klanten/bezoekers, inschrijvingen op pakweg een nieuwsbrief, contact pogingen e.d. dan is DAT de beste keuze. Je persoonlijke opinie is hierdoor irrelevant.

    Ik heb vergelijkbaar vaststellingen gedaan zoals Karel.

    Daar zaten trouwens een paar arty farty websites tussen van o.a. een toneel acteur, een model en een auteur.

    Reageren
  • Renate Jansen zegt:
    29 Nov, 2010 om 14:39

    @edwin

    Ik wilde hier hier iets op terug zeggen maar vindt diverse stellingen van jouw zo lachwekkend en zwart/wit dat ik er geen moeite voor doe

    Reageren
  • Edwin zegt:
    29 Nov, 2010 om 14:48

    @Renate,

    Goh en dan doe je al die moeite om DAT neer te schrijven.

    Mijn beste, als mensen de argumenten niet aanvallen, maar de mens er achter, dan hebben ze meestal zelf geen argumenten om hun stelling te verdedigen.

    Wees eens concreet, lieverd en vertel eens wat er exact lachwekkend is, dan maken we OOK daar met plezier brandhout van. :)

    Reageren
  • Edwin zegt:
    30 Nov, 2010 om 12:35

    @Renate,

    Waarom beter geen grote header?

    †¢ Wat Karel zegt: Het neemt veel plaats in. Een deel van de andere informatie zal onder de fold verdwijnen en hierdoor minder aandacht krijgen. We scrollen tegenwoordig wel meer en gemakkelijker, maar informatie boven de fold doet het nog altijd stukken beter.

    Nog andere redenen zijn:

    †¢ Aandacht is geen ongelimiteerd iets, dat is eerder beperkt. Met een grote header zuig je de meeste aandacht er naar toe en zullen zaken nabij minder opvallen. Daar gaat je conversie voor je inschrijvingen op je nieuwsbrief.

    †¢ Een foto of afbeelding maakt niet altijd duidelijk wat je doet. Gecorreleerd met het vorige kan je stellen dat die afbeelding met te veel aandacht gaat lopen, waardoor er geen ruimte meer is om goed te duiden wie of wat je bent.

    †¢ Puur gebruiksgemak. Navigatie kan lastiger worden en mensen moeten meer scrollen. Er is een fundamentele usability wet die stelt dat je mensen niet onnodig moet moe maken.

    †¢ Het verhoogt de irritatie wanneer die grote header in alle schermen terugkomt.

    †¢ Een vette header vertraagd het inladen van de website. Google heeft al een tijdje†˜laad snelheid†™ meegenomen als SEO parameter.

    †¢ Niet iedereen heeft een snelle internetverbinding. Echt plezant hoor, een halve minuut (en langer) wachten op een fucking oversized header.

    †¢ Dikke afbeeldingen op één van je meest bezochte pagina†™s zetten, da†™s allemaal goed als je geen bezoekers hebt. Maar als je miljoenen bezoekers per dag hebt, dan zal je op één of andere manier moeten gaan betalen voor je verkwisting aan bandbreedte.

    †¢ Denk je dat mobile gebruikers (en hun aantallen stijgen elke maand) zo†™n vette headers plezant vinden?

    M.a.w. het argument ‘de branche is héél belangrijk’ is van geen waarde.

    Reageren
  • Internet Marketing Breda zegt:
    01 Dec, 2010 om 16:49

    Met een mooie header op de homepage, beter nog slider die de bezoeker binnen enkele seconden de sterke punten / voordelen visueel kan aanbieden heb ik hele goede ervaringen.

    De meeste mensen zijn visueel ingesteld en gevoelig voor sfeerbeelden en icoontjes die de oplossing van problemen goed uitbeelden. Deze beelden zijn gelinkt aan de vervolgpagina’s waar geen header op staat. Vanaf dat moment heeft de bezoeker voor een onderwerp gekozen en ligt de focus op content en kan je aan de zijkant weer aandacht trekken met visuele elementen die gerelateerde onderwerpen onder de aandacht brengen.

    @edwin

    †¢ Aandacht is geen ongelimiteerd iets, dat is eerder beperkt. Met een grote header zuig je de meeste aandacht er naar toe en zullen zaken nabij minder opvallen. Daar gaat je conversie voor je inschrijvingen op je nieuwsbrief.

    je wilt per pagina toch juist aandacht voor de punten die jij belangrijk vind voor die pagina ? Een grote slider met 3 tot 5 pakkende beelden heeft een betere conversie dan 3 tot 5 tekstblokjes op de home. Alles valt of staat wel bij de trigger die de beelden hebben (waar je overigens ook tekst in kan verwerken)

    ‘Dikke afbeeldingen’ huh ? Zelfs een vette header kan je in photoshop klein genoeg maken dat hij snel gaat laden hoor.

    Naar mijn mening is er geen stelling te maken dat a of b goed is, ik ben het met Renate eens dat het niet ‘fout’ hoeft te zijn mits goed uitgevoerd.

    Net als bij internet marketing moet je oppassen met zwart wit stellingen, alles is afhankelijk van het doel, de doelstellingen en in dit geval bijvoorbeeld: hoeveel boodschappen heb je die je wilt communiceren ? Een webshop met 30 afdelingen en 40000 artikelen heeft een andere aanpak nodig dan een artiest of fotograaf met 2 of 3 diensten waar juist beeld heel bruikbaar kan zijn om een boodschap te communiceren.

    Net zoiets als, hoe hoog moet je zoekwoorden dekking zijn ? Hebben wederkerige links nut ? Is het noodzakelijk om zoektermen in de url te gebruiken ? Kan een website met pr 2 hoger komen in zoekresultaten als een concurrent die pr 3 heeft ?

    @ edwin: M.a.w. het argument †˜de branche is héél belangrijk†™ is van geen waarde.

    huh ?

    Reageren
    • Edwin zegt:
      01 Dec, 2010 om 17:26

      Niemand zegt dat die header lelijk moet zijn. Die kan mooi zijn én een normale grootte hebben. Op die manier ondersteun je zowel de experience als de usability.

      Bewegende sliders, zoals op jouw website, zijn géén goed idee. Tenzij je doelgroep kinderen zijn. En er is nog een uitzondering waar “animatie’s” wel kunnen: je wil exclusieve aandacht voor iets speciaals, om de gebruiker te alarmeren bv.

      In de andere gevallen is het wellicht nog erger dan giga headers. Het is weer hetzelfde verhaal: het is gewoon een bombardement op je zintuigen, waardoor andere zaken (inclusief je call to actions, je sociale media buttons, je speciale promotie, etc…) quasi geen aandacht meer krijgen.

      Dat zeg ik niet alleen, maar dat zegt zowat elke usability expert. Inclusief een Jakob Nielsen.

      Met een foto alleen maak je doorgaans niet duidelijk wie of wat je bent. Een schrijvend handje, één of andere griet zonder kop achter een pc, een road to nowhere vertellen mij niet wat jij doet.

      Een leuke header is gewoon ondersteuning, maar wanneer je het begint om te draaien, de tekst, je call to actions e.a. zaken ondergeschikt maken aan je geanimeerde header dan misloop jij conversie.

      Doe je zelf eens een plezier én meet het eens. Zet eens een simpele A/B test op.

  • Edwin zegt:
    01 Dec, 2010 om 19:43

    Ik heb er eens over nagedacht, ja ik doe dat wel eens :p, en eigenlijk kan je een simpele analogie gebruiken waardoor het allemaal heel bevattelijk wordt.

    Zo’n vette header, met of zonder animaties, is het equivalent van een dansende naakte mooie vrouw voor je etalage zetten.

    Uiteraard zal je daar aandacht met trekken en nog geen klein beetje ook.

    Vraag is hoeveel mensen nog aandacht zullen hebben voor de waren in de etalage. Ook al staat daar: “50% korting” of “2 kopen, 1 gratis”

    De naakte vrouw gaat immers met de meeste aandacht lopen, waardoor er niets meer overblijft voor de dingen die er toe doen.

    Zelfs de mensen die wél de moeite nemen om even in de etalage te kijken zullen afgeleid worden door onze blote madam.

    Of ze nu willen of niet, ze zullen kijken naar haar. Hierdoor hebben ze minder aandacht voor de zaken die feitelijk belangrijker zijn: de goederen in de etalage, de prijzen, de aanbiedingen, etc…

    En zo is dat met je vette header ook. Als je die laat roteren versterk je dat zelfs. Je perifeer zicht zal er voor zorgen dat je met sterk verminderde aandacht de informatie kan verwerken die er toe doet.

    Bon, geeft me inspiratie om er eens een artikel over te schrijven. :)

    Reageren
  • Internet Marketing Breda zegt:
    01 Dec, 2010 om 21:55

    @edwin bedankt voor je reactie, jammer dat er geen dialoog is.

    Je bent nogal een autoriteit zo te zien dat je uitspraken doet als:
    ‘zijn’ géén goed idee. Tenzij je doelgroep kinderen zijn.

    ‘ Ik vind ‘ lijkt me meer gepast. En het nare ondertoontje daarachter lijkt me niet nodig.

    1. ik refereer in mijn reactie niet naar mijn site. De pagina op mijn website met het meeste bezoek heeft een top 10 positie in Google en geen slider. Waarom ? Bezoekers die daar komen hebben een heel duidelijk doel en die pagina is 90% ingericht op conversie voor dat doel. Daar is geen afbeelding bij nodig, men is op zoek naar bepaalde informatie. Op de homepage wil ik een sfeer neerzetten en moet inderdaad nog werken aan betere afbeeldingen.
    Helaas door tijdgebrek (dus wel goede conversie :) ) nog niet aan toe gekomen.

    Mijn mening is dat alles een duidelijk doel moet hebben en geoptimaliseerd moet zijn voor dat doel, en dat kan de ene keer een grote afbeelding zijn en de andere keer voornamelijk tekst.

    Een discussie zou niet moeten zijn of de muziek van Michael Jackson goed of slecht is, maar of die bijvoorbeeld past op een bepaald feest en de mensen (doelgroep) in de juiste sfeer brengt.

    2. Als we dan toch opbouwend naar elkaars website aan het kijken zijn (zal vast goed zijn voor de statistieken) neem ik aan dat je doelgroep mensen zijn die al ‘in to usability’ zijn ?

    Als een gemiddelde ondernemer of marketingmedewerker op jou homepage komt ziet hij een best hoge header (???) met een oude foto (zonde van de ruimte !) maar geen duidelijke info waaruit blijkt wat jij voor iemand kan betekenen?

    De brand image statement ‘maakt de wereld’ is best algemeen, of richt je je op de hele maatschappij ? Bijvoorbeeld ‘maakt websites gebruiksvriendelijker’ zou duidelijker aangeven dat je expert in website usability bent toch ?

    De eerste pagina waar ik op klikte was Methodologie en toen zag ik Fusion Usability Recept ????
    Voer voor experts is mijn eerste indruk.

    Terug on topic: te grote header-afbeeldingen nemen vaak te veel ruimte in beslag die in veel gevallen beter gebruikt kan worden om een bepaalde boodschap te communiceren.

    Op de homepage mag je naar mijn mening best ruimte gebruiken om met een header een bepaalde sfeer neer te zetten (alleen een logo en tekst is ook zo saai).

    Een goed voorbeeld vind ik http://www.3id.com met homepage slider en op de vervolgpagina’s is de header-afbeelding minder hoog om meer ruimte te gebruiken voor content en toch de sfeer vast te houden.

    Reageren
    • Edwin zegt:
      01 Dec, 2010 om 22:53

      Karel,

      Dat animatie’s geen goed idee zijn wanneer je doelgroep volwassenen zijn, dat is toch algemeen geweten? Enfin, dat veronderstel ik toch.

      Laat ons er even andere bronnen bij nemen:

      http://www.useit.com/alertbox/teenagers.html

      En kijk even naar de tabel halfweg. Wat zien we:

      Animation and sound effects

      Kids :)
      Teens :|
      Adults :(

      Uiteraard is de vent achter die site een zeveraar.

      Je moet wel correct blijven als je bij mij op ‘Methodologie’ klikt dan krijg je een pagina te zien met allemaal zaken die bij een Methodologie horen. Bij het LINKJE ‘Fusion Usability Recept’ staat ook een bondige uitleg wat een gebruiker mag verwachten. En zo is dat met elk item. Je komt dus voor verrassingen te staan.

      Dat een doorsnee ondernemer aan een methodologie weinig heeft, dat klopt. Maar de blog is ook niet alleen bedoeld voor ondernemers. Me dunkt dat ook zij genoeg kunnen vinden waar zij ook iets aan hebben.

      Hetzelfde kan je zeggen over cognitieve psychologie. Wat heeft een doorsnee ondernemer daar aan? Weinig tot niets.

      Ik ben niet gespecialiseerd in web usability. Ik praat ook over usability in applicaties, embedded software of pakweg barcode scanners in een supermarkt. Dus ja, we maken de wereld gebruiksvriendelijker. Een tikkeltje marketing gewauwel mag wel, niet? Als je een Bounty eet, dan heb je ook je stukje paradijs op Aarde.

      Er zijn er nog die niet-exclusief usability toepassen op het web: om er een paar te noemen: Alan Cooper en Deborah Mayhew bijvoorbeeld.

      Usability gaat niet om smaak en voorkeuren. Het gaat om meten wat het meest rendement haalt.

      Dus ik vind niet dat animatie’s niet kunnen bij een website voor volwassenen, ik weet dat het niet kan, want ik heb het gemeten.

      Is dat autoritair? Dat zal dan wel.

  • Dennis zegt:
    10 Jan, 2011 om 19:59

    Tja en dan neem je je eigen website onder de loep met deze informatie en dan krabbel je jezelf wel even achter de oren. Op mijn beeldscherm van de laptop is de header ongeveer 50%. Mooi artikel, ga mijn website zeker er op aan passen.

    Reageren

Reageren