Tipo de artículo: Artículo original Temática: Calidad de Software
Recibido: 15/06/2019 | Aceptado: 20/09/2019 | Publicado: 22/09/2019
Mapas de calor en sitios web
Heatmaps in web sites
Zucel Peña González *, Yaimí Trujillo Casañola2
Universidad de Oriente. Avenida de las Américas s/ n. zreina@uo.edu.cu
*
Autor para correspondencia: zreina@uo.edu.cu
Resumen
Para optimizar constantemente la usabilidad de nuestros sitios web es necesario conocer en todo momento lo que hace
el usuario mientras navega, adónde dirige su mirada, qué partes de la página llaman más su atención o cómo se mueve
e interactúa a través de ésta, para poder analizar cómo piensa y poder utilizar esta información para mejorar nuestros
sitios web. Las pruebas de usuario ofrecen una solución para este tipo de análisis, pero los usuarios al estar en un
ambiente extraño y sabiéndose observados, pueden comportarse de forma diferente a cómo lo harían normalmente.
Actualmente surgen nuevas técnicas de análisis remoto del comportamiento de los usuarios en la web que permiten
analizar cómo navegan y su comportamiento en un entorno natural sin que estos se den cuenta. Esto hace que los
resultados del comportamiento real de los usuarios sean más confiables. Los mapas de calor son estas importantes
herramientas. Existen diferentes tipos de mapas de calor: mapas de calor por clic, mapas de calor por movimiento del
ratón y mapas de calor por desplazamiento vertical. Cada uno de ellos permite interpretar algún tipo de
comportamiento específico de nuestros usuarios. Existen herramientas para generar estos mapas de nuestros sitios
web. La elección de cada una de ellas depende de la tecnología con la que tengamos implementado nuestro sitio web
específico entre otras. El objetivo fundamental del trabajo es demostrar que los mapas de calor son herramientas
potentes para mejorar la usabilidad de los sitios web.
Abstract
To constantly optimize the usability of our websites it is necessary to know at all times what the user does while
browsing, where he directs his gaze, what parts of the page attract his attention or how he moves and interacts through
it, in order to analyze how you think and be able to use this information to improve our websites. User tests offer a
solution for this type of analysis, but users being in a strange environment and knowingly observed, may behave
differently than they would normally. Currently, new techniques for remote analysis of the behavior of users on the
web are emerging that allow them to analyze how they navigate and their behavior in a natural environment without
them noticing. This makes the results of the actual behavior of the users more reliable. Heat maps are these important
tools. There are different types of heat maps: heat maps per click, heat maps by mouse movement and heat maps by
vertical displacement. Each of them allows us to interpret some specific behavior of our users. There are tools to
generate these maps from our websites. The choice of each of them depends on the technology with which we have
implemented our specific website among others. The main objective of the work is to demonstrate that heat maps are
powerful tools to improve the usability of websites.
Keywords: usability, web applications, heatmaps, eyetraking
Introducción
Es posible tener una idea del comportamiento general de los usuarios cuando navegan por un sitio web a través de los
datos de analítica web. Sin embargo, el alcance de análisis más detallados, sobre elementos o partes concretas de una
página web, resulta bastante limitado y, muchas veces, sujeto a diversas interpretaciones, no siempre posibles de
determinar o aislar del conjunto de datos (Nielsen, 2000), (Olsina, 2001). Saber lo que hace el usuario mientras
navega, adónde dirige su mirada, qué partes de la página llaman más su atención o cómo se mueve e interactúa a
través de ésta, nos permite analizar cómo piensa y podemos utilizar esta información para mejorar la respuesta o
estructura de nuestras páginas. Las pruebas de usuario ofrecen una solución para este tipo de análisis. Se reúne un
determinado número de usuarios, se observan cómo interactúan mientras navegan por un sitio web, se les puede hacer
rellenar un cuestionario y finalmente se analizan estas observaciones y respuestas (Alva, 2005), (Covella, 2005),
(Pérez, 2007). Realizar este tipo de investigación requiere una importante inversión, tanto para reunir a un número
al estar en un ambiente extraño y sabiéndose observados, pueden comportarse de forma diferente a cómo lo harían
normalmente, alterando los resultados (Santos, 2010), (Suárez, 2011), (Alonzo, 2012).
Actualmente surgen nuevas técnicas de análisis remoto del comportamiento de los usuarios en la web que permiten
analizar cómo navegan y su comportamiento en un entorno natural sin que estos se den cuenta (Perurena, 2012). Estas
técnicas son los mapas de calor web o heatmap, que brindan resultados más fiables y con menos inversión,
fundamentalmente para el análisis de los datos recopilados. Usando estas técnicas se puede determinar qué partes de
nuestras páginas web llaman más la atención al usuario, dónde hace clic o en qué zona de la página permanece más
tiempo. Esto permite mejorar la experiencia de usuario y mejorar la tasa de conversión de nuestros sitios (Perurena,
2012), (Saquete, 2014).
La generación de mapas de calor web se basa en técnicas de seguimiento del ojo (“sistemas de seguimiento visual o
eye tracking”), en las que se utilizan diversos instrumentos para, literalmente, detectar hacia qué elemento o área de
una página está mirando un usuario, cómo se mueven sus ojos a través de ésta y dónde se detiene para mirar con más
detenimiento (Saquete, 2014), (Silva, 2019).
Aunque una técnica muy útil, el eye tracking presenta dos inconvenientes (Molina, 2016), (Drewes, 2019):
Requiere unatecnología muy costosa, no disponible en los dispositivos de los usuarios domésticos.
Requiere una participación consciente de los usuarios; es decir, saben que son observados y, como hemos
dicho, esto puede afectar a su comportamiento.
Los mapas de calor o heatmap resuelven estos inconvenientes utilizando una tecnología disponible en todos los
ordenadores: el ratón. La premisa de partida de los mapas de calor es que, cuando el usuario navega y se mueve a
través de una página, el movimiento del cursor del ratón coincide, con un alto grado de precisión, con el movimiento
de sus ojos. La utilidad de esta opción viene determinada por el hecho de que, según la Carnegie Mellon University,
hay una correlación del 84% entre el movimiento del ratón y el del ojo (Saquete, 2014), (Fernández, 2018), (Molina,
¿Qué es un mapa de calor o heatmap?
El concepto de mapa de calor deriva de la técnica usada en los estudios de psicología y marketing llamada “eye tracking” o “sistema de seguimiento visual”, que se usa para detectar dónde se posa la mirada al ver un texto o imagen
(Molina, 2016). Precisamente el objetivo de estos mapas es, a partir del comportamiento de los navegantes de la web, obtener datos útiles para mejorar aspectos de la misma (Saquete, 2014), (Molina, 2016), (Lee, 2019).
A través de una representación visual basada en un código de colores de fácil lectura e interpretación, el mapa de
calor web de una página muestra qué elementos o áreas de ésta presentan más interés e interacción para el usuario
(Molina, 2016). Los mapas de calor basan su forma de representación se basa en la termografía (técnica que permite
calcular temperaturas a distancia, con exactitud y sin necesidad de contacto físico con el objeto a estudiar) y utiliza
una jerarquía de colores en la que los puntos de más interés, generalmente aquellos en los cuales el ratón ha
permanecido inactivo durante más de segundo y medio, 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 y otros) (Saquete, 2014), (Fernández, 2018).
Así, para generar los mapas de calor web se utilizan las siguientes técnicas (Steil, 2019):
Seguimiento del movimiento del cursor del ratón a través de la página.
Detección de la posición en la página donde el usuario hace click y, por tanto, del elemento que está
cliqueando.
Seguimiento del desplazamiento (“scroll”) vertical de la página.
De esta forma, se puede determinar qué partes llaman más la atención al usuario, dónde hace click o en qué zona de la
página permanece más tiempo, generando el correspondiente código de colores del mapa de calor.
Ahora bien, para que la información recopilada sea fiable y represente un patrón de comportamiento de los usuarios,
debemos recoger un número significativo de datos; no basta con analizar la navegación de un pequeño número de
usuarios. Se considera que se puede empezar a identificar un patrón fiable de comportamiento a partir de las
Materiales y métodos o Metodología computacional
Tipos de mapas de calor
Cada una de las técnicas mencionadas permitirá generar, a su vez, un mapa de calor distinto, que deberá ser analizado
e interpretado en función de la técnica utilizada. Para cada tipo de mapa de calor se utiliza el mismo código de colores; lo único que varía es la interpretación de su significado, acorde a la técnica utilizada en el mapa (Saquete, 2014), (Fernández, 2018).
Mapas de calor por clics
Recogen los puntos de la página web donde los usuarios han hecho clic con el ratón. Es importante tener en cuenta
que no solo recoge elementos activos, como enlaces o botones, sino también elementos pasivos, como imágenes texto
sin enlaces (Mena, 2015), (Saquete, 2014).
Dado que corresponde a una acción muy concreta e identificable, que requiere un acto consciente por parte del
usuario (hacer clic), la información presentada en estos mapas es muy fiable, salvo error inconsciente del usuario que,
como tal, será poco frecuente y aleatorio. Podemos localizar los lugares donde más clic se hace y descubrir
posibles fugas de conversión, es decir, lugares donde el usuario cree que hay un enlace y no existe tal
elemento reduciendo de esta manera el CRO. La principal idea del análisis de estos mapas es generar
hipótesis que mejoren la arquitectura de nuestro sitio web o aplicación para mejorar la conversión.
Técnicamente, cada vez que un usuario hace clic, la herramienta es capaz de recuperar el elemento
HTML en el cual se ha hecho clic y generar en base a esto un mapa de calor superpuesto en nuestra web
(Fernández, 2018).
Pese a que varía en función de la herramienta que estemos usando, generalmente los mapas de clics se
representan bajo los siguientes colores:
Colores vivos, como rojos o amarillos: indican las zonas más clicadas por nuestros usuarios.
Colores fríos, tales como azules o verdes: representan zonas con bajo interés de clic.
Para realizar el análisis nos centraremos en los puntos más coloridos: rojos y amarillos. Estos puntos
indican el contenido más relevante para el usuario ya que son los más clicados. Así podremos empezar a
extraer hipótesis de qué partes están generando más interés y cuales menos. Pero no todos los elementos no
clicables y están siendo clicados suponen un problema. Una de las informaciones más valiosas que podemos
extraer de un mapa de clics es lo que están leyendo nuestros usuarios, puesto que gran parte de los usuarios
tenemos por costumbre el subrayar aquello que vamos leyendo (Mena, 2015), (Saquete, 2014).
Figura 1. Representación de mapa de calor por clic.
Mapa de calor por movimiento de ratón
Recogen el cambio de posición del ratón, registrando tanto cuando está en movimiento como cuando está parado. De
esta forma, se tiene una referencia de las áreas de la página web que atraen o son de interés del usuario, reflejándose
en el mapa con el correspondiente código de color (Mena, 2015), (Saquete, 2014).
En este tipo de mapas, se presupone que la mirada del usuario sigue el mismo trayecto que el cursor del ratón y que,
cuando su mirada está focalizada en alguna parte de la página, el cursor está también alrededor de esa zona. Estos
hacia dónde dirige la vista. Puede que el usuario mueva mucho el ratón por la zona inferior de la web y, sin embargo,
esté leyendo la zona superior de la página web. Por lo tanto, el análisis de la información que estos mapas no es
concluyentes (Mena, 2015), (Saquete, 2014).
La siguiente figura muestra una representación de mapa de calor de movimiento del ratón:
Figura 2. Representación de mapa de calor de movimientos del ratón.
Mapas de calor por desplazamiento vertical
Muestran de una forma visual hasta qué puntos se desplazan nuestros usuarios en una página web. Por tanto,
representa las partes más vistas de nuestra página (calientes) y las menos visualizadas (frías).
Cuando un usuario accede a una página web, tiene una primera visión de su contenido; es decir, la parte superior de la
página que es visible directamente en pantalla sin ninguna interacción del usuario. Por tanto, tenemos claro qué
contenidos siempre verán los usuarios, pero no podemos saber hasta dónde llegan a leer o revisar el resto de la página
El mapa de desplazamiento nos lo muestra, con una distribución muy característica, con mayor índice de visitas en la
parte superior, que va disminuyendo a medida que se desciende por la página. Este tipo de mapas nos sirven para
conocer hasta qué punto los usuarios se encuentran "interesados" a nuestros contenidos. Nos sirven para
conocer hasta donde suelen leer y en qué momento abandonan la página. Lo importante de este tipo de
mapas es descifrar por qué los usuarios abandonan la página tan pronto, si por falta de interés, por falta de
alicientes, etc.
Las herramientas de este tipo de tecnología conforman el reporte en base a la información de cuanto
scroll han hecho los usuarios en nuestras webs. Esto quiere decir que, aunque el usuario haya bajado su
scroll un número de píxeles determinado, no nos podemos asegurar que el usuario haya prestado atención a
ciertos elementos. Esto está dado por que estos mapas no realizan un seguimiento ocular del usuario. Por
tanto, el hecho de que un mapa de desplazamiento nos indique que un usuario ha hecho scroll hasta una
sección concreta de la página, no nos garantiza que éste haya prestado atención al contenido.
La siguiente figura muestra una representación de mapa de calor de movimiento del ratón:
Creación de mapas de calor
En la actualidad existen muchas herramientas para la creación de mapas de calor. Algunas son gratuitas pero la
mayoría son de pago. Sin embargo, en muchos casos la versión de prueba de estos proveedores nos servirá para
hacernos una idea del poder real de estos mapas. Al probar estas herramientas podemos ver si los resultados obtenidos
no son significativos o puede que realmente darnos cuenta que vuestra web tiene numerosos fallos y se necesita de
esta herramienta para solucionarlos (Saquete, 2014).
Herramientas
Proveedores gratuitos de mapas de calor:
Yandex Metrika: Esta herramienta nos permite obtener un mapa de calor de clic y de scroll de forma
totalmente gratuita. La única pega de esta herramienta es su idioma, puesto que solo se encuentra en inglés o
ruso.
Heatmap.me: Este proveedor de mapas de calor nos permite obtener heatmaps para nuestra página web de
forma gratuita. Sin embargo, su interfaz es bastante compleja. Esta herramienta solo se encuentra disponible
en inglés.
Monkeytracker.cz: Este proveedor pese a ser checo, permite disfrutar de mapas de calor gratuitos a cambio
de un simple registro. Su interfaz la encontraremos en inglés o checo y nos permitirá obtener mapas de calor
de clic o de scroll. Su versión free no soporta webs en HTTPs.
Proveedores de pagos de mapas de calor:
CrazyEgg: se destaca por tener un mapa único, el Confetti, que consiste en puntos coloridos en que cada
punto es un click y cada color un valor de una métrica seleccionada, que puede ser nuevos usuarios, país,
navegador, fuente, campaña, etc.
Lucky Orange: tiene una solución similar, pero menos avanzada por su menor número de filtros.
Mouseflow: no es posible ver los filtros en los propios mapas como hace CrazyEgg y Lucky Orange. No
obstante, es posible filtrar con varias métricas previamente al abrir el mapa.
Métricas
En general los proveedores de estas herramientas ofrecen una leyenda basada en un código de colores para
el análisis de estos mapas generados que nos ayudará a entender cada una de ellos. Algunas herramientas
ofrecen un sistema de representación basado en porcentajes. Con este sistema podríamos llegar a observar
qué porcentaje, del total de usuarios que entren a una página web o aplicación, han llegado a visualizar qué
partes. Las métricas más comunes de los mapas de calor son el número de clics de un elemento o área, su porcentaje
en relación al total de clics y porcentaje de scroll (Saquete, 2014), (Fernández, 2018).
Métricas más usadas (Fernández, 2018):
Cuántas veces un usuario pasa el ratón por un elemento.
Porcentaje de clics sobre el número de usuarios.
Media de tiempo en la que los usuarios pasan. Útil para determinar el tiempo que el usuario gasta
para considerar un elemento.
Número de usuarios que clican sobre un elemento, descartando los múltiples clics de un mismo
usuario. Esto es útil si comparamos con el total de clics, para ver cuantos usuarios repiten clics sobre
un mismo elemento.
Tiempo medio que los usuarios tardan hasta pasar el ratón sobre un elemento. Puede interpretado
como el tiempo que un usuario tarda en “encontrar” un elemento.
Tiempo que un usuario tarda hasta hacer clic.
¿Para qué usar mapas de calor?
Medir en tiempo real cómo se perciben los cambios que está introduciendo en el sitio web.
Jerarquizar, combinar áreas que más clics reciben con aquellas que necesitan un impulso.
Para revisar si los elementos más importantes de nuestros sitios web están en el sitio adecuado.
Observar qué contenido es interesante o lo suficientemente convincente para que los visitantes del
Generación de mapas calor para sitios web
El uso de estas herramientas permitirá hacer los ajustes necesarios para que el contenido del sitio genere un mayor
interés y sea más atractivo para los usuarios.
La generación de los mapas de calor puede ser de las dos formas siguientes (Peñarroya, 2018):
1. Instalando un plugin, por ejemplo, en WordPress, que recopila la información y permite gestionar gran parte
de los mapas de calor desde el panel de control de wordPress. Pueden ser SumoMe o HotSpots, que incluyen
herramientas de generación y gestión de mapas de calor.
2. Utilizando un servicio web externo. En este caso, hay que copiar un código (“script”) dentro de nuestro sitio
web y toda la administración, configuración y gestión de los mapas de calor web se realiza en el sitio web del
proveedor. Se pueden usar Heatmap.me o HotJar.
La generación de mapas de calor utilizando un servicio web es bastante sencilla pero cuando se trabaja con sistemas
gestores de contenido es un poco más compleja.
Ejemplo para generar mapas de calor en WordPress
Ilustraremos el ejemplo con HotSpots (plugin para generar mapas de calor por clic), que es un plugin gratuito para
WordPress y diseñado para analizar el comportamiento de los lectores y visitantes de un sitio.
Para instalar este plugin se siguen los pasos generales de instalación de cualquier plugin. Para activarlos tan
sólo se instala o bien desde el repositorio oficial (Plugins>Añadir nuevo) o bien vía FTP. Como
requisito el sitio debe estar construido conHTML5.
Una vez lo instalas sólo tienes que activarlo y, si quieres, modificar las opciones (tiempo de
permanencia para que empiece a trackear, páginas y post donde quieres activarlo etc.).
Una vez instalado ir a Ajustes>HotSpots y lo tendrás debajo de las opciones de configuración, eso sí,
te tardará unos poquitos días en funcionar hasta que recoleccione datos.
En la figura se muestra como la información generada por el plugin es almacenada directamente en la base de datos
de la instalación de WordPress.
Resultados y discusión
Una funcionalidad importante de las herramientas dedicadas a los mapas de calor son las grabaciones de sesiones.
También poseen un conjunto de métricas para apoyar en el análisis más detallado de estas herramientas. El idioma es
una importante limitación de estas herramientas. Los proveedores de pago tienen una versión de prueba gratis de
15-30 días. Se recomienda el uso de plugin en el caso de los sitios web desarrollados con sistemas gestores de
contenidos, aunque hay tener en cuenta que un plugin consume recursos de nuestro servidor de alojamiento que, en
caso de un número alto de visitas, puede afectar a su rendimiento. Es análisis de los resultados de estos mapas al ser
en su mayoría, cualitativos, es importante combinarlos con un Tests A/B siempre que sea posible.
Se recomienda la utilización de herramientas según la necesidad del negocio, y por supuesto, según el presupuesto en
el caso de las herramientas de pago:
CrazyEgg: si se necesita más profundidad en la segmentación de los mapas.
Mouseflow: si se desea obtener más detalles del comportamiento del usuario.
Lucky orange: es la mejor opción para mapas de calor dinámicos.
Hotjar: tiene el mapa de calor más básico de todos, pero su ventaja es la multitud de herramientas a un precio
más reducido que la competencia.
Conclusiones
Gracias a este tipo de herramientas, podemos tener información de numerosos datos que nos aclararán un poco más el comportamiento del usuario que visita nuestra web y, en base a ellos, determinar una serie de conclusiones que mejoren la experiencia de usuario.
Permiten obtener también datos imprescindibles a la hora de mejorar la ratio de conversión o CRO.
Es necesario, para interpretar correctamente un esquema determinado de comportamiento, analizar al menos dos de los tipos de mapas de calor; habitualmente, el del movimiento del ratón y el de los clics.
usuarios de nuestros sitios se recomienda el uso de los tres tipos de mapas y usar el resultado de cada uno de esos análisis para emitir un análisis general.
Recomendaciones
Los usuarios no se comportan igual en PC que en móvil o tablet. Algunas webs cambian su contenido en función de las distintas configuraciones de pantalla o dispositivo por el cual se conecte el usuario. No tendría ningún sentido el ver un mapa de clics de una versión PC, superpuesta en nuestra web Móvil. De ahí que casi todos los proveedores de herramientas den opciones de segmentación por dispositivo. De esta forma podremos analizar cada uno de los dispositivos por los cuales se conectan los usuarios.
Por tanto, se recomienda para un posterior trabajo hacer un estudio comparativo del comportamiento de los mapas de calor en diferentes tipos de dispositivos: PC, móvil y tablet.
Referencias
Nielsen, J.: Designing Web Usability. Indianapolis: New Riders Publishing. 2000.
González, Julia; Olsina, Luis; LaFuente, Guillermo. Portal web. Automatizando métricas Web. Disponible en:
http://ctp.di.fct.unl.pt/QUASAR/QUATIC2001/documents/abstracts/ST1_1/LuisOlsina.htm. Universidad Nacional de La Pampa. Argentina. Escuela Politécnica. Universidad de Extremadura, 2001.
Alva, María E. Metodología de Medición y Evaluación de la Usabilidad en Sitios Web Educativos. Tesis presentada
para la obtención del título de Doctora en Informática. Universidad de Oviedo. Oviedo, 2005.
Covella, Guillermo J. Medición y Evaluación de Calidad en Uso de Aplicaciones Web. Tesis de Magíster en Ingeniería de Software. Facultad de Informática. Universidad nacional de la Plata, La Plata. Argentina. 2005.
Pérez, B; Pérez A. Modelo de especificación de calidad para sitios web universitarios (MOSCAWEB). Universidad Nacional Abierta. Valencia, 2007.
Santos, L. Métricas para medir la calidad de portales web. Facultad Regional Granma de la Universidad
de las Ciencias Informáticas. Cuba, 2010.
Suárez, Mª del Carmen. Sirius: Sistema de Evaluación de la Usabilidad Web Orientado al Usuario y
basado en la Determinación de Tareas Críticas. Tesis para la obtención del título de Doctora en
Alonzo, Pedro. Revisión de modelos para evaluar la calidad de productos Web. Experimentación en portales bancarios del NEA. Trabajo final presentado para obtener el título de “Especialista en Ingeniería de Software”. Universidad Nacional de La Plata, febrero de 2012.
Perurena, L. Usabilidad de los sitios Web, los métodos y las técnicas para la evaluación. Universidad de La Habana. Facultad de Economía. Departamento de Estadística e Informática. Cuba, 2012.
Saquete, R. Optimiza la usabilidad y la conversión con mapas de calor, agosto 2014. Disponible en:
http://www.humanlevel.com/articulos/analitica-trafico-web/optimiza-la-usabilidad-y-la-conversion-con-mapas-de-calor.html. (20/03/2015)
Fernández, Pablo, Usabilidad web. Teoría y uso. España, 2018
Peñarroya, Montserrat. Disponible en: https://www.montsepenarroya.com/tag/eyetracking/. (2018)
Molina, Ana; Navarro, Oscar. El empleo de técnicas de seguimiento ocular para evaluar materiales educativos en Educación primaria. España, 2016.
Steil, Julian; Hagestedt, Inken; Xuelin Huang, Michael; Bulling, Andreas. Privacy-Aware Eye Tracking Using Differential Privacy. https://etra.acm.org/2019/index.html, Colorado, ETRA 2019.
Silva, Nelson; Blaschek, Tanja; Jianu. Eye Tracking Support for Visual Analytics Systems: Theoretical
Foundations, Opportunities, and Research Themes. https://etra.acm.org/2019/index.html, Colorado, ETRA
2019.
Drewes, Heiko; Pfeuffer, Ken. Time- and Space-efficient Eye Tracker Calibration.
https://etra.acm.org/2019/index.html, Colorado, ETRA 2019
Lee, S., Hwang, Y., Jin, Y., Ahn, S., & Park, J. Effects of individuality, education, and image on visual
attention: Analyzing eye-tracking data using machine learning. Journal of Eye Movement Research, 12(2).
https://doi.org/10.16910/jemr.12.2.4. (2019).
Mena, David. Mapas de calor (heatmaps): Qué son, para qué sirven y por qué usarlos.