Wat een goede hero-sectie doet

Een goede hero-sectie heeft één taak

Een hero-sectie zorgt dat de juiste persoon blijft scrollen. Iemand komt binnen, geeft je een paar seconden, en beslist of de pagina over zijn probleem gaat. Alles in dat eerste scherm werkt naar die ene beslissing toe. Vier dingen dragen hem: wat het product is, voor wie het is, wat er voor hem verandert, en één duidelijke actie. Slogans, awardlabels en bewegende achtergronden pikken ruimte in van die vier.

Zeg wat het ding is

Koppen mislukken als ze een gevoel beschrijven in plaats van een product. Denk anders over hoe je team bouwt kan een CRM zijn, een wervingstool of een yoga-app. Projectmanagement voor bouwploegen, gebouwd rond foto’s van de bouwplaats vertelt een lezer in één regel of hij moet blijven. Gebruik het woord voor je categorie dat je koper zelf in een gesprek gebruikt. Heeft je kop de subkop nodig om te kloppen, dan doet je kop te weinig.

Noem de persoon die je wilt

Een regel die afbakent doet meer werk dan de meeste ontwerpers verwachten. Voor Shopify-merken die 50.000 dollar per maand en meer doen stuurt de verkeerde bezoekers weg en vertelt de juiste dat ze goed zitten. Oprichters zijn bang dat dit hun markt kleiner maakt. In de praktijk gaat de kwaliteit van de reacties omhoog, want wie zich meldt, is al half overtuigd. Zet die afbakening in de subkop, of in het regeltje boven de kop.

Eén belofte en één actie

Twee knoppen met hetzelfde gewicht splitsen de aandacht en verlagen de kliks op allebei. Kies de actie die je het liefst wilt, geef die de volle knop, en maak de tweede optie een rustige tekstlink. In de knoptekst hoort te staan wat er daarna gebeurt. Haal mijn paginaplan werkt beter dan Versturen, en Bekijk de prijzen werkt beter dan Meer weten, want dan weet de lezer wat er achter die klik zit. Gebruik overal op de pagina dezelfde knoptekst.

Laat het product zijn werk doen

Dek de kop af met je hand en kijk alleen naar de hero-afbeelding. Kun je niet zien wat er verkocht wordt, dan is het beeld versiering. Een screenshot van de echte interface, een foto van het product in een echte situatie, of een kort filmpje van het resultaat verslaan allemaal een lachend stockmodel achter een laptop. Verkoop je een dienst, laat dan zien wat je oplevert: de pagina die je hebt ontworpen, het dashboard, het afgeronde rapport.

Zet bewijs naast de knop

Eén regel bewijs bij de call to action haalt de eerste twijfel weg voordat die ontstaat. Een rij logo’s van vijf klanten die mensen kennen, een beoordeling met het aantal reviews erbij, of één resultaat met een echt getal. Die werken alle drie. Hou het bij één stuk bewijs in de hero en bewaar de case studies voor latere secties. Vage keurmerken zonder bron erbij lezen meestal als opvulling.

Een test van vijf minuten voor je hero-sectie

Laat de hero vijf seconden zien aan iemand buiten je bedrijf. Haal hem weg en stel dan drie vragen. Wat verkoopt dit? Voor wie is het? Wat gebeurt er als je op de knop klikt? Twee van de drie antwoorden fout betekent dat de hero herschreven moet worden voordat de rest van de pagina iets uitmaakt. Doe dit ook op een telefoonscherm, want daar leest het grootste deel van je verkeer hem en is dat eerste scherm veel korter.