Värmekartor och sessionsinspelningar har blivit ett av de hetaste diskussionsämnena inom designcommunityt. Medan vissa yrkesverksamma ifrågasätter integritetsaspekten anser andra att sättet som värmekartor fungerar på är helt förenligt med att hålla användarnas data privat och säker.
Det finns dock en sak som alla är överens om – värdet som du (UX-designern) får genom att använda ett värmekartsverktyg.
I dag vill jag att vi utforskar det här ämnet tillsammans och förstår hur du kan använda värmekartor för att förbättra sättet du utformar dina användarupplevelser på.
Vad handlar värmekartor om?
Värmekartor är verktyg för datainsamling och visualisering som du kan använda för att förstå hur din målgrupp interagerar med din produkt eller webbplats.
Värmekartor är tvådimensionella diagram som framhäver vissa delar av ett område med vissa färger för att förmedla användbar information. Helsingfors stad har till exempel nyligen lanserat en realtidskarta som visar vilka delar av staden som är mest trånga.
För att visualisera antalet människor i vissa stadsdelar skapade de en värmekarta över staden.
Ju fler människor det finns i en viss del av staden, desto ”varmare” framhävs den på kartan. Om ingenting är markerat är stadsdelen i fråga inte trång.
Som visualiseringsverktyg är värmekartor ganska mångsidiga. Så förutom att visualisera ”intensiva områden” på en fysisk karta (som i fallet med Helsingfors ovan eller väderkartorna vi ser på tv) kan du också placera dem ovanpå ditt användargränssnitt.
I det här fallet kan du framhäva de delar av ditt gränssnitt som får flest användarinteraktioner. Du kan sedan kombinera det med sessionsinspelningar för en djupgående användarresa och UX-undersökning som hjälper dig att:
- Få värdefulla insikter i hur användare interagerar med din webbplats eller mobilapp.
- Förstå vad du kan göra för att bättre fånga användarnas uppmärksamhet.
- Identifiera nya möjligheter att optimera din UX och förbättra dina nyckeltal (öka konverteringsgraden, CTR för dina uppmaningsknappar och så vidare).
Värmekartor är alltså ett utmärkt verktyg för både UX-designers och produktchefer som vill studera hur användare interagerar med och förbättra sina produkter.
Populära värmekartsverktyg
Låt oss nu se hur du kan skapa en värmekarta för din produkt. Webben är full av analysverktyg som kan spåra användarinteraktioner i din UI-design och framhäva de sidelement som får mest uppmärksamhet.
De mest framstående inkluderar Hotjar, Mouseflow, Fullstory, Crazy Egg och andra.
Men jag vill egentligen inte gå in för djupt på det här ämnet, eftersom vi har en särskild kurerad lista över värmekartsverktyg som du kan ta en titt på i stället.
Have an account? Log In
4 viktiga typer av värmekartor för produktdesigners
Det vi kallar ”värmekarta” är inte en enda typ av visuell information som du använder för att analysera din UX. I stället är ”värmekarta” ett samlingsbegrepp för olika visuella verktyg som följer samma allmänna princip – att framhäva vissa områden i din UX med olika färger.
Jag vill egentligen inte att vi går igenom alla olika typer av värmekartor, eftersom många av dem är helt värdelösa för produkt- och UX-designers. Låt oss i stället titta på fyra typer som mitt designteam har funnit vara mest användbara.
1. Klickkartor
Klickkartor är förmodligen det första du tänker på när värmekartor kommer på tal. Det är den mest populära typen av värmekarta som finns, och du hittar den i nästan alla värmekarts- och analysverktyg (med undantag för Google Analytics och händelsebaserade verktyg).
En klickkarta (även kallad klickvärmekarta) visar vad dina användare har klickat på i ditt gränssnitt (till exempel webbplatsens startsida). De visualiserar din målgrupps klickaktivitet genom att framhäva de relevanta områdena och använda färgkodning för att visa vilka delar av din UX som är ”heta” eller ”kalla”.
Så här ser Hotjars klickkarta över karriärsidan ut.
Genom att granska klickkartan här kan vi se följande:
- Ett rött ”hett” område nära den huvudsakliga CTA:n – ”Visa lediga jobb”.
- En liten mängd ”varm” (gul) aktivitet runt högerpilen som ändrar den utvalda bilden på sidan.
- Även på vänsterpilen syns en liten mängd aktivitet (blå).
Resten av skärmen har inga markeringar, vilket visar att den är ”kall” och att ingen har klickat på de områdena.
Den ”heta” markeringen på den huvudsakliga CTA:n visar däremot att många användare (förmodligen de flesta, att döma av ”hettan”) klickar på den. Sedan har vi de varma områdena runt pilarna, som visar att en liten andel användare också navigerar genom utvalda bilder.
Hur använder man värmekartor av den här typen? A/B-testning av era CTA:er!
Det finns många olika användningsområden för klickkartor. Du kan till exempel använda dem för att förstå hur effektiv placeringen av din CTA, texten och annat är. Mina produktdesigners och jag tycker dock om att använda värmekartor av en annan anledning – för att A/B-testa våra CTA:er och andra designelement.
Låt mig illustrera detta användningsområde med ett exempel. Föreställ dig att du ansvarar för webbapplikationen ChatGPT och har problem med att användarna inte skapar nya chattar utan pratar med AI:n i en och samma chatt.
När du tittar på värmekartan ser du att knappen ”Ny chatt” högst upp i sidofältet är kall (ingenting är markerat).
Du antar snabbt att det beror på CTA:ns färg, som är densamma som sidofältets bakgrund. Därför genomför du ett A/B-experiment där du ändrar bakgrundsfärgen till grön i variant A och låter färgen vara ”som den är” i variant B.
När ett visst antal användare har interagerat med båda varianterna kan du öppna klickvärmekartan för var och en och jämföra dem sida vid sida för att se vilken som har en ”hetare” knapp för Ny chatt.
Därefter väljer du den variant där CTA:n fick flest klick baserat på din analys av värmekartorna.
2. Skrollkartor
Att kartlägga användarklick är bra, men det berättar inte alltid hela historien.
Om din klickkarta till exempel visar att du har en knapp som presterar dåligt någonstans längst ned på skärmen betyder det inte nödvändigtvis att det är problem med CTA:ns text, färg eller andra faktorer. Din CTA kanske är riktigt bra, men människor skrollar helt enkelt inte på sidan och ser den.
Det är här skrollkartor (även kallade skrollvärmekartor) kommer in i bilden. Till skillnad från den föregående typen, som markerar användarklick på ditt användargränssnitt, visar skrollkartor hur länge användarna befinner sig i varje del av gränssnittet och hur de skrollar.
Beroende på hur lång tid som tillbringas i varje del markeras sidan i rött (mycket tid), orange/gult (måttligt med tid) och grönt/blått (lite tid).
Låt mig demonstrera detta med ännu ett Hotjar-exempel.
Bilden ovan visar en av de äldre versionerna av Hotjars ”om oss”-sida. Genom att titta på skrollvärmekartans data för den här sidan kan vi dra slutsatsen att:
- Alla dina användare har sett den övre delen av sidan (markerad i rött). Självklart, eller hur?
- Sedan ser vi att omkring 75 % av dem har skrollat en bit ned för att se logotyperna för företag som använder Hotjar (logotypsektionen är gul).
- Slutligen är sidans nederdel grön, vilket betyder att endast en del av dina användare har skrollat så långt. Linjen precis ovanför Glassdoors logotyp visar att endast 57 % av användarna har skrollat till den punkten.
Detta var ett klassiskt fall där den övre delen är röd, mitten är gul och nederdelen är grön. I verkligheten kan du dock se skrollkartor där en specifik sektion längre ned på skärmen presterar bra (till exempel sektionen med dina prisplaner), medan användarna ignorerar innehållet ovanför och nedanför.
Så använder produktdesigners skrollkartor: innehållsoptimering
Precis som klickkartor är skrollkartor mångsidiga verktyg som du kan använda av flera olika skäl. Det vanligaste användningsområdet är dock att optimera placeringen av ditt innehåll.
Som jag redan nämnt presterar till exempel prissektionerna riktigt bra på din webbsida. Det innebär att människor snabbt skrollar förbi ditt innehåll, sedan lägger märke till prissektionen, stannar, läser den och fortsätter att skrolla.
Detta beteendemönster gör att vi strategiskt kan placera prissektionen i mitten eller längst ned på sidan. Vi gör det för att säkerställa att människor skrollar genom hela sidan (och uppmärksammar några av de viktiga budskap vi har till dem) innan de hittar informationen om våra prisplaner.
Vår strategi här liknar den som stormarknader använder när de placerar mejeri- och bageriprodukter. Båda är vanligtvis sådant som du köper ganska ofta. Därför placerar de dem på motsatta sidan av byggnaden – vilket gör att du måste gå genom hela stormarknaden för att hämta dem.
Logiken är att du sannolikt kommer att lägga märke till andra produkter i gångarna och köpa dem på vägen till mejerisektionen.
3. Rörelsekartor
Rullningskartor ger dig en översikt på hög nivå över vilka delar dina användare tittar på. Klickkartor är däremot lite mer detaljerade när det gäller att visa exakt vilket element användaren har klickat på.
Det finns dock ett behov av något på ”mellannivå” som kan visa hur människor navigerar genom informationen och gränssnittselementen i en specifik del av din sida.
Det är här du kan dra nytta av rörelsekartor. Som namnet antyder håller den här typen av värmekarta reda på muspekarens rörelser över ditt gränssnitt.
Liksom på andra kartor markeras gränssnittets områden med en rad olika färger (från blått till rött), där blått betyder liten musrörelse över området (och rött betyder mycket).
Låt oss se hur det ser ut i en bloggartikel.
Kartan här visar oss att en liten del av användarna håller muspekaren över artikelns titel och första rubrik. Majoriteten håller däremot muspekaren nära sökområdet i det övre högra hörnet.
Så använder produktdesigners rörelsekartor: spåra uppmärksamheten på vissa element
Det är ganska vanligt att vissa delar av vårt gränssnitt inte är klickbara, men ändå mycket viktiga, och vi vill försäkra oss om att våra användare har sett dem.
Ett exempel på detta är vår lista över funktioner på prissidan. Vi kanske vill förstå vilka funktioner användarna ägnade mest uppmärksamhet åt när de granskade vår pristabell.
För detta kan vi dra nytta av människans vana att hålla muspekaren över sådant som vi läser eller skannar i stunden och skapa en musrörelsekarta som visar vilka funktioner användarna tittar mest på på vår prissida.
4. Kartor över frustrerade klick
Det finns vanliga klick och så finns det frustrerade klick.
Detta händer när brister i din UX har gjort användarna frustrerade, så att de klickar aggressivt och upprepade gånger på ett av dina gränssnittselement eftersom:
- De tror att det är klickbart, men det är det inte.
- Det är klickbart, men din produkt gör ingenting efter att användaren klickar på det.
Den främsta orsaken bakom det första fallet är att utforma gränssnittselement som inte är knappar eller länkar men ser ut som sådana.
När det gäller det andra fallet kan du ha råkat ut för:
- Ett fel eller en krasch som har lett till att din produkt inte utför den åtgärd som den aktuella knappen skulle utföra.
- Allt fungerar som det ska, men det saknas återkoppling från UX:en. Så även om användaren framgångsrikt har utfört det de ville med hjälp av din knapp, lät du dem inte veta det.
- Din produkt arbetar med att utföra den åtgärd som användaren har begärt, men den är långsam. Användarna är antingen frustrerade över det, eller så har du inte låtit användaren veta att arbetet pågår.
Även om vanliga klickkartor också registrerar frustrerade klick (de är trots allt bara klick), kan du inte skilja de frustrerade klicken från dina vanliga klick. Du kommer att dra felaktiga slutsatser utifrån dina data.
Om din knapp till exempel inte fungerar och människor klickar frustrerat på den kommer din vanliga klickkarta att visa att människor aktivt använder funktionen, medan verkligheten är den motsatta.
Visuellt är kartor över frustrerade klick likadana som vanliga klickkartor. Den enda skillnaden är att många röda områden på en vanlig klickkarta är bra, medan det är dåliga nyheter på en karta över frustrerade klick.
More Articles
Så använder produktdesigners rörelsekartor: identifiera dålig UX
Det finns ingen produkt där ute med perfekt UX. Du kommer alltid att ha hemska element eller upplevelser (även om du tror att du inte har det).
Kartor över frustrerade klick är utmärkta för att hjälpa dig att identifiera flera typer av sådana dåliga upplevelser, bland annat bristande återkoppling i UX, dålig elementdesign och annat.
Värmekartor är UX-designers bästa vänner
Baserat på min och mitt produktdesignteams erfarenhet är värmekartor för webbplatser bland de mest användbara verktygen för att genomföra användbarhetstester och studera användarbeteende.
Med deras hjälp kan du få kvantitativa insikter (inklusive hur de använder det på stationära datorer och mobila enheter) om effektiviteten i din webbdesign.
Du kan sedan analysera dessa insikter och identifiera luckor i din design och funktionalitet som du behöver åtgärda för att säkerställa att din produkt, webbplats, e-handelsplattform eller landningssida är användarvänlig.
Glöm inte att prenumerera på vårt nyhetsbrev för fler resurser och guider om produktledning, samt de senaste poddarna, intervjuerna och andra insikter från branschledare och experter.
