Waar is Anna?
Wandelend door Dordrecht zijn we plots een vriendin kwijt. Anna staat druk gebarend en bijna huppelend voor de etalage van de Kleister. Last van de gure wind heeft ze ineens niet meer. Al die vrolijke kleurtjes en kleifiguurtjes kan ze niet weerstaan. Ze móet gewoon naar binnen.
Die etalage, dat is je hero.
Hoe je dat doet op je eigen website, dat lees je hieronder.
Wat is je hero-gedeelte precies?
De hero is het eerste gedeelte wat je ziet wanneer je op de home-pagina komt. Het is alles wat je ziet nog vóórdat je gaat scrollen op je pagina.
De blik in de etalage geeft een verwachting van wat je binnen in de winkel zal aantreffen. Het filtert meteen de goede van de niet geïnteresseerde klanten.
Je wilt natuurlijk alleen vrolijk huppelende Anna’s die verder scrollen op je website. Dit doe je door vooral de volgende twee vragen te beantwoorden voor je bezoeker:
Is dit voor mij bedoeld?
Wat heb ik er aan?
De hero bestaat uit de volgende onderdelen:
- Een tekst die uitlegt wat voor bedrijf je bent
- Een afbeelding (foto of illustratie)
- Een uitnodiging of vervolgstap (CTA)
- Je logo en het menu
Laten we ze stap voor stap doorlopen.
1 Hero tekst, vertel duidelijk wat je doet
De tekst in het hero-gedeelte moet in een paar seconden duidelijk maken of je bezoeker hier aan het juiste adres is. Weet je nog?
Is dit voor mij bedoeld?
Wat heb ik er aan?
De inhoud
Begin niet met “welkom op mijn website.” Het verwelkomen doe je pas ná de hero. Dan is Anna binnengestapt en zeg je:
“Hallo welkom, kan ik je helpen?”
Begin ook niet met een vaag statement.
“Say hello to the future” werkt voor de nieuwe Apple iPhone, maar niet voor jou als kleine nog onontdekte superster.
Oké helder, maar wat dan wel?
Vertel zo kort en bondig mogelijk wat je doet of verkoopt en wat de bezoeker daaraan heeft. Het is je elevator pitch voor web2.0.
Een handige truc is het volgende:
(Je dienst of product) voor (soort klant) die / met (toestand waarin je helpt)
> Coaching voor kunstenaars die een eigen bedrijf op willen zetten.
> Handgemaakt geurkaarsen voor een romantische sfeer in huis.
> Uitlaatservice voor drukke mensen met drukken honden.
Is dat niet een beetje saai?
Misschien, maar het is wel superduidelijk.
Design (de opmaak)
De tekst moet lekker groot en goed leesbaar zijn. Kies een duidelijk lettertype. Liever geen sierlijke script letters. Als bezoekers moet gokken wat er staat, ben je ze kwijt.
Web tech
Zorg dat je de Hero tekst in H1 tekst opmaakt. Zo weet Google ook wat je doet. Handig voor je zoekresultaten in Google.
2 Hero afbeelding, laat zien wat je doet of wie je bent
Een goede foto of illustratie brengt meteen de juiste sfeer. Het valt als eerste op.
Het beeld moet een positief gevoel geven.
Iets waar jij met je dienst of product voor zorgt.
Inhoud
Mensen doen zaken met mensen. De termen B2B (business to business) en B2C (business to consumer) is totale onzin.
Alle business is human to human.
Welke soort afbeelding werkt daarom het beste?
Een afbeelding met een persoon.
> een kunstenaar die zijn schilderij verkoopt
> twee mensen bij kaarslicht in een romantische setting
> een hond die over het strand rent
Oké, een hond is geen persoon. Maar dat zien hondenbezitters vaak anders.
Hoe zit het dan met illustraties?
Tja, een illustratie kan heel professioneel overkomen. Maar dus ook heel onpersoonlijk. Zelfs grote bedrijven kiezen vaak voor afbeeldingen met mensen om persoonlijker over te komen.
Hoe het nog persoonlijker kan?
Zet jezelf in de hero.
Dit werkt goed wanneer jij een dienstverlener bent, een adviseur of coach. Het is belangrijk om je gezicht te laten zien. Waarom niet meteen.
Maar dat is doodeng!
Ja, dat is het ook.
Maar ook voor de klant.
Anna wil toch een beeld hebben met wie ze in zee gaat. Anders is het net een blind-date.
Design
Je afbeelding moet passen bij de lay-out die je toepast.
Dit zijn de meest voorkomende hero voorbeelden:
Dit eerste voorbeeld noemen we een twee-koloms opmaak. De afbeelding is hier staand, een portret stand.
Heb je al verder gespiekt, dan valt het op dat deze portret-foto is geknipt uit een grotere landscape afbeelding.
Vaak kun je meerdere kanten op met een afbeelding door slim te plakken en knippen.
Bij dit tweede voorbeeld heb je een landscape (liggende) afbeelding nodig.
Let op dat de persoon rechts of links op de afbeelding staat. Zo heb je ruimte om je tekst goed leesbaar ernaast te zetten.
Voor dit voorbeeld heb je een landscape afbeelding nodig. Maar je ziet dat een onderwerp eigenlijk niet duidelijk neer te zetten is. Dus het is meer een sfeerfoto.
Let op dat je tekst voldoende contrast krijgt met de achtergrond zodat het leesbaar blijft.
Web Tech
Afbeeldingen moeten goed verkleind worden voordat je ze upload in je website. Als ze te groot zijn, te zwaar, vertraagd het je website. En een trage website vind niemand fijn.
Geef je afbeelding een naam die overeenkomt met je tekst in de hero, of wat je doet met je website. Gebruik deze benaming ook voor je beschrijving en in de tag.
Dat is ook weer voor de Google zoekresultaten.
3 Een uitnodiging of vervolgstap
In webtermen is dit de CTA, Call To Action. Wanneer je bezoeker geïnteresseerd is je dienst of product vertel je met de CTA wat ze nu het beste kan doen.
Het is meestal een knop/button die je bezoeker naar een ander pagina of een specifiek deel op de pagina stuurt.
Deze actie heb je bedacht tijdens de strategie over je klantproces.
Inhoud
We gaan weer terug nog onze voorbeelden.
Wil je dat de kunstenaar een afspraak maakt voor een intakegesprek?
>De CTA is een knop “plan hier een gratis intake-gesprek”
die verwijst naar een pagina of gedeelte waar ze direct zelf een afspraak met jou kunnen inplannen.
>De CTA is een knop “bel me terug voor een afspraak” die verwijst naar een contactformulier.
Wil je dat die romanticus je verschillende geurkaarsen bekijkt?
>De CTA is een knop “Bekijk alle kaarsen” die verwijst naar de webshop pagina.
Wil je dat de eigenaar van Fluffy eerst een prijzenoverzicht bekijkt voordat ze contact opneemt?
>De CTA is een knop “Bekijk hier alle honden uitlaatopties” die verwijst naar een prijslijst met alle diensten
Jij bent de gids in je eigen winkel, dus jij bepaald de route.
En blijkt een route niet goed te werken? Dan pas je die aan naar een andere optie.
De hondenuitlaatservice kreeg bijvoorbeeld te vaak klanten aan de telefoon die iets veel goedkopers verwachten. Door ze eerst naar de prijslijst te sturen zijn de mensen die bellen werkelijk geïnteresseerd en niet geschrokken van de prijs.
Design
De button moet opvallen en aanzetten tot actie. Daarom kies je hier voor een accentkleur. Deze kleur gebruik je het liefst alleen voor dit soort acties. Wanneer het meer voorkomt op je webpagina is dat verwarrend.
Soms zie je ook 2 buttons (of CTA’s) naast elkaar. De eerste is de hoofd button in de accentkleur. De tweede is vaak een ‘ghost’-button, een omlijnde knop die minder opvalt. De tweede CTA geeft de mogelijkheid tot een tussenstap voor de bezoeker.
Is de eerste “koop nu”, dan is de tweede meestal “meer informatie”.
Of
Is de eerste “bekijk hier alle opties” dan kan de tweede zijn “neem contact op”.
Het is belangrijk dat je zelf kiest welke het belangrijkst is. Deze krijgt de accentkleur en de andere de ghost-opzet. Twee gelijkwaardige buttons naast elkaar geeft keuzestress.
Je moet je bezoeker helpen door ze niet te veel keuze te geven.
Web Tech
Meestal kun je de button 1 keer goed opmaken in de centrale instellingen van je (WordPress) theme. Dan pakt het automatisch overal dezelfde instelling en hoef je er niet meer over na te denken.
4 Je logo en het menu
Oftewel, je header.
Eigenlijk hoort dit niet bij het hero gedeelte. Maar het kan wel een rol spelen in je ontwerp.
Sommige websites laten op de home pagina bewust de header weg. Deze komt pas tevoorschijn wanneer je gaat scrollen. Daarmee focus je alle aandacht op de hero.
Inhoud
Je kunt de header ook juist in je voordeel laten werken. Door de menu items slim te benoemen.
Denk bijvoorbeeld aan: succesverhalen, geuren of uitlaat tips.
Dit ondersteund je grote tekst in de hero. Het nodigt je bezoeker uit om verder een kijkje te nemen.
Design
Een algemene vuistregel is dat je menu niet te uitgebreid moet zijn. Liefst 3 tot 5 items. Less is more, anders kunnen mensen niet kiezen.
Web Tech
De header komt op alle pagina’s van je website terug. Het is daarom belangrijk om deze ook niet te ‘zwaar’ te maken. Met zwaar heb ik het over de benodigde laadtijd van de website.
Hoe voorkom je dat je menu te zwaar wordt?
Dat heeft te maken met de layout. Daar ga ik nog een keer uitgebreid op in met een nieuw artikel. Ondertussen is deze behoorlijk lang en duizelt het je misschien.
Nog meer weten?
Oké, dit was de hero.
En de rest van de home-pagina dan?
Daar heb ik ondertussen ook een artikel over geschreven.
Hier vind je deel 1 over de belangrijkste onderdelen van de home-pagina.
En in dit andere artikel geef ik 4 design tips voor je teksten. Zo zorg je voor een goede leesbaarheid. Is je klant heel blij mee.
Misschien twijfel je er over om je website uit te besteden aan een webdesigner? Je leest hier meer over wat een webdesigner voor je kan doen.
Wat ga jij aanpassen je hero?
Ik ben benieuwd naar het resultaat.