De 3 principes van een goede homepage

Dit artikel is oorspronkelijk gepubliceerd op Frankwatching.nl

Je merkt snel dat niet alle homepagina’s even goed jouw aandacht trekken en jou overtuigen iets te volgen/doen/bestellen/delen. Hoe komt dat? Succesvolle pagina’s spelen beter in op de psychologie en menselijke drijfveren. Design trends komen en gaan, maar de principes die de sitebezoeker aantrekken en overtuigen blijven redelijk hetzelfde. 

Deze principes gelden op een globaal niveau voor veelal alle websites. In dit artikel kijken we juist naar deze principes. Wanneer je dieper het gedrag van jouw klanten of sitebezoekers gaat analyseren zou je verschillen opmerken, bijvoorbeeld tussen B2C en B2B homepagina’s, tussen pagina’s die producten en diensten verkopen, en sites waarop je passief informatie consumeert of actief iets doet. Principes hiervoor zijn natuurlijk minder algemeen en worden in dit artikel niet behandeld.

1. Zet een duidelijke waardepropositie bovenaan de homepage

Dagelijks bezoeken we allemaal tientallen verschillende websites, en we hebben het goed geleerd om snel te beoordelen of je iets aan die website hebt. 

Herbert Simon, een Nobelprijswinnaar stelt dat mensen rationeel proberen te denken maar vaak gebruiken ze cognitieve ‘shortcuts’ omdat ze weinig tijd en informatie hebben voor een rationele keuze. Er komen verschillende statistieken uit onderzoeken (1, 2, 3), maar het komt er op neer dat mensen gemiddeld binnen 10-15 seconden beslissen of ze op de website willen blijven en daar verder naar kijken. 

Wat betekent het voor jouw homepage? 

Omdat mensen heel snel willen beslissen of ze tijd willen investeren en interesse hebben in jouw product/bedrijf, moet je hun aandacht snel kunnen aantrekken en vasthouden. 

Hoe pak je dit aan? 

Zet bovenaan de homepagina een duidelijke waardepropositie. Spreek niet over features, maar wat deze features oplossen voor de potentiële klant. Je kan in dit geval beter focussen op 1 unique selling point (USP) dan op meerdere omdat de aandacht van de sitebezoeker schaars is. 

Pas nadat je de aandacht van de sitebezoeker hebt gekregen met de waardepropositie en enkele boodschappen aan de ‘bovenkant’ van de pagina kan je verwachten dat hij of zij verder gaat scrollen en zich verdiepen in de specifieke details van het product. 

Veel sitebezoekers haken snel af al bij de eerste bezoek aan een site. Hierdoor is het idee ontstaan dat alle belangrijke informatie bovenaan de pagina moet staan, omdat men anders niet scrolt en het mist. De waarheid is genuanceerder: als de sitebezoeker genoeg interesse en motivatie heeft om te scrollen, en het design het duidelijk maakt dat je kan scrollen, gaan mensen jouw homepagina verder exploreren dan alleen above the fold (1, 2, 3).

Voor websites die ook de bestaande klanten bedienen (denk aan digitale tools, opleidingsinstellingen, ziekenhuizen enz.) is het belangrijk dat ze snel doorverwezen kunnen worden naar de relevante pagina’s. Deze sitebezoekers weten al waar ze op zoek naar zijn, dus je kan de verwijzingen (die ook ‘toptaken’ heten) subtiel of net onder de fold aanwezig zijn. Lees meer over toptaken in de blog 'Toptaken van ziekenhuiswebsites: zo ondersteun je bezoekers'.

Waardepropositie in de praktijk:

• Dropbox begint met een duidelijke waardepropositie die verwoord is vanuit de problematiek van de potentiële klant, en gaat daarna verder in op de specifieke oplossingen en features.
• Soundcloud kiest voor promoten van de ‘Go Pro’ optie bovenaan de pagina, en de eerste boodschap die je in de carrousel ziet is ‘Probeer gratis SoundCloud Go+’. Pas op de volgende carousel slide zie je de waardepropositie en waar deze dienst om gaat. Deze site zou meer cognitieve inspanning van een potentiële klant vereisen om te begrijpen of ze van deze dienst gebruik willen maken.

2. Bied toegang tot meer informatie

In zijn boek ‘Thinking, Fast and Slow’ beschrijft Daniel Kahneman, winnaar van Nobel Memorial Prize in Economic Sciences twee mentale modussen (systemen) die ons keuzes helpen maken. Systeem 1 is impulsief en automatisch en helpt ons snel te reageren en keuzes maken om gevaar te mijden. Systeem 2 is heel bewust en overwegend, het is nodig om dingen te plannen en belangrijke keuzes te maken. Met een korte, krachtige en aansprekende waardepropositie raak je het Systeem 1, daarna moet je het Systeem 2 triggeren.

Bryan en Jeffrey Eisenberg in hun boek Waiting for Your Cat to Bark passen dit toe in het digitaal domein en delen alle sitebezoekers in 4 ‘buyer modalities’ op basis van wat hun beslissingen beïnvloedt (logica of ratio), en hoe snel ze tot beslissingen willen komen. 

Ook al is dit model niet wetenschappelijk onderbouwd om de afzonderlijke persoonlijkheidstypes te definiëren, toch is het wel handig als denkhulp om content te structureren. In dit artikel noem ik het een ‘state of mind’. 

Wat betekent het voor jouw homepage?

Gebruik dit model voor overzicht van de ‘states of mind’ waarin de sitebezoeker zich kan bevinden op verschillende momenten van de journey.

Afhankelijk van de beschikbare tijd, fase van de buyer journey, en wat de persoon aanspreekt, heeft de sitebezoeker behoefte aan verschillende soorten informatie. 

Hoe pak je dit aan? 

De belangrijkste boodschap, voordelen, USP’s en testimonials moeten een primaire locatie hebben op de pagina, en snel scanbaar zijn voor de competitieve en spontane state of mind.

In hun boek Designing Interfaces: Patterns for Effective Interaction Design stellen de auteurs Jenifer Tidwell, ‎Charles Brewer en Aynne Valencia-Brooks het zo: “When people look at a new interface, they don’t read every piece of it methodically [...] Instead, a user will rapidly scan the interface, pick whatever they see first that might get them what they want, and try it — even if it might be wrong.”

Tegelijkertijd moet de verdiepende informatie over case studies, hoe het product werkt, testimonials of waardering/awards van erkende organisaties vindbaar zijn. Hier is duidelijke navigatie voor belangrijk. Je hoeft niet al deze details op de homepagina zetten, maar het moet wel duidelijk zijn dat deze informatie er is.

Toegang tot meer informatie in de praktijk

In het B2B domein wordt er vaak veel aandacht geschonken aan alle 4 'states of mind' omdat de buyer journey veel langer is dan in B2C, en ook omdat meerdere mensen deelnemen aan de besluitvorming. Maar je ziet alsnog enkele verschillen in de aanpak:

• Op de homepagina van Usabilla vind je een overzichtelijke combinatie van de unique selling points, waarderingen van klanten en erkenning van de consultancybureaus. Via het menu verder kan je je verder verdiepen in de ins en outs en case studies.
• Office app focust primair op de functies en de waardepropositie. De sitebezoeker in de humanistische state of mind zou hier de inzicht missen of dit betrouwbaar is, en wat de bedrijven die als klant genoemd zijn van de samenwerking hebben gevonden.

Wat betreft B2C zie je dat focus iets vaker op snelle beslissingen en emotie ligt, maar dat is niet voor alle producten een goede keuze:

• Crisp vertelt en over hoe de dienst werkt, biedt social proof en waardering van een andere organisatie aan.
• In tegenstelling geeft BUX veel minder informatie en stipt alleen enkele selling points aan. Als je verder wil begrijpen hoe het precies werkt, en hoe de anderen BUX ervaren, zie je alleen pagina’s met enkele catchy zinnen. Omdat het over geld en beleggen gaat wil je juist extra gerustgesteld worden en verdiepende informatie krijgen. Een bezoeker met een methodische state of mind zou minder snel overtuigd worden door deze site. 

3. Maak het veilig om jouw site te ontdekken

Risico-aversie is de psychologische drang om de risico’s te vermijden, dit ontstaat onder andere omdat mensen het verlies ergens van als erger ervaren dan het verkrijgen van hetzelfde ding. Als iemand voor de eerste keer op jouw site komt, zijn ze waarschijnlijk nog niet meteen bereid iets te bestellen, dat is te risicovol. Je wil eerst weten waar het om gaat, en of het een betrouwbaar bedrijf/product/dienst is.

Neil Patel, oprichter van Kissmetrics en CrazyEgg schrijft in zijn blog: ‘When you land on a website for the first time, are you ready to convert? Probably not. In fact, it’s no secret that the vast majority of your website traffic won’t convert on the first visit. [...] Conversions just don’t happen instantly for most products.’

Wat betekent het voor jouw homepage?

Als iemand zich veilig voelt een product te gaan ontdekken of de website te gaan exploreren krijgt die persoon een sterkere band en vertrouwen in het product. Het is zelfs mogelijk dat de sitebezoeker pas door middel van het ontdekken of uitproberen van de dienst achter komt dat hij of zij dit product nodig heeft. Het is daarom niet per se effectief een call-to-action ‘Bestellen’ bovenaan de pagina te plaatsen. Als de sitebezoeker wel heeft besloten een product te kopen, vindt die de bestelknop ook onder de fold of in het menu.

Hoe pak je dit aan?

Vraag niet meteen op je homepagina om het product te bestellen, geef de sitebezoeker de ruimte om te ontdekken waar het om gaat. Een waardevolle Call-to-Action is in dat geval  ‘Ontdek meer’, ‘Lees meer over...’, ‘Bekijk de video’ enz. 

Een hele krachtige overtuigingstool is een risk-free gratis trial, dus geen ‘laat je kredietkaartnummer achter en zeg het op wanneer je het wil’. Laat de potentiële klant het product zo makkelijk mogelijk uitproberen, zonder moeilijke procedures als het kan. 

Een site veilig ontdekken in de praktijk

• Slack gaat heel bewust met de Call-to-Action en copy om. Op de homepagina zie je vooral informatie en mogelijkheden om meer te leren over het product. Slack geeft de sitebezoeker de ruimte om te exploreren terwijl de ‘Get started’ knop toch subtiel in beeld blijft.
• Trello vraagt je meteen om je in te schrijven, door middel van twee (!) calls to action: ‘Sign up - it’s free!’ en ‘Start doing’, nog vóórdat je de kans hebt gehad om rustig rond te kijken. Een permanente ‘Sign up’ knop in de sticky header maakt het je zeker duidelijk dat Trello wil dat je je aanmeldt, maar maakt het nog niet duidelijk waarom je dat zou willen.

Dit waren de algemene richtlijnen voor een homepage wat betreft User Experience:

• Duidelijke waardepropositie bovenaan de pagina
• Toegang tot meer informatie
• Mogelijkheid om de site veilig te ontdekken

De vuistregels voor een positieve ervaring. Maar dit is lang niet alles waar je aan moet denken bij het creëren van de homepagina: hoe vertaal je de brand in visuals en in copy? Welke specifieke vragen en behoeften hebben de potentiële klanten in hun industrie/context? Wat maakt dit product beter dan de andere? Er is helaas geen ‘magic pill’ voor een perfecte site, maar het nadenken over de punten die in dit artikel beschreven zijn brengt je al een stap verder richting goede homepagina.

Over de auteur

Daryna Kruty is UX designer bij creative & digital agency One Shoe. Ze onderzoekt wat mensen beweegt en hoe hun motivaties zich naar gedrag vertalen. Die inzichten past ze toe in het ontwerp van succesvolle digitale producten. In haar dagelijks werk schakelt ze vaak tussen strategische en tactische aspecten van User Experience, en zorgt ze dat abstracte high-level visies handen en voeten krijgen in haar designs. Ze krijgt energie uit projecten met inhoudelijke en functionele complexiteit, en houdt van een goede uitdaging waarin de business doelen en de behoeften van de eindgebruikers bij elkaar moeten komen. Daryna heeft voor verschillende klanten zoals Rabobank, KLM, Thuisarts en Studiekeuze123 gewerkt.