¡Hola! Ahora puedes usar Hotjar en español 🇪🇸 Empezar gratis.

Aprende / Guías / Guía de heatmaps

Volver a las guías

Cómo utilizar move maps para mejorar la UX y aumentar las conversiones

Hacer un seguimiento de por dónde mueven y detienen el ratón los usuarios en una página web o interfaz de un producto ayuda a averiguar qué elementos les llaman la atención y cuáles no. En Hotjar, llamamos "move maps", "move heatmaps" o "mapas de movimientos" a la representación gráfica de estos datos.

En esta guía se explica qué son los move maps, por qué son útiles y cómo analizar los datos que aportan para hacer optimizaciones centradas en el cliente a fin de mejorar la experiencia de usuario (UX) y aumentar las conversiones.

Estas son las secciones de esta guía:

  1. ¿Qué son los move maps?

  2. 4 formas de utilizar los move maps para mejorar la UX de tu sitio web y aumentar las conversiones

  3. ¿En qué páginas deberías hacer un seguimiento del ratón?

  4. Move maps vs. click maps vs. scroll maps

  5. Cómo configurar un move map en tu sitio web

Averigua cuáles son los focos de atención de tu sitio web

Utiliza Hotjar Heatmaps para visualizar el movimiento del ratón, identificar oportunidades para mejorar la UX y aumentar las conversiones.

¿Qué son los move maps?

Los move maps (también llamados "move heatmaps" o "mapas de movimientos") registran por dónde mueven y en dónde detienen el cursor del ratón las usuarias y los usuarios de ordenadores cuando navegan por una página.

Los move maps utilizan diferentes colores para indicar cuánta atención prestan los usuarios a los distintos elementos de la página. Cuanto más tiempo los usuarios detengan el cursor del ratón en un punto determinado de la página, más rojo se muestra ese punto en el mapa.

#A move map showing popular mouse positions on an example pricing page
A move map showing popular mouse positions on an example pricing page

📝 Nota: Algunos move heatmaps también registran la actividad de los dedos en los dispositivos móviles. Sin embargo, esta información no suele ser tan útil, ya que la mayoría de las personas que usan dispositivos móviles solo tocan la pantalla para seleccionar un elemento determinado o para desplazarse por la página.

¿Por qué usar move maps para hacer un seguimiento de los movimientos del ratón?

Los mapas de movimientosmuestran qué partes de una página atraen más la atención de los usuarios. Como los move maps muestran datos agregados sobre los movimientos del ratón de múltiples usuarios, nos ofrecen datos cuantitativos sobre qué elementos de la página leen o miran activamente los usuarios.

Un move map de Hotjar en una página de UI-Patterns.com que demuestra que los usuarios ignoran la barra lateral.

Hay estudios que sugieren que existe una correlación entre el movimiento del ratón y el de los ojos. Esto significa que puedes usar los move heatmaps como una referencia fiable para averiguar hacia dónde mira la gente cuando navega por tu sitio.

En comparación con hacer un estudio de eye tracking o seguimiento ocular en un laboratorio, los mapas de movimientos son más baratos y fáciles de generar, involucran a muchos más usuarios y registran cómo se comportan en la vida real.

4 formas de utilizar los move maps para mejorar la UX de tu sitio web y aumentar las conversiones

Inspírate en los siguientes ejemplos para obtener ideas sobre cómo sacar el máximo partido a los mapas de movimientos cuando te plantees renovar el diseño UX u optimizar la tasa de conversión de tu sitio web.

1. Averigua qué elementos captan la atención de tus usuarios

Los move maps te muestran cuáles son los elementos de una página que más llaman la atención de la gente y los marca en color rojo.

Una vez que sepas en qué se fijan las personas que visitan la página, podrás hacer recomendaciones de optimización y obtener ideas sobre qué deberías investigar a continuación.

Un move map de Hotjar en una página de una biblioteca de la Universidad de Baltimore muestra que el cuadro de búsqueda acapara toda la atención de los usuarios.

Por ejemplo, la Universidad de Baltimore utilizó Hotjar Heatmaps para configurar un mapa de movimientos en la página principal de una de sus bibliotecas. Con el heatmap averiguaron que la mayoría de los visitantes de la página principal se centraban en el cuadro de búsqueda con pestañas, pero apenas interactuaban con otros elementos, como el botón "Ask a Librarian".

Si este sitio fuera tuyo,podrías tomar cualquiera de las siguientes medidas:

  • Obtener más datos con grabaciones de sesiones observando cómo cada visitante utiliza exactamente el cuadro de búsqueda.

  • Averiguar dónde se registran clics con rabia y dónde se confunden los visitantes

  • Plantearte hacer pruebas A/B de nuevos diseños (por ejemplo, comparar una versión con tres cuadros de búsqueda separados con la versión del cuadro de búsqueda con pestañas). Después, podrías configurar mapas de movimientos en las variantes de la prueba A/B para averiguar por qué gana una determinada variante

  • Considera la posibilidad de añadir una encuesta on-site para preguntar a los visitantes si echan en falta algo en la página.

2. Confirma si los usuarios ven los elementos en los que no se puede hacer clic

Como en la mayoría de los textos e imágenes no es necesario que los visitantes hagan clic, la única forma que tienes de saber si los están leyendo y viendo es con los mapas de movimientos.

#Part of a move map on a previous iteration of our guide to heatmaps
Part of a move map on a previous iteration of our guide to heatmaps

Por ejemplo, con el mapa de movimientos de arriba que generamos en una versión anterior de nuestra guía de heatmaps nos enteramos de que muchos visitantes se detenían a mirar una imagen que comparaba los mapas de desplazamiento vertical con los mapas de clics, así que la mantuvimos cuando actualizamos la página. Si ves imágenes similares en esta entrada del blog, ya sabes a qué se debe.

3. Descubre qué elementos ignoran los usuarios

Como los move maps registran la colocación continua del ratón, lo que puede tener correlación con el movimiento de los ojos, son mejores que otras herramientas de analítica a la hora de mostrar qué elementos ignoran las usuarias y los usuarios.

Un move map de Hotjar en la página de la marca de ropa ucraniana Intertop que demuestra que los visitantes ignoran los distintos productos.

Por ejemplo, la agencia de UX/UI Turum-Burum utilizó Hotjar para crear un mapa de movimientos en las páginas de categorías de productos de la tienda de ropa Intertop. Al hacerlo, averiguaron que las usuarias y los usuarios centraban toda su atención en los filtros de búsqueda, pero ignoraban los productos, lo que sugería que no encontraban lo que estaban buscando. El equipo hizo algunos cambios y añadió más opciones de filtros, lo que contribuyó a que aumentaran los clics en los productos y a que se generara un 13,3 % más de ingresos medios por usuario (ARPU).

4. Segmenta los move maps para conseguir insights sobre grupos de usuarios concretos

Los distintos segmentos de usuarios se comportan de forma diferente en tu sitio web, y algunos son más importantes para tu negocio que otros. Segmentar tus mapas de movimientos te ayudará a centrarte en las cohortes más valiosas.

Si utilizas Hotjar, puedes filtrar mapas de calor retroactivamente haciendo clic en la opción para añadir filtro y seleccionando la opción que te interese.

#Hotjar’s heatmap filters
Hotjar’s heatmap filters

Por ejemplo, puedes utilizar esta función para:

  • Filtrar por página de salida a fin de averiguar a qué elemento prestaron atención los usuarios antes de abandonar tu página

  • Filtrar por evento, como clics en el botón de registro, para averiguar qué animó a los usuarios a registrarse.

  • Filtrar por URL de referencia o identificador (como parámetros UTM) para aislar e investigar específicamente el comportamiento del tráfico de pago.

Un move map de Hotjar en la página principal de IDX.

Por ejemplo, la agencia de CRO The Good utilizó Hotjar Heatmaps en el sitio web del servicio de protección de la privacidad IDX para mejorar el ROI del tráfico publicitario.

¿En qué páginas deberías hacer un seguimiento del ratón?

Puedes hacer un seguimiento de los movimientos del ratón en cualquier sitio web o página de producto que reciba tráfico, pero los mapas de movimientos son más útiles en páginas clave para el negocio y en cualquier lugar donde desees comprobar la interacción de las personas usuarias con elementos en los que no se puede hacer clic. 🐭 Por ejemplo:

  • Páginas de productos de comercio electrónico: utiliza mapas de movimientos para averiguar si los clientes dedican tiempo a leer las descripciones de los productos y a mirar las imágenes.

  • Entradas de blog : utiliza move maps para descubrir qué párrafos e imágenes atraen más la atención de los usuarios.

  • Páginas con tasas de abandono altas: utiliza análisis del embudo y herramientas como Google Analytics para identificar fugas de conversión y, a continuación, utiliza mapas de movimientos para ver qué áreas captan la atención de los usuarios.

  • CTA fundamentales para el negocio: si las llamadas a la acción (CTA) no reciben clics, utiliza un mapa de movimientos para intentar encontrar la solución al problema.

Move maps vs. click maps vs. scroll maps

Aparte de los mapas de movimientos, también puedes utilizar otros tipos de mapas de calor: click maps o mapas de clics para registrar dónde hacen clic o tocan los usuarios y scroll maps o mapas de desplazamiento vertical para registrar hasta dónde se desplazan los usuarios por una página. A diferencia de estas alternativas, los mapas de movimientos miden el comportamiento del usuario de forma continua, incluso entre varias páginas.

Por lo tanto, los mapas de movimientos revelan información que otros mapas de calor pasan por alto. Por ejemplo, con un mapa de desplazamiento vertical podrías averiguar que un alto porcentaje de usuarios se desplazan hasta el final de una página, pero con un mapa de movimientos podrías enterarte de que ignoran por completo la barra lateral. Del mismo modo, un mapa de clics puede mostrar que no hay clics en la descripción de un producto, pero un mapa de movimientos podría revelar que las usuarias y los usuarios que lo ven generan conversiones.

Un move map (izquierda) y un click map (derecha) de Hotjar en Data36.com.

Ningún tipo de heatmap es mejor o peor que otro. La clave está en combinarlos para obtener insights más claros.

  • Utiliza mapas de clics para ver si los usuarios hacen clic en botones CTA, hipervínculos rotos o elementos no vinculados.

  • Utiliza mapas de desplazamiento vertical para visualizar el límite visible medio y ver hacia dónde se desplazan la mayoría de los usuarios.

  • Utiliza mapas de movimientos para saber qué áreas de una página atraen la atención de los usuarios.

💡 Consejo avanzado: Si utilizas Hotjar, los mapas de calor capturan datos continuamente en todas las páginas, por lo que puedes alternar entre mapas de clics, movimientos y desplazamiento vertical sin tener que cambiar ningún ajuste.

Dos formas de alternar entre click maps, move maps y scroll maps en Hotjar Heatmaps.

📝Nota: Puede que en la imagen de arriba hayas observado un cuarto tipo de mapa de calor: el engagement zone map o mapa de zonas de interacción. Este mapa combina datos de los mapas de clics, movimientos y desplazamiento vertical en una única vista de cuadrícula para que puedas observar con qué áreas de la página interactúan más las usuarias y los usuarios. ¿Por qué no lo pruebas?

Move maps vs. grabaciones de sesiones

Una grabación de sesión es el registro de las acciones reales que hace un visitante de tu sitio web mientras navega por él. Las grabaciones también muestran los movimientos del ratón, pero solo de un usuario cada vez.

En cambio, los mapas de movimientos muestran datos agregados sobre los movimientos del ratón de varios usuarios en una sola página. Puedes utilizarlos para identificar tendencias generales y hacerte una idea de cómo los distintos elementos atraen la atención de los usuarios.

💡Consejo avanzado: Combina datos cualitativos y cuantitativos para sacar conclusiones más sólidas. Utiliza los mapas de movimientos para detectar la tendencia principal, por ejemplo, averiguar que los usuarios ignoran un elemento de tu página. Después, mira grabaciones de sesiones para intentar averiguar por qué.

Una grabación de sesión de Hotjar en la que se muestra cómo el usuario mueve el ratón por la página.

Cómo configurar un move map en tu sitio web

Para empezar, crea una cuenta gratuita de Hotjar y añade nuestro código de seguimiento a tu sitio web. Activa la captura de sesiones para que Hotjar empiece a recopilar automáticamente datos sobre tu sitio web.

#How to view a move map in Hotjar Heatmaps
How to view a move map in Hotjar Heatmaps

Una vez que tu sitio haya recibido algo de tráfico, haz clic en el icono del mapa de calor de la izquierda, introduce una URL y haz clic en el botón para mostrar el mapa de calor.

#Click to toggle between move maps and other heatmap types in Hotjar
Click to toggle between move maps and other heatmap types in Hotjar

Selecciona un periodo de tiempo, por ejemplo, los últimos 30 días, y haz clic en el icono del mapa de movimientos para generar tu move map. Así de fácil.

Crea un move map gratis y empieza a generar más conversiones hoy mismo

Los mapas de movimientos te ofrecen una visión general de aquello a lo que la gente presta atención (e ignora) en tus páginas web y de productos.

Por sí solos, son un excelente recurso visual que te ayuda a explicar el comportamiento de los usuarios a tu equipo y a los stakeholders. Sin embargo, son mucho más valiosos si los combinas con los insights que obtengas de otras herramientas: análisis de embudos, para saber dónde se están perdiendo conversiones; grabaciones de sesiones, para saber cómo navegan las personas por todo el sitio; y encuestas, para conocer la opinión de tus clientes.

¿Y sabes qué? Hotjar tiene todas esas herramientas 😉 .

Averigua cuáles son los focos de atención de tu sitio web

Utiliza Hotjar Heatmaps para visualizar el movimiento del ratón, identificar oportunidades para mejorar la UX y aumentar las conversiones.

3 preguntas frecuentes sobre los move maps