15+ Prachtige Website Headers en waarom ze zo goed werken

Wat is het eerste wat een gebruiker op uw website ziet?

Precies, de header.

Als die niet aantrekkelijk genoeg is, als die geen duidelijkheid schept, gaan uw gebruikers misschien gewoon weg en komen ze misschien nooit meer terug.

Dat willen we toch niet?

Website-headers zijn een centraal onderdeel van het ontwerpen van een website. Ze spelen een sleutelrol bij het grijpen van de aandacht van de gebruikers en het tot stand brengen van een band met de bezoekers van de website.

Daarom zullen we in de volgende regels enkele header-ontwerpprincipes aanpakken waarvan u zich bewust moet zijn bij het ontwerpen van een website-header.

Grondbeginselen voor het ontwerp van een header

Onderzoek heeft uitgewezen dat de ogen van de gebruiker zich op een webpagina bewegen volgens een van de volgende 3 patronen:

• Het Gutenberg-patroon

Afbeelding Bron: https://vanseodesign.comThe Het Gutenberg-patroon kan worden toegepast op inhoud met veel tekst. Het suggereert dat de ogen van de lezer in een reeks horizontale bewegingen over en langs de pagina gaan.

Voorbeeld:

• Het Z-vormige patroon

Het Z-patroon definieert het pad dat de ogen van gebruikers volgen wanneer ze een pagina scannen, een pad dat de vorm heeft van een Z-letter. Het wordt aanbevolen voor het ontwerp van landingspagina’s, die lezers snel scannen.

Voorbeeld:

• Het F-vormige patroon

Dit patroon beschrijft de meest gebruikte stijl van het lezen van blokken inhoud in het online medium. Gebruikers scannen snel een webpagina, en hun ogen volgen een F-patroon.

Voorbeeld:

Zonder verder in detail te treden over deze patronen, willen we benadrukken dat bij elk van deze modellen de bovenste horizontale lijn de plaats is waar bezoekers beginnen met het scannen van een pagina.

Wat te integreren in de header van een website?

Deze patronen laten zien waarom een webdesigner zorgvuldig moet beslissen wat gebruikers als eerste te zien moeten krijgen. De header moet dienen als een haakje dat hun aandacht trekt en hen uitnodigt om de rest van de pagina te verkennen.

Er is geen kans om een tweede indruk te maken. Denk dus goed na over wat u in de header opneemt:

• Sterke hero image

Een hero image is een zeer grote bannerafbeelding die boven de vouw op een webpagina wordt weergegeven. Het wordt opgenomen in de header-sectie en is het eerste wat de gebruikers zien wanneer ze op een website aankomen. Hero images hebben ook tot doel de aandacht van bezoekers te vestigen op het unique selling point (USP) van het bedrijf. Een best-case praktijk stelt dat het gebruik van gezichten van echte mensen in de hero images bezoekers kan helpen zich beter te identificeren met het merk. De communicatie wordt menselijker en persoonlijker.

Bron: Drift.com

• Unique selling point (USP)

De USP is een zinsnede die de bestaansreden van een bedrijf uitlegt. Het moet duidelijk maken wat het bedrijf doet, waarom en voor wie. Het moet ook de nadruk leggen op unieke kenmerken en voordelen, waardoor het merk zich onderscheidt van zijn concurrenten. Een sterke USP is van vitaal belang om de juiste boodschap over te brengen aan de bezoekers van de website, en uiteindelijk om hen om te zetten in klanten.

Bron: miro.com

• Merknaam

De merknaam zorgt ervoor dat mensen gewend raken aan de identiteit van de site of versterkt het beeld dat mensen van uw bedrijfsidentiteit hebben.

Het beeld moet uw merkpersoonlijkheid weerspiegelen en ervoor zorgen dat de stem van uw merk consistent is op de hele website. Het moet gemakkelijk herkenbaar zijn, zelfs als het uit de website header wordt geknipt. En wanneer de afbeelding in de header van de website wordt geplaatst, moet deze een belangrijke rol spelen bij het creëren van een persoonlijke band met elke gebruiker.

Bron: carolinaherrera.com

• Productvideo

Omdat gebruikers slechts 50 milliseconden nodig hebben om een mening over een website te vormen, betekent dit dat u de belangrijkste boodschappen in de header moet plaatsen. Dit is de reden waarom veel bedrijven niet wachten tot hun gebruikers naar beneden scrollen en bij de kenmerken van hun product / dienst komen, maar ze gebruiken de kracht van video om hun boodschap beter over te brengen. Laten we ook niet vergeten dat 78% van de mensen elke week online video’s bekijkt en 55% elke dag.

Bron: wistia.com

• Call to action (CTA)

Een CTA is een boodschap (meestal op een knop), die een bepaalde reactie van de websitebezoekers teweegbrengt. De Call-to-action moet duidelijk gedefinieerd zijn en gemakkelijk te begrijpen zijn voor de bezoekers van de website. Een CTA die in de header wordt geplaatst, precies daar waar bezoekers hun reis naar de website beginnen, verhoogt uiteraard de kans op de gewenste actie van de betreffende gebruikers.

Bron: creatopy.com

• Product met

In het geval u een e-commercewinkel runt, wilt u de kwaliteit en het gemak van een bepaald product benadrukken, en de beste manier om dit te doen is door dat product in de header op te nemen. De aandacht van de gebruikers zal naar die beste deal worden gedreven, en ze zullen geneigd zijn om in het koopproces te stappen.

Bron: amazon.com

In elk van de bovenstaande gevallen geldt de algemene vuistregel: houd het simpel, houd het duidelijk, maak de koptekst boeiend! Onderzoek toont aan dat “het gemiddelde verschil in hoe gebruikers omgaan met info boven versus onder de vouw is 84%.” Het is dus het beste om je inspanningen te richten op het zo veel mogelijk terugdringen van die getallen. En dat lukt het beste als je jezelf een aantal doelen hebt gesteld over wat je wilt overbrengen.

Grote websites, zoals www.youtube.com, beperken de ruimte die aan de header wordt besteed tot slechts een kleine hoeveelheid. Dit is met opzet gedaan, omdat het de bedoeling is de aandacht van de gebruikers te richten op iets belangrijkers, zoals producten, of diensten, of video’s (bijv. YouTube).

Soms heb je niet eens een header nodig, of als je die wel nodig hebt, heb je maar een kleine nodig.

Het hangt allemaal af van de bijzonderheden van de website. Denk erover na en geef uw website de persoonlijkheid die het nodig heeft, ongeacht wat de web design trends u nu en dan “vertellen”.

What Does Your Website Header Inspire?

Naast het overbrengen van bepaalde boodschappen, kunt u ook overwegen om bepaalde emoties bij de lezers teweeg te brengen. Afhankelijk van het doel dat u aan de header geeft, kan deze de lezers inspireren tot een van de volgende zaken:

• Curiosity

Voor bepaalde websites is het geschikt om een header op te zetten die de lezers nieuwsgierig maakt. Ze zullen meer willen weten, ze zullen naar meer verlangen, ze zullen zich haasten om de rest van het verhaal te ontdekken.

Dat is wat ik voel bij deze header van Canva. Ze maken een enorme belofte daar: “Ontwerp alles”. En je wordt uitgenodigd om dit te testen. Kun je dat weerstaan?

• Actie

In sommige gevallen is het beter om direct vanuit de header aan te zetten tot actie. Met een call-to-action nodigt u gebruikers uit om direct op een knop te klikken of een andere interactie met de website uit te voeren. In het geval van Planable is hun USP direct gekoppeld aan de CTA hieronder. En als u nog niet klaar bent om te kopen, is er ook een optie om een demo te plannen.

• Trust

Het kan nuttig zijn om te beginnen met het wekken van vertrouwen bij uw bezoekers. U wilt dat ze later tot actie overgaan, en daarvoor moeten ze er het volste vertrouwen in hebben dat ze de juiste beslissing nemen.

Laten we eens kijken hoe Salesforce dat doet. Ze zeggen dat ze ’s werelds grootste CRM zijn. Oké, je zou kunnen zeggen dat 99% van de bedrijven die er zijn, niet de eerste zijn op hun gebied. En u zou gelijk hebben. Maar, als je hieronder leest, is er zeker iets dat je kunt gebruiken. Er is een case study die laat zien hoe efficiënt het product is. U kunt zo’n casestudy zelf gebruiken.

• Pijn

Waarom zou u in hemelsnaam pijn willen inboezemen bij de lezers, vooral in de kop? Nou, veel bedrijven hebben hun marketing gebaseerd op het FUD-principe (Fear, Uncertainty, Doubt). In een vroeg stadium van het conversieproces zal angst/pijn de beslissing triggeren om onmiddellijk een oplossing toe te passen en die pijn te doen wegebben.

Dit kan een aanpak zijn voor cybersecuritydiensten, fysieke beveiligingsdiensten, maar ook in de gezondheidszorg of bij pensioenfondsen.

Een dergelijke aanpak kan worden toegepast in campagnes die mensen bewust willen maken van het feit dat ze zich moeten vaccineren tegen COVID, of dat ze een veiligheidsgordel moeten dragen.

• Laughter

Misschien wil je emotioneel contact maken met de bezoekers, vanaf het allereerste begin. En er is geen betere manier om dit te doen dan ze aan het lachen te maken. En hard te lachen. Er ontstaat een gevoel van medeplichtigheid en de gebruikers staan aan uw kant terwijl ze de website verkennen.

• Bekendheid

Door de situatie van de gebruikers te verbinden met een vergelijkbare situatie die in de header wordt gepresenteerd, kan een zekere mate van vertrouwdheid worden gecreëerd.

Typen headers voor verschillende soorten websites

Afhankelijk van de specifieke kenmerken van de website, zal de ene header beter in het algemene ontwerp passen dan de andere. Daarom moet u een duidelijk idee hebben van welk type header het beste bij uw eigen website past (e-commerce, blog, portfolio, online krant, enz.).

• CTA-gerichte header

In het geval van Blue Apron gebruikt de header van de website een grote video, in plaats van een grote hero image. Het brengt een gevoel van gezelligheid, vertrouwdheid en eetlust over.

Daarnaast hebben we een CTA die de gebruiker uitnodigt actie te ondernemen om te profiteren van dezelfde gezellige en lekkere ervaring.

De website van CrazyEgg heeft een header die gebruikers uitnodigt hun product te nemen voor een live demonstratie. Hun product is gewoon perfect geschikt voor dergelijke realtime demonstraties. En het bewijst direct de voordelen van het product. Ze gebruiken ook een visuele cue die wijst op de CTA: de hand van de man in de ballon leidt het oog naar de knop.

• Brand-focused header

Dit is een prachtig voorbeeld van een website met een header die is gericht op merkidentiteit en branding-elementen. Het bevat het logo, een replicatie van de kleuren van het merklogo in het bovenste gedeelte, evenals hun slogan.

• Content-focused header

Deze header is zeer geschikt voor blogs en tijdschriften, die artikelen en verhalen promoten.

Maar ik heb ook enkele uitzonderingen gevonden.

Patagonia promoot hun winkel niet op de homepage, maar ze promoten verhalen die laten zien dat ze zich inzetten om een verandering in de wereld teweeg te brengen. Het huidige verhaal, dat in de header van de website staat, gaat over slavernij en activisme.

In het geval van Ikea worden bezoekers aan de linkerkant van het scherm naar een van de online winkels geleid, terwijl de andere helft gebruikers vraagt het verhaal van Ikea te lezen.

• Gerichte header met video-achtergrond

BUKWILD heeft 3 verschillende video’s in de header van de website geïntegreerd. Elk van de video’s kan worden afgespeeld door de muis op het corresponderende gedeelte te plaatsen. Interessant hierbij is de creatieve manier waarop ze video’s gebruiken als onderdelen van een groter “plaatje”, een plaatje dat hun merk vertegenwoordigt.

• Productgerichte header

In het geval van Cropp, een online modewinkel, worden de nieuwste collecties in de header uitgelicht.

Threadless.com plaatst wall-art in een context en is voorzien van een CMYK Squad. De header bevat ook een duidelijke CTA, voor iedereen die zich op een bepaalde manier thuis voelt in dat scenario dat door de “squad” in de header wordt gepresenteerd.

• Personal branding-focused header

In het geval van de reisblog Alex in Wanderland zien gebruikers in de header van de website, naast een foto van Alex, het begin van een verhaal: “Five years and counting on the road…”. Dit is een uitnodiging voor de lezers om meer verhalen te willen ontdekken.

Om af te ronden…

Headers dragen in hoge mate bij aan het succes of falen van een website. Technisch gesproken is dit bovenste gedeelte natuurlijk het eerste op de website waar mensen mee interageren.