Musvärmekartor: 8 sätt de kan förbättra din produkt

Förmodligen är den mest intressanta och givande delen av en produktchefs arbete att lära sig hur användarna tänker och agerar när de använder produkterna.

För att göra detta genomför vi vanligtvis användarintervjuer, undersökningar och analyserar våra data. Det finns dock ännu ett värdefullt verktyg i en produktchefs arsenal som kan hjälpa dig att sätta dig in i användarnas perspektiv – värmekartor över musrörelser!

I dag vill jag gå igenom praktiska användningsområden för värmekartor över musrörelser och effektiva sätt att använda dem för att förbättra din produkt.

Vad är värmekartor över musrörelser och hur fungerar de?

En värmekarta över musrörelser (även kallad uppmärksamhetsvärmekarta) är ett produktanalysverktyg som visualiserar hur användare interagerar med ditt gränssnitt genom sina musrörelser. Den skapar ett visuellt lager – vanligtvis med hjälp av färggradienter – ovanpå en skärmbild av ditt användargränssnitt för att visa var användarna oftast håller muspekaren, flyttar den och klickar.

Detta kan hjälpa dig att identifiera vilka element som fångar uppmärksamhet, var användarna kan tveka eller vad som helt ignoreras. Värmekartor över musrörelser är särskilt användbara när de används tillsammans med andra typer av värmekartor, till exempel rullningsvärmekartor, som visar hur långt ned på sidan användarna rullar.

Tillsammans ger dessa verktyg en mer heltäckande bild av användarnas engagemang – vad de ser, vad de hoppar över och vart deras uppmärksamhet naturligt riktas.

Produktchefer och UX-designers använder vanligtvis olika typer av värmekartor för att få insikter i användarnas beteende, bland annat rullningskartor, klickkartor, kartor över användarnas uppmärksamhet, värmekartor för ögonspårning och många fler exempel på värmekartor. Varje typ kan ge specifika insikter som hjälper dig att öka användarretentionen och engagemanget, men i dag vill jag att vi går på djupet med en särskild typ – värmekartan över musrörelser.

En värmekarta över musrörelser är vad man skulle kalla en ”aggregering”, eftersom den innehåller kombinerade data från flera olika typer av användarinteraktioner – klickbeteende, rullningsbeteende och beteende kopplat till musrörelser.

Värmekartor över musrörelser är relativt nya inom visuell produktanalys, eftersom det är svårt att kombinera data från dessa tre olika beteendetyper i en enda visualisering. Det var utvecklingen av AI-modeller som gjorde det möjligt för analysverktyg att göra detta.

Praktiska användningsområden för att optimera din produkt med musspårning

Nu när vi har en grundläggande förståelse för vad dessa värmekartor är kan vi gå igenom flera praktiska användningsområden där du kan göra något värdefullt för din produkt genom att granska och analysera dina värmekartor över musrörelser.

Så använder produktchefer värmekartor över musrörelser

Även om analys av användarinteraktioner kan verka vara något som främst passar UX-designers behov, kan produktchefer också använda värmekartor över musrörelser för att lösa sina egna problem. Här är några av de sätt jag har använt det här verktyget för att förbättra mina produkter.

#1: Hitta flaskhalsar i din aktiveringstratt

Utifrån min erfarenhet av att hantera aktiveringsutmaningar är trattoptimering ett av de mest komplexa men samtidigt mest betydelsefulla ansvarsområdena för en produktchef. Även en måttlig ökning av aktiveringen med 10 % kan skapa en kaskadeffekt genom hela tratten och avsevärt öka konverteringen från kostnadsfri till betald.

Aktivering handlar dock inte bara om siffror – det är ett pussel som kräver djupa beteendeinsikter, iterativa experiment och en vilja att ifrågasätta antaganden om hur användarna interagerar med din produkt. Nyckeln är inte bara att få fler användare genom tratten, utan att verkligen förstå varför de faller bort från början.

För att göra detta använder en produktchef i praktiken alla verktyg i sin arsenal, inklusive analysverktyg, undersökningar och så vidare. Muskartor hör också till dessa verktyg. Här är ett av många sätt som de kan bidra till att förbättra aktiveringen.

Föreställ dig att du arbetar på Atlassian och har satt upp ett kvartalsmål att förbättra konfigurationsgraden för Jira Cloud.

Genom att titta på aktiveringstratten med hjälp av ditt analysverktyg ser du att det sker ett stort bortfall i steget där användarna anger namnet på sin Jira-instans och skapar sin Atlassian-webbplats.

För att förstå vad som har hänt kan du öppna ditt värmekarteverktyg och titta på värmekartan över musrörelser. Du ser att användarna tillbringar mycket tid på sidan och aktivt klickar i fältet för webbplatsnamnet och fältet ”Kom igång i Jira”.

Detta är inte ett normalt beteende, eftersom du vill att människor bara ska klicka på varje fält en gång och inte spendera mer än 10–15 sekunder på den här sidan. Du inleder en undersökning och ber ditt QA-team att kontrollera vad som händer.

Det ditt team upptäcker är att webbplatsnamnsvalideraren (som kontrollerar om namnet redan finns) för en viss grupp användare visar ett fel oavsett vad de skriver.

Anledningen är att en osynlig Google Recaptcha tror att dessa användare är robotar. För att åtgärda detta pratar du därför med ditt säkerhetsteam, inser att säkerhetströskeln för recaptcha är högre än vad vi behöver och sänker den.

Som ett resultat låser du upp dina användare, låter dem skapa sin webbplats och förbättrar aktiveringsgraden avsevärt.

#2: Hjälpa till med prioritering av funktioner

När det gäller prioritering av funktioner är den enskilt viktigaste faktorn du tar hänsyn till funktionens påverkan på dina användare. Du mäter denna påverkan utifrån data, din kunskap om användarnas behov (baserad på enkäter och intervjuer), din magkänsla och hur användarna interagerar med ditt gränssnitt.

Det sistnämnda är där dina värmekartor över musrörelser kommer till hjälp.

Vi återgår till vårt Jira-exempel. Anta att du vill förbättra hur människor organiserar backloggen och att det finns fler än 20 funktionsidéer för detta. För att prioritera dem utifrån användarnas behov granskar du värmekartan för backloggsidan. Efter granskningen ser du att det finns mycket aktivitet i avsnittet med snabbfilter.

Du går därför till ditt analysverktyg och tar fram ett fördelningsdiagram över de snabbfilter som dina användare har tillämpat oftast. När du tittar på dessa data ser du att omkring 50 % av alla Jira-användare skapar ett snabbfilter som visar uppgifter med statusen ”Att göra”.

Ett bra sätt att förbättra användarupplevelsen i detta fall skulle vara att lägga till en särskild filterknapp för statusar. Låt oss säga att denna funktionsidé redan fanns på din lista över förbättringar. Då använder du denna insikt för att ge den högre prioritet och flyttar den högst upp i ditt teams backlogg.

#3: Optimering av konverteringsgrad

När det gäller komplexitet kan optimering av konverteringsgrad (CR) enkelt mäta sig med aktiveringsfunnels. Jag har ägnat månader åt att analysera CR och liknande mätvärden för mina produkter, lagt till funktioner för att förbättra den, insett att de inte fungerar, lagt till något annat och upprepat denna cykel tills jag byggde något som faktiskt ökade konverteringsgraden.

Precis som vid aktivering är värmekartor över musrörelser ett effektivt verktyg för att analysera konverteringsutmaningar för dina produkter.

I de flesta fall är den största nyttan med detta verktyg att identifiera situationer där människor klickar på fel CTA:er och ignorerar dem som leder till konvertering. Låt mig visa detta med produktsidan för en butik som säljer utrustning för storkök.

Föreställ dig att vi granskar värmekartan för den här webbsidan. Troligtvis kommer vi att se att ett visst antal personer klickar på knappen ”Chatta nu” ovanför den huvudsakliga uppmaningen till handling (visa produkt). Jag förstår att företaget har lagt till den för att övertyga användarna om att deras produkter är de billigaste på marknaden. 

Problemet här är dock att ett klick på ”Chatta nu” avbryter användarnas resa när de granskar och köper produkten – vilket minskar konverteringsgraden avsevärt.

Mitt förslag här skulle vara att flytta detta meddelande och denna CTA till en mindre framträdande del av sidan för att undvika att avbryta användarnas resor.

#5: A/B-testning för att validera funktioner

En annan användbar tillämpning av värmekartor över musrörelser är funktionsvalidering genom A/B-testning. Här kan värmekartor fungera som en värdefull datakälla genom att visuellt visa förbättringarna (eller avsaknaden av förbättringar) i hur användarna interagerar med din funktion.

Det du gör i detta fall är att genomföra A/B-testet med funktionen aktiverad för variant A och avstängd för variant B. Därefter ser du till att ditt värmekarteverktyg spårar användarinteraktioner i båda varianterna, så att du kan göra en jämförelse sida vid sida av värmekartan över musrörelser för respektive variant.

Genom att titta på dem kan du enkelt upptäcka förändringar i användarnas beteende och se om din nya funktion hade den påverkan du hoppades på.

Ett exempel på detta skulle vara att lägga till en knapp med texten ”Ladda ned alla” på filbläddrarsidan i din molnlagringsprodukt. Om människor börjar interagera aktivt med den knappen i stället för att manuellt ladda ned varje enskild fil i sin lagring, kommer din nya funktion att vara framgångsrik.

Så använder UX-designers musvärmekartor

Värmekartor är ett fantastiskt verktyg för att undersöka användarinteraktioner. Därför anser jag att det är ett oumbärligt verktyg i UX-designers verktygslåda. Här är några av de sätt som mitt UX-team har använt musvärmekartor för att förbättra sin design.

#6: Förbättra andelen slutförda formulär

Oavsett vilken typ av produkt du har kommer du sannolikt att ha minst ett formulär i din aktiverings- eller intäktsgenereringstratt. Dessutom kommer du, baserat på min erfarenhet, sannolikt att förlora personer/konverteringar i det trattsteg där de fyller i detta formulär.

Den främsta anledningen till att du förlorar dem är sannolikt en dålig användarupplevelse som gör dem uttråkade eller frustrerade. För att förstå om detta händer med ditt formulär och åtgärda det genomför produktdesigners användbarhetstester och övervakar noggrant användarnas beteende. Problemet med dessa tester är dock att de både kräver mycket tid och resurser.

Formuläranalys med musvärmekartor kan däremot identifiera en betydande del av användbarhetsproblemen till en bråkdel av kostnaden.

Om du till exempel ser ett stort tapp i ditt registreringsformulär i kassan och tittar på värmekartan, kan du upptäcka att det finns betydande musaktivitet i de första fälten och att aktiviteten sedan plötsligt avtar vid fältet ”telefonnummer”.

Detta kan tyda på att människor inte känner sig bekväma med att dela sina telefonnummer med dig och att du bör överväga ett alternativt sätt att identifiera dem.

#7: Åtgärda navigeringsproblem

Ibland beror minskningen i upptäckten och användningen av dina funktioner eller webbplatssektioner på att dina användare inte kan hitta dem på din plattform.

Om du driver en e-handelsbutik som precis har börjat sälja professionella sportskor (t.ex. brottning, basket osv.) skulle du naturligt lägga till en ny sektion under din befintliga navigering och vara klar.

Men föreställ dig att trafiken till din sektion för sportskor är mycket lägre än du förväntade dig. När du har granskat musvärmekartan kanske du ser att mycket få personer håller muspekaren över den sektionen i din navigering.

Å ena sidan kan detta bero på bristande intresse för sportskor. Å andra sidan kanske människor inte har lagt märke till att du har lagt till den, helt enkelt eftersom listan över skotyper i din navigering är ganska omfattande.

Även om det är mycket logiskt att hålla dina sektioner organiserade bör du placera något nytt på en framträdande plats (åtminstone till en början). En UX-designer kan därför överväga att placera den nya sektionen direkt i den övre navigeringsmenyn. Alternativt kan de behålla den på samma plats men lägga till etiketten ”ny” för att dra till sig fler blickar. 

#8: Förbättra läsbarheten

Detta fall är särskilt relevant för bloggar eller andra resurser med långt innehåll. Ibland påverkar sättet du har utformat din text läsbarheten negativt, vilket leder till att användare lämnar artikeln.

Precis som med tidigare användningsområden är detta något du kan diagnostisera med musvärmekartor. Om du till exempel tittar på värmekartan och ser att människor håller muspekaren över varje textrad kan textsektionen vara för bred för att de ska kunna följa varje rad med blicken (så att de i stället använder muspekaren för det ändamålet).

Värmekartprogramvara att överväga

När vi nu har gått igenom de praktiska användningsområdena för musvärmekartor vill jag också prata lite om de olika värmekartanalysprodukter som erbjuder detta verktyg och visa skillnaderna i hur de använder det.

Hotjar

Hotjar har egentligen ingen musvärmekarta. I stället har de delat upp den information som du kan hitta i en typisk musvärmekarta i olika typer av kartor. Det handlar bland annat om kartor över musklick, rullningskartor, värmekartor över musrörelser och värmekartor över frustrerade klick. Så här ser deras rörelsekarta ut.

Även om det vid första anblicken verkar besvärligt att ha separata kartor är de mycket bättre på att ge dig mer detaljerade data för varje typ av interaktion (t.ex. scrollning).

Dessutom kommer det med ytterligare funktioner, till exempel realtidsantal över webbplatsbesökare, sessionsuppspelningar, visuell representation av engagemangszoner i sidlayouten med mera.

Crazy Egg

Med Crazy Egg får du en värmekarta som innehåller datauppsättningar från både användarklick och muspekarrörelser. Med sina egenutvecklade algoritmer kan de kombinera dessa två olika typer av interaktioner till en enda karta som visar de allmänna intresseområdena för dina användare.

Jämfört med Hotjar får du något mindre detaljrikedom. Den här typen av kombinerad värmekarta är dock mycket användbar när målet är att få en överblick över hur människor interagerar med din UX, i stället för att identifiera de exakta platserna för klick, scrollningsdjup och så vidare.

Precis som med Hotjar får du även sessionsinspelningar och andra analysfunktioner med Crazy Egg.

Mouseflow

Precis som Hotjar ger Mouseflow dig 6 olika typer av värmekartor för musspårning i stället för en enda kombinerad karta. Du får de vanliga typerna, inklusive värmekartor för klick, hovring och scrollning.

Mouseflow har dock dessutom en särskild typ av värmekarta som du sällan hittar på sådana plattformar – en geografisk värmekarta.

I stället för att visualisera användarinteraktioner i din UX visar den här värmekartan en världskarta och markerar de delar av världen där du får flest användare (och interaktioner).

Ett måste som tillägg till användarintervjuer och användbarhetstester

Jag hävdar att användarintervjuer är den mest värdefulla enskilda aktivitet som produktchefer ägnar sig åt. Men precis som användbarhetstester är de ganska tidskrävande.

Överväg därför att använda musvärmekartor som ett fantastiskt (och billigt) alternativ för att få svar på några av de enklare frågor du har om dina kunder, och använd i stället din värdefulla intervjutid till de svårare frågorna.

Letar du efter fler sätt att förbättra dina produkter? Fördjupa dina kunskaper och färdigheter inom detta fascinerande yrke genom att prenumerera på vårt nyhetsbrev. Du håller dig uppdaterad om de senaste ämnena inom produktledning med vårt förstklassiga utbildningsinnehåll och våra programvarulistor.