Een hero afbeelding en de invloed op conversie

Bijgewerkt: 16 oktober 2022

Een hero op je homepage, het is helemaal de trend. Staat er een superheld op de homepage? Nee, hoewel we natuurlijk allemaal een superheld willen zijn. Een hero is een schermvullende banner. Hij staat vaak op de homepage en minder vaak op andere webpagina’s.

Een hero moet een visueel herkenningspunt zijn. Prima, de bezoeker ziet bij binnenkomst direct wie je bent of wat je doet. In dat opzicht kan een hero dus heel belangrijk zijn. Maar de waarheid is dat het de bezoeker in verwarring brengt.

Het was ooit een tijdelijke trend

De hero afbeelding is bekend van WordPress websites. Veel thema’s tonen op de homepage een banner die het gehele scherm vult. Het was eigenlijk bedoeld als een voorbeeld en later als tijdelijke trend. Maar tegenwoordig kiezen steeds meer websites voor de hero.

Zo herken je een hero-sectie

Een hero-sectie bevindt zich direct onder het menu en het logo van de site. De bezoeker ziet een grote afbeelding die het scherm van links tot rechts opvult. Vaak is deze afbeelding ook wat hoger, waardoor hij het scherm niet alleen van links tot rechts maar ook van boven tot beneden opvult.

Onder de hero-afbeelding kan nog veel meer staan waaronder tekst, kaders, afbeeldingen of video’s, actieknoppen, een kalender, reactieoverzicht of linkjes.

Deze informatie staat in de sectie

Naast een afbeelding (hero-afbeelding) staat er in de sectie vaak ook een stukje tekst. Deze bestaat meestal uit twee of drie regels, waarvan de bovenste regel een titel is. De tekst staat dus in de afbeelding verwerkt! Veel websites maken in de hero-sectie ook gebruik van een actieknop. En soms staat er zelfs een klein formuliertje.

De voordelen van een hero op de webpagina

Het grootste voordeel van een hero is dat de bezoeker direct ziet wat je te bieden hebt. In sommige gevallen kan dit voor meer vertrouwen zorgen. Bezoekers zien bijvoorbeeld wat de voordelen van je product of dienst zijn. Of ze worden geleid in het ondernemen van actie.

Met een hero onderscheid je de website of het merk van concurrenten. De website krijgt een eigentijdse uitstraling en een stijl die bij het bedrijf past.

Niet voor elke afzonderlijke pagina!

Het is gebruikelijk om de hero-afbeelding op de homepage te plaatsen, en niet op elke afzonderlijke webpagina. Wil je hem toch op meerdere pagina’s tonen, kies dan de meest belangrijke pagina’s uit. Je zou hierbij kunnen denken aan de dienstenpagina of de over-ons pagina.

Nadelen van hero’s

Helaas hebben hero’s meer nadelen dan voordelen. Ik zal hieronder wat meer uitleggen over de grootste nadelen.

Bezoekers raken door een hero-afbeelding snel in verwarring. Doordat de afbeelding schermvullend is hebben ze niet in de gaten dat ze naar beneden kunnen scrollen. Hierdoor missen ze belangrijke informatie.

Op veel websites met een hero-sectie zie je dat de tekst niet goed leesbaar is. Dit komt omdat de kleur van de tekst wegvalt tegen de achtergrond. Soms is de knop niet goed zichtbaar, of is niet duidelijk wat de bedoeling van deze knop is. En er zijn zelfs hero-secties die helemaal geen actieknop hebben.

Hieronder zie je een voorbeeld van een slechte hero image. De tekst in de afbeelding is niet goed leesbaar, omdat de kleur van de tekst nagenoeg gelijk is aan die van de achtergrond. De tweede fout is het ontbreken van een actieknop. De bezoeker ziet weliswaar in het menu iets van ‘contact’ staan, maar dit valt te weinig op.

Met bovenstaande afbeelding jaag je bezoekers weg, die garantie kan ik je geven. Laten we eens kijken hoe een goede hero image er dan wel uit moet zien. Hier komt hij dan:

Hetzelfde (fictieve) schildersbedrijf waarbij zowel het logo, het menu en de afbeelding gelijk zijn gebleven. De letterkleur van de tekst is aangepast, waardoor deze veel meer in het oog springt. Bovendien zijn er twee opvallende knoppen aanwezig: één voor het aanvragen van een offerte en een ander voor het versturen van een WhatsApp. De bezoeker heeft dus ook nog eens de keuze hierin.

Welke vind je er beter uit zien? Wanneer je voor de bovenste kiest raad ik je aan om terug te scrollen naar het begin van dit artikel, opnieuw te lezen en de informatie goed tot je door te laten dringen.

De afbeelding beïnvloedt de laadtijd van de webpagina

Meestal zijn hero afbeeldingen groot van formaat. Dit haalt de laadsnelheid van de webpagina omlaag. Wanneer de bezoeker langer dan 3 seconden moet wachten dan verliest hij zijn geduld. Dit geduld wordt wel heel erg op de proef gesteld wanneer de laadtijd langer dan 6 seconden bedraagt.

Slecht geïmplenteerde hero-afbeeldingen hebben een laadtijd die kan oplopen tot meer dan 10 seconden. Is de bezoeker er nog? Hallo…. Echo?? Nee, de bezoeker is vertrokken en bezoekt de site van de concurrent.

Je ziet, het gebruik van een hero image is niet geheel zonder risico’s. Je vraagt je vast af waarom websites hem dan toch gebruiken.

Het is goed voor je ego

Toegeven, je foto beeldvullend op je homepage is goed voor je ego. We zijn allemaal een beetje verliefd op onszelf. De website-eigenaar vindt het mooi om zichzelf te zien, of in ieder geval iets van zijn bedrijf. De waarheid is dat de bezoeker hier niet in geïnteresseerd is. Hij heeft een probleem en komt daarom op je website uit. Hij wil een oplossing voor zijn probleem vinden, niet jouw gezicht zien.

De bezoeker is in dit stadium nog niet bezig met het gezicht achter een bedrijf of je professionaliteit. Het is dus fout om te denken dat een hero afbeelding de conversie verhoogt.

Situaties waarbij een hero afbeelding juist wel werkt

Heb je een hero op je homepage staan en heb je hem na het lezen van dit artikel er bijna vanaf gehaald? Niet doen, want in sommige gevallen werkt de hero afbeelding hartstikke goed. Bijvoorbeeld voor websites die slechts één product of dienst verkopen. Of waarbij er maar één doel is, bijvoorbeeld het delen van een mening.

In deze situaties is een hero een perfecte keuze. De bezoeker komt binnen en ziet direct wat hij kan verwachten, of je speelt zonder pardon op zijn emoties in. Het kan ook dat je de bezoeker vanaf je homepage direct door wil sturen naar een andere pagina. Ook dan is een hero-afbeelding prima, maar voorkom dat je de bezoeker te vaak doorstuurt. Niemand wil een van-kastje-naar-muur gevoel hebben.

---