Descubra qué están haciendo sus visitantes en su sitio web con mapas de calor

Publicado: 2021-11-04

El ser humano es curioso por naturaleza. La curiosidad, en muchos sentidos, es una de las características que más nos ha hecho evolucionar. La información es poder, y tener información sobre otros es muy útil en muchos campos diferentes, incluido el desarrollo de páginas web.

Sin entrar en el lado oscuro del mundo de la privacidad, hay muchas formas de gestionar una página web y utilizar la curiosidad de forma ética para mejorar su rendimiento y conseguir que tus visitantes disfruten de tus páginas más que antes.

Los mapas de calor son una técnica destinada a descubrir qué hacen los visitantes en una página web y ver cómo interactúan con ella. Es decir, los mapas de calor nos permiten analizar el comportamiento de los visitantes de forma agregada y anónima. Al analizar el movimiento del cursor en la página web, los mapas de calor son una representación visual que muestra los puntos de acceso de su página pintados con colores más cálidos.

Además, los mapas de calor nos permiten obtener ideas de mejora para aplicar en nuestra web. Solo tenemos que estudiar los datos que vemos en el mapa de calor para sacar conclusiones sobre lo que está pasando, lo que están haciendo los visitantes, qué está fallando en la web y cómo podemos solucionarlo.

Cómo crear un mapa de calor en WordPress

Hoy en día, crear un mapa de calor es extremadamente simple. En WordPress solo tenemos que utilizar un plugin que nos permite crear mapas de calor. De hecho, los mapas de calor son una de las funcionalidades más demandadas por nuestros usuarios de Nelio A/B Testing.

Llevamos mucho tiempo creando mapas de calor para seguir investigando posibles mejoras en nuestra web. Como ejemplo, os muestro aquí el último mapa de calor que creamos en la página principal de Nelio.

Lo primero es crear un nuevo mapa de calor. Para ello, seleccionamos la nueva prueba en Nelio A/B Testing y elegimos la página que nos interesa, como puedes ver en la siguiente captura de pantalla:

Pantalla para crear un mapa de calor con Nelio A/B Testing.
Pantalla para crear un mapa de calor con Nelio A/B Testing.

Luego, solo tenemos que iniciar la prueba para que el complemento rastree a sus visitantes y agregue la información automáticamente. A partir de este momento se generará un nuevo mapa de calor de forma incremental y podremos ver los resultados de forma gráfica.

Resultados del mapa de calor

Una vez que hemos rastreado un número representativo de visitantes, podemos observar el resultado del mapa de calor en detalle. Tenga en cuenta que hay diferentes vistas de estos datos extraídos de nuestros visitantes.

El tipo de visualización más común es el propio mapa de calor, que muestra una serie de puntos de colores cálidos en la parte superior de la página analizada. Esos puntos calientes se colocan sobre los elementos que han recibido la mayor interacción.

Por otro lado, tenemos el scrollmap, que muestra con colores más cálidos hasta dónde han llegado los visitantes al desplazarse hacia abajo antes de irse.

Finalmente, la última representación que nos podemos encontrar habitualmente consiste en ver los clics que se han hecho en la página como una nube de puntos, o confeti.

En la galería anterior tenéis el mapa de calor completo, scrollmap y cofetti que ha creado nuestro plugin al analizar la página principal de nuestra web. A continuación, echemos un vistazo más de cerca a algunos detalles de la información que podemos extraer de estas tres representaciones.

Detalles del mapa de calor

El mapa de calor muestra que gran parte de la actividad de quienes visitan nuestra página de inicio ocurre en la primera parte de la página. Encontramos mucha interacción en los botones que nos llevan a las páginas específicas de cada uno de nuestros complementos, que es algo que queremos que suceda:

Detalle de la primera sección del mapa de calor.
Detalle de la primera sección del mapa de calor.

Pero también descubrimos que muchas personas hacen clic en el signo de flecha en el primer pliegue que les indica que se desplacen hacia abajo. Desafortunadamente, esta flecha es solo un indicador y no es un elemento en el que se pueda hacer clic. Entonces seguramente confunde a nuestra audiencia, que todavía hace clic en él.

Como solución, podríamos optar por transformar la flecha en un botón que se desplaza hacia abajo en la página automáticamente. Al hacer esto, alineamos las expectativas del usuario con la realidad.

Detalle del pie de página en el mapa de calor.
Detalle del pie de página en el mapa de calor.

Por otro lado, es curioso ver como el pie de página también recibe mucha atención. Esto es importante, ya que sugiere que algunos usuarios no encuentran lo que buscan hasta el final de la página. En particular, el área más caliente es el enlace de contacto. Por lo tanto, una buena idea de prueba sería mover este enlace a un área más destacada de la página, solo para asegurarse de que nadie se vaya sin encontrar lo que necesita.

Detalles del mapa de desplazamiento

El mapa de desplazamiento muestra que la mayoría de nuestros visitantes no ven nada más allá de media página. Con esta información, la principal conclusión que podemos sacar es que el contenido a partir de ese punto se perderá y, por tanto, no debería ser relevante.

Para hacer nuestros contenidos más atractivos para nuestra audiencia y así evitar que se vayan, una posibilidad es mostrar secciones más visuales y dinámicas. El contenido estático no se destaca lo suficiente y perdemos la atención de nuestros visitantes. Por ello, proponer cambios en estos apartados puede ser una buena posibilidad para testear en un futuro test A/B.

Detalles de confeti

En cuanto al confeti, nos muestra una nube de puntos con todos los clics que recibimos cuando se estaba ejecutando la prueba. En comparación con un mapa de calor normal, los confeti incluyen más información sobre cada clic individual.

Vemos como la mayoría de visitantes que hacen click tardan entre 5 y 10 segundos en hacerlo. Conocer este dato es muy interesante, ya que tenemos una medida bastante aproximada del tiempo que tenemos para llamar su atención.

Cuanto más compleja sea la página y más difícil parezca de entender, más visitantes perderemos. Esta información puede ayudarnos a proponer una versión mucho más simple y radical de la página. Por ejemplo, podríamos mostrar menos información e ir directamente al grano. Esa es otra posible prueba A/B que podríamos probar a continuación.

Detalle de la primera sección del confeti.
Detalle de la primera sección del confeti.

Además, podemos ver que hay visitantes que hacen clic en elementos en los que no se puede hacer clic. Una sección especialmente relevante aquí es la lista de logotipos de empresas que utilizan nuestros productos, o los testimonios de nuestros clientes:

Detalle de clics perdidos que podemos ver en el confeti.
Detalle de clics fuera de lugar que podemos ver en el confeti.

En estas secciones no tenemos elementos en los que se pueda hacer clic, pero de todos modos obtienen clics. Una vez más, esto puede resultar confuso, por lo que es importante asegurarse de que el comportamiento de nuestro sitio coincida con las expectativas de nuestros visitantes. Para evitarlo, podríamos decidir modificar el diseño de estas secciones para dejar más claro que no es necesario hacer clic allí. O incluso borrar las secciones, teniendo en cuenta la información del scrollmap, donde ya vimos que perdíamos gente en esta parte de la web.


Lo importante de los mapas de calor es obtener ideas de mejora analizando cómo interactúan nuestros visitantes con nuestro sitio. De esta forma podemos corregir comportamientos fallidos y proponer posibles mejoras a nuestra página que luego podemos probar con pruebas A/B.

Te recuerdo que la versión gratuita de Nelio A/B Testing te permite crear mapas de calor en tus páginas de WordPress de la forma más sencilla que te he explicado aquí. Sigue adelante e inténtalo. Y luego cuéntanos tu experiencia y qué información puedes extraer a través de esta representación visual del comportamiento de tus visitantes.

Imagen destacada de Almos Bechtold en Unsplash.