Mapas de calor: qué son, para qué sirven y por qué los necesitas en tu Drupal

04/07/2018
Mapas de calor en Drupal

Cuando trabajamos en un proyecto Drupal, muchas veces nos centramos en que el Backend funcione muy bien o que el Front quede perfecto pero, y una vez entregado el portal, ¿recibe visitas de calidad? ¿La lógica que montamos responde a las necesidades del usuario?¿Los usuarios entran y se van sin navegar?

Estas son algunas de las preguntas que nos hacemos en la fase posterior a la entrega y que nos ayudan a crear portales vivos que se adaptan al uso real que los usuarios hacen de ellos.

Además de Google Tag Manager, una de los recursos más importantes que nos ayudan a conocer estos datos y estudiar el comportamiento del usuario son los Mapas de calor.

Te explicamos todo lo que necesitas saber sobre los mapas de calor y cómo utilizarlos en tu proyecto Drupal.
 

¿Qué son los mapas de calor?

Los mapas de calor o heat maps son gráficos que recogen datos de los usuarios mientras navegan por la web y, mediante códigos de colores, hacen muy fácil identificar las zonas que atraen su atención.

Cuando ideamos la estructura de un portal, siempre tenemos en cuanta que el ojo no se dirige con la misma frecuencia a una área que a otra, por tanto solemos diseñar estructuras en forma de F o Z. Sin embargo, no siempre es suficiente, ya que depende también de colores, formas o animaciones que atraen la atención del usuario.

Los mapas de calor nos dejan saber cuáles son esas zonas, con el fin de aprovecharlas para poder poner en esos puntos más relevantes los elementos que nos interese mostrar al usuario.

¿Cómo funcionan los mapas de calor?

El concepto de los mapas de calor deriva de la técnica de eye tracking usada en los estudios de psicología y marketing para detectar dónde se posa la mirada al ver un texto o imagen.

Los mapas de calor permiten un análisis bastante menos intrusivo y objetivo, ya que recogen los datos cuando los usuarios navegan de forma habitual, en su casa y con sus dispositivos, sin haber sido citados a un test y saber que están siendo observados.

El proceso comienza juntando los datos recogidos y mostrándolos sobre un único mapa. Cuantos más datos se hayan tenido en cuenta, más veracidad tendrá el mapa y veremos más diferenciadas las zonas de alta interacción o atención frente a las de menos.

Su forma de representación se basa en la termografía y utiliza una jerarquía de colores en la que 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 interés están representadas por las gamas de colores fríos (verde, azul, turquesa..).

 

Cómo funcionan los mapas de calor

¿Para qué se utilizan los mapas de calor?

El gran reto para una empresa que necesite la conversión de los usuarios en su web es averiguar qué es lo que quieren o buscan. Para ello, es totalmente necesario conocer cada perfil al detalle.

En el mundo digital actual, es necesario mejorar y optimizar nuestros portales Drupal de manera continua, basándonos en datos reales y conociendo el uso que se hace de ella.

Para poder conocer estos perfiles hay muchas técnicas que pueden aplicarse en UX, tanto de investigación como de análisis, pero ante una web que ya se utiliza, lo más útil es conocer cómo interactúan ya dichos usuarios: qué es lo que ven, qué es lo que les llama la atención, qué es lo que les atrae…

Con estos datos, pueden proponerse cambios en la interfaz, en los procesos e incluso en las funcionalidades. Una vez realizados los cambios se puede medir su impacto e incluso, utilizando test A/B conseguimos no solamente saber qué opción funciona mejor, sino de qué manera está funcionando para poder optimizarla aún más.

¿Qué podemos medir con los mapas de calor?

Como estamos viendo, las utilidades son muchas, pero siendo objetivos, la principal es trackear zonas concretas de la web frente a la actividad media del usuario genérico. No obstante, aquí te mostramos algunas funciones más de los mapas de calor:

Analizar procesos de conversión

Detectar si existen problemas en las fases de conversión, identificarlos de manera directa y proponer soluciones, como por ejemplo en un formulario.

Verificar prácticas de CTAs

Cada vez que se desarrolla una página existe una jerarquía de elementos, y dentro de esa jerarquía hay una ordenación de CTAs (call to action).

Comprobar la efectividad de los elementos de información

Por ejemplo, si hay elementos en el menú principal que no reciben clics y pueden cambiarse por otros elementos más transaccionales, o si hay algún elemento pasivo que cobra protagonismo frente al usuario.

Funcionalidades de los mapas de calor

Analizar la eficacia de nuestro embudo de conversión

Con los mapas de calor 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.

Ubicar correctamente nuestras llamadas a la acción (CTA)

Al conocer los puntos que más atención reciben, tendremos la clave para saber dónde ubicar las llamadas a la acción.

Sin embargo, un error común es que al recolocar los call to action se suelen sustituir por el elemento que captaba la atención. Lo que debe hacerse es ubicar esta llamada cerca del elemento que está captando la atención puesto que a veces no es la zona sino el elemento quien está consiguiendo la fuerza.

Por este motivo, es importante contar con un UX que nos asesore a tomar las decisiones basándonos en estos datos.

Tipos de mapas de calor

Actualmente, se pueden obtener diferentes mapas de calor basados en las mismas visitas y mismos usuarios.

Todos ellos nos dan una información muy importante y valiosa, que debe ser analizada de manera diferente y complementarse entre ella.

Mapas de movimiento de ratón

Este tipo de mapas, registran las trayectorias del ratón y las zonas en las que pasa más tiempo.

Ofrecen mucha más información de los puntos de interés y las zonas con más actividad y en las que se concreta la navegación del usuario, teniendo un peso determinante para evaluar el grado de conversión de dicha página web.

La utilidad de esta opción viene determinada por el hecho de que, según la Carnegie Mellon University, hay una correlación del 88% entre el movimiento del ratón y el del ojo. 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.

 

Mapas de movimiento de ratón

 

Mapas de clics

Son los que ofrecen una mayor fiabilidad en sus resultados ya que miden una acción concreta y efectiva como es el click.

El mapa refleja por colores las zonas o elementos de más interacción, pero también el número de clics frente al total de visitas. Con ello directamente hablamos en términos de conversión directa, porque la información ofrecida está basada en comportamientos tan claros como hacer clic sobre un botón de compra.

Estos mapas no sólo nos ayudan a ver qué elementos llaman la atención por haberlo destacado lo suficiente, ya que es lo que se pretendía, sino también poder identificar errores de usabilidad, como por ejemplo los clics sobre elementos que no son ‘clicables’.

La información que se obtiene ayuda a tomar decisiones a corto plazo o saber qué elemento del catálogo que hay en una home es el más visitado.

Mapas de clics

 

Mapas de scroll

Este tipo de mapas se utilizan sobre todo en páginas únicas con mucho scroll.

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

Estos mapas nos dejan ver que los botones y formularios de una landing page, por ejemplo, no deberían estar colocados igual en una página que frecuentemente se lee hasta el final y en otra en la que no. Esto nos ayudará a identificar la línea de atención de nuestros clientes o usuarios más allá del famoso above the fold.

Mapas de scroll

 

¿Por qué debemos aplicar mapas de calor en un proyecto Drupal?

Los mapas de calor son fáciles de conseguir y nos aportan gran cantidad de datos interesantes, pero la interpretación dependerá de la persona que lo analice, del mismo modo que las acciones de mejora a llevar a cabo.

Esta interpretación de los mapas, si se combina con otros datos de analítica como la tasa de rebote o el tiempo en cada página, nos dará una información más real y contrastada, ayudando mucho más a tomar las decisiones correctas.

Estos mapas son una técnica muy útil para la investigación real, ya que no resultan intrusivos, no hay descontextualización para el usuario y además no afectan al rendimiento.

 

¿Cómo podemos utilizar mapas de calor en un proyecto Drupal?

Nosotros utilizamos HotJar que tiene una versión gratuita y que es muy intuituivo y fácil de usar. La integración de esta herramienta en Drupal, se puede hacer de tres formas diferentes:

  • Incrustando directamente el código que nos proporciona la herramienta en el portal.
  • Instalar el módulo especifico para ello.
  • Si usamos Google Tag Manager, insertar el código a través de una etiqueta.

Esperamos que este post os haya servido de ayuda y que conozcáis un poco mejor los mapas de calor y las utilidades que nos ofrecen para sacarle el máximo partido a nuestros proyectos Drupal.