Webdesign is van cruciaal belang voor iedere website. En webwinkels voorop. Webwinkels hebben immers een simpel doel voor ogen: een bezoeker overhalen items in een winkelwagentje te stoppen. En een mooie webwinkel mag dan prettig ogen, het design ervan roept lang niet altijd op tot deze actie. Een blik op het menselijk brein en hoe dat reageert op webdesign.
Tekst: Bart Nagel
Aan een website valt eindeloos te sleutelen. Onder de motorkap en aan het uiterlijk. Dat laatste wordt nogal eens vergeten. Dat wil zeggen: nadat de website klaar is. Er wordt dan gemeten en geanalyseerd hoe bepaalde conversies omhoog kunnen en dat wordt dan verbeterd. Maar het uiterlijk van de site staat. Toch is het vaak het design van de site dat bepaalt of een bezoeker blijft hangen, en of hij overgaat tot de actie die de webwinkelier van hem verlangt.
In dit verhaal belichten we design op aspecten die het brein aanzet tot een bepaalde actie. Denk aan kleurgebruik, volle of juist lege pagina's en de plaats van belangrijke en minder belangrijke content. Deze zaken komen wellicht triviaal over, ze zijn cruciaal in de beslissing die een bezoeker in luttele seconden neemt om op uw site te blijven of rechtsomkeer te maken.
Kleur
Kleuren kiezen is een belangrijk aspect in het design. Waarom? Kleuren roepen gevoelens en associaties op. Ze zetten mensen onbewust aan tot actie. Zo is rood een opwindende kleur die in een webpagina veel aandacht vraagt. Het is daarom aan te raden voorzichtig om te springen met rood. Je zou kunnen overwegen om het te gebruiken als knop om een aanbieding aan te prijzen. Maar in combinatie met een kreet als 'Koop nu!' komt het al vlug te lawaaierig over.
Blauw daarentegen brengt rust en straalt vertrouwen uit. Bekijk de campagnesite van de Amerikaanse president Barrack Obama en zie hoe hij in knalblauwe webpagina's vraagt 'to believe in change'. Maar ook grote webshops als Amazon, Bol.com en Wehkamp maken met verve gebruik van blauw. Want tja, je moet webwinkels wel kunnen vertrouwen natuurlijk.
Omdat actieknoppen er wel wat moeten uitspringen - je wilt de bezoeker immers niet laten zwemmen in een zee van blauw - gebruikt Amazon geel en oranje om de bezoeker naar de winkelwagen te sturen. De knoppen zijn niet dwingend en voorzien van een blauw randje, zodat ze niet afleiden en toch opvallen. Wehkamp.nl geeft naast de logobalk, ook de 'klik hier en bestel'-knop weer in blauw, in een overwegend witte pagina, met zwarte tekst en wat grijstinten hier en daar.
Witruimte
Ook raken meer en meer designers overtuigd van het nut van witruimte. Wit is lange tijd ervaren als loze ruimte. Ruimte waar je een product, aanbieding, stukje tekst of wat dan ook zou kunnen plaatsen. Om maar te zwijgen van de
voordelen van meer content voor zoekmachines. Meer content bete-kent meer zoekwoorden waarop je gevon-den kunt worden. Onder meer hierom wordt witruimte nogal eens als verspilling gezien en volgestopt. Maar overvolle pagina's jagen weg. Bezoekers kunnen niet kiezen of zien gewoon een volgepropte pagina en smeren hem. Want dat is een zeer basale reactie op drukte en ruimtelijke inperking. Als het te veel wordt, wil een mens weg!
In de huidige informatiemaatschappij wordt de aandacht van mensen boven-dien steeds overvoerd en het brein wil meer en meer geholpen worden. Onbewust stuurt witruimte. Het stuurt richting het onderdeel dat daaraan grenst en met beeldmateriaal of be-let-te-ring juist wat aandacht vraagt. Zo brengt wit rust en versterkt het in feite de aantrekkingskracht van andere pagina-delen.
Witruimte brengt ook rust, zoals wij mensen tot rust komen in een wijds landschap. Juist als de psyche de rust heeft, dan voelt de mens zich veilig en is hij het meest gevoelig voor suggesties. Het is die 'state of mind' die webshops in design moeten nastreven, omdat daar de conversie optimaal is. Een bena-dering is om pagina's wat uit te kleden. Analyseer ieder element op een webpagina en vraag je per onderdeel af wat de kans is dat het bezoekers afleidt van de keuze die jij wilt dat ze maken.
Balans
Het kiezen en weglaten van content is een spel van balans. Enerzijds lijkt het aantrekkelijk om bij een product zoveel mogelijk relevante alternatieven aan te reiken om zodoende bezoekers niet te verliezen bij geringe interesse in het gekozen product. Maar dat betekent tegelijkertijd meer content en dus drukte. Amazon lijkt hier lak aan te hebben. De site is wars van dit alles en zet alles in om de aanbevelingen maar onder de ogen te wrijven. Rust neem je maar na het shoppen, zo lijkt de statement van de webwinkel. Wehkamp.nl hanteert een veel kal-mer uitgangspunt. Eenmaal op een pro-duct-pagina is er witruimte te over, sommige informatie wordt in lichtgrijs wat naar de achtergrond gedrukt en als je alternatieven en aanbevelingen wilt, dan moet je daarvoor voorbij de eerste view scrollen.
Heatmaps
De realiteit echter, is dat webshops vaak een niche bedienen en dat diverse doelgroepen anders omgaan met volle of lege pagina's en met kleurgebruik. Webwinkeliers zouden daarom eigenlijk doorlopend moeten uitvogelen wat het menselijk handelen van hun bezoekers met hun website doet. Dat kan door middel van eyetracking-onderzoek en het in kaart brengen van heatmaps. Dat is niet goedkoop, maar de resultaten van dergelijk onderzoek worden visueel gemaakt door de populaire plaatsen op een webpagina weer te geven. Er wordt getoond wat de kijkdichtheid is per onderdeel van de pagina.
Eyetracking
Veruit de meeste webpagina's worden in een soort F-patroon bekeken. Dat betekent dat bezoekers eerst focussen op de tekstblokken bovenin de pagina. Het bovenste item wordt eerst van links naar rechts bekeken. Vervolgens zakken ze iets af en maken wederom een horizontale beweging. Tot slot bekijken ze nog een stukje van wat daaronder komt, maar dat is veel meer een scan dan daadwerkelijk bekijken. Productpagina's in webshops, waar een enkel product wordt weergegeven, worden wat grondiger bekeken. De F heeft een iets andere vorm omdat het beeld enorm de aandacht vraagt. Daarnaast blijken gebruikers veel aandacht te hebben voor zaken als prijs en de 'Voeg toe aan winkelwagen'-knop. Wanneer kopers op zoek zijn naar elementen als prijzen of andere getallen, dan vervalt het F-patroon en wordt er veel directer naar bepaalde paginaonderdelen gekeken. Opvallend is dat Amazon hierop inspeelt door de prijs (en besparing of korting) in rood te vermelden. Niet groot, maar wel opvallend tussen de overige zwarte letters.
Combinatie
Voor webwinkeliers is het vooral nuttig om de heatmaps te gebruiken in combinatie met 'click heat'. Dat wil zeggen: kaarten die weergeven waar de bezoeker ook daadwerkelijk op klikt. Immers, als verkoper wil je weten of de visuele presentatie ook daadwerkelijk conversie teweegbrengt. De combinatie van de twee maakt namelijk duidelijk of je 'calls to action', zoals je 'bestel nu'-knop enerzijds goed bekeken wordt en anderzijds, of het een populair klikitem is. Alleen zo is uit te vogelen wat een specifieke doelgroep aanspreekt en aanzet tot actie.
Kleur bekennen
De gevoelens en associaties die kleuren bij mensen oproepen:
Rood: sterk, vastberaden, verlangen, moed, opwinding
Oranje:enthousiasme, betaalbaar, creativiteit, stimulering, opgewekt
Geel: aandachtvragend, comfort, levendigheid, intellect, vrolijk, energie
Groen: duurzaam, betrouwbaar, veilig, eerlijk, optimisme, harmonie, vers
Blauw: diepte, stabiliteit, professioneel, loyaal, betrouwbaarheid, eer, vertrouwen
Paars: krachtig, nobel, luxe, mysterie, koninklijk, elegantie, magisch
Grijs: conservatief, traditioneel, intelligentie, serieus
Bruin: uithoudingsvermogen, ontspannend, zelfbewust, casual, bevestigend, aards
Zwart: elegant, ontwikkeld, formeel, krachtig, mysterieus
Wit: schoon, puur, nieuw, maagdelijk, vrede, onschuld, eenvoud
Dit artikel verscheen eerder in Twinkle 04-2009
Interessant artikel, thanx