Com treure més rendiment del teu web amb un mapa de calor (o heatmap)?

Et proposem 4 eines de mapa de calor que es poden implementar a qualsevol web molt fàcilment.

Els mapes de calor són els nostres «xivatos» de capçalera. Ens informen de tot el que fan els nostres usuaris a la pàgina web i de com aquesta funciona. No us perdeu detall! .

Què són?

Els mapes de calor (heatmap, en anglès) són una eina que ens permet saber el comportament dels usuaris a la nostra pàgina web i esbrinar quines són les zones més atractives, quines funcionen millor i quines hem de millorar.

Com funcionen?

Els mapes de calor parteixen de la idea que de manera mecànica i inconscient movem el ratolí per la pantalla seguint el moviment dels ulls. Amb un 88% de coincidència podem obtenir aquestes dades per analitzar-les. Ja se sap, tot entra primer per la vista!

Les dades es mostren utilitzant taques sobreposades a la imatge de la pàgina web, amb una graduació de color de blaus (fred - menys interacció) a vermells (calor - més interacció), que dóna com a resultat una termografia.

Mapes de calor (heatmap)

Foto: Martin Sanchez

La tardor tenyeix de manera progressiva les fulles dels arbres. Del verd del bon temps al vermell de la tardor. Un mapa termogràfic de com la tardor va impregnant els arbres del bosc.

Hi ha 3 tipus de mapes:

Els mapes de calor (heatmap, en anglès) són una eina que ens permet saber el comportament dels usuaris a la nostra pàgina web i esbrinar quines són les zones més atractives, quines funcionen millor i quines hem de millorar.

  • 1:
    Per moviment: El que mostra el moviment del ratolí al llarg de la pàgina. Aquest tipus de mapa està cada dia més qüestionat per la irrupció de les noves generacions acostumades a l’era tàctil i, per tant, ja no mouen el ratolí seguint la vista sinó que l’utilitzen com a element tàctil per interactuar a la zona que els interessa.
Mapes de calor (heatmap) moviment
  • 2:
    Per clic: El que mostra les zones on els visitants interactuen.
Mapes de calor (heatmap) clic
  • 3:
    Per scroll: El que mostra on deixen de fer scroll en una pàgina llarga.
Mapes de calor (heatmap) scroll

Per què ens és útil aquesta informació?

Per analitzar els nostres processos de conversió i poder detectar, sobretot en el cas de comerços en línia, en quin estat del procés els usuaris abandonen la compra i per quins motius. Pot ser que el botó de compra no estigui situat en una zona òptima o que hi hagi algun element que desviï l’atenció de l’usuari, com podria ser un bàner dins del procés de compra. Per tant, també ens serveix per verificar les pràctiques de CTAs (Call to Action).

Mapes de calor (heatmap)

Foto: Bess Hamiti

La naturalesa també te les seves formes d'atraure l'atenció. Els seus Call to Action particulars. Aquesta flor, indica clarament on té el seu nèctar, per a que les abelles el puguin trobar.

Ens pot servir, també, per tenir un feedback sobre la nostra interfície. Saber quins són els elements que funcionen, les imatges o gràfics que els resulten més atractius, quina llargada és l’òptima perquè no deixin la lectura a mitges, etc.

Perquè tan important és que trobin la teva pàgina web en els principals buscadors, com el fet que un cop entrin els usuaris es quedin el màxim temps possible. més interacció), que dóna com a resultat una termografia.

2 propostes de mapes de pagament:

Feng-GUI

Mapes de calor (heatmap) Feng GUI

S’utilitza sobretot per analitzar webs que encara no són públiques per poder fer canvis al contingut abans d’obrir-la. Molt útil per a dissenyadors web, ja que permet carregar la maqueta del que serà la web i poder corregir-la abans de ser publicada.

És de pagament.

És una eina que fa una predicció del mapa de calor de la teva web. L’algoritme analitza la teva web (o algun element en concret de la mateixa) i calcula quins elements cridaran l’atenció dels usuaris. Per tant, no és exactament un mapa de calor.

www.feng-gui.com

Crazyegg

Mapes de calor (heatmap) Crazyegg

És una de les més famoses.

Permet segmentar els usuaris segons la procedència. Analitza també el comportament en mòbils.

A més dels mapes de clics i de scroll té un mapa d’overlay amb la quantitat de clics a cada element de la web.

És de pagament.

No pots iniciar el període de prova sense introduir les dades de pagament.

www.crazyegg.com

I 2 propostes de mapes gratuïts:

Hotjar

Mapes de calor (heatmap) Hotjar

Analitza mapes de clics, de scroll, embuts de conversió, anàlisis dels formularis, petició del feedback i enquestes als usuaris.

Incorpora una novetat: la gravació de comportaments. Podem veure en vídeo com un usuari en concret navega per la nostra web i el moviment del seu ratolí.

Fàcil d’utilitzar: la interfície és visual i intuïtiva, amb les dades analítiques molt ben estructurades.

Eina de pagament però amb versió gratuïta fins a 2.000 visites diàries.

Només està en anglès.

En la versió gratuïta les dades només es guarden 3 mesos.

www.hotjar.com

Yandex Metrika

Mapes de calor (heatmap) Wandex Metrika

És gratuïta.

Analitza tant els mapes de clic com els de l’scroll.

Pots comparar l’activitat dels usuaris en diferents moments seleccionant dos períodes de temps.

Es pot utilitzar des de dispositius mòbils.

La interfície està en rus o anglès.

metrica.yandex.com

A més a més...

Els mapes de calor són molt útils, però no ens hem de tancar portes. Existeixen altres eines analítiques de percentatges de rebots, temps d'estança, sortides, embuts de conversió, etc. que utilitzats juntament amb els mapes de calor ens permetran tenir una radiografia prou clara i ampla de com funciona la nostra pàgina web i tindrem marge de maniobra per millorar-la.

Per exemple, un complement per CMS que pot combinar-se amb les eines de zones de calor, és el de Tests A/B. Aquests tests consisteixen a mostrar aleatòriament diferents elements dissenyats de forma diferent a la nostra pàgina web, i analitzant les zones de calor, podrem comprovar quin dels elements funciona millor per implementar-lo definitivament.

Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!