Voorbeelden van herosecties: vier die slagen voor de 5-secondentest, en drie die zakken

Hoe we deze herosecties lazen

We legden elke homepage vast op 27 oktober 2026 in een desktopvenster van 1440 op 900 pixels, het eerste scherm dat een laptopbezoeker ziet. Daarna toetsten we elke hero aan de vier vragen uit onze gids over wat een herosectie is: wat is dit, is het voor mij, waarom zou ik, en wat doe ik nu?

Eén blik volstaat voor deze toets. Lindgaard en collega’s maten dat mensen in ongeveer 50 milliseconden een vaste eerste indruk van een webpagina vormen.

Hero’s veranderen vaak, dus zie elk voorbeeld als een momentopname van die dag. Notion, Linear en Framer staan ook in 5sec.io-teardowns van 31 augustus 2026. Zo tonen we één hero voor en na een herschrijving.

Voorbeelden van herosecties die slagen

1. Wise: het voordeel staat in de kop

Kop: “The international account that saves you money.” Subregel: “Everything you need to send, spend and manage your money worldwide. Low fees. Lightning-fast. 100% transparent.” Knoppen: “Open an account in minutes” en een rustiger “Send money now”.

In acht woorden noemt de kop de categorie, een internationale rekening, en de winst: je bespaart geld. De subregel noemt drie taken die een bezoeker herkent. De hoofdknop zegt wat er gebeurt en hoe lang het duurt.

Neem over: zet het voordeel in de kop, niet in de derde sectie. De meeste hero’s zeggen wat ze zijn. Weinig zeggen wat de bezoeker eraan heeft.

2. Calendly: de knop neemt de laatste twijfel weg

Kop: “All the work around meetings, handled.” Subregel: “From AI-powered scheduling to automated meeting recaps and follow-ups, get the busywork done with fewer tools and less effort.” Knoppen: “Sign up with Google” en “Sign up with Microsoft”, met “No credit card required” eronder.

De kop geeft weinig details, de subregel vult dat aan met drie concrete taken. De knoppen doen het sterkste werk. Ze noemen een account dat de bezoeker al heeft, en de regel eronder beantwoordt de vraag die elke gratis proefperiode oproept.

Neem over: beantwoord het grootste bezwaar naast de knop. Eén korte regel over kosten of moeite doet meer dan een alinea verderop.

3. Framer: dezelfde hero, herschreven

Op 31 augustus gaf de 5sec.io-teardown van framer.com de fold 6 op 12. De kop luidde “Framer is the AI design agent for every step from idea to launch”. Het woord “website” stond nergens in het eerste scherm van een websitebouwer, en de subregel die het product uitlegde stond onder de vouw.

Op 27 oktober luidt de kop “Framer is the pro website builder with a world-class design agent”. De subregel staat nu in het eerste scherm: “Every change the agent makes stays editable on a real design canvas, with hosting, CMS, analytics, SEO, and AEO built in. Free to start for any type of site.” De knop “Get started for free” bleef waar hij stond.

Neem over: de oplossing was geen redesign. Framer noemde zijn categorie in gewone woorden en schoof de uitleg naar boven. Bestaande tekst naar boven schuiven is ook de oplossing die we het vaakst schrijven in 5sec.io-audits.

4. Basecamp: duidelijke kop, drukke omgeving

Kop: “Manage projects, coordinate teams, and master your company with Basecamp.” Ernaast staat een screenshot van een echt project met een prikbord, taken en deadlines. Dat beantwoordt wat dit is en voor wie, voor elk team dat projecten draait.

Het addertje: zeven regels links staan boven de kop, van “Pricing & sign up” tot een live teller van mensen die in Basecamp werken. Het oog ziet een lijst voor het de belofte ziet. De aanmeldknop staat in de hoek rechtsboven, ver van de kop.

Neem over: een screenshot van echt werk. Vermijd: een menu dat de bezoeker moet lezen voor de kop.

Kort gezegd Een hero slaagt als de kop zegt wat je aanbiedt, één regel zegt wat er voor de bezoeker verandert, en één knop zegt wat er daarna gebeurt.

Voorbeelden van herosecties die zakken

5. Notion: het sleutelwoord staat niet stil

Kop: “Where teams and agents ___ together.” Het lege stuk is een groen label dat door woorden wisselt. Op 27 oktober begon de paginabron op “Think” en toonde onze screenshot “Ship”. Bij de teardown in augustus ving de opname het woord halverwege de animatie als “Scal”.

De rest van de hero is sterk. De subregel, “Capture context, find answers, and automate tasks with AI built for your team”, legt het product uit. “Get Notion free” is de duidelijke hoofdknop, met “Request a demo” rustiger ernaast. De teardown in augustus gaf de fold 8 op 12.

Vermijd: het ene woord animeren dat de belofte draagt. Het browsertabblad toont “The AI workspace that works for you.” Die regel zegt wat Notion is, en hij staat nergens in de hero.

6. Linear: geen knop in de hero

Kop: “The product development system for teams and agents”. Subregel: “Purpose-built for planning and building products. Designed for the AI era.” Daaronder een screenshot van het product met echte issues en activiteit.

De kop noemt de categorie, en de screenshot toont echt werk. Maar de hero heeft geen knop. Je kunt alleen handelen via een klein “Sign up”-label in de navigatie en een aankondigingslink “New Loops”. De teardown in augustus vond hetzelfde gat en gaf de fold 7 op 12.

Vermijd: erop rekenen dat bezoekers de navigatie vinden. Een merk waar mensen al over praten, komt ermee weg. De meeste sites niet. De subregel herhaalt ook de categorie in plaats van een resultaat te noemen.

7. Shopify: een slogan over een video

Kop: “Be the next household name”. Het einde van de regel wisselt: de paginabron begint op “Be the next AI all-star”. Subregel: “Dream big and build fast on Shopify. The world’s best commerce platform.” Achter de tekst speelt een video over de volle breedte, die op onze opname een gang in een magazijn toonde.

Een bezoeker die Shopify niet kent, leert uit de kop dat het om ambitie gaat. Pas de laatste woorden van de subregel noemen de categorie. De gewone zin, “Sell everywhere people shop. Online and in person.”, begint aan de onderrand van het eerste scherm. “Start for free” is een duidelijke knop.

Vermijd: een kop die alleen werkt voor bezoekers die je al kennen. Nielsen Norman Group stelde vast dat bezoekers beelden zonder informatie negeren. Een videolus kost de meeste aandacht en legt het minst uit.

Wat de zeven herosecties gemeen hebben

Voorbeeld	Wat is dit?	Is het voor mij?	Waarom zou ik?	Wat doe ik?
Wise	Slaagt	Slaagt	Slaagt	Slaagt
Calendly	Deels	Slaagt	Slaagt	Slaagt
Framer	Slaagt	Deels	Deels	Slaagt
Basecamp	Slaagt	Slaagt	Deels	Deels
Notion	Deels	Deels	Deels	Slaagt
Linear	Slaagt	Deels	Zakt	Zakt
Shopify	Zakt	Zakt	Deels	Slaagt

Elke hero die slaagt, noemt zijn categorie in woorden die een onbekende gebruikt: internationale rekening, meetings, websitebouwer, projecten. Elke hero die zakt, leunt op een slogan of laat een stap weg.

“Waarom zou ik?” is de vraag die de meeste hero’s overslaan. Alleen Wise en Calendly zeggen wat er voor de bezoeker verandert. De teardowns van augustus vonden hetzelfde patroon: de categorie noemen is makkelijk, het gevolg noemen is moeilijk.

Geen van de missers is een designprobleem. Alle zeven pagina’s zien er goed uit. De zwakke hero’s falen op woorden, volgorde en beweging, en dat zijn de goedkoopste delen om te herstellen.

Zo toets je je eigen herosectie

1. Open je homepage op een laptop en op een smartphone. Maak een screenshot van alleen het eerste scherm.
2. Toon het vijf seconden aan iemand buiten je bedrijf. Vraag wat je aanbiedt, voor wie het is en waar die persoon zou klikken.
3. Schrijf de antwoorden naast de vier vragen. Elk leeg antwoord wijst naar één element: kop, subregel, bewijs of knop.
4. Herstel eerst de woorden. Schuif bestaande tekst naar boven voor je nieuwe tekst schrijft, zoals Framer deed.

Zonder tester leest de gratis 5-secondentest op 5sec.io je live pagina zoals een eerste bezoeker dat doet en citeert hij het bewijs dat hij vond. Voor een hele site scoort de Above the Fold Audit ongeveer vijftien sleutelpagina’s en herschrijft hij de zwakste tekst. Lees wat boven de vouw betekent als je hero niet op een smartphonescherm past.