Sannsynligvis er den aller viktigste egenskapen hos en god produktleder evnen til å sette seg inn i brukernes situasjon. For å utvikle denne evnen bruker produktledere timevis på brukerintervjuer og på å analysere dataene bak brukeratferd.
Men det finnes en annen måte å skjerpe brukerintuisjonen på – ved å analysere hvordan brukerne samhandler med produktet ditt gjennom varmekart.
Varmekart er bare ett av mange verktøy for brukerundersøkelser som bidrar til å avdekke friksjon, intensjon og muligheter gjennom hele brukerreisen. De hører også inn under paraplybegrepet produktanalyse, og hjelper deg med å gå utover forfengelige nøkkeltall og se hva brukerne faktisk gjør.
Hvis du har kommet hit, er du sannsynligvis allerede nysgjerrig på fordelene ved varmekart – eller på jakt etter eksempler fra virkeligheten for å rettferdiggjøre investeringen.
Uansett har du kommet til rett sted. La oss se nærmere på de ulike typene varmekart og hvordan du kan bruke dem til å nå produktmålene dine.
#1: Klikk-kart og trykk-kart
Vi begynner med den mest populære av dem alle – kartet over klikk (for grensesnitt på datamaskiner) eller trykk (for mobile grensesnitt).
Klikk-kart er en visuell fremstilling av hvordan brukerne klikker på ting i grensesnittet ditt. Det er ganske enkelt et skjermbilde av brukergrensesnittet ditt der deler av det er fremhevet med ulike farger.
Hvis varmekartverktøyet ditt fremhever et bestemt element i grensesnittet, betyr det at en bruker (eller mange av dem) har klikket på det. Fargen viser på sin side hvor mange klikk det aktuelle elementet har fått.
Varmekartverktøy bruker vanligvis farger fra temperaturskalaen.
Du vil se varmere farger fra denne gradienten i områder som får mange klikk, og fremhevinger med kaldere farger i områder som får lite oppmerksomhet.
Slik ser datavisualiseringen av et trykk-kart ut for en mobilapp som lar deg administrere økonomien din.
Vi kan se at områdene som angir beløpet som er brukt på hver transaksjon, er fremhevet med rødt. Det betyr at mange klikker på dem (sannsynligvis for å utvide transaksjonen og se detaljene).
Kontosaldoen øverst er derimot fremhevet med grønt – noe som indikerer at få ender opp med å klikke på den.
Slik bruker du et klikk-kart
Klikk-kart inneholder svært mange handlingsrettede innsikter. Du kan lære mye om brukernes atferd ved å se på områdene de klikker på.
Hvis du for eksempel driver en app for et hundehjem med en donasjonsside som lar brukerne støtte hundehjemmet økonomisk, kan du bruke et klikk-kart for å se hvilket donasjonsalternativ som fungerer best.
Ved å undersøke trykk-kartet ovenfor kan vi si at alternativene $10 og «Annet» er de klart mest populære valgene når det gjelder valg av donasjonsbeløp.
En viktig innsikt vi får her, er at det mest sannsynlig finnes et donasjonsbeløp som ikke står på listen (for eksempel $1), og at folk klikker på «Annet» for å skrive inn dette beløpet.
Det er derfor sannsynligvis en god idé å se hva folk skriver inn under «Annet», finne de mest populære beløpene og legge dem til på listen vår.
#2: Rullekart
Som navnet antyder, lar denne typen varmekart deg analysere brukernes rulleatferd.
Rullekart bruker også fargekoder basert på temperaturskalaen. I stedet for å fremheve punkter i grensesnittet der folk har klikket, fremhever de imidlertid hele deler av siden basert på hvor mange som har rullet ned til det aktuelle punktet og sett denne delen.
Akkurat som med andre varmekart får du fremhevinger med varme farger hvis mange ruller og ser denne delen, og kalde farger når få gjør det.
Have an account? Log In
Slik bruker du et rullekart
Rullekart er utmerkede for å optimalisere plasseringen av bestemte elementer eller seksjoner på siden din og feilsøke problemer med bruken av eller engasjementet rundt disse seksjonene.
La oss gå gjennom et typisk feilsøkingstilfelle ved å undersøke rullekartet for prissiden til en SaaS-tjeneste kalt Nelio.
Se for deg at du har problemer med konkurransekraften. Av en eller annen grunn foretrekker folk å registrere seg hos konkurrentene dine. Når du spør dem hvorfor, sier de at det andre verktøyet hadde en funksjon for sporing av flere mål, mens ditt ikke hadde det.
Problemet er altså at du faktisk har denne funksjonen, så nå må du forstå hvorfor folk ikke finner den.
Når du ser på rullekartet for prissiden din, ser du at det store flertallet av brukerne dine ikke ruller nedover siden i det hele tatt. Deretter legger du merke til at beskrivelsen av funksjonen for sporing av flere mål ligger under bretten og i den blå sonen. Det betyr at bare noen få av brukerne dine ruller nedover og leser om den, noe som kan være tilfelle for de fleste verktøy for sporing av brukeratferd.
Problemet er identifisert! For å løse dette kan du vurdere å legge til funksjonene i delen «Alle abonnementer inkluderer» som ekstra elementer i listene over prisplanene dine – og sørge for at de vises over bretten, slik at folk ser dem uten å måtte rulle nedover.
#3: Varmekart for musepekerbevegelser
Denne typen varmekart, også kjent som et bevegelseskart, sporer musepekerens posisjon og lar deg visualisere brukernes «bevegelsesatferd» på tvers av et grensesnitt.
I de fleste tilfeller antar vi, når vi bruker varmekart for musepekerbevegelser, at brukerne mest sannsynlig ser på elementet musepekeren hviler over. Ved å spore musebevegelser kobler vi derfor dette sammen med sporing av hva folk ser på når de bruker grensesnittet vårt.
Visuelt består det av fremhevede punkter (igjen ved hjelp av et temperaturbasert fargeskjema) for de delene av brukergrensesnittet der musepekeren har vært lengst. I tillegg vil noen varmekartverktøy også vise et «spor» av hvor brukerne vanligvis starter, og hvordan de beveger seg rundt i grensesnittet.
Slik ser disse sporene ut.
Dette er varmekartet for musesporing av sannsynligvis et av de beste UX-optimaliserte grensesnittene i verden – Apples nettsted (de huser tross alt de første UX-designerne i historien). Disse sporene viser at folk begynner å utforske landingssiden for MacOS Snow Leopard ved først å undersøke selve den fascinerende katten, før de leser tittelen og går videre til de andre elementene på landingssiden.
Slik bruker du et bevegelseskart
En av de interessante måtene du kan bruke et bevegelseskart på, er å identifisere distraksjoner for brukerne.
Hvis du for eksempel har ansvar for å optimalisere Amazons side med søkeresultater (målet ditt er at brukerne skal klikke på et produkt Amazon har funnet for dem), kan du se på varmekartet for musepekerbevegelser og oppdage at flertallet av brukerne først går til et av bannerne dine (for eksempel en kunngjøring av et eller annet slag), før de fortsetter med å undersøke søkeresultatene.
Dette er en stor distraksjon for brukerne dine og kan redusere sannsynligheten for at de klikker på søkeresultatene. Derfor kan du fjerne banneret eller gjøre det mindre visuelt fremtredende i grensesnittet ditt.
#4: Oppmerksomhetsvarmekart
Så langt har vi snakket om tre analyseverktøy som lar deg analysere brukerne dine visuelt – via klikk, musebevegelser og rulling på siden.
Selv om hvert av de ovennevnte verktøyene kan gi oss verdifull informasjon, kan det være misvisende å basere seg på bare ett av dem. Å se på brukeratferd isolert, uten riktig kontekst, gir oss kanskje ikke et bredt nok bilde av hva som faktisk foregår.
Produktteam bruker derfor vanligvis alle disse typene samtidig og kombinerer innsikten fra alle tre før de analyserer den og trekker konklusjoner. Denne løsningen er likevel heller ikke perfekt, ettersom du sannsynligvis må bruke tre ganger så lang tid på å gjennomføre hele analysen.
Heldigvis kan moderne verktøy for visualisering av varmekart, med fremveksten av KI-modeller og avanserte algoritmer, kombinere informasjonen fra brukernes klikk, musepekerbevegelser og rulling i ett enkelt varmekart.
Denne fjerde typen kalles et oppmerksomhetsvarmekart, ettersom det i praksis forteller deg hvilke deler av brukergrensesnittet som får mest oppmerksomhet fra brukerne dine. Visuelt ligner det på et klikkart, der bestemte elementer i brukergrensesnittet fremheves med ulike farger i temperaturfargepaletten, basert på hvor mye oppmerksomhet de får fra brukerne.
#5: Geografiske varmekart
Varmekart har eksistert rundt oss lenge før folk begynte å bruke denne teknikken på brukergrensesnitt. En av de mest fremtredende tradisjonelle typene varmekart har vært geografiske kart.
I dette tilfellet fremhever du bestemte deler av et kart basert på typen datapunkt du har valgt. Hvis du for eksempel vil analysere den geografiske fordelingen av turistattraksjoner i Frankrike, kan du bruke dette geografiske varmekartet.
Kartet ovenfor viser antallet hotellsenger (hovedsakelig rettet mot turister) per kvadratkilometer. Som vi kan se, er Korsika, de franske Alpene og Côte d’Azur klare vinnere i denne kategorien.
Slik bruker du et geografisk varmekart
Det er interessant å se på Frankrikes turistdatasett, men kan disse varmekartene hjelpe meg med å analysere det digitale produktet mitt? La meg vise deg et eksempel.
La oss holde oss til temaet turisme (og Frankrike) og tenke oss at du driver en nettbasert tjeneste for korttidsutleie (noe som ligner på Airbnb). Du har en idé om å lage og distribuere reklamemateriell for lokale festivaler i franske byer for å få flere til å bestille hotell der gjennom tjenesten din.
Det første spørsmålet du sannsynligvis vil stille deg, er – hvilken by eller festival bør du begynne med?
For å finne svaret kan du lage et geografisk varmekart som viser fordelingen av utleieboliger og leiligheter som bruker tjenesten din.
Ved å se på kartet vil du se at tjenesten din er ganske populær i Sør-Frankrike. Derfor bør du kanskje vurdere å begynne med å promotere festivalene i Provence og Côte d’Azur.
#6: Kart over frustrasjonsklikk
Dette er en underkategori av klikkart som filtrerer bort alt annet og bare viser tilfeller der brukerne har klikket på noe i frustrasjon. Verktøy for varmekart identifiserer vanligvis noe som et frustrasjonsklikk (eller et dødt klikk) hvis brukeren fortsetter å klikke på det samme elementet flere ganger etter hverandre.
Slik bruker du et kart over frustrasjonsklikk
Kart over frustrasjonsklikk er gode verktøy for å identifisere problematiske brukeropplevelser. Det kan være noe som ser klikkbart ut, men som ikke er det, noe som ikke er intuitivt, eller ganske enkelt en knapp som ikke fungerer.
Hvis vi for eksempel skulle gjennomføre en dataanalyse av frustrasjonsklikk på en av sidene til Iterate, burde vi definitivt finne frustrasjonsklikk på minst to steder – her er grunnen:
La du merke til de to tekstelementene som er fremhevet i blått? Gjett hva – dette er ikke lenker. Det er bare vanlig tekst som er farget blå. Mange besøkende på Iterate (inkludert meg) har forsøkt å klikke på disse tekstelementene i forventning om at de skulle videresende dem til en annen side.
Selvfølgelig vil ingenting skje når man klikker på dem, og dette kan føre til at brukeren blir frustrert og begynner å «klikke i frustrasjon».
Lærdommen fra å undersøke kartet over frustrasjonsklikk på denne siden er at du for eksempel bør sørge for at teksten din ikke ser ut som hyperlenker. Du kan kanskje gjennomføre en A/B-test med ulike farger og se om antakelsen din om at blå tekst fører til frustrasjonsklikk, er riktig eller feil.
#7: Varmekart for øyesporing
Så langt har vi brukt pekerkart for å forstå hvor brukerne våre har sett når de har navigert på nettsiden vår. Vi antar at brukernes øyne stort sett ser på pekeren. Derfor vil pekerens bevegelser på tvers av grensesnittet kunne fortelle deg hva brukernes øyne fokuserer på.
Dette er en vanlig måte å analysere oppmerksomhet på. Dataene fra varmekartet er imidlertid ikke perfekte, ettersom brukerne ikke alltid ser på pekeren.
Hvis du ønsker å få presise posisjons- og tallmessige data om hva brukerne dine ser på, bør du i stedet vurdere å bruke et varmekart for øyesporing.
I motsetning til de andre typene vil varmekart for øyesporing kreve at brukerne dine bruker spesialutstyr som registrerer øyebevegelsene deres og identifiserer plasseringen til elementene de ser på.
Dette betyr at du må invitere brukerne dine til spesielle testøkter, få dem til å bruke disse sporerne og begynne å bruke produktet ditt. Selv om det er langt mer tidkrevende og kostbart, er kvaliteten på dataene du får fra dette, langt bedre enn det du kan få fra andre typer varmekart for nettsteder.
Slik bruker du et øyesporingsvarmekart
Med tanke på kostnadene ved å organisere øyesporingstestøkter vil du sannsynligvis bare ende opp med å bruke øyesporing på områder innen UX-optimalisering med stor innvirkning.
Øyesporingsstudier er svært vanlige for produktene til store teknologiselskaper, der en forbedring på 1 % i brukervennligheten til produktene deres kan føre til flere titalls millioner i inntekter og ROI.
Forestill deg hvor mye ekstra ARR Amazon vil få hvis de gjennomfører en øyesporingsstudie og plasserer bannerne for fremhevede produkter på en slik måte at konverteringsraten øker med 1 %.
#8: [Bonus] Konfettikart
Konfettivarmekart er en underkategori av vanlige klikkart som viser individuelle klikk i stedet for å fremheve det generelle området der brukerne har klikket.
Det fine med å analysere individuelle klikk er at du kan filtrere dem basert på ulike komplekse datapunkter.
Her har vi for eksempel gruppert klikkene på søke-CTA-en etter ukedagen da klikkhendelsen fant sted.
Basert på dataene kan vi se at tirsdager får flest klikk, mens personer som besøker siden på mandager, er de mest distraherte (mange klikk over hele grensesnittet).
Slik bruker du et konfettivarmekart
Konfettivarmekart er spesielt nyttige når du trenger å analysere brukeratferd på et detaljert nivå. I motsetning til tradisjonelle varmekart, som viser aggregerte data, lar konfettikart deg filtrere individuelle klikk basert på parametere som enhetstype, henvisningskilde eller til og med tidspunkt på dagen.
Denne typen varmekart er utmerket for å oppdage mønstre som ellers ville gått ubemerket hen. Hvis betalingsknappen din for eksempel får flere klikk på fredager, men langt færre på mandager, kan brukerne dine være impulskjøpere som styres av lønningsdagen – og mandagsgjengen din er kanskje fortsatt i ferd med å komme seg etter helgen og stirrer tomt på prissiden din i stedet for å konvertere.
Konfettikart kan også fremheve uventede distraksjoner. Hvis brukerne klikker over hele siden i stedet for der du vil at de skal klikke, kan de være forvirret – eller bare desperat på jakt etter et tegn på liv. Hvis navigasjonsmenyen får flere klikk enn CTA-en din, kan det bety at brukerne har gått seg vill og håper å komme seg bort i stedet for å engasjere seg. Du kan bruke innsikt fra varmekart til å forbedre brukerreisekartet ditt, spesielt når du skal identifisere friksjonspunkter. Filtrering etter brukersegment kan hjelpe deg med å se hvilke grupper som sliter mest, og hvor du må gjøre opplevelsen smidigere.
Varmekart styrker brukerforståelsen din
Hver type varmekart vi har oppdaget sammen her, kan gi deg et innblikk i hvordan brukerne dine utforsker og bruker produktene dine. Hvis du jobber slankt, tilbyr varmekart en rask og enkel måte å gjennomføre UX-undersøkelser på før du investerer i mer omfattende brukertesting. Ved hjelp av dem vil du kunne se og føle vanskelighetene brukerne dine opplever, og gå videre med å løse dem.
Kombinert med verktøy for produktanalyse kan varmekart gi et tydeligere bilde av hvordan brukerne samhandler med produktet ditt, og hvor de faller fra. Hvis du for eksempel kombinerer varmekart med verktøy for øktavspilling, får du både «hva» og «hvorfor» bak brukeratferden.
Varmekart er nyttige, men de er bare ett av mange verktøy du kan bruke til å utvikle forståelse for brukerne dine. Hvis du vil lære mer om de andre også, kan du melde deg på nyhetsbrevet vårt.
