Wat is een heatmap, hoe creëer je een, voorbeelden en casestudy’s

19 min


123

Weet je wat een heatmap is – en waar is het goed voor?

Heatmaps zijn tegenwoordig overal . Je ziet ze op het weer, op onroerend goed sites – eigenlijk, overal waar gegevens zijn om weer te geven .

Ze worden steeds populairder in wetenschappelijke disciplines waar grote hoeveelheden gegevens begrijpelijk moeten worden gemaakt.

Dat is omdat ze een geweldige manier zijn om gegevens te doorzien naar trends en te begrijpen wat ze vervolgens moeten doen.

En hoewel we heatmaps als een 21e-eeuws ding kunnen beschouwen, blijken ze hun wortels te hebben in de statistische analysetechnieken van de 19e eeuw .

Hittekaarten zijn nu de meest gebruikte tool voor het weergeven van complexe statistische gegevens. Artsen, ingenieurs, marketeers, sociologen en onderzoekers van allerlei aard gebruiken warmtekaarten om complexe gegevenssets begrijpelijk en bruikbaar te maken.

Dat is het geheim van hun succes: kaarten moeten worden geïnterpreteerd , tabellen moeten worden begrepen, maar hittekaarten zijn zelfverklarend, intuïtief.

Klinkt goed. Dus waar kijk ik naar?

Wat is een heatmap?

Een heatmap is software voor gegevensanalyse die kleur gebruikt zoals een staafdiagram hoogte en breedte gebruikt: als hulpmiddel voor gegevensvisualisatie.

Als u naar een webpagina kijkt en wilt weten welke gebieden de meeste aandacht krijgen, toont een warmtekaart u op een visuele manier die eenvoudig te assimileren is en beslissingen te nemen.

Wat laat een heatmap zien?

Een heatmap maakt gebruik van een warm-naar-koel kleurenspectrum om u uw site-analyse te laten zien, namelijk welke delen van een pagina de meeste aandacht krijgen. Deze heat map laat bijvoorbeeld zien hoe ver de pagina bezoekers hebben gescrold:

CrazyEgg Scroll Map

U kijkt naar een webpagina en de gegevens staan ​​daar: de CTA boven de vouw gloeit fel oranje of niet. Als dit niet het geval is, kunt u overwegen deze hoger op de pagina te plaatsen, zodat deze overeenkomt met waar bezoekers de meeste aandacht aan besteden. Voor andere eenvoudige manieren om je conversiepercentages te verhogen, bekijk deze video van Crazy Egg’s GM Suneet Bhatt:

Je kunt warmtekaarten zien als een vorm van visuele verhalen . Door een heatmap te maken, begrijpt u meteen het gedrag van bezoekers. Ze helpen je ook een cruciale vraag te beantwoorden: “Waar moet de belangrijkste inhoud op deze pagina staan?”

Guardian Unlimited Heatmap

Hoe werkt een heatmap?

Heat mapping software werkt door gegevens van een webpagina te verzamelen en die gegevens over de webpagina zelf weer te geven.

Hier is hoe Crazy Egg het doet.

Eerst maken we een momentopname van de webpagina op de URL die u selecteert. Wanneer de HTML van de pagina wordt geladen, worden versies van wat is geladen ook naar onze servers verzonden, dankzij een korte sectie JavaScript die is ingevoegd in de code van uw site.

JavaScript ingevoegd in de code van uw site

Vervolgens maken we een kaart met alle elementen op uw pagina – alles waar iedereen interactie mee zou kunnen hebben. Deze en hun tags en hun bovenliggende elementen zijn wat we gebruiken om een ​​kaart met gebruikersactiviteiten op uw pagina te maken.

Vervolgens verzamelen we alle activiteitsgegevens. Telkens wanneer een gebruiker iets op uw webpagina doet, markeren wij het.

(We gebruiken ook een stukje code om ervoor te zorgen dat we de unieke gebruikers kennen, zodat u geen dubbele of meerdere gebruikers krijgt die met uw cijfers knoeien.)

Er is veel gaande onder de motorkap om dit te laten gebeuren, maar het hele punt van een heatmap is dat je dit niet noodzakelijkerwijs moet weten om er waarde uit te halen.

Stel dat iemand naar uw pagina komt en op uw CTA klikt. We nemen die klik op en voegen deze toe aan alle andere informatie die we over die pagina hebben.

Wanneer u vervolgens de pagina in het dashboard bekijkt, ziet u het totaal van alles wat elke unieke gebruiker heeft gedaan op de pagina, dat er ongeveer zo uitziet:

Quicksprout-heatmap

Een heat map-analyse geeft u een visueel overzicht van waar uw bezoekers op uw pagina klikken – hoe meer klikken, hoe helderder het gebied, wat wij ‘hotspots’ noemen.

Dit betekent dat wanneer u naar uw heatmap kijkt, u snel kunt zien op welke gebieden van de pagina veel actie wordt ondernomen en welke niet.

Andere typen warmtekaart

Naast warmtekaarten zijn er verschillende rapporten die u kunnen laten zien waar uw klikken vandaan komen, hoe ver bezoekers zijn gescrold en meer.

Schuif de kaart

Quicksprout-schuifkaart

Moet u langere of kortere inhoud op de pagina hebben? Waar zou die CTA moeten zijn? Met een schuifkaart kunt u zien welk deel van uw bezoekers heeft gescrolled waar vóór het stuiteren.

Dit is belangrijk, want als de meeste van uw lezers uw lange blogberichten niet lezen, kunt u beter uw tijd besteden aan het maken van andere soorten inhoud.

Schuifkaart vertelt u waar de CTA-sweet spot op uw site is: de plaats die de meeste oogbollen zien. Het vertelt je ook waar je ontwerp niet helemaal op de neus zit.

Plotselinge, sterke kleurveranderingen kunnen erop duiden dat bezoekers “denken dat wat volgt, niet langer verbonden is met wat eerder kwam (” logische eindes “genoemd)”, zegt Peep Laja , oprichter van Conversion XL. “Dit zijn scherpe afleverpunten die moeilijk te zien zijn met alleen Google Analytics.”

Confetti-rapport

Quicksprout Confetti-rapport

Confetti is als een zeer specifieke versie van een traditionele warmtekaart. Het is een weergave met hoge resolutie waarmee u afzonderlijke klikken kunt zien, elk weergegeven door een gekleurde stip in het rapport.

Waarom zou je je drukmaken? Deels omdat je verrast zult zijn over de rare dingen waarop mensen klikken, inclusief niet-klikbare elementen. Dat kan u unieke inzichten verschaffen over hoe mensen navigeren of niet naar uw website navigeren.

Laten we zeggen dat een bepaalde pagina een hoog bouncepercentage heeft. Het rapport met de kliktrack van de confetti onthult dat mensen die pagina bezoeken, klikken op een aantal verschillende items die niet kunnen worden aangeklikt en vervolgens gefrustreerd raken en weggaan. Ze willen doorklikken – ze kunnen gewoon niet achterhalen hoe.

Nu weet je wat je moet veranderen om de pagina te laten converteren.

 

Een andere zeer waardevolle toepassing van het Confetti-rapport is de mogelijkheid om aangepaste parameters bij te houden, zoals of iemand uw website heeft bezocht via een betaalde advertentiecampagne of een bepaalde e-mailontsnapping.

We hebben een heel artikel geschreven waarin meer wordt uitgelegd hoe deze tracking bedrijven kan helpen – vooral e-commerce merken – om erachter te komen wat er gebeurt tussen een klik en een aankoop (of waarom veel mensen een site verlaten zonder aan een winkelwagentje toe te voegen).

Overlay en Lijst Reports

Facebook-overlay-gegevensrapport

Een overlayrapport verdeelt de klikken op uw website in procenten per element. Hiermee kunt u precies zien welke afzonderlijke elementen klikken genereren.

Je kunt in de miniatuur hierboven zien dat er kleine plustekens op de pagina staan.

Elk hiervan vertegenwoordigt een pagina-element en hun kleur geeft aan hoeveel klikken ze krijgen. Blauw is het kleinst, terwijl groen, oranje en rood steeds meer klikken vertegenwoordigen.

Met een overlay-rapport kunt u de verdeling van klikken op uw pagina op een visuele manier bekijken.

Hier ziet u welk percentage klikken elk element heeft ontvangen (vergeleken met het totale aantal klikken op de pagina) en kunt u doorklikken naar demografische gegevens (zoals hoeveel van die klikken afkomstig waren van een mobiel apparaat of dat ze afkomstig waren van een nieuwe of terugkerende bezoeker).

Het laat je ook zien op welke elementen op de pagina werd geklikt, ook al waren ze eigenlijk nergens aan gekoppeld.

Een lijstrapport geeft vergelijkbare informatie weer, maar dan in een grafiekindeling om spotting-trends (zoals of uw elementen waarop de meeste klikken zijn gedaan, geen koppelingen zijn) eenvoudiger te maken voor het oog.

Wanneer moet u een warmtekaart gebruiken?

Altijd!

Nee echt. Hoe luchtig het ook klinkt, heatmaps zijn zo handig en zo intuïtief dat je er vrijwel altijd een voor de hele tijd moet hebben en regelmatig moet controleren.

Hier zijn enkele scenario’s waarbij het handig is om met behulp van heatmap-gegevens snel betere marketingbeslissingen te nemen:

Website herontwerp

Het opnieuw ontwerpen van een website kan een dure, tijdrovende onderneming zijn. Het laatste dat u wilt is een herontwerp dat niet beter werkt dan het origineel.

Grafische ontwerpers en UX-professionals kunnen tools voor warmtekartering gebruiken om te begrijpen hoe gebruikersgedrag wordt beïnvloed door grafische elementen zoals kleur, contrast en plaatsing, waardoor uiteindelijk een website wordt aangestuurd om effectiever te converteren.

Het is duidelijk dat grafische ontwerpers dit allemaal in principe al weten. Maar verschillende doelgroepen gedragen zich anders op verschillende websites.

Heatmaps uitvoeren voordat u een herontwerp van de website ontwerpt en start, kan u ervan weerhouden de markering te missen en af ​​te rekenen met een site die niet converteert of die uw specifieke doelgroep moeilijk vindt om te navigeren.

A / B testen

Je doet dit, toch? A / B-tests leveren cruciale conversieproblemen op, die het verschil kunnen maken tussen een snelgroeiend bedrijf en een bedrijf dat moeite heeft om te overleven.

Hittekaarten bieden u direct bruikbare informatie over wat uw bezoekers anders doen in verschillende versies van uw bestemmingspagina, blogposts of zelfs uw startpagina.

Tijdens het testen van het verplaatsen van de CTA-knop , het wijzigen van de kopie of het wijzigen van de afbeeldingen, kunt u de conversieratio van de pagina zien en begrijpen waarom de ene pagina beter converteert dan de andere. (Hopelijk converteert de test beter!)

Met een heatmap kunt u precies zien hoe conversiegedrag verschillen. Misschien converteert een langere pagina beter, dus u denkt: laten we al onze pagina’s lang maken. Klinkt logisch.

Maar wat als de langere pagina een ander verschil heeft – meer overtuigende kopie boven de vouw, laten we zeggen – en dat maakte het verschil?

Met een heatmap kun je meteen zien waar mensen scrollen en waar ze klikken, dus je bent nooit in het donker.

Contentmarketing

Zelfs nu is de meeste inhoud geschreven. Het zijn woorden op een pagina.

Zijn uw gebruikers het aan het lezen?

Met schuifmappen kunt u zien hoe ver uw gebruikers op de pagina scrollen, zodat u weet of ze uw inhoud lezen. Bekijk welke CTA’s de meeste aandacht krijgen met een klik op de kaart en u weet er meer van.

Bijvoorbeeld: laten we zeggen dat Michael een fantastisch, diepgaand blogbericht schrijft over het gebruik van het product van zijn bedrijf, DocuLoc, om documenten veilig te houden.

Hij identificeert use cases, documenteert wat bestaande klanten doen en gaat dieper in op waarom het belangrijk is en waarom zoveel bestaande oplossingen niet werken.

Als hij er super spammy en promotioneel over is, zal niemand het lezen; maar hij weet dat, dus de functie gaat meestal over de uitdagingen van het beveiligingslandschap, niet over het product.

Hij plaatst het stuk op zijn blog, tweets en deelt het, en het krijgt fatsoenlijk verkeer.

Tot nu toe, zo goed. De volgende week checkt hij de heatmaps. De schuifkaart laat zien dat slechts een op de vijftien of twintig van zijn lezers het einde van de post bereikt. Hmm, denkt Michael. Misschien is 7.000 woorden iets te lang. Het lijkt erop dat niemand het echt wil lezen.

Maar hij is een oude hand, dus hij controleert ook de andere rapporten. Het confetti-rapport laat zien dat van de mensen die tot het einde van de post hebben gelezen, bijna iedereen op zijn CTA klikt.

Michael heeft geen slecht presterende inhoud waar mensen vanaf stuiteren; hij heeft een lead gen machine die ongeschikte vooruitzichten diskwalificeert voordat ze zelfs maar contact met hem opnemen!

Hij kan dat allemaal leren aan de hand van onmiddellijke gegevens van de warmtekaart, waardoor hij meer tijd heeft om zijn volgende 7000 woorden tellende opus te schrijven.

UX en Usability Testing

Met al deze mogelijkheden om bij te houden waar bezoekers klikken en hoe ver ze scrollen, is het logisch om UX en bruikbaarheid te testen.

Stel dat u een online verkoper bent en dat veel mensen items aan hun winkelwagentje toevoegen, maar dat ze op het laatste moment hun winkelwagentje verlaten.

Het is tijd om een ​​kleine UX-test uit te voeren om te zien wat er aan de hand is.

Gebruik warmtekaarten en overlays om te zien waar mensen klikken – en waar ze vastlopen. Is uw uitcheckknop blauw? Het kan zijn dat het niet prominent genoeg is. Probeer iets kleurrijkers of hoger op de pagina.

Kloppen kopers op iets dat niet klikbaar is? Of worden ze misschien afgeleid door de navigatiebalk? Verwijder die afleidingen uit één variant van de pagina en test A / B vervolgens op de twee pagina’s om te zien welke klanten meer worden omgezet.

Conversietrechter

Het testen van UX en bruikbaarheid en de effectiviteit van uw inspanningen op het gebied van contentmarketing helpen u ook de manier te verbeteren waarop potentiële klanten de conversietrechter verlaten.

Zoals we hierboven al vermeldden, als een klein aantal mensen helemaal een stukje inhoud aan het lezen is, maar ze allemaal inschrijven voor de e-maillijst, verbeter je de kwaliteit van de leads voor je verkoopteam. U kunt dit allemaal bekijken via schuifkaarten en confettikaarten.

Als u echter veel bezoekers naar uw bestemmingspagina ziet komen, maar bijna niemand geeft u hun e-mail of klikt u op uw kortingsbon, kijk dan op uw heatmap om te zien waar ze klikken, of helemaal niet.

Het is misschien tijd om A / B een paar verschillende pagina’s te testen om de bruikbaarheid te verbeteren en afleiding te verwijderen waardoor bezoekers vastlopen.

Wat u kunt leren van een HeatMap

Heatmap-gegevens kunnen u helpen om snel te zien:

  • Uit welke koppen komen bezoekers binnen en laat ze klikken
  • Welke beelden de aandacht trekken en wat mensen eraan doen – u zult verbaasd staan ​​hoeveel proberen te klikken op een niet-gekoppelde afbeelding
  • Wat bezoekers van uw kerninhoud afleidt (Veel gebruikers van eerste heat heat-kaarten zijn geschokt over hoe verschillend hun gebruikers op de site navigeren in vergelijking met hun verwachtingen.)
  • Of bezoekers uw opt-in voor e-mail zien (lage opt-ins en doorkliks kunnen te wijten zijn aan zoiets eenvoudigs als opt-in-boxen die niet opvallen. Heatmaps maken dat duidelijk en voor de hand liggend zodat u het kunt oplossen.)

U kunt ook een warmtekaart gebruiken om te achterhalen:

  • Of uw navigatie werkt (weten gebruikers dat hij er is?)
  • Als mensen zoekopties gemakkelijk kunnen vinden
  • Of bezoekers uw inhoud lezen en hoeveel ervan (dit is een groot voorbeeld van gebruik van schuifkaarten!)

Boor dieper en je kunt zien:

  • Waar u de inhoud plaatst die het belangrijkst is voor de doelen van uw bezoeker (In een recent onderzoek vond ConversionXL dat de kijktijd van de gebruiker bijna precies in overeenstemming met het Pareto-principe werd verdeeld: 80% boven de vouw, 20% eronder. ( Wat is de vouw ? ))
  • Waar de meeste gebruikers op een pagina kijken (meestal is dit de bovenkant en de linkerkant – mensen hebben de neiging webpagina’s in een ‘F’- of’ Z’-patroon te lezen , dus veel sites zijn ontworpen om dit te vergemakkelijken, maar op afbeeldingen gebaseerde inhoud is vaak horizontaal lezen .)
  • Het verschil tussen wat mannen en vrouwen, oudere en jongere doelgroepen en mensen van verschillende geografische locaties willen van inhoud
  • Welke afbeeldingen worden bekeken, hoe gebruikers hiermee omgaanen hoe ze effectiever kunnen worden gebruikt

Dit alles zorgt voor een eenvoudige manier om problemen te identificeren die conversies kunnen schaden en een gemakkelijke manier om uw fixes voor hen continu te optimaliseren. Het lijkt een beetje op het hebben van röntgenvisie voor je website, en ik kan niet de enige persoon zijn die dat soms wenste.

hittekaart voorbeeld gek ei

Warmtekaarten begrijpen

Het lezen van hittekaarten is sneller en intuïtiever dan het krijgen van bruikbare informatie uit kolommen met figuren. Maar ze moeten nog steeds worden geïnterpreteerd.

Hoe een warmtekaart te lezen

Laten we een paar real-time heat map-voorbeelden bekijken. Zo heeft Khan Academy een warmtekaart-tool gebruikt om te begrijpen hoe hun gebruikers met hun site omgingen.

De Heat Map-tool geeft de startpagina van de Khan Academy weer, waarbij het aantal bezoekers wordt weergegeven dat op elk item op de pagina heeft geklikt.

Khan Academy-heatmap

Wat laat dit ons zien? In het hoofdmenu klikken gebruikers uitgebreid op ‘Kijken’, ‘Oefenen’, ‘Coach’ – maar niet ‘Bijdragen’, waaraan bijna geen aandacht wordt besteed.

“Zoeken” krijgt veel actie, de video wordt veel gespeeld en de twee CTA’s onder de eerste koptekst krijgen ook veel aandacht.

We kunnen ook zien dat de sociale links in de rechterbovenhoek van de afbeelding helemaal geen aandacht krijgen.

Door simpelweg te zien waar op de pagina mensen klikken, kunt u bepalen of u een van de afbeeldingen in de buurt moet verplaatsen, de juiste koers van actie duidelijker en gemakkelijker te vinden moet maken en kunt ontdekken hoe verward uw bezoekers zijn.

Er is meer.

Dezelfde pagina in de schuifkaart laat zien dat de grootste concentratie van aandacht het midden van het scherm boven de vouw is:

KhanAcademy Scrollmap

Dat is normaal. Blader naar de grote verzameling links van Khan Academy naar specifieke inhoud die op hun startpagina staat, en dingen beginnen er als volgt uit te zien:

Quicksprout-scrolmap 2

Nogmaals, dat is normaal. Wat u dan kunt doen, is de indruk die u krijgt vergelijken met dit Scroll Map-rapport met de lijstweergave.

Dat geeft aan hoeveel mensen op elke link hebben geklikt als een tabel met onbewerkte nummers, niet in verhouding tot het aantal bezoekers.

Scrollkaartgegevens

De lange staart van linkklikken in de lijstweergave komt goed overeen met de lange staart van aandacht die we in het Scroll Map-rapport zagen. Er zijn maar weinig scrollen naar beneden, maar van degenen die dat wel doen, klikken velen op een van deze links. Dat vertelt je dat de links waarschijnlijk op de juiste plaats zijn en de moeite waard zijn om te bewaren.

Heat Map en Scroll Map kunnen samen worden gebruikt om een ​​beter inzicht te krijgen in het bezoekersgedrag. Dit is bijvoorbeeld de Contribute-pagina van Khan Academy in het rapport Heat map:

Helpen vertalen in heatmap in andere talen

Je kunt zien dat de meeste aandacht naar waar ze willen gaan: naar de terugkerende donatie-CTA aan de rechterkant van de pagina.

Maar deze pagina heeft twee doelen. De andere is om mensen te laten inschrijven om vertalers te worden.

En wanneer we de pagina naar de bladerkaart brengen, kunnen we zien waarom niet te veel mensen op die link klikken:

Help met het vertalen van uw inhoudsrolkaart

Slechts ongeveer de helft van de mensen die de site bezoeken, scrolt zelfs zo ver naar beneden. Verplaats de CTA ? Geef het zijn eigen pagina?

Of is de kopie niet overtuigend genoeg om mensen te laten lezen? Controleer de kleurwijzigingen om te zien.

Het lijkt erop dat het “Count Me In” is waar mensen stoppen met kijken. Die eerste paragraaf, onder “Help onze inhoud in andere talen te vertalen!”, Grijpt de lezers niet en houdt ze vast.

Door de Scroll Map te gebruiken om te zien waar de aandacht wegvalt en de Heat Map om te zien waar acties veranderen, kun je niet alleen een foto maken van wat mensen doen, maar ook waarom ze het doen. Dat geeft je de kennis die je nodig hebt om beslissingen te nemen die leiden tot conversies en groei.

Je kunt hier een volledige video-walkthrough bekijken van de heatmap-strategie van Khan Academy:

Laten we aan de slag gaan met uw warmtekaart.

Hittekaarten: aan de slag

Warmtekaarten zijn relatief eenvoudig in te stellen. Het opzetten van een Crazy Egg-warmtekaart duurt letterlijk een paar minuten. Zodra het is ingesteld, is het controleren van de toegang tot uw rapporten ook super eenvoudig.

Hoe u stap voor stap een warmtekaart maakt

Stap 1: Meld u aan

1. Maak een CrazyEgg-account

Ga naar https://www.crazyegg.com/ en meld je aan voor een proefperiode. U krijgt 30 dagen gratis, zodat u heatmaps op uw site kunt uitvoeren, evenals opnames van gebruikerssessies en zelfs A / B-tests.

heat map crazy egg-account

Je wordt gevraagd om een ​​plan te kiezen. Dat is het aanmeldingsproces voltooid.

Stap 2: een momentopname instellen

hoe een heatmap te maken

Ga naar de pagina Nieuwe momentopname in uw dashboard en stel een nieuw rapport in.

Plaats de URL van de pagina die u wilt testen in het vak URL. (Zorg ervoor dat de trackingcode op die pagina staat!) Geef de snapshot een naam die u wilt dat u logisch vindt.

hoe een heatmap te maken

Kies vervolgens of u een rapport wilt uitvoeren dat desktopbezoekers, tabletweergaven, mobiele bezoekers, of alle drie vastlegt.

Bepaal vervolgens hoe lang u het rapport wilt uitvoeren:

hoe een heatmap te maken

U kunt na een ingestelde tijd of na een ingestelde hoeveelheid verkeer beëindigen. De standaardinstelling is 60 dagen of 25.000 bezoekers, maar u kunt daar binnengaan en wijzigen als u weinig verkeer heeft of als u denkt te weten wat u moet weten met minder bezoekers.

Wanneer uw momentopname actief is, kunt u deze op uw dashboard bekijken. 

7 Heat Map Case Studies

Hier zijn zeven voorbeelden van gegevensvisualisatie van hoe mensen Crazy Egg-warmtekaarten effectief hebben gebruikt:

1. Softmedia verhoogt conversies met 51 procent

Software-aanbieder Softmedia van penny-veiling gebruikte warmtekaarten om probleemgebieden op hun website te identificeren.

Ze identificeerden met succes afleidingen die bezoekers ervan weerhielden de gewenste actie uit te voeren. Na het verwijderen van deze zijn de conversies met 51 procent toegenomen.

hoe een heatmap te maken

Het linker paar afbeeldingen van de warmtekaart toont dat de knop “Klik hier niet” bezoekers afleidde van het klikken op de knop “vraag een offerte aan”.

Het juiste paar afbeeldingen toont bezoekersklikken op de contactpagina, waar een video-demo bezoekers afleidde van het contacteren van Softmedia.

Beide verbeterde conversies voor elke pagina verwijderen.

2. Conversion Rate Experts verbeteren Opt-Ins met 25,9 procent

CRO-agentschap Conversion Rate Experts wilden opt-ins op een bepaalde pagina verbeteren.

Hoewel de heat map data adequaat presteerde, toonden de heatmap-gegevens aan dat sommige bezoekers werden afgeleid door inhoud van de zijbalk en daarom het opt-in-vak nooit voltooiden.

hoe een heatmap te maken

Een A / B-test toonde aan dat een nieuwe pagina zonder de zijbalk resulteerde in een verbetering van 25,9 procent in opt-ins.

Kijk hoe de profs Crazy Egg gebruiken!

3. WPMU Dev Problemen met het ontwerpen van productpagina’s oplossen

WPMU Dev gebruikte het Confetti-rapport van Crazy Egg om te zien hoe bezoekers, vooral nieuwe bezoekers, interactie hadden met inhoud op hun CoursePress-productpagina.

Ze identificeerden delen van het navigatiemenu die bezoekers negeerden, samen met enkele geweldige video’s die niemand ooit heeft bekeken. Deze informatie werd ingevoerd in een herontwerp van een geplande productpagina.

hoe een heatmap te maken

Kun je raden wat er mis is met deze foto? Yep! Te veel call-to-action en elementen waarop bezoekers kunnen klikken. Wat ze echt ontdekten, was dat niemand op de dingen die ze wilden dat bezoekers zagen, klikte (en aan het bekijken was).

4. Lokaal zichtbaarheidssysteem verbetert lokale SEO

Small-business SEO-consultant Local Visibility System (LVS) creëerde een aangepaste URL voor Google Places (nu Google Mijn Bedrijf) en traceerde bezoekers naar die URL via Crazy Egg.

Het resulterende Confetti-rapport toonde aan waar lokale bezoekers naartoe gingen na de landing op de site, waardoor ze konden zien welke pagina’s extra moesten worden geoptimaliseerd.

(Er is ook nuttige informatie over het gebruik van Crazy Egg met kaarten, routebeschrijvingen en beoordelingen, die allemaal deel uitmaken van lokale SEO .)

hoe een heatmap te maken

Soms kunnen waanzinnig uitziende hittekaarten eng lijken. “Ze klikken overal!”

Maar het kan illustreren dat mensen het grootste deel van de pagina lezen en doorklikken naar meer informatie. Hoe kun je dat in je voordeel gebruiken?

5. Pagely controleert op ontwerpfouten

WordPress hostingplatform Pagely gebruikte de scrollkaart van Crazy Egg om te identificeren op welke delen van de pagina mensen aandacht hadden.

Het bedrijf ontdekte dat minder dan 25 procent van hun bezoekers voorbij 600px scrolde, wat betekende dat veel van de pagina werd verspild.

Deze informatie suggereerde dat Pagely de lay-out zou moeten heroverwegen om ervoor te zorgen dat bezoekers de belangrijkste informatie boven de vouw zouden zien.

Bovendien ontdekten ze dat koppelende klikken naar specifieke conversies een nog belangrijkere analyse is om uit te voeren:

hoe een heatmap te maken

Weten hoeveel paginaweergaven zijn omgezet in klikken en hoeveel klikken daadwerkelijk zijn omgezet in aanmeldingen, is uiterst waardevolle informatie. Combineer deze kennis met uw A / B-tests en zie welke variant niet alleen meer klikken maar ook aanmeldingen oplevert.

6. SugarRae Past de inhoudsmix aan

SEO blogger SugarRae heeft Crazy Egg-warmtekaarten gebruikt om te bepalen welke inhoud de bezoekers het meest aanspreekt.

Ze identificeerde de drie navigatielabels die de meeste klikken kregen en gebruikte die informatie om te beslissen in welke content ze later meer zou kunnen maken.

Ze ontdekte dat bezoekers probeerden te klikken op niet-klikbare afbeeldingen en ontdekte ook welke advertenties het beste werkten, zodat ze de mix kon optimaliseren voor meer klikken en inkomsten.

hoe een heatmap te maken

Met de overlay-weergave kon ze bezoekersklikken segmenteren op eigenschappen zoals verwijzingsbron.

7. Harry Fay Jewellery Boutique sluit een winstlek aan

Harry Fay Jewellery Boutique identificeerde verschillende gebieden die bezoekers wegjoegden en die de winst beïnvloedden, inclusief

  • falende cookies-meldingen
  • Bezoekers verliezen aan sociale pagina’s
  • onbeantwoorde vragen van klanten in het bestelproces

Na het identificeren van deze problemen , heeft de online retailer een aantal ontwerpwijzigingen doorgevoerd en geconstateerd dat de herstelde winsten meer dan betaalden voor de investering in de software.

hoe een heatmap te maken

Met Maps bladeren kun je snel zien of mensen zelfs naar de inhoud kijken waar je het meest trots op bent. In dit voorbeeld, waarin de schuifkaarten voor (links) en na (rechts) worden vergeleken, laten de afbeeldingen zien dat een veel groter percentage mensen nu naar de gepromote inhoud kijkt.

Hoe Crazy Egg Heat Map Tool te gebruiken: Voorbeeld

Hier is een voorbeeld van iemand – Crazy Egg, in feite – met behulp van de tool om problemen op de homepage van hun klant aan te pakken. Op de eigen website van Neil Patel was het de bedoeling om de conversies met 100 procent te verhogen.

Uiteindelijk wist het team de conversies met meer dan 400 procent te verhogen, op basis van de bevindingen van de Crazy Egg-tool.

Er is op de startpagina van Neil begonnen met werken:

Neil Patel-startpagina

Bekijk de bron en je ziet dat het een lange pagina is. Niets mis mee, maar deze pagina was niet aan het converteren. Met de oorspronkelijke schuifkaarten is gebleken dat slechts ongeveer 50% van het publiek halverwege de pagina veel heeft gelezen en dat relatief weinig bezoekers de bodem helemaal hebben gezien.

Hittekaart met Cold Bottom Homepage

Ondertussen toonde de Heat Map aan dat veel bezoekers feitelijk op de naam van Neil boven aan de pagina of op de logo’s van klanten klikten, terwijl relatief weinig op de CTA geklikt werd.

Neil Patel heatmap-voorbeeld

Veel mensen klikten op plaatsen die eigenlijk niet klikbaar waren – een bekend verhaal.

Neil Patel heatmap voorbeeld 2

Bovendien was de mogelijkheid om door te klikken naar case-studies drop-offs aan het creëren: meer mensen keken naar de casestudy’s dan dat ze inschreven!

neil patel heatmap voorbeeld 3

Kijkend naar het Confetti-rapport, was het gemakkelijk om te zien dat 49% van het verkeer naar de pagina kwam van QuickSprout, de persoonlijke blog van Neil Patel, wat betekent dat bezoekers waarschijnlijk al wisten wie hij was.

neil patel heatmap voorbeeld 4

“Dat is waarom”, zegt Mike Kamo, die de heatmap-rapporten uitvoerde, “we realiseerden ons dat we deze mensen niet zo hard hoeven te verkopen.” Te veel van de pagina vertelde bezoekers dingen die ze al wisten.

Misschien kunnen ze meer minimaliseren?

wil je meer traffic heatmap

De nieuwe pagina was zo simpel als het wordt: een koptekst, twee regels kopie en een formulier met één veld.

In plaats van dat mensen meteen een formulier invullen, plaatsen bezoekers nu de URL van hun website in om deze te laten analyseren en later hun gegevens toe te voegen.

(Klinkt dat bekend? Het zou moeten – het is wat de homepage van Crazy Eggbiedt, en nog een heleboel andere.)

“Wanneer mensen ontdekken dat er fouten op hun site staan, zullen ze zich waarschijnlijk sneller bij ons willen aanmelden”, zegt Mike.

ouch je website heeft werk nodig

Onderaan de nieuwe startpagina ziet u twee opties: Consulting en testimonials. De consultingpagina lijkt nu op de oorspronkelijke startpagina en bevat veel van hetzelfde exemplaar:

winstgevend verkeer

Maar het is alleen voor mensen die ernaar zoeken omdat ze vinden dat ze meer moeten weten. De meeste bezoekers gebruiken gewoon het hoofdformulier op de startpagina.

Het verschil in prestaties tussen de twee pagina’s is enorm. De eerste pagina zag slechts 2,1% conversies.

neil patel heatmap met 192 klikken

Op de nieuwe pagina vulde 26% van de bezoekers het eerste formulier in.

warmtekaart met 359 klikken

De nieuwe pagina is een proces in twee stappen en niet iedereen die het eerste formulier invulde, werd een hoofdrolspeler. Controleer de tweede pagina en de werkelijke conversieratio is 9,1% – een toename van 433% in conversies.

120 klikken

Door de verschillende types van heatmap samen te gebruiken, kon Crazy Egg enorme toenames in conversies genereren.

Het is duidelijk dat geen enkele heat map tool of enig ander hulpmiddel wordt geleverd met creativiteit die is ingebouwd of dat er geen behoefte is aan geweldig ontwerp, kopiëren en SEO.

Maar het laat u zien wat er echt aan de hand is en verandert de manier waarop uw site is gebouwd om dat weer te geven.

Conclusie

Een heatmap geeft u een duidelijke indicatie van wat bezoekers echt op uw site doen. U kunt snel en gemakkelijk achterhalen of iemand uw exemplaar ziet en of mensen in plaats daarvan op uw CTA of op afbeeldingen en woorden klikken.

U kunt ook zien waar uw bezoekers vandaan komen, houd de conversieratio’s voor paginaweergave in de gaten en nog veel meer.

In plaats van af te leiden wat er gaande is van nummers zoals het bouncepercentage en de tijd die u op een pagina doorbrengt, of doelconversies bij te houden in Google Analytics, kunt u met heatmaps een meer geavanceerd beeld opbouwen door te weten op welke elementen wordt geklikt of genegeerd.

We hebben gezien hoe hittekaarten kunnen worden gebruikt om conversiegedrag te begrijpen.

Met behulp van een eenvoudige warmtekaart kunt u zien of bezoekers op uw conversie-elementen klikken en zo niet, waarop ze in plaats daarvan klikken.

Het is bijna altijd iets onverwachts.

En het laat je een vraag beantwoorden die geen enkele hoeveelheid bounce-statistieken kan: waarom verlaten mensen je site ?

Op basis van dat inzicht in echt, eerder dan ingebeeld, gebruikersgedrag, is het mogelijk om een ​​beter ontwerp en kopie te maken en veel hogere conversies te genereren .

Met gegevens uit Confetti en Scroll Maps kunt u het gebruikersgedrag op een meer geavanceerde manier identificeren, terwijl u de analyse van de warmtekaart net zo intuïtief houdt als wanneer u naar het scherm kijkt.

Door middel van kruisverwijzingen in Confetti, Overlay en Scroll Map-rapporten kunt u zien waar de aandacht naartoe gaat en precies wie waar klikt.

Het segmenteren van verkeer op activiteit en bron, en het begrijpen van het aantal bezoekers dat daadwerkelijk dat deel van de pagina heeft bekeken, kan u behoeden voor het ‘verkeerd optimaliseren’ van de verkeerde delen van de pagina. Het kan ook je inhoudspel sterk houden!

Het is moeilijk om deze eenvoudige, veelzijdige tool voor het optimaliseren van pagina’s of hele websites te verslaan.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format