Wat een herosectie is, en de vier dingen die ze in vijf seconden moet zeggen

Wat is een herosectie op een website?

Een herosectie is het grote blok bovenaan een webpagina, direct onder de navigatie. Ze bevat meestal vier elementen: een kop, één of twee regels ondersteunende tekst, een call-to-actionknop en een beeld of productfoto.

De naam komt van de hero image in webdesign: de grote, brede foto bovenaan een pagina. Het blok hield de naam, ook toen veel sites de foto vervingen door een productscreenshot of gewone tekst op een gekleurde achtergrond.

Een herosectie en boven de vouw hangen samen, maar zijn niet hetzelfde. De vouw is een lijn op het scherm: alles wat een bezoeker ziet voor hij scrolt. De hero is een blok in het ontwerp. Op een laptop vult de hero vaak het hele eerste scherm. Op een smartphone past ze vaak niet, en zakt de knop onder de vouw.

Waarom de herosectie beslist of mensen blijven

Elke bezoeker ziet de hero. Veel bezoekers zien weinig anders. Eyetrackingonderzoek van Nielsen Norman Group toont dat 57 procent van de kijktijd boven de vouw valt, en de hero staat op elk toestel in dat eerste scherm.

Bezoekers oordelen ook snel. Lindgaard en collega’s maten dat mensen in ongeveer 50 milliseconden een stabiele eerste indruk van een webpagina vormen. Daarna scannen ze. De loganalyse van Jakob Nielsen toonde dat bezoekers hoogstens 28 procent van de woorden op een pagina lezen, en eerder 20 procent.

De hero wordt dus in flarden gelezen: de kop, een paar woorden van de subregel, het label van de knop, één blik op het beeld. Leggen die flarden het aanbod niet uit, dan krijgt de rest van de pagina geen kans.

Kort gezegd Schrijf je hero voor iemand die tien woorden leest en naar één beeld kijkt. Die tien woorden beslissen over het bezoek.

De vier dingen die een herosectie in vijf seconden moet zeggen

Een goede hero beantwoordt vier vragen voor de bezoeker ze stelt. Elk element van het blok heeft één van die taken.

1. Wat is dit? De kop noemt wat je aanbiedt, in woorden die een onbekende gebruikt. “Boekhoudsoftware voor freelancers” werkt. “Financiën, opnieuw uitgevonden” werkt niet.
2. Is het voor mij? De subregel noemt het publiek of de situatie. Eén regel, hoogstens twee. Zo wordt een categorie een match.
3. Waarom zou ik? Eén concreet resultaat of één bewijs: een uitkomst, een cijfer, een bekende klantnaam. Beweringen zonder bewijs lezen als decoratie.
4. Wat doe ik nu? Eén hoofdknop met een werkwoord dat zegt wat er gebeurt, zoals “Start je gratis proefperiode” of “Vraag een offerte”. Een tweede, rustigere link is prima. Twee knoppen met hetzelfde gewicht niet.

Het beeld ondersteunt alle vier. De eyetrackingstudies van Nielsen Norman Group tonen dat bezoekers beelden met informatie bestuderen, zoals productfoto’s en echte mensen, en generieke stockfoto’s negeren. Toon het product, het resultaat of de klant. Een foto van lachende modellen achter een laptop neemt de grootste zone van de pagina in en zegt niets.

De delen van een herosectie, en hoe elk deel faalt

Element	Taak	Veelgemaakte fout
Kop	Zeggen wat je aanbiedt	Een slogan of woordspeling die de rest van de pagina nodig heeft om te kloppen
Subregel	Zeggen voor wie het is en waarom het helpt	Een tweede slogan, of een alinea van vijf regels
Call to action	De volgende stap tonen	Twee of drie knoppen met hetzelfde gewicht, of een vaag label zoals “Meer info”
Beeld	Het product of het resultaat tonen	Een stockfoto, abstracte vormen, of een animatie die de boodschap verbergt
Bewijs	De belofte geloofwaardig maken	Ontbreekt, of staat drie schermen lager

Veelgemaakte fouten in een herosectie

• Een carrousel. Draaiende slides lijken een manier om vijf dingen tegelijk te zeggen. Bezoekers zien er één. Aan de University of Notre Dame mat Erik Runyon dat ongeveer 1 procent van de homepagebezoekers op een item in de carrousel klikte, en 84 procent van die kliks naar het eerste ging.
• Een kop die de subregel nodig heeft. Zegt de kop alleen niet wat je verkoopt, dan komen de meeste bezoekers het nooit te weten. Lees de kop voor aan iemand buiten je bedrijf en vraag wat je doet.
• Een hero die hoger is dan het smartphonescherm. Een beeld over de volle hoogte duwt op mobiel de kop of de knop onder de vouw. Check de hero op een scherm van 390 pixels breed voor je hem live zet.
• Een geanimeerde kop. Woorden die zichzelf typen of roteren worden halverwege betrapt. In een 5sec.io-teardown van notion.com ving de capture het geanimeerde woord in de kop halverwege als “Scal”.
• Tekst op een drukke foto. Witte tekst op een gedetailleerd beeld verliest plaatselijk contrast. Heeft de tekst een donkere overlay nodig om leesbaar te blijven, dan doet het beeld de verkeerde job.

Zo test je je herosectie

Doe een 5-secondentest. Toon de pagina aan iemand die ze nooit zag, haal ze na vijf seconden weg en stel drie vragen: wat biedt dit bedrijf aan, voor wie is het, en waar zou je klikken? Vage antwoorden wijzen naar de hero.

Zonder tester leest de gratis 5-secondentest op 5sec.io je live pagina zoals een nieuwe bezoeker dat doet. Hij checkt of de kop zegt wat het product is, of de vouw een resultaat belooft en of het hero-beeld de kop ondersteunt, en hij citeert het bewijs dat hij vond. Voor een hele site scoort de Above the Fold Audit een vijftiental sleutelpagina’s en herschrijft hij de zwakste copy.

Herstel eerst de woorden, dan het ontwerp. De meeste zwakke hero’s falen op de kop en het label van de knop, en die herschrijf je goedkoop. Deze zeven voorbeelden van herosecties tonen het verschil. Slaagt de hero en vertrekken bezoekers toch, doe dan een conversieoptimalisatie-audit op de pagina’s erna.