Header: de balk die je bezoeker op weg helpt of in de weg zit
De header krijgt bij een nieuw ontwerp de meeste aandacht en de minste discipline. Er moet een logo in, een menu en een telefoonnummer. En een zoekfunctie, een taalkeuze en het liefst nog een knop. Voor je het weet is de balk zo vol dat niemand er meer iets in vindt. En op een telefoon past het sowieso niet.
Een goede header doet eigenlijk maar twee dingen. Hij zegt waar je bent en hij helpt je verder.
Bij Vereniging van Vlechters was dat de opgave. Ik verzorgde daar het webdesign en de vindbaarheid. Een vereniging heeft veel soorten bezoekers: leden, geinteresseerden en pers.
De eerste versie van het menu had elf items. We hebben teruggebracht naar vijf, met de rest ondergebracht in de footer en op overzichtspagina’s. Het hoofdmenu werd daardoor scanbaar in plaats van leesbaar.
De header staat op elke pagina en bepaalt of iemand verder komt.
Wat is een header?
De header is het blok bovenaan elke pagina. In het Nederlands zeggen we kopbalk. Hij staat overal hetzelfde, net als je footer onderaan.
Die herhaling is zijn functie. Waar iemand ook binnenkomt, hij weet meteen op welke site hij is en hoe hij verder kan.
Het verschil met een hero
Dat wordt vaak door elkaar gehaald. De header is de balk met je logo en menu. De hero is het grote blok daaronder met je boodschap en je knop.
De header staat op elke pagina hetzelfde. De hero verschilt per pagina. Samen vormen ze wat je ziet above the fold.
Wat erin hoort
Drie dingen, en een vierde als je die echt nodig hebt.
Mijn standaardindeling
Je logo linksboven, met een link naar je homepage.
Je hoofdmenu, met maximaal vijf tot zeven items.
Een duidelijke actie, bijvoorbeeld bellen of offerte aanvragen.
Eventueel een zoekfunctie, maar alleen bij veel pagina’s.
Bij het logo plaatsen geldt een oude afspraak die nog steeds werkt. Linksboven en klikbaar naar je startpagina. Mensen proberen dat automatisch.
Zet je telefoonnummer erbij als bellen belangrijk is in jouw vak. Voor een installateur of een advocaat is dat vaak de snelste weg. Dan hoef je niet naar je footer te scrollen.
Hoeveel menu-items?
Vijf tot zeven. Meer wordt een lijst die je leest in plaats van scant.
Heb je meer pagina’s, dan groepeer je ze onder een uitklapmenu. Let daarbij op dat een uitklapmenu op een telefoon lastig werkt. Het moet bovendien met het toetsenbord te bedienen zijn. Dat hoort bij accessibility.
Diepe structuren zijn een waarschuwing op zich. Moet je drie niveaus diep om je dienst te vinden, dan klopt je indeling niet. Een breadcrumb helpt dan, maar lost de oorzaak niet op.
Meescrollen of niet?
Een meescrollende balk blijft in beeld terwijl je naar beneden gaat. Dat is handig op lange pagina’s, want je actie blijft bereikbaar.
Het kost wel ruimte, en op een telefoon is die schaars. Ik maak zo’n balk daarom vaak smaller zodra je gaat scrollen. Dan houd je het voordeel zonder het nadeel.
Op een telefoon
Daar wordt je menu een knop met drie streepjes. Bij het mobiel menu let ik op drie dingen.
De knop moet groot genoeg zijn om te raken. Het geopende menu moet te sluiten zijn met een duidelijk kruisje. En je belangrijkste actie staat bij voorkeur al zichtbaar naast die knop, niet erin verstopt.
In WordPress bouw je de header als sjabloon dat je een keer inricht. Zo blijft het contact in beeld op elke pagina consistent. En houd je de bovenkant van je website rustig.
Wat je weglaat
Sociale media horen in je footer en niet bovenaan. Daar sturen ze je bezoeker weg voordat hij iets heeft gelezen.
Datzelfde geldt voor een taalkeuze die je maar een keer per jaar gebruikt. Alles wat er niet dagelijks toe doet, kost aandacht die je nodig hebt.
Test hem op een echte telefoon
Wat op een groot scherm elegant aanvoelt, wordt op een klein scherm benauwd. Een balk van tachtig pixels neemt daar een tiende van je scherm in.
Kijk ook of je knop met een duim te raken is. Dat is een test die je in tien seconden doet en die verrassend vaak misgaat.
Meer vragen over Header
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een header op een website?
Wat zet je in de header van je website?
Hoeveel menu-items horen er in een header?
Moet je header meescrollen?
Hoe werkt een header op mobiel?
Wat is het verschil tussen een header en een hero?
Wat is een header op een website?
Drie dingen, en een vierde als je die echt nodig hebt.
Je logo linksboven, met een link naar je homepage. Dat is een oude afspraak die nog steeds werkt, want mensen proberen dat automatisch.
Je hoofdmenu met maximaal vijf tot zeven items. En een duidelijke actie, bijvoorbeeld bellen of een offerte aanvragen.
Die vierde is een zoekfunctie, maar alleen bij veel pagina’s. Op een site met tien pagina’s gebruikt niemand hem.
Zet je telefoonnummer erbij als bellen belangrijk is in jouw vak. Voor een installateur of een advocaat is dat vaak de snelste weg naar een klant.
Wat je weglaat is minstens zo belangrijk. Sociale media horen in je footer, niet bovenaan waar ze je bezoeker wegsturen.
Kijk in je statistieken welke menu-items echt worden aangeklikt. Items die maandenlang op nul staan, horen niet in je hoofdmenu thuis. Schrap dan de items die er structureel onderaan bungelen. Die ruimte gebruik je beter voor je belangrijkste dienst.
Wat zet je in de header van je website?
De header is het blok bovenaan elke pagina van je website. In het Nederlands zeggen we kopbalk.
Hij staat overal hetzelfde, net als je footer onderaan. Die herhaling is precies zijn functie. Waar iemand ook binnenkomt op je site, hij weet meteen op welke site hij is en hoe hij verder kan.
Een goede header doet eigenlijk maar twee dingen. Hij zegt waar je bent en hij helpt je verder.
In de praktijk krijgt hij bij een nieuw ontwerp de meeste aandacht en de minste discipline. Er moet een logo in, een menu, een telefoonnummer, een zoekfunctie en het liefst nog een knop.
Voor je het weet is die balk zo vol dat niemand er meer iets in vindt. En op een telefoon past het sowieso niet. Meer over de onderkant lees je bij footer.
Loop je eigen header eens langs met deze twee vragen. Zegt hij waar ik ben, en helpt hij mij verder? Alles wat geen van beide doet, mag weg.
Hoeveel menu-items horen er in een header?
Vijf tot zeven. Meer wordt een lijst die je leest in plaats van scant, en dat kost je bezoeker tijd.
Heb je meer pagina’s, dan groepeer je ze onder een uitklapmenu. Let er wel op dat zo’n menu op een telefoon lastig werkt en met het toetsenbord bediend moet kunnen worden.
Dat laatste wordt vaak vergeten. Een uitklapmenu dat alleen op hover opent, is onbruikbaar voor iemand die met de tabtoets navigeert. Meer daarover lees je bij accessibility.
Diepe structuren zijn een waarschuwing op zich. Moet je drie niveaus diep klikken om je dienst te vinden, dan klopt je indeling niet.
Dat los je niet op met een beter menu maar met een betere structuur. Kijk dan naar wat je bezoekers echt zoeken en zet dat bovenaan.
Vraag iemand die je site niet kent om een dienst te zoeken. Lukt dat niet binnen twee klikken, dan zit het probleem in je indeling.
Moet je header meescrollen?
Dat hangt af van je pagina’s. Een meescrollende balk blijft in beeld terwijl je naar beneden gaat.
Op lange pagina’s is dat handig, want je actie blijft bereikbaar. Iemand die halverwege overtuigd raakt, hoeft niet terug naar boven.
Het kost wel ruimte, en op een telefoon is die schaars. Een balk van tachtig pixels neemt een tiende van je scherm in beslag.
Ik maak zo’n balk daarom vaak smaller zodra je gaat scrollen. Het logo wordt kleiner en de hoogte halveert. Dan houd je het voordeel zonder het nadeel.
Test het altijd op een echte telefoon en niet alleen op je laptop. Wat op een groot scherm elegant aanvoelt, kan op een klein scherm benauwd worden.
Test je meescrollende balk op een telefoon in liggende stand. Daar is de hoogte het krapst en zie je meteen of het werkt. Vraag ook iemand anders om het te proberen op zijn eigen toestel.
Wat is het verschil tussen een header en een hero?
Die twee worden vaak door elkaar gehaald, terwijl ze iets anders doen.
De header is de balk met je logo en je menu. Die staat op elke pagina precies hetzelfde en verandert niet.
De hero is het grote blok daaronder, met je boodschap, je beeld en je knop. Die verschilt per pagina, want de boodschap verschilt ook.
Samen vormen ze wat je bezoeker ziet zonder te scrollen. Dat gebied heet above the fold en daar wordt in enkele seconden besloten of iemand blijft.
Houd die twee dus gescheiden in je hoofd. De header is navigatie, de hero is overtuiging. Stop je overtuiging in je header, dan wordt hij te vol en werkt geen van beide meer goed.
Houd die twee gescheiden in je hoofd. De header is navigatie, de hero is overtuiging. Stop je overtuiging in je header, dan werkt geen van beide meer. Die scheiding houdt allebei de onderdelen scherp.
Past jouw menu niet meer of vindt niemand er iets in? Stuur me je website via het formulier hieronder. Ik kijk naar je menu-indeling en naar hoe je header zich houdt op een telefoon. Je krijgt een voorstel terug voor een kortere indeling die wel werkt. Vermeld je plaats, dan weet ik meteen waar je zit.
