8 lämpökarttaesimerkkiä dataohjattuun tuotteenhallintaan

By Suren Karapetyan

Käydään läpi 8 merkittävintä lämpökarttatyyppiä, selvitetään, miten ne toimivat ja miten voit käyttää niitä käyttäjien toiminnan analysointiin.

Hyvän tuotepäällikön luultavasti tärkein ominaisuus on kyky samaistua käyttäjiin. Kehittääkseen tätä taitoa tuotepäälliköt käyttävät tunteja käyttäjähaastatteluihin ja käyttäjien käyttäytymisen taustalla olevan datan analysointiin.

On kuitenkin toinenkin tapa terävöittää käyttäjäymmärrystäsi – analysoimalla, miten käyttäjät ovat vuorovaikutuksessa tuotteesi kanssa lämpökarttojen avulla.

Lämpökartat ovat vain yksi monista käyttäjätutkimuksen työkaluista, jotka auttavat tunnistamaan kitkaa, tarkoitusperiä ja mahdollisuuksia koko käyttäjäpolun varrella. Ne kuuluvat myös tuoteanalytiikan piiriin ja auttavat siirtymään turhamaisuusmittareita pidemmälle näkemään, mitä käyttäjät todella tekevät.

Jos olet päätynyt tänne, olet todennäköisesti jo kiinnostunut lämpökarttojen hyödyistä – tai etsit tosielämän esimerkkejä investoinnin perustelemiseksi.

Joka tapauksessa olet oikeassa paikassa. Käydään läpi erilaiset lämpökarttatyypit ja se, miten voit käyttää niitä saavuttaaksesi tuotteellesi asetetut tavoitteet.

#1: Klikkaus- ja napautuskartat

Aloitetaan niistä kaikista suosituimmasta – klikkausten kartasta (työpöytäkäyttöliittymille) tai napautusten kartasta (mobiilikäyttöliittymille).

Klikkauskartat ovat visuaalinen esitys siitä, miten käyttäjät klikkaavat käyttöliittymäsi eri kohteita. Kyseessä on yksinkertaisesti kuvakaappaus käyttöliittymästäsi, jossa sen eri osat on korostettu eri väreillä.

Jos lämpökarttatyökalusi korostaa tietyn elementin käyttöliittymässäsi, se tarkoittaa, että käyttäjä (tai useampi käyttäjä) on klikannut sitä. Väri puolestaan kertoo, kuinka monta klikkausta kyseinen elementti on saanut.

Lämpökarttatyökalut käyttävät yleensä lämpötila-asteikon värejä.

värilämpötila-asteikko

Näet tästä liukuväristä lämpimämpiä värejä alueilla, jotka saavat paljon klikkauksia, ja viileämpiä värikorostuksia alueilla, jotka eivät saa juurikaan huomiota.

Tältä näyttää napautuskartan tietojen visualisointi mobiilisovelluksessa, jonka avulla voit hallita talouttasi.

napautuskartan visualisointi mobiilisovelluksessa
Lähde: Smartlook

Voimme nähdä, että kuhunkin tapahtumaan käytettyä summaa osoittavat alueet on korostettu punaisella. Tämä tarkoittaa, että monet ihmiset klikkaavat niitä (todennäköisesti avatakseen tapahtuman ja nähdäkseen sen tiedot).

Yläreunassa oleva tilin saldo puolestaan on korostettu vihreällä, mikä osoittaa, että vain harvat ihmiset päätyvät klikkaamaan sitä.

Klikkauskartan käyttö

Klikkauskartat sisältävät runsaasti käytännön hyötyä tarjoavia havaintoja. Käyttäjiesi käyttäytymisestä voi oppia paljon tarkastelemalla alueita, joita he klikkaavat.

Jos esimerkiksi hallinnoit koirien turvakotisovellusta, jossa on käyttäjien mahdollisuus tukea turvakotiasi taloudellisesti lahjoitussivulla, voit selvittää klikkauskartan avulla, mikä lahjoitusvaihtoehto toimii parhaiten.

klikkauskartta mobiililaitteella
Lähde: Smartlook

Tarkastelemalla yllä olevaa napautuskarttaa voimme todeta, että 10 dollarin ja ”Muu”-vaihtoehdot ovat ylivoimaisesti suosituimpia valintoja lahjoitussummaa valittaessa.

Tärkeä tästä saatava havainto on, että luettelosta todennäköisesti puuttuu jokin lahjoitussumma (esimerkiksi 1 dollari), ja ihmiset klikkaavat ”Muu”-vaihtoehtoa syöttääkseen kyseisen summan.

Siksi on luultavasti hyvä idea selvittää, mitä ihmiset syöttävät ”Muu”-osioon, löytää suosituimmat summat ja lisätä ne luetteloomme.

#2: Vierityskartat

Kuten nimi antaa ymmärtää, tämän tyyppisen lämpökartan avulla voit analysoida käyttäjiesi vierityskäyttäytymistä.

Vierityskartoissa käytetään myös lämpötila-asteikon mukaista värikoodausta. Sen sijaan, että ne korostaisivat käyttöliittymässäsi olevia kohtia, joita ihmiset ovat klikkanneet, ne korostavat sivusi kokonaisia osioita sen perusteella, kuinka moni ihminen on vierittänyt kyseiseen kohtaan ja nähnyt kyseisen osion.

Muiden lämpökarttojen tapaan saat lämpimillä väreillä korostettuja alueita, jos monet ihmiset vierittävät kyseiseen osioon ja näkevät sen, ja viileitä värejä silloin, kun näin tekee vain harva.

Get Free Access to the Product Vault
We’ve collected the goods — AI prompts, exclusive deals, and a library of resources for product leaders. Unlock your account for access.
Get Free Access

Have an account? Log In

Vierityskartan käyttö

Vierityskartat sopivat erinomaisesti tiettyjen elementtien tai sivusi osioiden sijainnin optimointiin sekä näiden osioiden käyttöön tai sitoutumiseen liittyvien ongelmien selvittämiseen.

Käydään läpi tyypillinen ongelmanratkaisutapaus tarkastelemalla Nelio-nimisen SaaS-palvelun hinnoittelusivun vierityskarttaa.

Nelion vierityskartta
Lähde: Nelio

Oletetaan, että sinulla on ongelmia kilpailukyvyn kanssa. Jostain syystä ihmiset haluavat rekisteröityä kilpailijoidesi palveluihin. Kun kysyt heiltä miksi, he sanovat, että toisessa työkalussa oli usean tavoitteen seurantaominaisuus, jota sinulla ei ollut.

Ongelma on kuitenkin siinä, että tämä ominaisuus on sinulla, joten sinun täytyy nyt selvittää, miksi ihmiset eivät löydä sitä.

Kun tarkastelet hinnoittelusivusi vierityskarttaa, huomaat, että valtaosa käyttäjistäsi ei vieritä sivua lainkaan. Sitten huomaat, että usean tavoitteen seurantaominaisuuden kuvaus on ensimmäisen näkymän alapuolella ja sinisellä alueella. Tämä tarkoittaa, että vain muutamat käyttäjistäsi vierittävät sivua ja lukevat siitä, mikä voi päteä useimpiin vieritystä seuraaviin käyttäjien käyttäytymisen analytiikkatyökaluihin.

Ongelma on tunnistettu! Voit nyt harkita, että lisäät “Kaikkiin paketteihin sisältyy” -osiossa olevat ominaisuudet hinnoittelupakettien luetteloihin ylimääräisinä elementteinä. Varmista, että ne näkyvät ensimmäisessä näkymässä, jotta ihmiset näkevät ne ilman vierittämistä.

#3: Hiiren liikkeen lämpökartat

Tämä lämpökarttatyyppi tunnetaan myös liike- tai siirtymäkarttana. Se seuraa hiiren sijaintia ja auttaa visualisoimaan käyttäjien “liikekäyttäytymistä” käyttöliittymässä.

Useimmissa tapauksissa hiiren liikkeen lämpökarttoja käytettäessä oletamme, että käyttäjät todennäköisesti katsovat elementtiä, jonka päällä kohdistin on. Seuraamalla hiiren liikettä voimme siis yhdistää sen seurantaan siitä, mitä ihmiset katsovat selatessaan käyttöliittymäämme.

Visuaalisesti kartta koostuu korostetuista pisteistä, joissa käytetään jälleen lämpötilaan perustuvaa värimaailmaa. Ne kuvaavat käyttöliittymäsi osia, joiden päällä käyttäjän hiiren kohdistin on ollut pisimpään. Tämän lisäksi jotkin lämpökarttatyökalut näyttävät myös “jäljen” siitä, mistä käyttäjät yleensä aloittavat ja miten he liikkuvat käyttöliittymässäsi.

Tällaiset jäljet näyttävät tältä.

Esimerkki hiiren liikkeen lämpökartasta
Lähde: Staticflickr

Tämä on todennäköisesti yhden maailman parhaista UX-käyttöliittymistä eli Applen verkkosivuston hiiren seurantaan perustuva lämpökartta. Onhan Apple ensimmäisten UX-suunnittelijoiden koti. Jäljet osoittavat, että ihmiset alkavat tutustua MacOS Snow Leopard -aloitussivuun tarkastelemalla ensin itse kiehtovaa kissaeläintä, ennen kuin he lukevat otsikon ja siirtyvät eteenpäin aloitussivun muiden elementtien pariin.

Hiiren liikkeen kartan käyttäminen

Yksi mielenkiintoinen tapa käyttää liikekarttaa on käyttäjien huomion häiriötekijöiden tunnistaminen.

Jos esimerkiksi vastaat Amazonin hakutulossivun optimoinnista (tavoitteesi on saada käyttäjät napsauttamaan Amazonin heille löytämää tuotetta), voit tarkastella hiiren liikkeen lämpökarttaa ja huomata, että suurin osa käyttäjistä katsoo ensin jotakin banneriasi, kuten ilmoitusta, ennen kuin he jatkavat hakutulosten tarkastelemista.

Tämä häiritsee käyttäjiäsi huomattavasti ja voi vähentää todennäköisyyttä, että he napsauttavat hakutuloksia. Siksi voit poistaa bannerin tai tehdä siitä käyttöliittymässäsi visuaalisesti vähemmän korostetun.

#4: Huomion lämpökartat

Tähän mennessä olemme käsitelleet kolmea analytiikkatyökalua, joiden avulla voit analysoida käyttäjiäsi visuaalisesti napsautusten, hiiren liikkeiden ja sivun vierityksen perusteella.

Vaikka jokainen edellä mainituista voi tarjota meille arvokasta tietoa, vain yhteen niistä luottaminen voi johtaa harhaan. Käyttäjien toiminnan tarkasteleminen erillään ilman asianmukaista kontekstia ei välttämättä anna riittävän laajaa kuvaa siitä, mitä todella tapahtuu.

Siksi tuotetiimit käyttävät yleensä kaikkia näitä tyyppejä samanaikaisesti ja yhdistävät kaikista kolmesta kerätyt havainnot ennen niiden analysointia ja johtopäätösten tekemistä. Tämä ratkaisu ei kuitenkaan ole täydellinen, sillä kattavan analyysin tekemiseen kuluu todennäköisesti kolme kertaa enemmän aikaa.

Onneksi tekoälymallien ja kehittyneiden algoritmien myötä nykyaikaiset lämpökarttojen visualisointityökalut voivat yhdistää käyttäjien napsautuksista, hiiren liikkeistä ja vierityksestä kerätyt tiedot yhdeksi lämpökartaksi.

Tätä neljättä tyyppiä kutsutaan huomion lämpökartaksi, koska se kertoo olennaisesti, mitkä käyttöliittymän osat saavat käyttäjiltäsi eniten huomiota. Visuaalisesti se muistuttaa hyvin paljon napsautuskarttaa: tietyt käyttöliittymäsi elementit korostetaan eri väreillä lämpötilan väripaletissa sen mukaan, kuinka paljon käyttäjät kiinnittävät niihin huomiota.

#5: Maantieteelliset lämpökartat

Lämpökarttoja on ollut ympärillämme jo kauan ennen kuin ihmiset alkoivat soveltaa tätä tekniikkaa käyttöliittymiin. Yksi perinteisistä merkittävimmistä lämpökarttatyypeistä on ollut maantieteellinen kartta.

Tässä tapauksessa korostat tiettyjä kartan osia valitsemasi datapisteen tyypin perusteella. Jos esimerkiksi haluat analysoida matkailukohteiden maantieteellistä jakautumista Ranskassa, voit käyttää tätä maantieteellistä lämpökarttaa.

maantieteellinen lämpökartta
Lähde: Ranskan ekologisen siirtymän ministeriö

Yllä oleva kartta näyttää hotellipaikkojen määrän (pääasiassa matkailijoille) neliökilometriä kohden. Kuten näemme, Korsika, Ranskan Alpit ja Côte d’Azur ovat tämän kategorian selkeitä voittajia.

Maantieteellisen lämpökartan käyttö

Ranskan matkailutietoaineistojen tarkastelu on kiinnostavaa, mutta voivatko nämä lämpökartat auttaa minua analysoimaan digitaalista tuotettani? Näytän sinulle esimerkin.

Pysytään matkailun (ja Ranskan) aiheessa ja kuvitellaan, että ylläpidät verkossa toimivaa lyhytaikaista vuokrauspalvelua (jotain Airbnb:n kaltaista). Olet ajatellut valmistaa ja jakaa Ranskan kaupunkien paikallisia festivaaleja koskevaa mainosmateriaalia, jotta useammat ihmiset varaisivat niiden alueelta hotellin palvelusi kautta.

Ensimmäinen mieleesi juolahtava kysymys on: mistä kaupungista tai festivaalista sinun pitäisi aloittaa?

Saadaksesi vastauksen voit piirtää maantieteellisen lämpökartan, joka näyttää palveluasi käyttävien vuokra-asuntojen ja -huoneistojen jakauman.

Lähde: InsideBnB

Karttaa tarkastelemalla näet, että palvelusi on melko suosittu Etelä-Ranskassa. Sinun kannattaisikin ehkä aloittaa Provencen ja Côte d’Azurin festivaalien markkinoinnista.

#6: Raivoklikkauskartat

Tämä on klikkauskarttojen alatyyppi, joka suodattaa pois kaikki muut tapaukset ja näyttää vain tilanteet, joissa käyttäjät ovat napsauttaneet jotain turhautuneina. Lämpökarttatyökalut tunnistavat jonkin asian raivoklikkaukseksi (tai turhaksi klikkaukseksi), jos käyttäjä napsauttaa samaa elementtiä useita kertoja peräkkäin.

Raivoklikkauskartan käyttö

Raivoklikkauskartat ovat erinomaisia työkaluja ongelmallisten käyttäjäkokemusten tunnistamiseen. Kyseessä voi olla jokin sellainen, joka näyttää napsautettavalta mutta ei ole sitä, ei ole intuitiivinen tai on yksinkertaisesti painike, joka ei toimi.

Jos esimerkiksi analysoisimme Iteraten jonkin sivun raivoklikkaustietoja, saisimme varmasti raivoklikkauksia ainakin kahdesta kohdasta – tässä syy:

Huomasitko kaksi sinisellä korostettua tekstielementtiä? Arvaa mitä: ne eivät ole linkkejä. Kyseessä on vain tavallista siniseksi värjättyä tekstiä. Monet Iteraten kävijät (minä mukaan lukien) ovat yrittäneet napsauttaa näitä tekstielementtejä odottaen, että ne ohjaisivat toiselle sivulle.

Napsauttamisen jälkeen ei tietenkään tapahdu mitään, mikä voi turhauttaa käyttäjää ja saada hänet aloittamaan ”raivoklikkaukset”.

Tämän sivun raivoklikkauskartan tarkastelusta opittu asia olisi esimerkiksi varmistaa, ettei teksti näytä hyperlinkeiltä. Voisit ehkä tehdä A/B-testin eri väreillä ja selvittää, pitääkö oletuksesi sinisen tekstin aiheuttamista raivoklikkauksista paikkansa.

#7: Silmänseurannan lämpökartat

Tähän asti olemme käyttäneet kohdistinkarttoja ymmärtääksemme, mitä kohtia käyttäjämme ovat katselleet selatessaan verkkosivuamme. Oletamme, että käyttäjien katse kohdistuu suurimman osan ajasta kohdistimeen. Käyttöliittymässä tapahtuvan kohdistimen liikkeen avulla voidaan siis selvittää, mihin käyttäjien katse keskittyy.

Tämä on yleinen tapa analysoida tarkkaavaisuutta. Sen tuottama lämpökarttadata ei kuitenkaan ole täydellistä, sillä käyttäjät eivät aina katso kohdistintaan.

Jos haluat saada tarkkaa sijainti- ja numeerista tietoa siitä, mitä käyttäjäsi katsovat, sinun kannattaa harkita silmänseurannan lämpökartan käyttöä.

Toisin kuin muut lämpökartat, silmänseurannan lämpökartat edellyttävät, että käyttäjät käyttävät erityislaitteita, jotka seuraavat heidän silmiensä liikkeitä ja tunnistavat heidän katseensa kohteena olevien elementtien sijainnin.

Tämä tarkoittaa, että sinun on kutsuttava käyttäjäsi erityisiin testisessioihin, saatava heidät käyttämään näitä seurantalaitteita ja aloittamaan tuotteesi käyttö. Vaikka tämä vie paljon enemmän aikaa ja on kalliimpaa, siitä saatavan datan laatu on huomattavasti parempi kuin millään muunlaisella verkkosivuston lämpökartalla.

Kuinka katseenseurannan lämpökarttaa käytetään

Kun otetaan huomioon katseenseurantatestisessioiden järjestämisestä aiheutuvat kustannukset, käytät katseenseurantaa todennäköisesti vain merkittävän vaikutuksen UX-optimointikohteissa.

Katseenseurantatutkimukset ovat erittäin yleisiä suurten teknologiayritysten tuotteissa, joissa tuotteiden käytettävyyden yhden prosentin parannus voi tarkoittaa kymmenien miljoonien lisätuloja ja sijoitetun pääoman tuottoa.

Kuvittele, kuinka paljon Amazon saisi lisää vuotuista toistuvaa liikevaihtoa, jos se tekisi katseenseurantatutkimuksen ja sijoittaisi suositeltujen tuotteiden bannerit tavalla, joka kasvattaisi konversioastetta yhdellä prosentilla.

#8: [Bonus] Konfettikartat

Konfettilämpökartat ovat tavallisten klikkauskarttojen alalaji, joka näyttää yksittäiset klikkaukset sen sijaan, että se korostaisi yleistä aluetta, jolla käyttäjät ovat napsauttaneet.

Yksittäisten klikkausten analysoinnin etuna on mahdollisuus suodattaa niitä erilaisten monimutkaisten tietopisteiden perusteella.

konfettikartat
Lähde: CrazyEgg

Tässä olemme esimerkiksi ryhmitelleet Haku-toimintakehotteen klikkaukset sen viikonpäivän mukaan, jona klikkaustapahtuma tapahtui.

Datan perusteella voimme nähdä, että tiistaisin saadaan eniten klikkauksia, kun taas maanantaisin vierailevat ihmiset ovat kaikkein hajamielisimpiä (paljon klikkauksia ympäri käyttöliittymää).

Kuinka konfettilämpökarttaa käytetään

Konfettilämpökartat ovat erityisen hyödyllisiä, kun sinun on analysoitava käyttäjien toimintaa yksityiskohtaisella tasolla. Toisin kuin perinteiset lämpökartat, jotka näyttävät koottua dataa, konfettikarttojen avulla voit suodattaa yksittäisiä klikkauksia esimerkiksi laitetyypin, viittauslähteen tai jopa kellonajan perusteella.

Tällainen lämpökartta auttaa havaitsemaan kaavoja, jotka muuten jäisivät huomaamatta. Jos esimerkiksi kassapainikkeesi saa enemmän klikkauksia perjantaisin mutta huomattavasti vähemmän maanantaisin, käyttäjäsi saattavat olla palkkapäivän ohjaamia heräteostajia – ja maanantain kävijäsi saattavat yhä toipua viikonlopusta tuijottaessaan tyhjin katsein hinnoittelusivuasi sen sijaan, että he konvertoituisivat.

Konfettikartat voivat myös tuoda esiin odottamattomia häiriötekijöitä. Jos käyttäjät klikkailevat ympäri sivua sen sijaan, että klikkaisivat haluamaasi kohtaa, he saattavat olla hämmentyneitä – tai vain epätoivoisesti etsiä elonmerkkiä. Jos navigointivalikko saa enemmän klikkauksia kuin toimintakehotteesi, käyttäjät voivat olla eksyksissä ja toivoa pääsevänsä pois sen sijaan, että he sitoutuisivat. Voit käyttää lämpökartoista saatuja oivalluksia käyttäjäpolkukarttasi tarkentamiseen, erityisesti silloin, kun tunnistat kitkaa aiheuttavia kohtia. Suodattaminen käyttäjäsegmentin perusteella voi auttaa näkemään, millä ryhmillä on eniten vaikeuksia ja missä kohtaa käyttökokemusta on sujuvoitettava.

Lämpökartat lisäävät empatiaasi käyttäjiä kohtaan

Jokainen tässä yhdessä tarkastelemamme lämpökarttatyyppi auttaa sinua näkemään, kuinka käyttäjäsi tutustuvat tuotteisiisi ja käyttävät niitä. Jos toimit niukoin resurssein, lämpökartat tarjoavat nopean ja kevyen tavan tehdä UX-tutkimusta ennen perusteellisempaan käytettävyystestaukseen investoimista. Niiden avulla pystyt näkemään ja tuntemaan käyttäjiesi kohtaamat vaikeudet ja etenemään niiden korjaamisessa.

Yhdistettyinä tuoteanalytiikkatyökaluihin lämpökartat voivat antaa selkeämmän kuvan siitä, kuinka käyttäjät ovat vuorovaikutuksessa tuotteesi kanssa ja missä vaiheessa he poistuvat. Kun esimerkiksi yhdistät lämpökartat istuntojen toistotyökaluihin, saat sekä käyttäjien toiminnan ”mitä”- että ”miksi”-vastaukset.

Lämpökartat ovat loistavia, mutta ne ovat vain yksi monista työkaluista, joiden avulla voit rakentaa empatiaa ja oppia lisää myös muista työkaluista. Tilaa uutiskirjeemme.

Suren Karapetyan
Suren Karapetyan, MBA, is a principal product manager focused on AI-driven SaaS products. He thrives in the fast-paced world of early stage startups and finds the product-market fit for them. His portfolio is quite diverse, ranging from background noise cancellation tools for work-from-home folks to customs clearance software for government agencies.
Follow the author:

You may also like