Een hechte club mensen die de Tilburgse gezelligheid ademt en de ambitie heeft om altijd een stapje verder te gaan.
Gwen
Een hechte club mensen die de Tilburgse gezelligheid ademt en de ambitie heeft om altijd een stapje verder te gaan.
Binnen 5 seconden besluiten bezoekers of ze verder willen op jouw website of liever wegklikken. Een goede landingspagina zorgt dan ook voor een langere bezoekersduur, wekt vertrouwen en overtuigt bezoekers om door te klikken naar andere pagina’s. En dat begint allemaal met de website-header.
Wist je dat maar liefst 70% van de bezoekers niet naar beneden scrolt als het eerste beeld ze niet aanspreekt? Je hebt dus maar één kans om indruk te maken. Wil je op beide vlakken goed scoren? Zorg dan voor een slimme website header, met een goede call-to-action en duidelijke unique selling point. Hoe je dat doet, ontdek je in deze uitgebreide blogpost.
Internetgebruikers zijn ongeduldig en kritisch. Ze willen direct weten of jouw website hun vraag beantwoordt of hun behoefte vervult. Zonder te scrollen willen ze zien:
Omdat de header het eerste is wat bezoekers zien, moet je hier extra aandacht aan besteden. Zie het als je digitale etalage. Is het rommelig en onduidelijk? Dan lopen mensen door. Helder, uitnodigend en professioneel? Dan stappen ze juist binnen. Het bovenste gedeelte van je site bepaalt de eerste indruk, dus zorg dat die indruk positief is
Hieronder delen we acht tips die je helpen een krachtige en slimme website header te ontwerpen.
De bezoeker moet boven de vouw (dus zonder te scrollen) in één oogopslag begrijpen wat jouw organisatie doet. Dat kan met:
Enkele voorbeelden hiervan zijn:
Vermijd jargon en blijf dicht bij je doelgroep. Spreek hun taal en speel in op hun behoefte of probleem. Hiermee laat je mensen meteen zien wat je doet én met wie ze te maken hebben.
Zorg voor geschikte afbeeldingen voor retina-schermen. Hiermee komt de snelheid van de website niet in het gedrang, maar wordt een grotere upload getoond op retina-schermen. Houd hierbij rekening met de maximale breedte van de website en zorg dat je de goede header-afbeelding uploadt met een minimale breedte van 1920 pixels. Ruim 95 procent van de internetgebruikers gebruikt een scherm van dit formaat of kleiner.
En op mobiel?
Voeg daarnaast ook een mobiele header toe. Op veel websites wordt simpelweg de header afbeelding van de desktopversie geschaald naar een kleiner formaat, zodat deze op het mobiele scherm past. Dan zie je alleen niet meer wat er op het plaatje staat. Een goede responsive header en website biedt dan ook de mogelijkheid om een aparte header voor mobiele gebruikers te uploaden. Zo houd je de regie over wat bezoekers zien. Zorg er dus voor dat de teksten in de afbeelding en de knoppen goed leesbaar blijven op alle schermen.
De tijd dat je álle producten en diensten in de hoofdnavigatie moest proppen, ligt ver achter ons. Een overvolle menubalk zorgt alleen maar voor keuzestress. Een slimme navigatie bevat niet alleen de juiste links, maar maakt het bezoekers ook makkelijk om te vinden wat ze zoeken.
Richt je navigatie slim in door:
Voorbeeld:
Een bouwbedrijf kan in de hoofdnavigatie kiezen voor:
Daarna kun je onder ‘Diensten’ specifieke opties zoals ‘Renovatie’ of ‘Nieuwbouw’ aanbieden. Zo blijft het overzichtelijk én doelgericht.
Is er een actie waarvoor bezoekers vaak naar jouw website komen? Of wil je de conversie-ratio verhogen? De homepage-header geeft je een buitenkans om een call-to-action te verwerken.
Verwerk daarom een duidelijke call-to-action in de header, bijvoorbeeld in de vorm van een knop. Zo hoeft de bezoeker niet te scrollen en kun jij diegene sturen naar een belangrijke pagina. Bij een e-commerce-site is dat vaak het winkelwagentje, maar wat is relevant voor jouw organisatie?
Denk aan:
Let op: laat de button los ontwerpen van de headerafbeelding. Dit omdat beelden minder goed worden geïndexeerd door zoekmachines dan tekst en omdat afbeeldingen anders schalen op verschillende schermgroottes, wat ten koste kan gaan van de zichtbaarheid van je knop. Bovendien bespaart dit je werk wanneer je later een nieuw beeld of een andere call-to-action wilt toevoegen: je hoeft dan niet de hele headerafbeelding aan te passen.
Kies voor een contrasterende kleur voor de knop, zodat deze meteen opvalt en bezoekers niet hoeven te zoeken. Voeg eventueel ook een korte onderregel toe bij de call-to-action waarin je de actie nog een keer benadrukt of uitlegt waarom deze aantrekkelijk is (“Binnen 2 minuten geregeld!”). Op die manier verhoog je de kans dat bezoekers meteen doorklikken en actie ondernemen.
Een video in de homepage-header is in veel gevallen geen goed idee. Je pagina’s worden op die manier al snel ’te druk’. Dat schrikt bezoekers eerder af dan dat het hen aanmoedigt om verder te lezen.
Zit je in een erg dynamische industrie en is je doelgroep jong, dan zou je er tóch voor kunnen kiezen een video in de header te plaatsen. Maar zorg dan wel dat deze kort blijft; het moet echt een sfeerbeeld zijn van een aantal seconden.
Voor een complete bedrijfsvideo, waarin je uitlegt wat je doet, is de header geen goede plek. Zet zo’n video liever tussen de content. Goede plekken daarvoor zijn de over-ons-pagina, de contact-pagina of een andere landingspagina waar het bedrijfsfilmpje relevant is.
Plaats hem overigens ook op YouTube en werk de SEO daar bij. Omdat YouTube na Google wereldwijd de grootste zoekmachine is, wordt de video op deze manier goed gevonden.
Wanneer je kiest voor een video in de header, zorg dan dat deze niet te lang duurt.
Naast een duidelijke navigatie en een goede call-to-action kan een zoekbalk in de website-header een enorme meerwaarde hebben. Zeker als je website veel content of producten bevat, helpt een zoekfunctie bezoekers snel te vinden wat ze zoeken. Dit vergroot de gebruiksvriendelijkheid van je site en laat zien dat je rekening houdt met de behoeftes van de gebruiker. Plaats de zoekbalk op een logische plek, bijvoorbeeld rechtsboven in de html header, zodat hij altijd binnen handbereik is en goed leesbaar is op alle apparaten.
Het bovenste gedeelte van je website, de header, is dé plek om jouw unique selling points (USP’s) te tonen. Dit zijn de voordelen die jou onderscheiden van concurrenten en de reden waarom mensen juist voor jouw bedrijf moeten kiezen. Denk aan: “Gratis bezorging”, “24/7 bereikbaar”, of “Persoonlijk advies”. Een korte opsomming van 3 USP’s als visuele iconen of korte tekstjes in de header werkt goed. Dit helpt bezoekers om sneller een beslissing te nemen en maakt het direct duidelijk waarom ze bij jou moeten zijn.
Een slider kan handig zijn als je meerdere boodschappen wilt communiceren. Toch kleven er nadelen aan:
Gebruik een slider alleen als elk scherm zijn eigen boodschap heeft en goed leesbaar is, en beperk het tot maximaal 3 slides.
Hoewel dit artikel over de header gaat, is de footer minstens zo belangrijk. Een goede header verleidt bezoekers, maar de footer ondersteunt met extra links, contactgegevens en aanvullende informatie. Samen zorgen ze voor een consistente, professionele en gebruiksvriendelijke ervaring.
Als specialist in websites die converteren, zien we dat met kleine details soms grote winst valt te behalen. In deze reeks gaven we eerder vijf tips voor perfecte afbeeldingen op jouw website en het downloaden van gratis fonts. Zo ben je al vrij compleet op de hoogte van alle belangrijke designzaken voor jullie site.
De website header is een van de belangrijkste onderdelen van je website, maar niet het enige. Ook de rest van je site moet bijdragen aan een positieve gebruikerservaring: van duidelijke teksten en goede navigatie tot snelle laadtijden en aantrekkelijke visuals.
Als specialist in websites die converteren, weten wij dat kleine details grote impact kunnen hebben. Eerder deelden we al tips voor perfecte afbeeldingen op jouw website en het downloaden van gratis fonts voor je site. Met een slimme website header maak je het plaatje compleet en geef je bezoekers een reden om te blijven en te klikken.
Wat werkt voor de één, werkt niet altijd voor de ander. Blijf testen hoe bezoekers jouw header gebruiken, waar ze klikken, welke links populair zijn en of ze de slider zien. Pas op basis van data aan en verbeter zo stap voor stap de eerste indruk van jouw site.
Wil je weten hoe jouw homepage scoort? Of hulp bij het optimaliseren van je header? Neem contact met ons op en we kijken graag met je mee.