22 september 2014

Bepaal de kern van je homepage in 4 stappen

De homepage is en blijft één van de belangrijkste onderdelen van je site. Het is de ontvangstruimte van waaruit je bezoeker verder navigeert. En in deze ruimte wil je de bezoeker een warm welkom heten en hem of haar laten zien wat je allemaal kunt doen. Maar hoe voorkom je dat de bezoeker bij binnenkomst afhaakt? Door direct het doel van je site duidelijk te maken. Dit stappenplan helpt je daarbij.

Een goede homepage is goud waard

Alhoewel een deel van je bezoekers de homepage overslaan – ze belanden via Google rechtstreeks op een dieper gelegen pagina –  is en blijft de homepage een essentiële pagina. De homepage geeft je bezoekers inzicht in de belangrijkste onderdelen van de site. Het biedt overzicht en is de eerste stap tot het uitvoeren van een taak.

“A company’s homepage is its face to the world and the starting point for most user visits. Improving your homepage multiplies the entire website’s business value, so following key guidelines for homepage usability is well worth the investment.”
— Jakob Nielsen

De tijd dat we alle onderdelen van de site op de homepage zetten (het ouderwetse startpagina-concept), laten we gelukkig steeds meer achter ons. Meer en meer denken we na over wat de essentie van de site is. Wat het startpunt is om de belangrijkste taken uit te voeren. En de bieden we alleen dat aan op de homepage. Secundaire informatie vervalt en ontsluiten we via andere wegen: navigatie, zoekfunctie, overzichtspagina’s, doorkliks op detailpagina’s, et cetera. Met andere woorden: focus als geheim achter een goede user experience, zoals Gertjan Melgers vorige week schreef.

 De 4 regels voor je homepage

Jacob Nielsen stelt in het artikel ‘Top 10 Guidelines for Homepage Usability’ vier handige regels voor het inrichten van je homepage:

  1. Maak het doel van je site duidelijk
  2. Help gebruikers vinden wat ze zoeken
  3. Geef een voorproef van de content
  4. Versterk interactie met visual design, niet andersom

In dit artikel staan we stil bij de eerste regel: het duidelijk maken van het doel van je site. Want het bepalen van je doel, is makkelijker gezegd, dan gedaan. Want een site heeft doorgaans veel meer dan één doel. En hoe bepaal je het belangrijkste doel? We doorlopen 4 stappen:

Hero imageStap 1: bepaal de plek

Het doel van je site wil je direct bij binnenkomst duidelijk maken. De ruimte direct onder je navigatie, is daarom een logische plek. Door trends als mobile first-development en flat design zien we dat hier steeds meer de ruimte voor gebruikt wordt: geen klein hoekje bovenin, maar een flinke key visual – of hero image – die het overgrote deel van de ruimte boven de vouw inneemt.

Stop: verwijder eerst de carrousel

Voordat we verder gaan: de kans is groot dat de homepage van jouw site ook begint met een grote visual. Hoera! De kans is echter nog groter, dat het niet één visual is, maar een carrousel met meerdere items. Die na een aantal seconden automatisch rouleren. Zo ja? Duik dan direct in je webstatistieken en ontdek dat de conversie dramatisch is. Je zult zien dat de eerste slide nog wat doorkliks oplevert, maar alle slides die daarop volgen; nul komma nul. Bovendien is de interactie van een carrousel behoorlijk complex voor een bezoeker. Usability-expert Jared Smith heeft er zelfs een website aan gewijd: ShouldIuseCarrousel.com.

Carrousel

Argumenten om geen carrousel te gebruiken op shouldiuseacarousel.com. Uiteraard in een carrousel.

Overtuigd? Haal de carrousel dan direct van je homepage. Tenzij je binnen jouw organisatie nogal wat moeite hebt om irrelevante boodschappen van de homepage af te halen. Dan is een carrousel het ideale middel.

Stap 2: bepaal de inhoud – wat is je primaire doel?

Carrousels zijn opgeruimd: we gaan deze plek boven de vouw inzetten om je bezoeker een warm welkom te heten. De eerste vraag is: wat zetten we op deze plek? Hoe bepalen we wat het belangrijkste doel is? Uiteraard is daar geen eenduidig antwoord op te geven. Een aantal opties:

Doel: de belangrijkste toptaak

In mijn optiek, is het belangrijkste doel van je site, het doel van je bezoeker. Wat je als organisatie wilt bereiken, is daarin volgend. Als je inzicht hebt in de belangrijkste taken van je bezoeker, biedt de belangrijkste taak dan direct aan. Of één van die taken die goed online uitgevoerd kan worden.

En als je toch goed bezig bent: zorg er dan voor dat de bezoeker op je homepage al direct kan beginnen met deze taak. Denk aan het invullen van het eerste veld van een formulier of het aanbieden van een aantal keuze-opties.

TNT

TNT

Bij TNT kun je als eerst het tarief berekenen van een zending of een pakketje traceren.

Randstad

Randstad

De belangrijkste taak: een vacature zoeken.

RET

RET

RET combineert een grote foto met de belangrijkste functie van de site: het plannen van je reis.

Doel: het presenteren van je organisatie

Is de kans groot dat bezoekers niet (precies) weten wat je organisatie doet? Of vraagt een nieuwe strategiekoers om het positioneren van de organisatie? Presenteer dan je organisatie op deze plek. Denk wel goed na over de inhoud: voorkom wollig of abstract taalgebruik uit je missie en visie.

CARE

CARE

Care introduceert haar mission statement met prachtige portretfoto en heldere copy. Helaas zonder call-to-action.

Wereldhave

Wereldhave

Wereldhave laat zien wat ze doen. De tekst is vrij rechttoe rechtaan, maar wel duidelijk (less is more).

Doel: belangrijkste product of dienst promoten

Promoot het product of dienst dat de meeste aandacht verdiend. Uiteraard kan dit het product zijn dat het populairst is, of het product wat wel een extra ‘boost’ kan gebruiken. Denk ook hier na over de juiste inhoud: wat zijn de USP’s van het product of de dienst? Denk wel goed na over deze keuze: zolang het aanbod niet aansluit op de behoeften van je bezoeker, zullen ze de informatie negeren. En kan het zelfs voor irritatie zorgen.

KPN

KPN

KPN opent de homepage met de laatste actie.


SCRATCH

Scratch

Scratch Wireless stelt de vragen waar hun product het antwoord op is.

SPYKER

Spyker

Soms heb je niet meer nodig dan een goede visual, zoals bij de auto’s Spyker.

Doel: actueel onderwerp uitlichten

Tot slot kun je deze plek gebruiken om een actueel onderwerp in de spotlight te zetten. Gevaar is wel dat dit onderwerp heel belangrijk is voor de organisatie, maar veel minder relevant voor je doelgroep. Dus ook hier geldt: onderzoek de behoeften van je bezoeker. En sluit daar zoveel mogelijk op aan.

VSO

VSO

VSO gebruikt een actueel item, het event “Meet VSO” om te vertellen wat VSO doet en bezoekers te activeren.

Wavin

Wavin

Wavin gebruikt de key visual om de nieuwe prijslijst te introduceren.

Stap 3: schrijf een goede tekst mét call-to-action

De juiste inhoud bepalen is belangrijk, maar het succes zit ‘m in de executie. Daarom gaan we eerst aan de slag met de tekst. Allereerst: houdt de tekst kort. Short copy is de kunst van het weglaten. Probeer niet volledig te zijn, maar de bezoeker te verleiden om verder te lezen. Om te klikken op de button en verder te gaan. Schrijf een tekst, die overtuigend is. Laat je inspireren door de 6 principes van Cialdini:

  1. Sociale bewijskracht: wat vinden anderen?
  2. Wederkerigheid: geef kennis en informatie gratis weg.
  3. Commitment: show don’t tell.
  4. Sympathie: wees persoonlijk en authentiek.
  5. Autoriteit: claim je authoriteit en straal het uit (thought leadership)
  6. Schaarste: wat beperkt beschikbaar is, zal vast goed zijn.

Een goede oefening voor het bepalen van de juiste zin, is het bepalen van je value proposition: de magie tussen wat je doet of maakt en waarom mensen het kopen of gebruik maken van je diensten. Gebruik daarvoor een value proposition canvas. Goede copy tips vind je bovendien in het artikel van Aartjan van Erkel over de tagline van je website.

Koppel altijd een call-to-action aan de tekst: activeer je bezoeker om verder te klikken. De zin is de start, de klik de bevestiging dat de bezoeker meer wil weten. Bovendien is het toevoegen van een link of button de enige manier waarop je kunt meten of de introductie op je homepage goed werkt.

Stap 4: De juiste visual

De meeste websites combineren de tekst en call-to-action met een mooie foto. Een aantal tips voor het kiezen van de juiste visual:

  • Gebruik een foto die past bij de inhoud

    Een algemene (sfeer)foto die niet past bij de inhoud, doet enorme afbreuk aan het presenteren van je doel. Een foto die aansluit op de inhoud, versterkt je boodschap.

  • Zorg voor authentiek beeld

    Een open deur, maar je ziet het nog al te vaak: afstandelijke stockfoto’s van blije mensen en groene landschappen. Ze ontkrachten je boodschap volledig.

  • Is een foto wel nodig?

    Een foto is geen absolute must. Het helpt om meer gewicht te geven aan dit onderdeel van je site, maar dat kan ook op andere manieren. Denk aan een egale kleur, illustratie of ingezoomde foto.

Tot slot: A/B test, leer en optimaliseer

Gefeliciteerd: je hebt een belangrijk onderdeel van je homepage opnieuw ingericht. Maar hoe weet je of deze ook werkt? Door te testen! Experimenteer met de copy, button-tekst en foto in A/B-tests. Analyseer het aantal doorkliks en kijk of je dit verder kunt optimaliseren.