8 exempel på värmekartor för datadriven produktledning
Förmodligen är den enskilt viktigaste egenskapen hos en bra produktchef förmågan att känna empati med användarna. För att utveckla den förmågan tillbringar produktchefer timmar med användarintervjuer och med att analysera data bakom användarnas beteende.
Men det finns ett annat sätt att vässa sin användarintuition – genom att analysera hur användarna interagerar med din produkt med hjälp av värmekartor.
Värmekartor är bara ett av många verktyg för användarundersökningar som hjälper till att upptäcka friktion, avsikt och möjligheter genom hela användarresan. De faller också under paraplybegreppet produktanalys, vilket hjälper dig att gå bortom fåfänga mätvärden och se vad användarna faktiskt gör.
Continue Reading for Free
Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.
Have an account? Log In
Om du har hamnat här är du förmodligen redan nyfiken på fördelarna med värmekartor – eller så letar du efter verkliga exempel för att motivera investeringen.
Oavsett vilket har du kommit rätt. Låt oss gå igenom de olika typerna av värmekartor och hur du kan använda dem för att nå dina produktmål.
#1: Klickkartor och tryckkartor
Vi börjar med den mest populära av dem alla – kartan över klick (för gränssnitt på datorer) eller tryck (för mobila gränssnitt).
Klickkartor är en visuell representation av hur dina användare klickar på saker i ditt gränssnitt. Det är helt enkelt en skärmbild av ditt användargränssnitt där delar av det markeras i olika färger.
Om ditt värmekarteverktyg markerar ett visst element i ditt gränssnitt betyder det att en användare (eller många av dem) har klickat på det. Färgen visar däremot hur många klick det specifika elementet har fått.
Värmekarteverktyg använder vanligtvis färger från temperaturskalan.
Du kommer att se varmare färger från denna gradient för områden som får många klick och kallare färgmarkeringar för områden som får lite uppmärksamhet.
Så här ser datavisualiseringen av en tryckkarta ut för en mobilapp som låter dig hantera din ekonomi.
Vi kan se att områdena som anger det spenderade beloppet för varje transaktion är markerade med rött. Det betyder att många klickar på dem (förmodligen för att expandera transaktionen och se detaljerna).
Kontosaldot högst upp är däremot markerat med grönt – vilket visar att få personer faktiskt klickar på det.
Så använder du en klickkarta
Klickkartor är mycket rika på handlingsinriktade insikter. Det finns så mycket du kan lära dig om dina användares beteende genom att titta på de områden de klickar på.
Om du till exempel hanterar en app för ett hundhem som har en donationssida där användarna kan stödja hundhemmet ekonomiskt, kan du använda en klickkarta för att se vilket donationsalternativ som fungerar bäst.
Genom att granska tryckkartan ovan kan vi säga att alternativen $10 och ”Annat” överlägset är de populäraste valen när det gäller att välja donationsbelopp.
En viktig insikt vi får härifrån är att det sannolikt finns ett donationsbelopp som inte finns med i listan (t.ex. $1), och att människor klickar på ”Annat” för att ange det beloppet.
Det är därför förmodligen en bra idé att se vad människor anger i avsnittet ”Annat”, hitta de vanligaste beloppen och lägga till dem i vår lista.
#2: Skrollkartor
Precis som namnet antyder låter den här typen av värmekarta dig analysera dina användares skrollbeteende.
Skrollkartor färgkodas också med hjälp av temperaturskalan. I stället för att markera punkter i gränssnittet där människor har klickat markerar de dock hela avsnitt på sidan utifrån hur många personer som har skrollat ned till den punkten och sett avsnittet.
Precis som med de andra värmekartorna får du varma färgmarkeringar om många personer skrollar och ser avsnittet, och kalla färger när få personer gör det.
Så använder du en skrollkarta
Rullkartor är utmärkta för att optimera placeringen av vissa element eller avsnitt på sidan och felsöka problem med användningen av eller engagemanget i dessa avsnitt.
Vi går igenom ett typiskt felsökningsfall genom att undersöka rullkartan för prissidan hos en SaaS-tjänst som heter Nelio.
Föreställ dig att du har problem med konkurrenskraften. Av någon anledning föredrar människor att registrera sig hos dina konkurrenter. När du frågar dem varför säger de att det andra verktyget hade en funktion för spårning av flera mål och att du inte hade det.
Problemet är alltså att du faktiskt har den här funktionen, så nu behöver du förstå varför människor inte hittar den.
När du tittar på rullkartan för din prissida ser du att den stora majoriteten av dina användare inte rullar på sidan alls. Sedan lägger du märke till att beskrivningen av funktionen för spårning av flera mål ligger nedanför vikningen och i den blå zonen. Det innebär att bara några få av dina användare rullar ned och läser om den, vilket kan gälla för de flesta verktyg för analys av användarbeteende.
Problemet är identifierat! För att lösa det kan du överväga att lägga till funktionerna i avsnittet ”Alla planer inkluderar” som extra element i listorna över dina prisplaner – och se till att de visas ovanför vikningen så att människor ser dem utan att behöva rulla.
#3: Värmekartor för muspekaren
Den här typen av värmekarta, som även kallas rörelsekarta, spårar musens position och låter dig visualisera hur dina användare ”rör sig” över ett gränssnitt.
När vi använder värmekartor för muspekaren utgår vi i de flesta fall från att användarna sannolikt tittar på det element som deras markör befinner sig över. Genom att spåra musens rörelser kopplar vi därför detta till spårning av vad människor tittar på när de använder vårt gränssnitt.
Visuellt består den av markerade punkter (återigen med ett färgschema som påminner om temperaturer) för de delar av användargränssnittet där användarens muspekare har befunnit sig längst. Utöver detta visar vissa värmekarteverktyg även ett ”spår” av var dina användare vanligtvis börjar och hur de rör sig över gränssnittet.
Så här ser de här spåren ut.
Det här är värmekartan som spårar musrörelser på förmodligen ett av världens bästa gränssnitt när det gäller användarupplevelse – Apples webbplats (trots allt är de hemvist för historiens första UX-designers). Spåren visar att människor börjar utforska landningssidan för MacOS Snow Leopard genom att först undersöka själva den fascinerande katten, innan de läser rubriken och går vidare till de andra elementen på landningssidan.
Så använder du en rörelsekarta
Ett av de intressanta sätten att använda en rörelsekarta är för att identifiera sådant som distraherar användarna.
Om du till exempel ansvarar för att optimera Amazons sida med sökresultat (ditt mål är att användarna ska klicka på en produkt som Amazon har hittat åt dem), kan du titta på värmekartan för muspekaren och se att majoriteten av användarna först går till en av dina banderoller (till exempel någon form av tillkännagivande), innan de fortsätter med att undersöka sökresultaten.
Detta distraherar dina användare kraftigt och kan minska sannolikheten för att de klickar på sökresultaten. Därför tar du bort banderollen eller gör den mindre visuellt framträdande i gränssnittet.
#4: Uppmärksamhetsvärmekartor
Hittills har vi talat om tre analysverktyg som låter dig analysera dina användare visuellt – genom klick, musrörelser och rullning på sidan.
Även om vart och ett av dessa kan ge oss värdefull information kan det vara missvisande att förlita sig på bara ett av dem. Att titta på användarbeteende isolerat, utan ett tillräckligt sammanhang, kanske inte ger oss en tillräckligt bred bild av vad som faktiskt händer.
Därför använder produktteam vanligtvis alla dessa typer samtidigt och kombinerar insikterna från alla tre innan de analyserar dem och drar slutsatser. Den här lösningen är dock inte heller perfekt, eftersom du sannolikt behöver lägga ned tre gånger så mycket tid på att genomföra hela analysen.
Som tur är kan moderna verktyg för visualisering av värmekartor, tack vare AI-modeller och avancerade algoritmer, kombinera informationen från användarklick, muspekare och rullning till en enda värmekarta.
Den här fjärde typen kallas uppmärksamhetsvärmekarta eftersom den i praktiken visar vilka delar av användargränssnittet som får mest uppmärksamhet från dina användare. Visuellt liknar den en klickkarta, där vissa element i användargränssnittet markeras med olika färger ur temperaturfärgpaletten baserat på hur mycket uppmärksamhet användarna ägnar dem.
#5: Geografiska värmekartor
Värmekartor har funnits omkring oss långt innan människor började tillämpa den tekniken på användargränssnitt. En av de mest framträdande traditionella typerna av värmekartor har varit den geografiska kartan.
I det här fallet markerar du vissa delar på en karta baserat på vilken typ av datapunkt du har valt. Om du till exempel vill analysera den geografiska fördelningen av turistmål i Frankrike kan du använda den här geografiska värmekartan.
På kartan ovan visas antalet hotellbäddar (främst avsedda för turister) per kvadratkilometer. Som vi kan se är Korsika, de franska Alperna och Côte d’Azur de tydliga vinnarna i den här kategorin.
Så använder du en geografisk värmekarta
Det är intressant att titta på Frankrikes turistdata, men kan de här värmekartorna hjälpa mig att analysera min digitala produkt? Låt mig visa ett exempel.
Låt oss hålla oss till ämnet turism (och Frankrike) och föreställa oss att du driver en tjänst för korttidsuthyrning online (något som liknar Airbnb). Du funderar på att skapa och distribuera reklammaterial för lokala festivaler i franska städer för att få fler människor att boka hotell där genom din tjänst.
Den första frågan som skulle dyka upp i ditt huvud är – vilken stad eller festival ska du börja med?
För att få svar på det kan du skapa en geografisk värmekarta som visar fördelningen av hyresbostäder och lägenheter som använder din tjänst.
Genom att titta på kartan ser du att din tjänst är ganska populär i södra Frankrike. Därför kanske du bör överväga att börja med att marknadsföra festivalerna i Provence och Côte d’Azur.
#6: Kartor över frustrerade klick
Det här är en undertyp av klickkartor som filtrerar bort och bara visar de fall där dina användare har klickat på något i frustration. Verktyg för värmekartor identifierar vanligtvis något som ett frustrerat klick (eller ett dött klick) om användaren fortsätter att klicka på samma element flera gånger i rad.
Så använder du en karta över frustrerade klick
Kartor över frustrerade klick är utmärkta verktyg för att identifiera problematiska användarupplevelser. Det kan vara något som ser klickbart ut men inte är det, något som inte är intuitivt eller helt enkelt en knapp som inte fungerar.
Om vi till exempel skulle genomföra en dataanalys av frustrerade klick på en av Iterates sidor borde vi definitivt få frustrerade klick på åtminstone två ställen – här är varför:
La du märke till de två textelementen som är markerade med blått? Gissa vad – de är inte länkar. Det är bara vanlig text som färgats blå. Många av Iterates besökare (inklusive jag) har försökt klicka på de här textelementen i förväntan att bli omdirigerade till en annan sida.
Självklart händer ingenting när man klickar på dem, och det kan leda till att användaren blir frustrerad och börjar ”klicka i frustration”.
Lärdomen från att undersöka kartan över frustrerade klick på den här sidan är att du till exempel bör se till att din text inte ser ut som hyperlänkar. Du kan kanske genomföra ett A/B-test med olika färger och se om ditt antagande att blå text orsakar frustrerade klick stämmer eller inte.
#7: Värmekartor för ögonspårning
Hittills har vi använt hovringskartor för att förstå var våra användare har tittat när de besökt vår webbsida. Vi antar att användarnas ögon för det mesta tittar på markören. Därför kan markörens rörelser över ditt gränssnitt visa vad dina användares ögon fokuserar på.
Det här är ett vanligt sätt att analysera uppmärksamhet. Värmekartsdata som metoden ger är dock inte perfekt, eftersom användare inte alltid tittar på sin markör.
Om du vill få exakta positions- och numeriska data om vad dina användare tittar på bör du i stället överväga att använda en värmekarta för ögonspårning.
Till skillnad från de andra typerna kräver värmekartor för ögonspårning att dina användare bär specialutrustning som registrerar deras ögonrörelser och identifierar positionen för de element de tittar på.
Det innebär att du måste bjuda in dina användare till särskilda testsessioner, få dem att bära dessa spårare och börja använda din produkt. Även om det är betydligt mer tidskrävande och kostsamt är kvaliteten på den data du får ut mycket bättre än något du kan få från andra typer av värmekartor för webbplatser.
Så använder du en värmekarta för ögonspårning
Med tanke på kostnaden för att organisera testsessioner med ögonspårning kommer du förmodligen bara att använda ögonspårning inom områden för UX-optimering med stor påverkan.
Studier med ögonspårning är mycket vanliga för produkter från stora teknikföretag, där en förbättring på 1 % av användbarheten hos deras produkter kan översättas till tiotals miljoner i intäkter och ROI.
Föreställ dig bara hur mycket extra ARR Amazon skulle få om de genomförde en studie med ögonspårning och placerade sina banners för utvalda produkter på ett sätt som ökade konverteringsgraden med 1 %.
#8: [Bonus] Konfettikartor
Konfettivärmekartor är en undertyp av vanliga klickkartor som visar enskilda klick i stället för att markera det allmänna området där användarna har klickat.
Det fina med att analysera enskilda klick är att du kan filtrera dem baserat på olika komplexa datapunkter.
Här har vi till exempel grupperat klicken på sök-CTA:n efter vilken veckodag klickhändelsen inträffade.
Utifrån datan kan vi se att tisdagar får flest klick, medan personer som besöker sidan på måndagar är de mest distraherade (många klick över hela gränssnittet).
Så använder du en konfettivärmekarta
Konfettivärmekartor är särskilt användbara när du behöver analysera användarbeteende på detaljnivå. Till skillnad från traditionella värmekartor, som visar aggregerad data, låter konfettikartor dig filtrera enskilda klick baserat på parametrar som enhetstyp, hänvisningskälla eller till och med tid på dagen.
Den här typen av värmekarta är utmärkt för att upptäcka mönster som annars skulle förbli oupptäckta. Om din kassaknapp till exempel får fler klick på fredagar men betydligt färre på måndagar, kanske dina användare är impulsköpare som styrs av löneutbetalningen – och din måndagspublik kanske fortfarande återhämtar sig efter helgen och stirrar tomt på din prissida i stället för att konvertera.
Konfettikartor kan också synliggöra oväntade distraktioner. Om användarna klickar över hela sidan i stället för där du vill att de ska klicka, kanske de är förvirrade – eller desperat letar efter ett tecken på liv. Om din navigeringsmeny får fler klick än din CTA kan det betyda att användarna har gått vilse och hoppas kunna ta sig därifrån i stället för att engagera sig. Du kan använda insikter från värmekartor för att förfina din karta över användarresan, särskilt när du identifierar dessa friktionspunkter. Genom att filtrera efter användarsegment kan du se vilka grupper som har störst svårigheter och var du behöver göra upplevelsen smidigare.
Värmekartor ökar din förståelse för användarna
Varje typ av värmekarta som vi har upptäckt tillsammans här kan ge dig en inblick i hur dina användare utforskar och använder dina produkter. Om du arbetar resurseffektivt erbjuder värmekartor ett snabbt och lättviktigt sätt att genomföra UX-research innan du investerar i mer djupgående användbarhetstester. Med deras hjälp kan du se och känna de svårigheter som dina användare upplever och gå vidare med att åtgärda dem.
I kombination med verktyg för produktanalys kan värmekartor ge en tydligare bild av hur användarna interagerar med din produkt och var de lämnar den. Om du till exempel kombinerar värmekartor med verktyg för sessionsuppspelning får du både ”vad” och ”varför” bakom användarnas beteende.
Värmekartor är fantastiska, men de är bara ett av många verktyg som du kan använda för att utveckla förståelse för användarna. Om du vill lära dig mer om de andra verktygen kan du anmäla dig till vårt nyhetsbrev.
