Het eerste wat een bezoeker van je site ziet, is het bovenste deel van de pagina: de hero-sectie. In een paar seconden vormt hij zich een oordeel over wie je bent, wat je doet en of het de moeite waard is om verder te kijken. Klopt dat eerste scherm niet, dan haakt iemand af nog voor hij de rest heeft gezien. In deze gids leg ik uit hoe je een hero-sectie inricht die meteen duidelijk maakt waar je bezoeker is, wat erin hoort en hoe je voorkomt dat je dat kostbare eerste scherm volpropt.
Wat is de hero-sectie?
De hero-sectie is het bovenste deel van een pagina, het stuk dat een bezoeker meteen ziet zonder te scrollen. Meestal bestaat het uit een korte kop, een paar regels uitleg, een knop en soms een beeld. Het is de etalage van je pagina: wat hier staat, bepaalt of mensen naar binnen lopen.
Omdat dit het eerste is wat iedereen ziet, krijgt het de meeste aandacht en doet elke keuze ertoe. Een rommelige of vage hero kost je bezoekers voordat de rest van je site een kans heeft gehad. Hoe dit samenhangt met de eerste indruk, lees je in de blog over de eerste indruk van je website.
Waarom het eerste scherm beslist
Mensen oordelen online razendsnel. Binnen enkele seconden besluit een bezoeker of hij op de juiste plek is. Is dat onduidelijk, dan klikt hij weg, vaak terug naar Google om bij een concurrent te kijken.
Het eerste scherm moet daarom drie dingen meteen beantwoorden: wie ben je, wat doe je en wat kan ik hier? Lukt dat, dan blijft de bezoeker en geef je jezelf de kans om de rest van je verhaal te vertellen. Hoe je die hele route opbouwt, lees je in de gids over conversiegericht ontwerp.
De onderdelen van een sterke hero
Een goede hero-sectie bestaat uit een paar vaste onderdelen die samen meteen duidelijkheid geven.
- Een heldere kop. In één zin wat je doet en voor wie, zonder vakjargon of mooie maar lege woorden.
- Een korte toelichting. Een of twee regels die de kop aanvullen en de belangrijkste twijfel wegnemen.
- Eén duidelijke knop. De logische volgende stap, zoals een offerte aanvragen, zonder dat er vijf knoppen om aandacht vechten.
- Eventueel een passend beeld. Een foto of illustratie die je boodschap versterkt, niet alleen het scherm vult.
Wat je weglaat is hier net zo belangrijk als wat je toont. Hoe minder ruis, hoe sneller de bezoeker snapt waar hij is. Het samenspel van die onderdelen sluit aan op de gids over UI-design.
Een kop die in één zin raakt
De kop is het hart van je hero. Hij moet in één oogopslag duidelijk maken wat je bezoeker bij jou vindt. Een paar richtlijnen helpen daarbij.
Zeg wat je doet, niet wat je bent
Een kop als "Welkom op onze website" zegt niets. "Websites op maat voor ondernemers in Twente" vertelt meteen waar het over gaat. Wees concreet over wat de bezoeker eraan heeft.
Schrijf voor de bezoeker
Gebruik de woorden die je klant zelf zou gebruiken, niet je eigen vakjargon. Hoe je een scherpe kernboodschap formuleert, lees je in de blog over een duidelijke kernboodschap.
Houd het kort
Een lange kop wordt niet gelezen. Eén heldere zin werkt beter dan een alinea, zeker op een telefoon waar de ruimte beperkt is.
Een bezoeker beslist in seconden of hij blijft. Je hero-sectie is je enige kans om die seconden goed te gebruiken.
Veelvoorkomende valkuilen
De meeste zwakke hero-secties ontstaan doordat er te veel in wil of de boodschap te vaag blijft. Een paar valkuilen die ik vaak tegenkom:
Te veel tegelijk
Een kop, drie knoppen, een wisselende diavoorstelling en een lap tekst: dan weet de bezoeker niet waar hij moet kijken. Kies één boodschap en één actie.
Vage of lege taal
Woorden als "kwaliteit" en "passie" zeggen niets als ze niet onderbouwd zijn. Wees concreet over wat je doet en voor wie.
De mobiele bezoeker vergeten
Op een klein scherm is de ruimte beperkt en moet de kern meteen zichtbaar zijn. Wat op een grote monitor past, kan op mobiel onleesbaar worden, zoals ik beschrijf in de gids over responsive design.
Zelf doen of uitbesteden?
Aan je hero kun je zelf veel verbeteren. Schrijf een kop die in één zin zegt wat je doet, voeg een korte toelichting toe en kies één duidelijke knop. Laat iemand anders ernaar kijken en vraag of hij binnen vijf seconden snapt waar de site over gaat. Die toets levert vaak al veel op.
Wil je een eerste scherm dat echt overtuigt en bezoekers vasthoudt, dan loont het om dat door iemand te laten opzetten die let op de balans tussen tekst, beeld en actie. Niet omdat je geen kop kunt schrijven, maar omdat de keuzes die een hero scherp maken juist de keuzes zijn die je makkelijk over het hoofd ziet. Wil je weten wat dat voor jouw site betekent? Bekijk dan de webdesign op maat of leg me je vraag voor via de contactpagina.
Veelgestelde vragen
De hero-sectie is het bovenste deel van een pagina, het stuk dat een bezoeker meteen ziet zonder te scrollen. Meestal bevat het een korte kop, een paar regels uitleg en een knop. Het is het eerste wat mensen zien en bepaalt voor een groot deel of ze blijven of weggaan.
Houd het kort en duidelijk. Een kop die in één zin zegt wat je doet en voor wie, een korte toelichting en één heldere knop die de logische volgende stap is. Wat je weglaat is net zo belangrijk als wat je toont: een overvolle hero werkt juist tegen je.
Een sterk beeld kan helpen, maar het is geen verplichting. Belangrijker is dat je kop en je knop direct duidelijk zijn. Een foto die niets toevoegt en alleen laadtijd kost, kun je beter weglaten. Het beeld hoort je boodschap te versterken, niet te verdringen.
Vaak is dat een van de snelste manieren om meer uit je site te halen. We scherpen de kop aan, maken de knop duidelijker en halen ruis weg, zodat bezoekers meteen snappen waar ze zijn. Ik reken daarvoor een projectprijs op maat, zodat je vooraf weet wat het kost.
Verder in de kennisbank: Conversiegericht ontwerp: van bezoeker naar aanvraag · UI-design: het ontwerp dat je ziet en aanraakt · UX-design: een site die prettig werkt