Veel websites openen met een sfeerbeeld en een zin die nergens over gaat. Welkom op onze website. Kwaliteit sinds 1998. Mooie woorden waar niemand iets aan heeft. De bezoeker die net klikte, zoekt maar een ding. Kan deze partij mijn probleem oplossen?
Dat antwoord hoort in de hero te staan. Niet drie schermen lager.
Bij DJ Cees Weel was dat de kern van de opdracht. Ik verzorgde daar het webdesign en de vindbaarheid. Iemand die een dj zoekt, heeft een datum en een soort feest in zijn hoofd.
De hoofdboodschap noemt daarom direct het soort feesten en het werkgebied. Daaronder een knop naar de beschikbaarheid. Geen welkomstzin, geen algemene belofte. Wie op de site komt weet binnen drie seconden of hij goed zit.
Het eerste blok waar je bezoeker landt en beslist.
Wat is een hero?
De hero is het eerste blok van een pagina, direct onder je header. Het is het grootste en meest opvallende onderdeel van je opening.
De naam komt uit de vormgeving, waar het hoofdbeeld van een ontwerp zo heet. Op een website is het de combinatie van kop, korte tekst, beeld en knop.
Het verschil met de header
Die twee worden vaak verward. De header is de balk met je logo en menu, en die is op elke pagina hetzelfde. De hero verschilt per pagina, want de boodschap verschilt.
Samen vormen ze wat iemand ziet zonder te scrollen. Meer daarover lees je bij above the fold.
Wat erin hoort
Vier onderdelen, en niet meer. Elke toevoeging haalt aandacht weg van de rest.
Mijn vaste opbouw
Een kop die je aanbod benoemt in de woorden van je klant.
Een zin die het voordeel of de voorwaarde uitlegt.
Zichtbaar bewijs, zoals een beoordeling of een klantlogo.
Bij het koptekst schrijven is er een test die altijd werkt. Zou je dit zo tegen iemand zeggen aan de telefoon? Zo niet, dan is het te vaag of te formeel.
Hoe hoog mag hij zijn?
Niet het hele scherm. Dat is een hardnekkige gewoonte die meer kwaad doet dan goed.
Een hero die precies je hele venster vult, verbergt dat er nog iets onder staat. Bezoekers denken dan dat de pagina daar ophoudt.
Ik houd ongeveer tachtig procent van de schermhoogte aan. Dan piept het volgende blok er net onderuit en snapt iedereen dat er meer is.
Beeld kiezen
Een achtergrondafbeelding moet het verhaal ondersteunen, niet vullen. Een willekeurige foto van een kantoor met lachende mensen zegt niets.
Laat liever je eigen werk zien, of jezelf. Bij dienstverleners werkt een echte foto van de ondernemer bijna altijd beter dan een gekochte foto.
Let op het gewicht. Een hero-afbeelding is vaak het zwaarste bestand van je pagina en hij is als eerste in beeld. Dat telt zwaar mee in je pagespeed.
Sliders
Een draaiende reeks beelden in je hero ziet er goed uit in een presentatie. In de praktijk werkt het slecht.
Bijna niemand ziet de tweede slide. De eerste is vaak alweer weg voordat iemand hem heeft gelezen. Bovendien wegen ze zwaar. Kies liever een sterke boodschap dan vier zwakke.
Op een telefoon
Bij de weergave op mobiel valt alles onder elkaar. Zorg dat je kop en je knop dan nog steeds samen zichtbaar zijn.
Ik maak het beeld daar vaak kleiner of laat het weg. Een grote foto die je kop naar beneden duwt, kost je conversie zonder dat je het merkt.
Per pagina een eigen hero
Een hero hoort niet alleen op je homepage. Elke dienstenpagina verdient er een, met een boodschap die bij die dienst past.
Juist die pagina’s zijn vaak je landingspagina’s uit Google. Iemand komt niet binnen via je voordeur maar via een zijingang.
Test hem op iemand anders
Laat een bekende drie seconden naar je hero kijken en sluit dan je laptop. Vraag daarna wat het bedrijf doet.
Kan hij dat niet navertellen, dan is je hero niet duidelijk genoeg. Dat is een test van een minuut die meer oplevert dan een uur discussie.
Meer vragen over Hero
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een hero op een website?
Wat zet je in je hero?
Hoe hoog moet een hero zijn?
Werkt een slider in je hero?
Welke afbeelding kies je voor je hero?
Wat is het verschil tussen een hero en een header?
Wat is een hero op een website?
Vier onderdelen, en niet meer. Elke toevoeging haalt aandacht weg van de rest.
Een kop die je aanbod benoemt in de woorden van je klant. Niet jouw vakjargon, maar wat hij intypt in Google.
Een zin die het voordeel of de voorwaarde uitlegt. Bijvoorbeeld binnen twee werkdagen bij je, of alleen in West-Friesland.
Een knop met een duidelijke belofte. Niet meer informatie, maar bekijk de prijzen of vraag een offerte aan. Meer daarover lees je bij call-to-action.
En zichtbaar bewijs, zoals een beoordeling of een klantlogo. Dat neemt twijfel weg voordat die ontstaat.
Bij het schrijven van je kop werkt een simpele test. Zou je dit zo tegen iemand zeggen aan de telefoon? Zo niet, dan is het te vaag of te formeel.
Schrijf je kop op in de woorden die je klant aan de telefoon gebruikt. Dat is bijna nooit hetzelfde als hoe je het intern noemt. Vraag het gewoon aan drie klanten, dan heb je binnen een dag je woorden.
Wat zet je in je hero?
De hero is het eerste grote blok van een pagina, direct onder je header. Het is het meest opvallende onderdeel van je opening.
De naam komt uit de vormgeving, waar het hoofdbeeld van een ontwerp zo heet. Op een website is het de combinatie van kop, korte tekst, beeld en knop.
Die twee worden vaak verward met elkaar. De header is de balk met je logo en menu, en die is op elke pagina hetzelfde. De hero verschilt per pagina, want de boodschap verschilt ook.
Samen vormen ze wat iemand ziet zonder te scrollen. Daar wordt in enkele seconden besloten of iemand blijft.
Veel websites verspillen die ruimte aan een sfeerbeeld met een zin als welkom op onze website. De bezoeker die net klikte, zoekt maar een ding: kan deze partij mijn probleem oplossen?
Loop je eigen hero eens langs met die ene vraag in je hoofd. Staat er een antwoord op wat je doet en voor wie? Zo niet, dan begin je daar.
Hoe hoog moet een hero zijn?
Niet het hele scherm. Dat is een hardnekkige gewoonte die meer kwaad doet dan goed.
Een hero die precies je hele venster vult, verbergt dat er nog iets onder staat. Bezoekers denken dan dat de pagina daar ophoudt en gaan weg.
Ik houd ongeveer tachtig procent van de schermhoogte aan. Dan piept het volgende blok er net onderuit en snapt iedereen dat er meer is.
Op een telefoon is die verhouding nog belangrijker, want daar is het scherm klein. Een hero van volledige hoogte betekent daar dat je kop en je knop niet samen zichtbaar zijn.
Controleer dat op een echt toestel en niet alleen in een simulatie. Meer over dat gebied lees je bij above the fold.
Controleer op een echt toestel of je kop en je knop samen zichtbaar zijn. Een simulatie in je browser is daarvoor niet betrouwbaar genoeg. Doe die test ook staand en liggend, want dat scheelt meer dan je denkt.
Werkt een slider in je hero?
Zelden, en toch komt de vraag bij bijna elk project terug.
Een draaiende reeks beelden ziet er goed uit in een presentatie. Je kunt er vier boodschappen in kwijt, dus het lijkt efficient.
In de praktijk ziet bijna niemand de tweede slide. En de eerste is vaak alweer weg voordat iemand hem heeft gelezen, zeker als iemand langzaam leest.
Daar komt bij dat sliders zwaar wegen. Ze laden meerdere grote afbeeldingen en een script, precies op de plek waar snelheid het zwaarst telt.
Mijn advies is steevast hetzelfde. Kies liever een sterke boodschap dan vier zwakke. Heb je echt meerdere doelgroepen, maak dan aparte pagina’s in plaats van een draaiend blok. Meer daarover lees je bij pagespeed.
Heb je echt meerdere doelgroepen? Maak dan aparte pagina’s in plaats van een draaiend blok met vier boodschappen. Zo krijgt elke doelgroep een pagina die volledig op hem gericht is. Dat leest voor je bezoeker een stuk rustiger dan een blok dat steeds verspringt.
Welke afbeelding kies je voor je hero?
Een beeld dat het verhaal ondersteunt, niet een dat ruimte vult.
Een willekeurige foto van een kantoor met lachende mensen zegt niets. Iedereen ziet dat het gekocht is en niemand wordt er wijzer van.
Laat liever je eigen werk zien, of jezelf. Bij dienstverleners werkt een echte foto van de ondernemer bijna altijd beter dan een archieffoto.
Let daarnaast op het gewicht. Een hero-afbeelding is vaak het zwaarste bestand van je pagina en hij is als eerste in beeld. Lever hem aan op de juiste afmeting en in een modern formaat.
Op een telefoon maak ik het beeld vaak kleiner of laat ik het helemaal weg. Een grote foto die je kop naar beneden duwt, kost je aanvragen zonder dat je het merkt.
Investeer liever in een goede eigen foto dan in een archieffoto. Die eerste kun je jaren gebruiken en hij is van jou. Plan er een half dagdeel fotografie voor in, dat is genoeg.
Vertelt jouw eerste scherm binnen drie seconden wat je doet? Stuur me de link van je homepage via het formulier hieronder. Ik beoordeel je hero op kop, belofte, knop en bewijs, en stuur je concrete alternatieven terug. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Heroblok, hero-sectie, openingsblok
