Hoe weet je waar je een belangrijke advertentie of banner moet plaatsen op je website en hoe (re)design je een website zodanig dat bezoekers zullen klikken op datgene waar jij wilt dat hun oog op valt? Dankzij jarenlang onderzoek door web marketing firma's is gebleken dat gebruikers niet enkel volgens een bepaald patroon het web afsnuffelen, maar ook instinctief bepaalde gebieden op een webpagina zullen bekijken.

Heatmaps zijn hiervoor ideaal materiaal om deze informatie grafisch voor te stellen door middel van kleur en kleurintensiteit.  Zo wordt rood gebruikt om de sterkst bezochte gebieden aan te geven en blauw voor de minst populaire zones. Hoe intenser de kleur dus, hoe meer hits.

Google spreekt dan ook van een "Golden Triangle of Search". Zo zie je in de afbeelding hiernaast dat het menselijk oog de webpagina horizontaal afscant volgens de letter "F", linksbovenaan begint en zo de webpagina vertikaal verder doorloopt. Merk op dat de Google advertenties aan de rechterkant praktisch onopgemerkt blijven, met uitzondering van de eerste advertentie bovenaan.

Een heatmap heb je in drie soorten

De eerste is de eye-tracking heatmap. Deze beeldt af naar welke elementen op een webpagina een bezoeker het langste kijkt en wat zijn kijkpatroon is. Eyetools, is hierbij één van de spelers op de markt.

Als tweede soort heb je de clickbased heatmap dewelke wordt gegenereerd op basis van gemeten statistieken en toont op welke plaatsen het gros van de bezoekers hebben geklikt. CrazyEgg en Clicktale zijn twee tools die hier zeer mooi werk van maken.

Een attention heatmap is de enigste vorm van heatmaps waarbij geen concrete data voor nodig is, omdat hier gebruik gemaakt wordt van door software berekende pronostieken. Handig dus als je een website wil gaan designen en je wilt weten of je design zal "werken". Door middel van kleur en andere grafische elementen zoals bv. lijnen (om de beweging van het menselijk oog aan te geven) en cijfers (om volgorde van kijken vast te leggen) wordt een te verwachten aandachtspatroon weergegeven.



Een voorbeeld van een online tool die attention-heatmaps aanbiedt is Feng-GUI. Op basis van een screenshot of een URL, wordt een pronostiek opgemaakt. Ik nam de proef op de som, er van uitgaande dat IT toch vooral een mannenwereld blijft, en zoals je ziet hieronder is het resultaat niet altijd sluitend. Of het moet zijn dat Pamela haar jurkbandjes en haarplukje tegenwoordig voldoende zijn om een man het hoofd op hol te brengen...

Conclusie

Dus zoals Piet Huysentruyt het zou zeggen..."Wat hebben we geleerd vandaaaaag?":

Hoewel een attention heatmap qua nauwkeurigheid niet volledig is, en er dus geen harde besluiten uit getrokken kunnen worden, kan het verwachte beeld wel helpen bij het verfijnen van het design en kan men kijken of het vooropgezette ontwerp zijn doel zou halen. Heb je achteraf statistieken van de website en bijhorende clickbased en eye-tracking heatmaps, dan kan je je website optimaal gaan finetunen.

Heatmaps zijn wat mij betreft HOT STUFF en onmisbaar voor een webdesigner/webdeveloper!
Wat zijn jouw ervaringen met heatmaps en het gebruik er van? Heb je een interessante tool die heatmaps ondersteunt?