Varmekort og sessionsoptagelser er blevet et af de mest debatterede emner i designmiljøet. Mens nogle fagfolk sætter spørgsmålstegn ved privatlivsaspektet, mener andre, at den måde, varmekort fungerer på, er helt fin, når det gælder om at holde brugernes data private og sikre.
Der er dog én ting, som alle er enige om – den værdi, du som UX-designer får ved at bruge et varmekortværktøj.
I dag vil jeg gerne udforske dette emne sammen med dig og forstå, hvordan du kan bruge varmekort til at forbedre den måde, du skaber dine brugeroplevelser på.
Hvad handler varmekort om?
Varmekort er værktøjer til datasporing og visualisering, som du kan bruge til at forstå, hvordan din målgruppe interagerer med dit produkt eller din hjemmeside.
Varmekort er todimensionelle diagrammer, der fremhæver bestemte dele af et område med bestemte farver for at formidle nyttige oplysninger. Helsinkis kommune har eksempelvis for nylig lanceret et realtidskort, der viser, hvilke dele af byen der er mest fyldte.
For at visualisere antallet af mennesker i bestemte kvarterer oprettede de et varmekort over byen.
Jo flere mennesker der er i en bestemt del af byen, desto “varmere” fremhæves den på kortet. Hvis intet er fremhævet, er det pågældende kvarter ikke fyldt.
Som visualiseringsværktøjer er varmekort ret alsidige. Ud over at visualisere “hotspots” på et fysisk kort (som i eksemplet med Helsinki ovenfor eller de vejrkort, vi ser i fjernsynet) kan du også placere dem oven på din brugergrænseflade.
I dette tilfælde kan du fremhæve de dele af din brugergrænseflade, der har flest brugerinteraktioner. Du kan derefter kombinere det med sessionsoptagelser for at få en dybdegående indsigt i brugerrejsen og UX-analyse, som kan hjælpe dig med at:
- Få værdifuld indsigt i, hvordan brugerne interagerer med din hjemmeside eller mobilapp.
- Forstå, hvad du kan gøre for bedre at fange dine brugeres opmærksomhed.
- Identificere nye muligheder for at optimere din UX og forbedre dine vigtigste målepunkter (øge konverteringsraten, CTR for dine opfordringsknapper osv.).
Varmekort er altså et fantastisk værktøj for både UX-designere og produktchefer, når de skal undersøge, hvordan brugerne interagerer med og forbedrer deres produkter.
Populære værktøjer til varmekort
Lad os nu se på, hvordan du kan oprette et varmekort for dit produkt. Internettet er fyldt med analyseværktøjer, der kan spore brugerinteraktioner på dit UI-design og fremhæve de sideelementer, der får mest opmærksomhed.
De mest fremtrædende omfatter Hotjar, Mouseflow, Fullstory, Crazy Egg og andre.
Men jeg vil egentlig ikke gå i dybden med dette emne, da vi har en dedikeret kurateret liste over værktøjer til varmekort, som du i stedet kan se nærmere på.
Have an account? Log In
4 vigtige typer varmekort for produktdesignere
Det, vi kalder et “varmekort”, er ikke én enkelt type visuel information, som du bruger til at analysere din UX. I stedet er “varmekort” en samlebetegnelse for forskellige visuelle værktøjer, der fungerer efter det samme overordnede princip – at fremhæve bestemte områder i din UX med forskellige farver.
Jeg vil egentlig ikke gennemgå alle de forskellige typer varmekort, da mange af dem er fuldstændig ubrugelige for produkt- og UX-designere. Lad os i stedet se på fire typer, som mit designteam har fundet mest nyttige.
1. Klik-kort
Klik-kort er sandsynligvis det første, du tænker på, når du taler om varmekort. Det er den mest populære type varmekort, og du finder den i næsten alle varmekort- og analyseværktøjer derude (bortset fra Google Analytics og hændelsesbaserede værktøjer).
Et klik-kort (også kaldet et klik-varmekort) fortæller dig, hvad dine brugere har klikket på i din brugergrænseflade (f.eks. hjemmesidens forside). Det visualiserer din målgruppes klikaktivitet ved at fremhæve de relevante områder og bruge farvekodning til at vise, hvilke dele af din UX der er “varme” eller “kolde”.
Sådan ser Hotjars klik-kort på karrieresiden ud.
Ved at undersøge klik-kortet her kan vi se følgende:
- Et rødt “varmt” område nær den primære CTA – “Se ledige stillinger”.
- En smule “varm” (gul) aktivitet omkring højrepilen, der ændrer det fremhævede billede på siden.
- Også en smule aktivitet (blå) på venstrepilen.
Resten af skærmen har ingen fremhævelser, hvilket fortæller os, at den er “kold”, og at ingen har klikket på disse områder.
Den “varme” fremhævelse på den primære CTA fortæller derimod, at mange brugere (sandsynligvis de fleste af dem, hvis man bedømmer ud fra “varmen”) klikker på den. Derefter har vi de varme områder omkring pileknapperne, som fortæller os, at en lille del af brugerne også navigerer gennem de fremhævede billeder.
Hvordan bruger man varmekort af denne type? A/B-test af dine CTA'er!
Der findes mange forskellige anvendelsesmuligheder for klik-kort. Du kan for eksempel bruge dem til at forstå effektiviteten af placeringen af din CTA, din tekst osv. Mine produktdesignere og jeg holder dog af at bruge varmekort af en anden grund – til A/B-test af vores CTA'er og andre designelementer.
Lad mig illustrere dette anvendelsestilfælde med et eksempel. Forestil dig, at du har ansvaret for ChatGPT-webapplikationen, og at du oplever et problem med, at brugerne ikke opretter nye chats, men taler med AI'en i den samme chatinstans.
Efter at have kigget på varmekortet kan du se, at knappen “Ny chat” øverst i dit sidepanel er kold (intet er fremhævet).
Du antager hurtigt, at det skyldes CTA'ens farve, som er den samme som sidepanelets baggrund. Derfor gennemfører du et A/B-eksperiment, hvor du ændrer baggrundsfarven til grøn i variant A og lader farven være “som den er” i variant B.
Efter at et bestemt antal brugere har interageret med begge varianter, kan du åbne klik-varmekortet for hver af dem og sammenligne dem side om side for at se, hvilken der har den “varmere” knap til Ny chat.
Derefter vælger du den variant, hvor CTA'en fik flest klik, baseret på din analyse af varmekortet.
2. Rullekort
Det er fantastisk at kortlægge brugerklik, men det fortæller dig ikke altid hele historien.
Hvis dit klik-kort for eksempel viser, at du har en knap, der klarer sig dårligt, et sted nederst på skærmen, betyder det ikke nødvendigvis, at der er et problem med din CTA-tekst, farve eller andre faktorer. Måske er din CTA ganske god, men folk ruller ganske enkelt ikke ned på siden og ser den.
Det er her, rullekort (også kaldet rulle-varmekort) kommer ind i billedet. I modsætning til den tidligere type, som fremhæver brugerklik på din brugerflade, viser rullekort, hvor lang tid brugerne opholder sig i hver sektion af din brugerflade, samt deres rulleadfærd.
Afhængigt af den tid, der bruges i hver sektion, vil siden blive fremhævet med rødt (meget tid brugt), orange/gult (moderat tid brugt) og grønt/blåt (lidt tid brugt).
Lad mig demonstrere dette med endnu et Hotjar-eksempel.
Billedet ovenfor viser en af de ældre versioner af Hotjars “om os”-side. Ved at se på dataene fra rulle-varmekortet for denne side kan vi konkludere, at:
- Alle dine brugere har set den øverste del af din side (fremhævet med rødt). Det er selvfølgelig indlysende, ikke?
- Derefter kan vi se, at omkring 75 % af dem har rullet en smule ned for at se logoerne for de virksomheder, der bruger Hotjar (logosektionen er gul).
- Endelig er bunden af siden grøn, hvilket betyder, at kun en del af dine brugere har rullet så langt. Linjen lige over Glassdoor-logoet fortæller os, at kun 57 % af brugerne har rullet til dette punkt.
Dette var et klassisk tilfælde, hvor toppen er rød, den midterste del er gul, og bunden er grøn. I virkeligheden kan du dog se rullekort, hvor en bestemt sektion længere nede på skærmen klarer sig godt (f.eks. din sektion med prisplaner), mens dine brugere ignorerer indholdet ovenfor og nedenfor.
Sådan bruger produktdesignere rullekort: Indholdsoptimering
Ligesom klik-kort er rullekort alsidige værktøjer, som du kan bruge af forskellige årsager. Den mest populære anvendelse er dog at optimere placeringen af dit indhold.
Som jeg allerede har nævnt, klarer prisafsnittene sig for eksempel virkelig godt på din webside. Det betyder, at folk hurtigt ruller hen over dit indhold, derefter lægger mærke til dit prisafsnit, stopper op, læser det og fortsætter med at rulle.
Dette adfærdsmønster gør det muligt for os strategisk at placere prisafsnittet midt på eller nederst på vores side. Det gør vi for at sikre, at folk ruller gennem hele siden (og bemærker nogle af de vigtige budskaber, vi har til dem), før de finder oplysningerne om vores prisplaner.
Vores strategi her minder om supermarkedernes, når de placerer mejeriprodukter og bagværk. Begge dele er som regel noget, man køber ret ofte. Derfor placerer de dem i hver sin ende af bygningen – så man skal gå gennem hele supermarkedet for at få fat i dem.
Logikken er, at du højst sandsynligt får øje på andre produkter på hylderne og køber dem på vej hen til mejeriafdelingen.
3. Bevægelseskort
Rullekort giver dig et overordnet overblik over, hvilke sektioner dine brugere ser på. Klikkort er derimod lidt mere detaljerede, når det gælder om at vise dig, hvilket præcist element brugeren har klikket på.
Der er dog behov for noget på et “mellemniveau”, som kan fortælle dig, hvordan folk navigerer gennem oplysningerne og UI-elementerne i en bestemt sektion på din side.
Her kan du drage fordel af bevægelseskort. Som navnet antyder, holder denne type varmekort styr på musemarkørens bevægelser på tværs af din grænseflade.
Ligesom på andre kort fremhæves grænsefladens områder med en række farver (fra blå til rød), hvor blå betyder, at musen bevæger sig meget lidt over området (og rød betyder meget).
Lad os se, hvordan det ser ud i en blogartikel.
Kortet her fortæller os, at en lille del af brugerne holder musen over artiklens titel og første overskrift. Flertallet holder dog musen i nærheden af søgeområdet øverst i højre hjørne.
Sådan bruger produktdesignere bevægelseskort: Sporing af opmærksomhed på bestemte elementer
Det er ret almindeligt, at nogle dele af vores UI ikke er klikbare, men stadig er meget vigtige, og vi vil gerne sikre os, at vores brugere har set dem.
Et eksempel på dette er vores liste over funktioner på prissiden. Vi vil måske gerne forstå, hvilke funktioner brugerne var mest opmærksomme på, da de gennemgik vores pristabel.
Til dette kan vi drage fordel af menneskers vane med at holde musen over de ting, vi læser eller scanner på det pågældende tidspunkt, og oprette et musebevægelseskort, der fortæller os, hvilke funktioner brugerne ser mest på på vores prisside.
4. Kort over raseri-klik
Der findes almindelige klik, og så findes der raseri-klik.
Det sker, når fejl i din UX har gjort brugerne vrede, så de klikker aggressivt og gentagne gange på et af dine UI-elementer, fordi:
- De tror, at det er noget, man kan klikke på, men det er det ikke.
- Det kan klikkes på, men dit produkt gør ikke noget, efter at brugeren har klikket på det.
Den primære årsag til det første tilfælde er, at man designer UI-elementer, som ikke er knapper eller links, men ligner dem.
Hvad angår det andet tilfælde, kan du være endt med:
- En fejl eller et nedbrud, der har medført, at dit produkt ikke udfører den handling, som den pågældende knap skulle udføre.
- Alt fungerer fint, men der mangler feedback fra UX'en. Så selv om brugeren har udført det, de ønskede, ved hjælp af din knap, har du ikke fortalt dem det.
- Dit produkt er i gang med at udføre den handling, som brugeren har anmodet om, men det går langsomt. Brugerne er enten vrede over det, eller også har du ikke fortalt brugeren, at arbejdet er i gang.
Selv om almindelige klikkort også registrerer raseri-klik (de er trods alt bare klik), vil du ikke kunne skelne raseri-klikkene fra dine almindelige klik. Du ender derfor med at drage forkerte konklusioner ud fra dine data.
Hvis din knap for eksempel ikke fungerer, og folk klikker rasende på den, vil dit almindelige klik-kort fortælle dig, at folk aktivt bruger funktionen, mens virkeligheden er den modsatte.
Visuelt er kort over raseri-klik identiske med almindelige klikkort. Den eneste forskel er, at mange røde områder på det almindelige klik-kort er godt, mens det er dårlige nyheder på dit kort over raseri-klik.
More Articles
Sådan bruger produktdesignere bevægelseskort: Identifikation af dårlig UX
Der findes ikke noget produkt med perfekt UX. Du ender altid med forfærdelige elementer eller oplevelser (selv om du tror, at de ikke er det).
Kort over raseri-klik er gode til at hjælpe dig med at identificere flere typer af disse dårlige oplevelser, herunder dårlig UX-feedback, dårligt elementdesign og andet.
Varmekort er UX-designernes bedste venner
Baseret på min egen og mit produktdesignteams erfaring er varmekort over websteder blandt de mest nyttige værktøjer til at gennemføre brugervenlighedstests og undersøge brugeradfærd.
Med deres hjælp kan du få kvantitative indsigter (herunder hvordan de bruger det på stationære og mobile enheder) i effektiviteten af dit webdesign.
Du kan derefter analysere disse indsigter og identificere mangler i dit design og din funktionalitet, som du skal udfylde for at sikre, at dit produkt, din hjemmeside, e-handelsplatform eller landingsside er brugervenlig.
Glem ikke at tilmelde dig vores nyhedsbrev for flere ressourcer og vejledninger inden for produktstyring samt de nyeste podcasts, interviews og andre indsigter fra brancheledere og eksperter.
