Sandsynligvis er den vigtigste egenskab ved en god produktchef evnen til at sætte sig i brugernes sted. For at opbygge denne evne bruger produktchefer timevis på brugerinterviews og på at dykke ned i dataene bag brugernes adfærd.
Men der er en anden måde at skærpe sin brugerintuition på – ved at analysere, hvordan brugerne interagerer med dit produkt gennem varmekort.
Varmekort er blot ét af mange værktøjer til brugerundersøgelser, som hjælper med at afdække friktion, intentioner og muligheder på tværs af brugerrejsen. De hører også under paraplyen produktanalyse og hjælper dig med at bevæge dig ud over forfængelighedsmetrikker og se, hvad brugerne faktisk gør.
Hvis du er landet her, er du sandsynligvis allerede nysgerrig på fordelene ved varmekort – eller også leder du efter eksempler fra den virkelige verden, der kan retfærdiggøre investeringen.
Uanset hvad er du kommet til det rette sted. Lad os gennemgå de forskellige typer varmekort, og hvordan du kan bruge dem til at nå dine produktmål.
#1: Klikkort og trykkort
Vi begynder med det mest populære af dem alle – kortet over klik (for brugerflader på computere) eller tryk (for brugerflader på mobilen).
Klikkort er en visuel gengivelse af den måde, dine brugere klikker på ting i din brugerflade. Det er ganske enkelt et skærmbillede af din brugerflade, hvor dele af den er fremhævet med forskellige farver.
Hvis dit varmekortværktøj fremhæver et bestemt element i din brugerflade, betyder det, at en bruger (eller mange af dem) har klikket på det. Farven viser derimod, hvor mange klik det specifikke element har modtaget.
Varmekortværktøjer bruger normalt farver fra temperaturskalaen.
Du vil se varmere farver fra denne gradient i områder, der får mange klik, og køligere farvefremhævninger i områder, der får mindst opmærksomhed.
Her kan du se, hvordan datavisualiseringen af et trykkort ser ud for en mobilapp, der lader dig administrere din økonomi.
Vi kan se, at områderne, der angiver det beløb, der er brugt på hver transaktion, er fremhævet med rødt. Det betyder, at mange mennesker klikker på dem (sandsynligvis for at udvide transaktionen og se detaljerne).
Saldoen øverst er derimod fremhævet med grønt – hvilket indikerer, at få mennesker ender med at klikke på den.
Sådan bruger du et klik-kort
Klikkort indeholder mange handlingsanvisende indsigter. Du kan lære så meget om dine brugeres adfærd ved at se på de områder, de klikker på.
Hvis du for eksempel administrerer en app til et hundeinternat, der har en donationsside, hvor brugerne kan støtte internatet økonomisk, kan du bruge et klik-kort til at se, hvilken donationsmulighed der klarer sig bedst.
Ved at undersøge trykkortet ovenfor kan vi sige, at valgmulighederne $10 og “Andet” langt fra er de mest populære, når det kommer til valg af donationsbeløb.
En vigtig indsigt, vi får herfra, er, at der højst sandsynligt findes et donationsbeløb, som ikke er på listen (f.eks. $1), og at folk klikker på “Andet” for at indtaste dette beløb.
Så det er sandsynligvis en god idé at se, hvad folk indtaster i sektionen “Andet”, finde de mest populære beløb og tilføje dem til vores liste.
#2: Rullekort
Som navnet antyder, lader denne type varmekort dig analysere dine brugeres rulleadfærd.
Rullekort bruger også farvekoder fra temperaturskalaen. I stedet for at fremhæve punkter i din brugerflade, hvor folk har klikket, fremhæver de hele sektioner på din side baseret på antallet af personer, der har rullet ned til det pågældende punkt og set sektionen.
Ligesom med de andre varmekort får du varme farvefremhævninger, hvis mange mennesker ruller og ser den pågældende sektion, og kolde farver, når få mennesker gør det.
Have an account? Log In
Sådan bruger du et rullekort
Scrollkort er gode til at optimere placeringen af bestemte elementer eller sektioner på din side og til at fejlfinde problemer med brugen af eller engagementet i disse sektioner.
Lad os gennemgå et typisk fejlfindingsscenarie ved at undersøge scrollkortet for prissiden hos en SaaS-tjeneste kaldet Nelio.
Forestil dig, at du har problemer med konkurrenceevnen. Af en eller anden grund foretrækker folk at tilmelde sig hos dine konkurrenter. Når du spørger dem hvorfor, siger de, at det andet værktøj havde en funktion til sporing af flere mål, og at dit ikke havde det.
Problemet er altså, at du faktisk har denne funktion, så nu skal du forstå, hvorfor folk ikke opdager den.
Når du ser på scrollkortet for din prisside, kan du se, at langt størstedelen af dine brugere slet ikke scroller på siden. Derefter bemærker du, at beskrivelsen af din funktion til sporing af flere mål ligger under skillelinjen og i den blå zone. Det betyder, at kun få af dine brugere scroller ned og læser om den, hvilket kan være tilfældet for de fleste værktøjer til sporing af brugeradfærd.
Problem identificeret! For at løse dette kan du overveje at tilføje funktionerne i sektionen “Alle abonnementer inkluderer” som ekstra elementer i dine lister over prisplaner – og sørge for, at de vises over skillelinjen, så folk kan se dem uden at scrolle.
#3: Varmekort over musebevægelser
Denne type varmekort kaldes også et bevægelseskort og sporer musens placering, så du kan visualisere dine brugeres “bevægelsesadfærd” på tværs af en brugergrænseflade.
I de fleste tilfælde antager vi ved brug af varmekort over musebevægelser, at brugerne sandsynligvis ser på det element, som deres markør bevæger sig hen over. Ved at spore musebevægelser korrelerer vi dem derfor med sporing af, hvad folk ser på, når de navigerer rundt i vores brugergrænseflade.
Visuelt består det af fremhævede punkter (igen ved hjælp af et temperaturbaseret farveskema) for de dele af din brugergrænseflade, hvor brugerens musemarkør har befundet sig længst. Ud over dette viser nogle værktøjer til varmekort også et “spor” af, hvor dine brugere typisk starter, og hvor de bevæger sig hen på tværs af din brugergrænseflade.
Sådan ser disse spor ud.
Dette er musebevægelsesvarmekortet for sandsynligvis en af verdens bedste UX-optimerede brugergrænseflader – Apples websted (de huser trods alt historiens første UX-designere). Disse spor viser, at folk begynder at udforske landingssiden for MacOS Snow Leopard ved først at undersøge selve den fascinerende kat, før de læser overskriften og går videre med de øvrige elementer på landingssiden.
Sådan bruger du et bevægelseskort
En af de interessante måder, du kan bruge et bevægelseskort på, er til at identificere distraktioner for brugerne.
Hvis du for eksempel har ansvaret for at optimere Amazons søgeresultatside (dit mål er, at brugerne klikker på et produkt, som Amazon har fundet til dem), kan du se på varmekortet over musebevægelser og opdage, at størstedelen af brugerne først går hen for at se på et af dine bannere (f.eks. en form for meddelelse), før de fortsætter med at undersøge søgeresultaterne.
Dette er en stor distraktion for dine brugere og kan mindske sandsynligheden for, at de klikker på søgeresultaterne. Derfor vil du fjerne banneret eller gøre det mindre visuelt fremtrædende i din brugergrænseflade.
#4: Opmærksomhedsvarmekort
Indtil videre har vi talt om tre analyseværktøjer, der kan lade dig analysere dine brugere visuelt – via klik, musebevægelser og siderulning.
Selvom hver af de ovenstående metoder kan give os værdifulde oplysninger, kan det være misvisende kun at basere sig på én af dem. Hvis man ser på brugeradfærd isoleret uden den rette kontekst, får man måske ikke et bredt nok billede af, hvad der virkelig foregår.
Produktteams bruger derfor som regel alle disse typer samtidig og kombinerer den indsigt, der er indsamlet fra alle tre, før de analyserer den og drager konklusioner. Denne løsning er dog heller ikke perfekt, da du sandsynligvis skal bruge 3x så lang tid på at udføre den komplette analyse.
Heldigvis kan moderne værktøjer til visualisering af varmekort med fremkomsten af AI-modeller og avancerede algoritmer kombinere oplysningerne fra brugerklik, musemarkørens bevægelser og rulning i ét enkelt varmekort.
Denne fjerde type kaldes et opmærksomhedsvarmekort, fordi det i bund og grund fortæller dig, hvilke dele af brugergrænsefladen der får mest opmærksomhed fra dine brugere. Visuelt ligner det noget, der minder meget om et klikort, hvor bestemte elementer i din brugergrænseflade fremhæves med forskellige farver fra temperaturfarvepaletten baseret på mængden af brugeropmærksomhed.
#5: Geografiske varmekort
Varmekort har eksisteret omkring os længe før, folk begyndte at anvende denne teknik på brugergrænseflader. En af de mest fremtrædende traditionelle typer varmekort har været geografiske kort.
I dette tilfælde fremhæver du bestemte dele på et kort baseret på den type datapunkt, du har valgt. Hvis du for eksempel vil analysere den geografiske fordeling af turiststeder i Frankrig, kan du bruge dette geografiske varmekort.
På kortet ovenfor vises antallet af hotelsenge (primært målrettet turister) pr. kvadratkilometer. Som vi kan se, er Korsika, de franske Alper og Côte d’Azur de klare vindere i denne kategori.
Sådan bruger du et geografisk varmekort
Det er interessant at se på Frankrigs turismedatasæt, men kan disse varmekort hjælpe mig med at analysere mit digitale produkt? Lad mig vise dig et eksempel.
Lad os holde os til emnet turisme (og Frankrig) og forestille os, at du driver en onlineudlejningstjeneste til korttidsophold (noget, der minder om Airbnb). Du overvejer at fremstille og distribuere reklamemateriale for lokale festivaler i franske byer for at få flere mennesker til at booke hoteller der gennem din tjeneste.
Det første spørgsmål, der ville dukke op i dit hoved, er: Hvilken by/festival skal du starte med?
For at få svar på det kan du oprette et geografisk varmekort, der viser fordelingen af udlejningsboliger og -lejligheder, som bruger din tjeneste.
Ved at se på kortet vil du opdage, at din tjeneste er ganske populær i det sydlige Frankrig. Så måske bør du overveje at begynde med at promovere festivalerne i Provence og Côte d’Azur.
#6: Kort over frustrerede klik
Dette er en undertype af klik-kort, som filtrerer alle tilfælde fra og kun viser de tilfælde, hvor dine brugere har klikket på noget i frustration. Værktøjer til varmekort identificerer normalt noget som et frustreret klik (eller et dødt klik), hvis brugeren bliver ved med at klikke på det samme element flere gange i træk.
Sådan bruger du et kort over frustrerede klik
Kort over frustrerede klik er gode værktøjer til at identificere problematiske brugeroplevelser. Det kan være noget, der ser klikbart ud, men ikke er det, noget der ikke er intuitivt, eller blot en knap, der ikke fungerer.
Hvis vi for eksempel lavede en dataanalyse af frustrerede klik på en af Iterates sider, ville vi helt sikkert finde frustrerede klik mindst to steder – her er hvorfor:
Lagde du mærke til de to tekstelementer, der er fremhævet med blåt? Gæt hvad – de er ikke links. Det er bare almindelig tekst, der er farvet blå. Mange besøgende på Iterate (inklusive mig) har forsøgt at klikke på disse tekstelementer i forventning om at blive sendt videre til en anden side.
Der vil naturligvis ikke ske noget, når man klikker på dem, og det kan få brugeren til at blive frustreret og begynde at "klikke i frustration".
Læringen fra undersøgelsen af kortet over frustrerede klik på denne side er, at du for eksempel skal sikre dig, at din tekst ikke ligner hyperlinks. Du kan eventuelt køre en A/B-test med forskellige farver og se, om din antagelse om, at blå tekst forårsager frustrerede klik, er sand eller falsk.
#7: Varmekort baseret på øjensporing
Indtil videre har vi brugt hover-kort til at forstå, hvor vores brugere har kigget, når de gennemser vores webside. Vi antager, at brugernes øjne det meste af tiden kigger på markøren. Derfor kan markørens bevægelse hen over din grænseflade fortælle dig, hvad dine brugeres øjne fokuserer på.
Dette er en almindelig måde at analysere opmærksomhed på. De data, som varmekortet leverer, er dog ikke perfekte, da brugerne ikke altid kigger på deres markør.
Hvis du vil have præcise positions- og taldata om, hvad dine brugere kigger på, bør du i stedet overveje at bruge et varmekort baseret på øjensporing.
I modsætning til de andre typer kræver varmekort baseret på øjensporing, at dine brugere bærer specialudstyr, som registrerer deres øjenbevægelser og identificerer placeringen af de elementer, de kigger på.
Det betyder, at du bliver nødt til at invitere dine brugere til særlige testsessioner, få dem til at tage disse trackere på og begynde at bruge dit produkt. Selvom det er langt mere tidskrævende og dyrt, er kvaliteten af de data, du får fra det, langt bedre end noget, du kan få fra andre typer varmekort til websites.
Sådan bruger du et varmekort baseret på øjensporing
I betragtning af omkostningerne ved at organisere øjensporingstestsessioner ender du sandsynligvis kun med at bruge øjensporing inden for områder af UX-optimering med stor effekt.
Øjensporingsundersøgelser er meget almindelige for store teknologivirksomheders produkter, hvor en forbedring på 1 % af brugervenligheden i deres produkter kan omsættes til en omsætning og ROI på titusindvis af millioner.
Forestil dig, hvor meget ekstra ARR Amazon vil få, hvis de gennemfører en øjensporingsundersøgelse og placerer deres bannere for fremhævede produkter på en måde, der øger konverteringsraten med 1 %.
#8: [Bonus] Konfettikort
Konfettivarmekort er en undertype af almindelige klikvarmekort, som viser individuelle klik i stedet for at fremhæve det generelle område, hvor brugerne har klikket.
Fordelen ved at analysere individuelle klik ligger i din mulighed for at filtrere dem baseret på forskellige komplekse datapunkter.
Her har vi for eksempel grupperet klikkene på søge-CTA'en efter den ugedag, hvor klikhændelsen fandt sted.
Baseret på dataene kan vi se, at tirsdage får flest klik, mens personer, der besøger siden om mandagen, er de mest distraherede (masser af klik overalt på brugerfladen).
Sådan bruger du et konfettivarmekort
Konfettivarmekort er især nyttige, når du har brug for at analysere brugeradfærd på et detaljeret niveau. I modsætning til traditionelle varmekort, der viser aggregerede data, giver konfettikort dig mulighed for at filtrere individuelle klik baseret på parametre som enhedstype, henvisningskilde eller endda tidspunkt på dagen.
Denne type varmekort er fremragende til at opdage mønstre, som ellers ville gå ubemærket hen. Hvis din betalingsknap for eksempel får flere klik om fredagen, men langt færre om mandagen, kan dine brugere være impulskøbere, der handler på lønningsdagen — og din mandagsgruppe er måske stadig ved at komme sig over weekenden og stirrer tomt på din prisside i stedet for at konvertere.
Konfettikort kan også fremhæve uventede distraktioner. Hvis brugerne klikker overalt på siden i stedet for der, hvor du ønsker det, er de måske forvirrede — eller leder desperat efter et tegn på liv. Hvis din navigationsmenu får flere klik end din CTA, kan det betyde, at brugerne er faret vild og håber på at slippe væk i stedet for at engagere sig. Du kan bruge indsigter fra varmekort til at forbedre dit brugerrejsekort, især når du identificerer disse friktionspunkter. Filtrering efter brugersegment kan hjælpe dig med at se, hvilke grupper der har de største problemer, og hvor du har brug for at gøre oplevelsen mere gnidningsfri.
Varmekort styrker din brugerempati
Hver type varmekort, vi har udforsket sammen her, kan give dig et indblik i, hvordan dine brugere udforsker og anvender dine produkter. Hvis du arbejder lean, tilbyder varmekort en hurtig og enkel måde at gennemføre UX-undersøgelser på, før du investerer i mere dybdegående brugervenlighedstests. Ved hjælp af dem vil du kunne se og mærke de vanskeligheder, dine brugere oplever, og komme videre med at løse dem.
Kombineret med værktøjer til produktanalyse kan varmekort give et tydeligere billede af, hvordan brugerne interagerer med dit produkt, og hvor de falder fra. Hvis du for eksempel kombinerer varmekort med værktøjer til sessionsgentagelse, får du både ‘hvad’ og ‘hvorfor’ bag brugeradfærden.
Varmekort er fantastiske, men de er kun ét af mange værktøjer, du kan bruge til at opbygge empati og lære mere om resten. Sørg for at tilmelde dig vores nyhedsbrev.
