Wat is het verschil tussen een hero en een header?
Het verschil tussen een hero en een header is een verschil in taak: de hero overtuigt, de header navigeert.
Ze staan onder elkaar en worden vaak samen ontworpen, maar ze doen tegengesteld werk.
Waar het misgaat, is als die taken door elkaar lopen.
Wat er gebeurt bij verwisseling
Navigatie in je hero: een rij tegels naar je diensten, in plaats van één boodschap. Je bezoeker weet dan nog steeds niet wat je doet.
Overtuiging in je header: een slogan naast je logo die niemand leest. Meer daarover lees je bij header.
De taakverdeling
Je header is er voor wie al weet wat hij zoekt. De hero is er voor wie dat nog niet weet.
Dat zijn twee verschillende bezoekers en die hebben allebei iets nodig.
Hoe ze samenwerken
Ze delen de eerste schermvulling. Hoe meer ruimte je header pakt, hoe minder er voor je boodschap overblijft.
Houd je header daarom laag. Meer daarover lees je bij above the fold.
Mijn vuistregels
- Header laag en functioneel, hero inhoudelijk.
- Geen navigatietegels in je hero.
- Geen verkooptekst in je header.
- Ontwerp ze samen, maar geef ze elk hun eigen taak.
Die tweede kom ik het vaakst tegen, en het kost altijd duidelijkheid.
Wanneer je alleen een header hebt
Op artikelpagina’s en informatieve pagina’s. Daar volgt je inhoud direct op je menubalk, zonder tussenblok.
Dat is precies goed. Meer daarover lees je bij wat een hero is.
Bij een webshop
Daar wint de header aan belang: zoekvak, categorieën en winkelmandje zijn wat mensen nodig hebben.
De hero mag dan kleiner. Meer daarover lees je bij conversie.