Terug

Hoe zorg je dat je bezoeker op je website blijft?

visual cues

Dat we design nerds zijn, is niet bepaald vreemd. Een sterk (web)design kan een wereld van verschil betekenen - niet alleen op het gebied van hoe sexy het eruit ziet, maar juist in gebruiksvriendelijkheid en in het behalen van doelen. Ter illustratie gaan we dieper in op één van de factoren waarin design het verschil kan maken: visual cueing.

Deze blog is geschreven door Denise Hamstra op 01 mei 2019.

Blik op oneindig

Een paar jaar geleden zat ik in een café met bevroren vingers om een warme mok naar buiten te staren. Ondanks de kou is het altijd druk in het centrum van Utrecht, dus ik had genoeg te zien. Een eindje verderop stonden een paar van mijn medestudenten plotseling stil op het midden van de straat, en alledrie keken ze omhoog. Ze begonnen te wijzen. Binnen een paar seconden had er zich een behoorlijke groep mensen gevormd. Ook zij staarden nu zoekend omhoog… naar niets. Ik gaf eraan toe en bukte om door het grote raam naar boven te kijken, maar de lucht was leeg. De verzamelde menigte mopperde en droop langzaam af. Later, toen ik één van de studenten tegenkwam en haar vroeg wat ze in hemelsnaam hadden gezien, lachte ze. ‘Niks,’ zei ze. ‘Da’s de grap.’

visual cueing redmatters

Gaze cueing

Waar de studenten op hadden ingespeeld, is het fenomeen dat we eerder die week tijdens een college hadden leren kennen als ‘gaze cueing’: het idee dat mensen hun blik laten leiden door die van een ander. Dit gaat vaak onbewust, maar blijkt een behoorlijk sterk effect te hebben. In meer wetenschappelijke termen zouden mensen een object sneller kunnen waarnemen als het zich bevindt in de richting waar een (eerdere) gesprekspartner naar kijkt (Baron-Cohen, 1995).

Het concept gaze cueing wordt ook in marketing regelmatig gebruikt. Het adopteren van psychologische principes is niet nieuw: hoe beter we mensen begrijpen, hoe beter we kunnen inspelen op hun behoeftes. Gaze cueing is een voorbeeld van een visueel signaal waarmee we onze doelgroep een bepaalde richting op sturen. Het is niet voor niets dat we studieboeken vol kladderen met gele markeerstiften of hyperlinks een andere kleur geven. Maar hoe natuurlijk sommige cues ook aanvoelen, er moet wel over nagedacht worden. En dat geeft ons zowel uitdagingen als mogelijkheden in design.

Above the fold

In het tijdperk van de krant ontstond de term ‘above the fold’: kranten worden opgevouwen verkocht, wat betekent dat alleen de bovenste helft van de voorpagina zichtbaar is. Wat above the fold staat aan informatie moet interessant genoeg zijn om verder te willen lezen. Om die reden staat het meest spraakmakende nieuws automatisch vooraan en zijn krantenkoppen regelmatig suggestief of zelfs misleidend. Het is wat dat betreft al een oud voorbeeld van visual cueing: een visueel seintje om de ander te overtuigen verder te kijken.

Above the fold’ is tegenwoordig ook van toepassing op online marketing en refereert naar het eerste scherm dat een website laat zien aan haar bezoeker. Net als bij een krant willen we de bezoeker stimuleren verder te lezen.

 

Een paar voorbeelden:

Unique

Voor Blij met je Baan?, de Unique campagne die startte in 2017, creëerden we onder andere een campagnepagina. Meteen bovenaan maken we gebruik van gaze cueing: campagnepersonage Lucas wijst naar de belangrijkste call-to-action op de pagina.

blij met je baan

‘Bekijk alle vacatures’ linkt door naar Unique.nl, de prijswinnende carrièrewebsite die we samen met Unique hebben ontwikkeld en blijven ontwikkelen. Het muis-icoon die centraal onderaan de header staat, vormt een visueel ‘see more’-seintje.

unique

Het RD

Ook voor het Reformatorisch Dagblad maakten we een campagne-website als onderdeel van de landelijke campagne. En hoe beter gebruik te maken van visual cues dan terug te gaan naar het tijdperk der kranten? ‘Above the fold’ plaatsten we de kop van de komende alinea – een teaser van wat er te wachten staat, en tegelijk een signaal om de bezoeker te vertellen ‘hé, er is meer te zien op deze pagina!’

visual cues redmatters

ShipItSmarter

De header van de nieuwe ShipitSmarter website is bold, duidelijk en eigen; een gouden combinatie voor de organisatie die zich specialiseert in slimme shipping software. Om aan te geven dat er onder de vouw echter nog meer te zien is, laten we onderin direct een deel zien van het element dat meteen volgt op de header. De bezoeker is automatisch geneigd verder te scrollen om te zien wat de homepagina nog meer te bieden heeft.

shipitsmarter redmatters
shipitsmarter redmatters - Website ontwikkelen

Wolter Koops

De grote platen op de Wolter Koops website vullen bijna helemaal je beeld – een vette, niet te missen binnenkomer. Om de bezoeker te vertellen dat ook hieronder nog (veel) meer te zien is, gebruiken we een dubbele pijl-icoon. Bovendien lopen de kenmerkende witte, blauwe en rode lijnen die over de plaat heen vallen door tot onder de header.

wolter koops redmatters

Opgelost?

Natuurlijk zijn visual cues niet altijd voldoende, en ook zeker niet altijd de oplossing. Veel belangrijker is het doel dat je wil bereiken en wie de doelgroep is. Bovendien staat gebruiksvriendelijkheid altijd voorop bij het ontwerpen van een website. Maar wanneer relevant bieden deze cues wel de mogelijkheid om die doelgroep een klein duwtje te geven in een bepaalde richting, en op die manier zowel jouw doelen als de behoefte van de bezoeker te bereiken.

Iconen_RedWeb_V0_1

C(l)ueless?

Hoe navigeert jouw doelgroep op je website? Meer weten over cues?

Denise Hamstra mask Bakkie doen met Denise

C(l)ueless?

Hoe navigeert jouw doelgroep op je website? Meer weten over cues?

Denise Hamstra denise@redmatters.com
06 20 50 05 69 Denise Hamstra mask
giphy with tags: waving

Hallo!

Leuk dat je contact met ons wil. Hoe kunnen we je helpen?

Wil jij een optimale website? Dan hebben we wat cookies van je nodig. Pas mijn voorkeuren aan