Mapas de calor (heatmaps): Qué son, para qué sirven y por qué usarlos

 En Diseño web, Marketing Digital, Tienda Online

Unos de los puntos más importantes en cualquier estrategia de marketing es mejorar y optimizar nuestra plataforma de manera continua, ya sea una tienda online, una web de servicios o una landing page. Conocer qué zonas y elementos de nuestra web generan un mayor y mejor impacto sobre los usuarios es vital para tomar decisiones sobre lo que está funcionando, lo que no y lo que debe mejorarse.

Los distintos servicios de analítica nos aportan en este sentido datos valiosos en cuanto a cómo perciben los usuarios nuestra web y el uso que hacen de ella. Pero a menudo esta información es más difícil de interpretar a nivel de elementos de interfaz o su parametrización no resulta tan ágil como se desearía.

Los mapas de calor se utilizan, en este sentido, para identificar cuáles son los puntos que centran la atención del usuario a través de interacciones y pautas de comportamiento pre-estabecidas.

Percepción del cerebro sobre formatos digitales

El ojo humano sigue determinados patrones de lectura a la hora de “leer” una web. Estos patrones presentan una regularidad o esquemas en relación a cómo percibimos la realidad y sus formatos de lectura. De ahí que cuando leamos una web nos basemos en un patrón de lectura en Z o en F; es decir, realicemos una lectura según unos patrones que el cerebro tienen preconfigurados para tal fin. La Fondeu (Fundación del Español urgente) tiene algunos breves artículos que condensan este tema.

Los referentes en usabilidad han elaborado, con mayor o menor controversia, un canon propio sobre la forma de percibir la información sobre formatos digitales y cómo debería ser presentada. Éste es el caso, por ejemplo, del celebrado Jakob Nielsen y sus estudios sobre usabilidad web.

En este contextos, los de la percepción de la mente sobre información en soportes digitales, el Neuromarketing ha surgido como una técnica que aplica la neurociencia al terreno del marketing, con el fin de identificar los puntos claves que motivan la toma de decisiones en procesos concretos. Analizar los niveles de atención, emoción o memoria forman parte de los procesos que son tenidos en cuenta. La forma en cómo nos relacionamos con lo que nos agrada y nuestra respuesta ya estaba presente en obras capitales como Visión interior de Semir Zeki en la relación de la belleza con el cerebro a través de la neuroestética.

La raíz de la neurociencia es profunda frente al desarrollo de internet como forma de comunicación. Investigadores como Joseph E. LeDoux, Daniel Kahneman o Muhzarin Banaji han postulado teorizaciones propias que albergan desde las motivaciones de la toma de decisiones en zonas de incertidumbre a la percepción del sujeto frente a las valoraciones sociales y de grupo.

Cómo trabajan los mapas de calor

Los mapas de calor, a fin de presentar la información de la manera más gráfica y útil posible utilizan como forma de representación una termografía, estableciendo una jerarquía de dos polos; es decir, por una parte, se hace a través del empleo de colores cálidos (generalmente rojo, naranja y amarillo) para mostrar las zonas de acción de clics o interés de foco, frente a una gama de colores fríos (azul, verde) que semantizan las zonas que no reciben atención por parte del usuario.

Este tipo de técnicas se basa en el concepto de eye-tracking, tecnología que refiere a un conjunto de procedimientos técnicos que permiten monitorizar el modo en que una persona mira una imagen o registro visual. Si bien en algunos casos, como veremos, estas técnicas no tienen una fiabilidad del 100%, sí debería integrarse en cualquier plan analítico integral para la tomas de decisiones, especialmente sobre UI (interfaz de usuario) y UX (experiencia de usuarios).

Mapas de calor basados en clicks (Click Heatmaps)

Clic Heatmap

Este tipo de mapas registran las zonas donde se hacen clicks. Se trata de uno de los mapas más empleados, porque generan información a corto plazo sobre elementos que podemos definir con mucha claridad (por ejemplo, un banner con una promoción especial).

Se engloban dentro de los mapas de calor por la similitud en los resultados obtenidos, ya que comparten una matriz de datos fundamental. Al registrarse la interacción de los usuarios, el grado de verosimilitud de los datos obtenidos es muy relevante. La información que obtenemos se basa directamente sobre acciones concretas como clicks en enlaces, banners, y otros elementos afines. Permiten tomar decisiones a corto plazo (por ejemplo; si un banner para una determinada campaña está funcionando y qué CTR recibe).

Mapas basados en el movimiento del ratón (Mouse movement Heatmap)

Mouse Heatmap

Esta tipología registra el movimiento del ratón y, aunque los datos derivados no tienen una fiabilidad completa, sí aportan valor a la analítica general, especialmente si los cruzamos con datos de otros mapas de calor. Los movimientos de ratón tienden a alinearse con el movimiento de nuestros ojos; existe así una pauta regular e intuitiva que rige el movimiento del ratón semi-inconscientemente hacia los focos de atención. En la Carnegie Mellon University en Pensilvania descubrieron que esta alineación llega hasta unos porcentajes que alejan cualquier duda de estos datos.

…84% of the times that a region was visited by a mouse cursor, it was also visited by (users’) eye gaze. In addition, 88% of regions that were not gazed by the eye were also not visited by a mouse cursor.

Mapas de Scrool (Scroll Heatmaps)

Scroll Heatmap

Se utilizan en páginas que desarrollan mucho scroll a fin de poder detectar el nivel de profundidad del scroll. Es decir, hasta qué punto llega el usuario a hacer scroll y cuál es el límite bajo el cual no existe navegación. Esto resulta especialmente útil para identificar las zonas que mayor atención reciben por parte de los usuarios, de modo que seamos conscientes sobre qué zonas debemos prestar más atención frente a otras zonas grises. Esto nos ayudará a identificar la línea de atención de nuestros clientes o usuarios más allá del famoso above the fold. Un enlace interesante respecto a esto último lo encuentras aquí.

Qué utilidad real tienen los mapas de calor

La utilidad principal, como hemos visto, es trackear zonas concretas de la web frente a la actividad media del usuario genérico en nuestra web. Entre las aplicaciones más destacadas podemos destacar las siguientes:

  • Analizar nuestros procesos de conversión: Nos ayudará a detectar si existen problemas en las fases de conversión, y en su caso a identificarlos de manera directa y proponer soluciones. Por ejemplo, si en una página de proceso de compra de una tienda online registramos problemas en un paso de compra, o si un formulario de una web de servicios recibe problemas por algún elemento.
  • 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 un ordenación de CTAs (Call to actions). Los CTAs son las llamadas a la acción sobre acciones específicas (“Compra ahora”, “solicita presupuesto”, “clica aquí”, etc), y se organizan según el plan de objetivos de cada página. Hay un CTA principal (por ejemplo, “Compra ahora”) y una jerarquía de CTAs si no se cumple el CTA principal (por ejemplo, “Suscríbete a nuestra newsletter”). Los mapas de calor nos ayudan en este sentido a medir si el usuario está clicando en los elementos que se han desarrollado para tal acción o si, en cambio, debemos realizar una mejora. (modificar CTA principal, cambiar de ubicación, color, acompañar de imagen transaccional, etc.)
  • Comprobar la efectividad de los elementos de información: Resulta vital conocer si determinados elementos están cumpliendo correctamente su función a nivel global. Por ejemplo, si hay elementos en el menú principal que no reciben clicks y pueden cambiarse por otros elementos más transaccionales, o si hay algún elemento pasivo que cobra protagonismo frente al usuario (por ejemplo, icono de gastos de envío gratis que no está enlazado pero que recibe un gran número de clics porque el cliente necesita ampliar esta información). Esto nos ayudará a mejorar nuestra interfaz (UI) y hacer una experiencia cliente (UX) más fuerte y consecuente.
  • Tener un feedback sobre nuestra interfaz: La interfaz supone la forma mediante la cual interactuamos con la página web y tiene un valor crucial. Aunque este punto se encuentra presente de manera transversal en los 3 apartados anteriores, los mapas de calor nos ayudarán a identificar el grado de satisfacción de nuestra interfaz y el grado en que cumple con el cometido para el que fue diseñado. Esto resulta especialmente útil en webs que presentan un diseño fuera de los cánones (firmas de moda, webs de tendencias, etc.)
  • Usos particulares: Bajo usos particulares englobamos todos aquellos programas de objetivos que escapan a los usos generales. Por ejemplo, en webs que monetizan a partir de redes publicitarias, la ubicación de los banners frente al comportamiento del usuario establecerá una política de tarifas publicitarias, gracias al scroll map sabremos hasta qué profundidad nuestros anuncios son vistos por los visitantes.

Recursos disponibles para implementar un mapa de calor

HeatmapsExisten decenas de soluciones para instalar mapas de calor en nuestra web, pero sólo te vamos a reseñar 3: La mejor (y de pago), la que utilizaríamos en cualquier proyecto para iniciarnos (gratuita) y la de Google (que tienen que ir mejorando con el tiempo).

  • Crazyegg: Crazyegg es el rey de los mapas de calor. Bajo esta firma se encuentra Neil Patel. Se trata de una solución de pago, dispone de una suscripción gratuita para los primeros 30 días. Es una solución recomendada para proyectos de una cierta envergadura.
  • Sumome: Se trata de un formato gratuito basado en el concepto de plugin, se implementa sobre la plataforma. Tiene una más que correcta integración con WordPress, tiene plugin propio, aunque recomendamos su integración vía Google Tag Manager. No se trata de la opción más potente pero Sumome es una buena opción para una toma de datos inicial ya que cumple con creces su cometido.
  • Page Analytics (Google): Teníamos que incluir esta opción porque es la oficial de Google, pero dista mucho de lo que debería ser un mapa de calor aún. Para poder utilizarla hay que instalar una extensión en Chrome, que os dejo para instalar pulsando aquí.

En resumen

  • De manera conjunta a nuestro servicio de analítica (Google Analytics, Yandex o sistema elegido externo o interno) los mapas de calor deberían ser nuestra siguiente opción.
  • Suponen una fuente de información valiosa que no necesita de grandes conocimientos técnicos para poner en práctica e interpretar. Si además conseguimos cruzar esta información con valores analíticos (porcentaje de rebote, tiempos de estancia, salidas, embudos de conversión, etc.) conseguiremos perfilar el modo en que nuestros usuarios navegan por la web.
  • Esta información nos ayudará a mejorar nuestro CRO y en consecuencia nuestra campaña global de marketing.

Nuevo llamado a la acción
Publicaciones recientes