Mapas_de_calor

El gran reto para cualquier empresa que apueste por la conversión web es averiguar qué es lo que quieren o buscan los usuarios en sus páginas web. Pues bien, para ello, es totalmente necesario conocer cada perfil al detalle. Se hace imprescindible saber cómo interactúan dichos usuarios con nuestra web. Qué es lo que ven, qué es lo que les llama la atención, qué es lo que les atrae…

De un tiempo a esta parte dicha tarea requería muchos esfuerzos e investigación por parte de las empresas; sin embargo, actualmente existen herramientas verdaderamente útiles que nos pueden ayudar a acercarnos un poco más a nuestro público. Una de estas útiles y fantásticas herramientas son los mapas de calor. Si todavía no has oído hablar de ellos, este es el momento de que empieces a familiarizarte con los heat maps. En este post te vamos a explicar qué son, para qué se utilizan, cómo puedes conseguir tu propio mapa de calor y muchos más aspectos que no te dejarán indiferente.

Te recomendamos que, si quieres que tu web gane en efectividad y se favoreca su conversión, conozcas toda la teoría sobre los mapas de calor web para que, en breve, pases a la acción. ¡Sigue leyendo y lo descubrirás!

¿Qué son?

Los mapas de calor o heat maps son gráficos que te permiten identificar los puntos calientes de tu web; es decir, las zonas que atraen la atención de tus usuarios. Al igual que sucede en una revista o un catálogo publicitario, nuestro ojo no se dirige con la misma frecuencia a una área que a otra; en una web, pasa igual. En los mapas de calor web se concretan esos focos de atención que consiguen atrapar nuestra mirada y, por consiguiente, los elementos más relevantes. 

Su forma de representación se basa en la termografía y utiliza una jerarquía de colores en la que, por lo general, los puntos de más interés se identifican con las gamas de colores cálidos (rojo, naranja, amarillo), mientras que las zonas de menos interes están representadas por las gamas de colores fríos (verde, azul, turquesa..) Aquí tienes un ejemplo: 

guardian_dynamic

 ¿Cómo pueden saber estos mapas cuáles son los puntos calientes de mi web?

Los mapas de calor se basan en la tecnología de rastreo empleada en los estudios de “eye-tracking”. En este tipo de análisis los investigadores llevan a cabo un seguimiento de los movimientos oculares que realiza el usuario cuando interacúa con una página web.

En el caso de los mapas de calor, ese rastreo se hace a partir de los movimientos de ratón.

Diversas investigaciones, como la realizada por la Carnegie Mellon University , han concluído en que dichos movimientos de ratón están íntimamente relacionados (88% de correlación) con la trayectoria ocular que un usuario realiza al visitar un site. Aunque no seamos conscientes, al interactuar con una página, el puntero del ratón acompaña a nuestra mirada.

De esta forma, en un mapa de calor web podemos identificar como puntos calientes aquellas zonas en las que el usuario deja el ratón quieto durante un periodo determinado de tiempo. Dicho periodo puede variar de un test a otro, pero generalmente (en base a los criterios del “eye-tracking”) se considera punto caliente cuando el usuario centra la atención sobre él durante más de un segundo y medio.

Tipos de mapas de calor

En la acutalidad existen 3 grandes tipos de mapas de calor.

  1. Mapas de movimiento de ratón (Mouse movement Heatmaps)

Este tipo de mapas registran el movimiento del ratón; sin embargo sus resultados no son efectivos al 100%. Debemos entender este margen de error porque estamos hablando de trayectorias, no de interacciones directas entre el usuario y la página.

No obstante, por esta misma razón, estos mapas ofrecen mucha más información ya no sólo de los puntos de interés de la página, también de los puntos frío o puntos menos focalizados que también serán muy importantes a la hora de elaborar las conclusiones. Esta modalidad de mapas de calor web nos ayuda a determinar las zonas con más actividad y en las que se concreta la navegación del usuario, tendiendo un peso determinante para evaluar el grado de conversión de dicha página web. 

heat_map_movement

2. Mapas de clicks (Click maps)

Como su propio nombre indica, estos mapas indican las zonas en las que los usuarios hacen click. En cierto modo, y aunque no son exactamente mapas de calor, sí pueden agruparse en este sector porque ofrecen un tipo de resultados muy similares. Asimismo, este tipo de mapas son los que ofrecen una mayor fiabilidad en sus resultados ya que no miden el paso del ratón, sino una acción concreta y efectiva como es el click. Generalmente incluyen datos referenciales con el número de click exactos, el numero de visitantes únicos, etc. Por tanto, con este tipo de mapas de calor web directamente hablamos en términos de conversión directa porque la información ofrecida está basada en comportamientos directos como hacer click sobre un botón de compra o el visionado de un vídeo, por poner solo un ejemplo. 

¿Qué utilidad puede tener? Imaginemos que somos una tienda online y tenemos un catálogo de productos en nuestra home; gracias a este tipo de mapas podremos saber qué producto es el más atractivo para nuestros visitantes. En otro supuesto, los mapas de calor web basados en click permiten ver qué elementos entienden nuestros usuarios como clickables y si efectivamente lo son o no; o por ejemplo, qué zona de nuestra página es la ideal para introducir enlaces patrocinados.

screenshot_251_Click_Heatmap

3. Mapas de scroll (Scroll Heatmaps)

Este tipo de mapas se utilizan sobre todo en páginas únicas con mucho scroll y sirven para detectar por ejemplo: hasta qué punto de la página llegan los usuarios con el scroll, en qué nivel dejan de hacerlo, qué zonas son las que reciben mayor atención (no se hace scroll o se permanece sin hacer scroll un tiempo determinado)… etc.

Sin embargo, las conclusiones que sacamos a partir de este tipo de mapas de calor we son (salvando excepciones) muy similares: colocar los elementos principales sobre la línea de scroll y a partir de dicha línea, hacia abajo, situar los demás elementos por orden de importancia.

Este sería un ejemplo de mapa de calor de scroll: 

heatmap3

 

¿Para qué se utlizan los mapas de calor en CRO?

Dos de las principales utilidades de los mapas de calor están estrechamente relacionadas con la conversión web. Dentro de nuestro ámbito, este tipo de análisis nos va a servir para:

  • Analizar la eficacia de nuestro embudo de conversión.

Con los heat maps podemos ver qué zonas de nuestro embudo reciben más atención y cuáles no. Esto nos ayudará a modificar, si es necesario, la forma de convertir a nuestros visitantes. Sin duda alguna, cada una de estas modalidades de mapas de calor web son un reflejo de la actividad de nuestra web, sirviéndonos para conocer el comportamiento de los usuarios sobre ella. Asimismo, basándonos en los datos registrados por los mapas de calor web tendremos información para ajustar nuestra web ajustándola a las zonas que más concentran la atención de los usuarios. 

En este sentido debemos tener muy en cuenta que las fases de nuestro embudo de conversión no deben tener la misma URL ya que, de esta forma, obtendremos un mapa de calor con los resultados superpuestos y esto no nos interesa.

Ejemplo: Imaginemos que nuestro embudo de conversión comienza en nuestra página de contacto, sigue con un formulario y finaliza con una confirmación de registro. Cada una de esas páginas debe tener una URL diferente (www.midominio.com/contacto, www.midominio.com/formulario, www.midominio.com/confirmacion) para que así los resultados se muestren por separado y tengamos un análisis más certero del proceso. Por tanto, ese proceso debe estar estructura en diferentes páginas confeccionándose mapas de calor web diferentes que nos muestren la actividad en cada página de forma diferenciada. 

  • Ubicar correctamente nuestras llamadas a la acción

Como ya hemos indicado, si los heat maps reflejan los puntos que más atención reciben por parte de nuestros visitantes, tendremos la clave para saber dónde ubicar nuestras llamadas a la acción. Los mapas de calor web son herramientas poderosísimas, como puedes ver. ¿Dudabas sobre el mejor lugar para ubicar la suscripción a la newsletter de tu web? Gracias a los datos suministrados por los mapas de calor web, despejarás tus dudas. 

Sin embargo, debemos recordar que, a la hora de recolocar nuestros “call to action” no debemos eliminar el elemento que atrae la atención del visitante y sustituirlo por dicha llamada. Lo que deberemos hacer es ubicarla cerca de esa zona de atención sin hacer que el punto caliente que genera esa espectación pierda fuerza.

Desventaja de los mapas de calor

Aunque los mapas de calor constituyen una genial herramienta de marketing, también debemos conocer sus desventajas. Una de las principales es la representatividad de los datos que nos muestran.

Para obtener resultados representativos de la interacción de nuestros usuarios con nuestro site, es necesario contar con un volumen importante de visitas. De lo contrario, en los resultados del mapa de calor web solo veremos pequeñas manchas de color en nuestro site y no se formará una imagen definida. Por lo tanto, si somos una página con poca afluencia de visitantes nos costará un poco más obtener datos contundentes procedentes de los mapas de calor web.

Por tanto, el ratio de visitas registradas en nuestra web es un indicativo esencial para obtener una información realmente útil de la aplicación de los mapas de calor web. Cuantas más personas visiten nuestra web, más actividad habrá en ella y por tanto más zonas pueden captar la atención del usuario. Por el contrario, si la web apenas recibe visitas, se dificulta el uso práctico de los mapas de calor web ya que apenas podrán recoger información.

Así se vería el mapa web de una página con pocas visitas.

webtrekk_knigge_Heatmap

Y así el mapa de calor de una página una con muchas visitas.

entidad1-heatmap

 

 

¿Cómo debo interpretar los resultados de un mapa de calor? Ejemplo.

Para explicarte cómo podemos interpretar los resultados obtenidos con un mapa de calor pondremos un ejemplo con un mapa realizado en nuestra propia web.

Cuando lanzamos esta landing page vimos que el formulario de registro quedaba un poco desatendido por parte de los visitantes. La zona del vídeo atraía casi toda la atención y eran pocos los usuarios que se fijaban en la parte derecha de nuestra página de venta.

Con los resultados obtenidos a partir de un mapa de calor nos fijamos en que la figura de nuestro speaker Nacho Muñoz recibía mucha atención por parte de los visitantes, por lo que decidimos añadir una nueva imagen de él para dar más fuerza al formulario. En la siguiente imagen podéis verlo:

wcm

Después de esta modificación, los resultados cambiaron y se reflejaron claramente en el nuevo mapa de calor web. Los visitantes que entraban en nuestra web ya no solo dirigían su atención hacia la zona del vídeo sino que también lo hacían hacia la zona del formulario de registro.

Aquí podéis ver una muestra de dichos resultados.

home web conversion

Con este ejemplo podéis daros cuenta de la gran cantidad de información que podéis sacar de vuestros usuarios gracias a los resultados que nos ofrecen los mapas de calor. Sin embargo, no debemos olvidar que la correcta interpretación de dichos resultados; y sobre todo la correcta resolución de los mismos, es cosa nuestra. Por lo tanto os aconsejo que antes de actuar “a lo loco” os toméis un tiempo para decidir cuál es la acción más apropiada para conseguir mejores resultados, teniendo presente la información suministrada por estos reveladores mapas de calor web.

¿Cómo puedo conseguir un mapa de calor para mi web?

Existen muchos recursos para obtener mapas de calor, pero los mejores son de pago. También podemos encontrar gratuitos, pero no con las mismas funcionalidades ni eficacia que los primeros. A continuación vamos a indicaros algunos de los más recomendados. Todos ellos son de pago. Pero la inversión merece realmente la pena, porque muy pocas herramientas nos ofrecerán unos datos tan representativos sobre cómo interactúan nuestros usuarios con nuestro site.

El proceso para poder obtener resultados es muy similar al que emplea Google Analytics. Sólo debemos registrarnos en la herramienta o programa correspondiente e insertar dentro de la página que queramos analizar el código de rastreo que cada uno de dichos programas nos facilite. A partir de ahí, el sistema realiza el resto del trabajo: seguimiento, recogida de datos y representación de resultados. 

Crazy Egg (http://www.crazyegg.com/)

brsd

ClicTale (http://www.clicktale.com/)

clicktale

Lucky Orange http://luckyorange.com/)

lucky_orange

Click Heat (http://www.labsmedia.com/clickheat/index.html)

click_heat

Reinvigorate (https://www.reinvigorate.net/ )

rein_vigorate

Ejemplo creativo con la tecnología de “seguimiento del ratón”

Para ponerle el broche final a este post, aquí os dejo un enlace en el que podréis ver cómo el grupo holandés “Light Light” consiguió convertir su videoclip “Kilo” en viral gracias a la teconología empleada en los mapas de calor. La tecnología de seguimiento del ratón.

Aquí podéis ver un vídeo del resultado. ¡Seguro que os gustará!

http://www.youtube.com/watch?v=eRYD5ZFO9UE

Y…si queréis añadir vuestro puntero a los miles y miles de punteros registrados, pinchad sobre el siguiente enlace y ¡comenzad el recorrido!

http://donottouch.org