Lämpökartoista ja istuntotallenteista on tullut yksi suunnitteluyhteisön kiivaimmin keskustelluista aiheista. Vaikka jotkut ammattilaiset kyseenalaistavat niiden tietosuojaan liittyvät näkökohdat, toisten mielestä lämpökartoituksen toimintatapa pitää käyttäjien tiedot täysin yksityisinä ja turvassa.
Yhdestä asiasta kaikki ovat kuitenkin samaa mieltä – siitä arvosta, jonka sinä (UX-suunnittelijana) saat lämpökartoitustyökalun käytöstä.
Tänään haluan perehtyä tähän aiheeseen kanssasi ja ymmärtää, miten voit käyttää lämpökarttoja parantaaksesi tapaa, jolla rakennat käyttäjäkokemuksia.
Mitä lämpökartat ovat?
Lämpökartat ovat tietojen seurantaan ja visualisointiin tarkoitettuja työkaluja, joiden avulla voit ymmärtää, miten kohdeyleisösi on vuorovaikutuksessa tuotteesi tai verkkosivustosi kanssa.
Lämpökartat ovat kaksiulotteisia kaavioita, joissa tietyt alueen osat korostetaan tietyillä väreillä hyödyllisen tiedon välittämiseksi. Esimerkiksi Helsingin kaupunki on hiljattain julkaissut reaaliaikaisen kartan, joka näyttää, mitkä kaupungin osat ovat ruuhkaisimpia.
Visualisoidakseen ihmisten määrän tietyillä kaupunginosilla he loivat kaupungista lämpökartan.
Mitä enemmän ihmisiä tietyssä kaupungin osassa on, sitä ”kuumempana” se korostuu kartalla. Jos mitään ei ole korostettu, kyseinen kaupunginosa ei ole ruuhkainen.
Visualisointityökaluina lämpökartat ovat varsin monipuolisia. Sen lisäksi, että voit visualisoida ”kuumat pisteet” fyysisellä kartalla (kuten yllä olevassa Helsingin tapauksessa tai televisiossa näkemillämme sääkartoilla), voit sijoittaa ne myös käyttöliittymäsi päälle.
Tässä tapauksessa voit korostaa käyttöliittymäsi osat, joiden kanssa käyttäjät ovat eniten vuorovaikutuksessa. Voit yhdistää sen istuntotallenteisiin saadaksesi yksityiskohtaisen kuvan käyttäjän polusta ja UX-tutkimuksesta, jotka auttavat sinua:
- Saamaan arvokkaita näkemyksiä siitä, miten käyttäjät ovat vuorovaikutuksessa verkkosivustosi tai mobiilisovelluksesi kanssa.
- Ymmärtämään, mitä voit tehdä saadaksesi käyttäjiesi huomion paremmin.
- Tunnistamaan uusia mahdollisuuksia UX:n optimointiin ja keskeisten mittareidesi parantamiseen (konversioasteen nostaminen, toimintakehotuspainikkeidesi klikkausprosentti eli CTR ja niin edelleen).
Lämpökartat ovat siis loistava työkalu sekä UX-suunnittelijoille että tuotejohtajille, jotka haluavat tutkia, miten käyttäjät ovat vuorovaikutuksessa tuotteidensa kanssa ja miten tuotteita voidaan parantaa.
Suosittuja lämpökarttatyökaluja
Katsotaan nyt, miten voit luoda lämpökartan tuotteellesi. Verkko on täynnä analytiikkatyökaluja, jotka voivat seurata käyttäjien vuorovaikutusta käyttöliittymäsuunnittelusi kanssa ja korostaa sivuelementtejä, jotka saavat eniten huomiota.
Tunnetuimpia niistä ovat Hotjar, Mouseflow, Fullstory, Crazy Egg ja muut.
En kuitenkaan halua perehtyä tähän aiheeseen syvällisesti, sillä olemme koonneet kuratoidun luettelon lämpökarttatyökaluista, johon voit tutustua sen sijaan.
Have an account? Log In
4 keskeistä lämpökarttatyyppiä tuotesuunnittelijoille
”Lämpökartta” ei tarkoita yhtä ainoaa visuaalisen tiedon tyyppiä, jota käytät UX:n analysointiin. Sen sijaan ”lämpökartta” on kattotermi erilaisille visuaalisille työkaluille, jotka toimivat saman yleisperiaatteen mukaisesti – ne korostavat UX:n tiettyjä alueita eri väreillä.
En oikeastaan halua käydä läpi kaikkia erilaisia lämpökarttatyyppejä, sillä monet niistä ovat tuote- ja UX-suunnittelijoille yksinkertaisesti hyödyttömiä. Tarkastellaan sen sijaan neljää tyyppiä, jotka suunnittelutiimini on havainnut kaikkein hyödyllisimmiksi.
1. Klikkauskartat
Klikkauskartat ovat luultavasti ensimmäinen asia, joka tulee mieleesi lämpökartoista puhuttaessa. Se on suosituin lämpökarttatyyppi, ja löydät sen lähes kaikista lämpökartta- ja analytiikkatyökaluista (Google Analyticsia ja tapahtumapohjaisia työkaluja lukuun ottamatta).
Klikkauskartta (eli klikkausten lämpökartta) kertoo, mitä käyttäjäsi ovat käyttöliittymässäsi (esimerkiksi verkkosivuston etusivulla) napsauttaneet. Se visualisoi yleisösi klikkaustoiminnan korostamalla asianmukaiset alueet ja käyttämällä värikoodausta sen osoittamiseen, mitkä UX:si osat ovat ”kuumia” tai ”kylmiä”.
Tältä Hotjarin urasivun klikkauskartta näyttää.
Tarkastelemalla tätä klikkauskarttaa voimme nähdä seuraavaa:
- Punainen ”kuuma” alue pääasiallisen CTA:n – ”Näytä avoimet työpaikat” – lähellä.
- Hieman ”lämmintä” (keltaista) aktiivisuutta oikean nuolipainikkeen ympärillä. Painike vaihtaa sivulla näkyvän pääkuvan.
- Myös vasemmassa nuolessa on hieman aktiivisuutta (sinistä).
Muualla näytöllä ei ole korostuksia, mikä kertoo, että alue on ”kylmä” eikä kukaan ole napsauttanut sitä.
Pääasiallisen CTA:n ”kuuma” korostus puolestaan kertoo, että monet käyttäjät (luultavasti useimmat heistä ”kuumuuden” perusteella päätellen) napsauttavat sitä. Nuolipainikkeiden ympärillä olevat lämpimät alueet puolestaan kertovat, että pieni osa käyttäjistä selaa myös pääkuvia.
Miten tämäntyyppisiä lämpökarttoja käytetään? CTA-elementtien A/B-testaus!
Napsautuskartoille on monenlaisia käyttötapauksia. Niiden avulla voi esimerkiksi selvittää CTA-elementin sijoittelun, tekstin ja muiden tekijöiden tehokkuuden. Minä ja tuotesuunnittelijani kuitenkin pidämme lämpökarttojen käyttämisestä eri syystä – testaamme niiden avulla CTA-elementtejämme ja muita suunnitteluelementtejä A/B-testauksella.
Havainnollistan tätä käyttötapausta esimerkillä. Kuvitellaan, että vastaat ChatGPT-verkkosovelluksesta ja sinulla on ongelma: käyttäjät eivät luo uusia keskusteluja, vaan keskustelevat tekoälyn kanssa yhden keskustelun sisällä.
Lämpökarttaa tarkasteltuasi huomaat, että sivupalkin yläosassa oleva ”Uusi keskustelu” -painike on kylmä (mikään ei ole korostunut).
Oletat nopeasti, että tämä johtuu CTA:n väristä, joka on sama kuin sivupalkin taustaväri. Niinpä suoritat A/B-kokeen, jossa muutat taustavärin vihreäksi versiossa A ja jätät värin ennalleen versiossa B.
Kun riittävä määrä käyttäjiä on käyttänyt kumpaakin versiota, voit avata kummankin napsautuslämpökartan ja verrata niitä rinnakkain nähdäksesi, kummassa ”Uusi keskustelu” -painike on ”kuumempi”.
Valitset sitten version, jonka CTA sai lämpökartta-analyysin perusteella enemmän napsautuksia.
2. Vierityskartat
Käyttäjien napsautusten kartoittaminen on hyödyllistä, mutta se ei aina kerro koko totuutta.
Jos napsautuskarttasi esimerkiksi osoittaa, että jokin näytön alaosassa oleva painike toimii heikosti, se ei välttämättä tarkoita, että CTA:n tekstissä, värissä tai muissa tekijöissä olisi ongelma. CTA:si voi olla varsin hyvä, mutta ihmiset eivät ehkä yksinkertaisesti vieritä sivua alaspäin eivätkä näe sitä.
Tässä vierityskartat (eli vierityslämpökartat) tulevat avuksi. Toisin kuin edellinen tyyppi, joka korostaa käyttöliittymässäsi tapahtuvia käyttäjien napsautuksia, vierityskartat näyttävät, kuinka kauan käyttäjät viipyvät käyttöliittymäsi kullakin osioilla sekä heidän vierityskäyttäytymisensä.
Kussakin osiossa vietetyn ajan perusteella sivu korostetaan punaisella (paljon aikaa), oranssilla/keltaisella (kohtalaisesti aikaa) tai vihreällä/sinisellä (vähän aikaa).
Havainnollistan tätä jälleen yhdellä Hotjar-esimerkillä.
Yllä näkemämme kuva on yksi Hotjarin ”tietoa meistä” -sivun vanhemmista versioista. Tarkastelemalla tämän sivun vierityslämpökarttatietoja voimme päätellä, että:
- Kaikki käyttäjäsi ovat nähneet sivusi yläosan (korostettu punaisella). Ilmiselvästi, eikö niin?
- Sitten näemme, että noin 75 % heistä on vierittänyt hieman alaspäin nähdäkseen Hotjaria käyttävien yritysten logot (logosivuosio on keltainen).
- Lopuksi sivun alaosa on vihreä, mikä tarkoittaa, että vain osa käyttäjistäsi on vierittänyt niin pitkälle. Glassdoor-logon yläpuolella oleva viiva kertoo, että vain 57 % käyttäjistä on vierittänyt tähän kohtaan.
Tämä oli klassinen tapaus, jossa yläosa on punainen, keskiosa keltainen ja alaosa vihreä. Tosielämässä voit kuitenkin nähdä vierityskarttoja, joissa jokin näytön alaosan osio toimii hyvin (esimerkiksi hinnoittelusuunnitelmia käsittelevä osio), kun taas käyttäjät jättävät ylä- ja alapuolella olevan sisällön huomiotta.
Miten tuotesuunnittelijat käyttävät vierityskarttoja: sisällön optimointi
Napsautuskarttojen tavoin vierityskartat ovat monipuolisia työkaluja, joita voi käyttää moniin tarkoituksiin. Niiden suosituin käyttötapaus on kuitenkin sisällön sijoittelun optimointi.
Kuten jo mainitsin, esimerkiksi hinnoitteluosiot toimivat verkkosivullasi todella hyvin. Tämä tarkoittaa, että ihmiset vierittävät sisältösi nopeasti ohi, huomaavat sitten hinnoitteluosion, pysähtyvät lukemaan sitä ja jatkavat vierittämistä.
Tämän käyttäytymismallin ansiosta voimme sijoittaa hinnoitteluosion strategisesti sivumme keskelle tai alaosaan. Näin varmistamme, että ihmiset käyvät läpi koko sivun (ja huomaavat joitakin heille tarkoitettuja tärkeitä viestejä) ennen kuin he löytävät tiedot hinnoittelusuunnitelmistamme.
Strategiamme tässä on samanlainen kuin supermarketeilla niiden sijoittaessa maitotuotteita ja leipomotuotteita. Molemmat ovat yleensä tuotteita, joita ostat melko usein. Siksi ne sijoitetaan rakennuksen vastakkaiselle puolelle – näin sinun täytyy kävellä koko supermarketin läpi saadaksesi ne.
Ajatuksena on, että huomaat todennäköisesti muita tuotteita hyllyväleissä ja ostat niitä matkalla maito-osastolle.
3. Liikekartat
Vierityskartat antavat sinulle yleiskuvan siitä, mitä osioita käyttäjäsi tarkastelevat. Klikkauskartat puolestaan ovat hieman yksityiskohtaisempia ja kertovat, mitä tarkkaa elementtiä käyttäjä on napsauttanut.
Tarvitaan kuitenkin jotakin ”keskitasoista”, joka pystyy kertomaan, miten ihmiset navigoivat tietojen ja käyttöliittymäelementtien läpi sivusi tietyssä osiossa.
Tässä voit hyödyntää liikekarttoja. Kuten nimi kertoo, tämäntyyppinen lämpökartta seuraa hiiren osoittimen liikkeitä käyttöliittymässäsi.
Muiden karttojen tapaan käyttöliittymän alueet korostetaan eri väreillä sinisestä punaiseen siten, että sininen tarkoittaa vähäistä hiiren liikettä kyseisellä alueella ja punainen runsasta liikettä.
Katsotaan, miltä se näyttää blogiartikkelissa.
Kartta kertoo tässä, että pieni osa käyttäjistä liikuttaa hiirtä otsikon ja artikkelin ensimmäisen väliotsikon päällä. Suurin osa kuitenkin pitää hiirtä oikean yläkulman hakualueen lähellä.
Miten tuotesuunnittelijat käyttävät liikekarttoja: tiettyihin elementteihin kohdistuvan huomion seuraaminen
On melko tavallista, että käyttöliittymässämme on asioita, joita ei voi napsauttaa, mutta jotka ovat silti erittäin tärkeitä, ja haluamme varmistaa, että käyttäjämme ovat nähneet ne.
Esimerkkinä tästä voisi olla hinnoittelusivumme ominaisuusluettelo. Saatamme haluta ymmärtää, mihin ominaisuuksiin käyttäjät kiinnittivät eniten huomiota tarkastellessaan hinnoittelutaulukkoamme.
Tätä varten voimme hyödyntää ihmisten tapaa pitää hiirtä niiden asioiden päällä, joita luemme tai silmäilemme kyseisellä hetkellä, ja luoda hiiren liikekartan, joka kertoo, mitä ominaisuuksia käyttäjät tarkastelevat eniten hinnoittelusivullamme.
4. Raivoklikkauskartat
On tavallisia napsautuksia ja sitten on raivokkaita napsautuksia.
Näin käy, kun UX:n puutteet ovat saaneet käyttäjät suuttumaan ja napsauttamaan jotakin käyttöliittymäelementtiäsi aggressiivisesti ja toistuvasti, koska:
- He luulevat, että sitä voi napsauttaa, mutta sitä ei voi.
- Sitä voi napsauttaa, mutta tuotteesi ei tee mitään sen jälkeen, kun käyttäjä napsauttaa sitä.
Ensimmäisen tapauksen pääasiallinen syy on sellaisten käyttöliittymäelementtien suunnittelu, jotka eivät ole painikkeita tai linkkejä mutta näyttävät siltä.
Toisen tapauksen kohdalla kyse voi olla jostakin seuraavista:
- Virhe tai kaatuminen, jonka vuoksi tuotteesi ei suorita toimintoa, johon kyseinen painike oli tarkoitettu.
- Kaikki toimii hyvin, mutta UX-palautetta ei ole riittävästi. Vaikka käyttäjä olisi siis onnistuneesti tehnyt painikkeesi avulla sen, mitä halusi, et ole kertonut hänelle siitä.
- Tuotteesi suorittaa käyttäjän pyytämää toimintoa, mutta se on hidas. Käyttäjät ovat joko siitä ärsyyntyneitä tai et ole kertonut heille, että toiminto on käynnissä.
Vaikka tavalliset klikkauskartat rekisteröivät myös raivokkaat napsautukset (ovat ne loppujen lopuksi vain napsautuksia), et pysty erottamaan raivokkaita napsautuksia tavallisista napsautuksistasi. Päädyt tekemään aineistosi perusteella virheellisiä johtopäätöksiä.
Jos esimerkiksi painikkeesi ei toimi ja ihmiset napsauttavat sitä raivokkaasti, tavallinen klikkauskarttasi kertoo, että ihmiset käyttävät aktiivisesti kyseistä ominaisuutta, vaikka todellisuus on päinvastainen.
Visuaalisesti raivoklikkauskartat ovat samanlaisia kuin tavalliset klikkauskartat. Ainoa ero on se, että monet punaiset alueet tavallisessa klikkauskartassa ovat hyvä asia, mutta raivoklikkauskartassa ne ovat huono uutinen.
More Articles
Miten tuotesuunnittelijat käyttävät liikekarttoja: huonon UX:n tunnistaminen
Yhtäkään täydellisen UX:n tuotetta ei ole olemassa. Lopputuloksena on aina kamalia elementtejä tai käyttökokemuksia, vaikka itse luulisit, ettei niitä ole.
Raivoklikkauskartat auttavat erinomaisesti tunnistamaan useita tällaisia huonoja kokemuksia, kuten puutteellisen UX-palautteen, huonon elementtisuunnittelun ja muita ongelmia.
Lämpökartat ovat UX-suunnittelijoiden parhaita ystäviä
Oman ja tuotesuunnittelutiimini kokemuksen perusteella verkkosivustojen lämpökartat ovat hyödyllisimpiä työkaluja käytettävyystestien tekemiseen ja käyttäjien toiminnan tutkimiseen.
Niiden avulla voit saada määrällistä tietoa verkkosuunnittelusi tehokkuudesta, mukaan lukien siitä, miten sitä käytetään tietokoneilla ja mobiililaitteilla.
Voit sen jälkeen analysoida näitä tietoja ja tunnistaa suunnittelusi ja toiminnallisuutesi puutteet, jotka sinun on korjattava varmistaaksesi, että tuotteesi, verkkosivustosi, verkkokauppa-alustasi tai laskeutumissivusi on helppokäyttöinen.
Muista tilata uutiskirjeemme saadaksesi lisää tuotepäälliköille suunnattuja resursseja ja oppaita sekä alan johtajien ja asiantuntijoiden uusimmat podcastit, haastattelut ja muut näkemykset.
