{"id":20448,"date":"2022-02-17T15:12:59","date_gmt":"2022-02-17T13:12:59","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=20448"},"modified":"2024-06-05T14:28:11","modified_gmt":"2024-06-05T12:28:11","slug":"mapas-de-calor-que-son-y-por-que-utilizarlos","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/mapas-de-calor-que-son-y-por-que-utilizarlos\/","title":{"rendered":"Mapas de Calor: qu\u00e9 son y por qu\u00e9 utilizarlos"},"content":{"rendered":"

\u00bfQu\u00e9 es un mapa de calor?<\/b><\/h2>\n

Los \u201cheatmaps\u201d o mapas de calor<\/a> son una<\/span> representaci\u00f3n gr\u00e1fica de datos<\/b> donde los valores se representan <\/span>mediante colores<\/b>.<\/span><\/p>\n

Estos mapas permiten comprender visualmente <\/span>d\u00f3nde hacen clic, se mueven y se desplazan<\/b> los usuarios en una p\u00e1gina web.<\/span><\/p>\n

Generalmente, <\/span>utilizan un<\/b> gama de colores <\/b>que va desde los m\u00e1s c\u00e1lidos, como el rojo, el naranja y el amarillo, hasta colores como el verde y el azul en el extremo m\u00e1s fr\u00edo del espectro.\u00a0<\/span><\/p>\n

Las \u00e1reas m\u00e1s c\u00e1lidas denotan los lugares en los que los usuarios se centran m\u00e1s, por lo que son una <\/span>fuente de informaci\u00f3n bastante \u00fatil<\/b> para medir aspectos como <\/span>la interacci\u00f3n, la atenci\u00f3n y el inter\u00e9s en el contenido<\/b> mostrado en la web.<\/span><\/p>\n

\"\"<\/p>\n

\u00bfQu\u00e9 tipos de mapas de calor existen?<\/b><\/h2>\n

Mapa de clics<\/span><\/h3>\n

El tipo de mapa de calor m\u00e1s com\u00fan (y posiblemente el m\u00e1s \u00fatil) es el mapa de de clics, que permite observar<\/span> d\u00f3nde hacen clic los usuarios<\/b> en las secciones que componen la p\u00e1gina. Esto puede ser muy \u00fatil para mostrar <\/span>qu\u00e9 elementos de la p\u00e1gina atraen la mayor\u00eda de los clics<\/b> y poder tomar decisiones de dise\u00f1o, ya sea modificando el orden de los elementos en una barra de navegaci\u00f3n o la ubicaci\u00f3n de botones y CTA (<\/span>Call-To-Action<\/span><\/i>).<\/span><\/p>\n

\"\"<\/p>\n

Ejemplo de mapa de clics<\/span><\/i><\/p>\n

Mapa de desplazamiento o \u201cScroll map\u201d<\/span><\/h3>\n

Los mapas de desplazamiento indican <\/span>el porcentaje de usuarios que se desplazan hacia abajo<\/b> en cualquier punto de una p\u00e1gina. Cuanto m\u00e1s roja sea la zona, mayor ser\u00e1 el porcentaje de usuarios que la haya visualizado.<\/span><\/p>\n

Esto es especialmente<\/span> \u00fatil para los sitios con mucho contenido<\/b>, pues posibilita conocer <\/span>la distancia que recorren<\/b> los usuarios en cada p\u00e1gina <\/span>antes de abandonarla<\/b>.<\/span><\/p>\n

\"\"<\/p>\n

Ejemplo de mapa de desplazamiento o Scroll map<\/span><\/i><\/p>\n

Mapa de movimiento<\/span><\/h3>\n

Los mapas de movimiento rastrean los lugares en los que los usuarios mueven el rat\u00f3n mientras navegan. Los puntos calientes muestran las regiones donde m\u00e1s se ha movido el cursor y pueden dar una indicaci\u00f3n de los elementos del sitio que atrajeron brevemente la atenci\u00f3n de los usuarios pero que finalmente no hicieron una interacci\u00f3n.<\/span><\/p>\n

\"\"<\/p>\n

Ejemplo de mapa de movimiento<\/span><\/i><\/p>\n

\u00bfPara qu\u00e9 sirven?<\/b><\/h2>\n

Comprender la interacci\u00f3n:<\/span><\/h4>\n

Como hemos mencionado anteriormente, los mapas de calor permiten conocer <\/span>d\u00f3nde centran la atenci\u00f3n los usuarios<\/b> en una p\u00e1gina web.<\/span><\/p>\n

No obstante, los mapas de calor tambi\u00e9n pueden se\u00f1alar<\/span> elementos a mejorar<\/b>, como \u00e1reas en las que los usuarios se atascan o\u00a0 podr\u00edan estar experimentando frustraci\u00f3n, como pueden ser los <\/span>men\u00fas de navegaci\u00f3n o los formularios<\/a><\/b>.<\/span><\/p>\n

Medir la distancia que recorren los usuarios:\u00a0<\/span><\/h4>\n

Los mapas de desplazamiento o scroll permiten observar hasta qu\u00e9 punto visualizan los usuarios la p\u00e1gina, pudiendo llegar a <\/span>determinar la longitud \u00f3ptima de la p\u00e1gina y el grado de inter\u00e9s en el sitio web<\/b>. Estos mapas pueden proporcionar informaci\u00f3n sobre hasta qu\u00e9 punto los usuarios examinan el contenido y abandonan el site.<\/span><\/p>\n

Simplificar los datos:\u00a0<\/span><\/h4>\n

Mediante el esquema de colores que utilizan los mapas de calor, se puede determinar f\u00e1cilmente <\/span>qu\u00e9 partes de la p\u00e1gina est\u00e1n funcionando bien<\/b>, qu\u00e9 secciones tienen margen de mejora y qu\u00e9 secciones necesitan un <\/span>redise\u00f1o o modificaci\u00f3n.<\/b><\/p>\n

Estos mapas pueden proporcionar informaci\u00f3n sobre<\/span> c\u00f3mo se comportan l<\/b>os visitantes en un sitio web y<\/span> c\u00f3mo esperan que se vean las cosas<\/b>.<\/b><\/p>\n

Optimizar la tasa de conversi\u00f3n:\u00a0<\/span><\/h4>\n

Los mapas de calor ayudan a entender c\u00f3mo interact\u00faan los usuarios con la web, de modo que<\/span> pueden resolver respuestas a preguntas cr\u00edticas de negocio<\/b>.<\/span><\/p>\n

Puede suceder que los usuarios lleguen a la p\u00e1gina de inicio y lean la primera mitad, pero no se desplacen m\u00e1s all\u00e1 de la zona de pligue o \u201cabove the fold\u201d. Por esta raz\u00f3n, <\/span>es posible que no hagan clic en lo que est\u00e1 debajo del pliegue<\/b>, lo que reduce la tasa de conversi\u00f3n.<\/span><\/p>\n

Una soluci\u00f3n podr\u00eda ser <\/span>redise\u00f1ar la p\u00e1gina<\/b> para que el contenido est\u00e9 m\u00e1s organizado y estructurado, dando pie a seguir navegando en ella.\u00a0 As\u00ed tambi\u00e9n, podr\u00eda optarse por<\/span> mover los CTA por encima del pliegue<\/b> y facilitar la interacci\u00f3n con la interfaz.<\/span><\/p>\n

Por todas estas razones, los mapas de calor generan gran cantidad de datos \u00fatiles de una manera que es <\/span>visualmente r\u00e1pida y f\u00e1cil de digerir<\/b>. Todo ello puede ayudarnos a dar un paso atr\u00e1s, reflexionar e identificar los patrones de interacci\u00f3n que siguen los usuarios y<\/span> optimizar su experiencia de uso<\/b>.<\/span><\/p>\n

Herramientas para generar de mapas de calor<\/b><\/h2>\n

Hotjar<\/strong><\/h3>\n

Es una de las herramientas de <\/span>mapas de calor m\u00e1s utilizada<\/b>, pues ofrece varias formas de seguir el comportamiento de los usuarios y genera informes cuantitativos y detallados.<\/span><\/p>\n

Adem\u00e1s, ofrece la posibilidad de<\/span> observar grabaciones reales de los usuarios<\/b> que entran en la p\u00e1gina, lo que permite obtener informaci\u00f3n en tiempo real sobre c\u00f3mo interact\u00faan los usuarios.<\/span><\/p>\n

\"\"<\/p>\n

Im\u00e1gen extraida de<\/span> hotjar.com<\/span><\/a><\/p>\n

Microsoft Clarity<\/strong><\/h3>\n

Clarity es una <\/span>herramienta gratuita lanzada por Microsoft <\/b>en el a\u00f1o 2021. Esta herramienta, viene equipada con una gran gama de caracter\u00edsticas como son su <\/span>integraci\u00f3n con Google Analytics<\/b>, un <\/span>procesamiento de datos en tiempo real <\/b>mediante un panel de control.<\/span><\/p>\n

El hecho de que sea gratuito, cumpla con la <\/span>normativa de protecci\u00f3n de datos y<\/b>\u00a0tenga <\/span>opciones de filtrado potentes<\/b> hace que Clarity destaque entre las dem\u00e1s herramientas de an\u00e1lisis del comportamiento que existen actualmente.<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de <\/span>https:\/\/clarity.microsoft.com\/<\/span><\/a>\u00a0<\/span><\/p>\n

Mouseflow<\/strong>\u00a0<\/span><\/h3>\n

Mouseflow es una herramienta de mapa de calor centrada en la<\/span> optimizaci\u00f3n de la conversi\u00f3n<\/b>. Ofrece<\/span> funciones de <\/span>pruebas A\/B<\/b> para ayudar a entender qu\u00e9 elementos de la interfaz de usuario est\u00e1n funcionando y cu\u00e1les no.<\/span><\/p>\n

Del mismo modo, tambi\u00e9n cuenta con la posibilidad de<\/span> ver las sesiones completas<\/b> de los visitantes de la p\u00e1gina web.<\/span><\/p>\n

\"\"<\/p>\n

Im\u00e1gen extraida de<\/span> mouseflow.com<\/span><\/a><\/p>\n

Lucky Orange<\/strong><\/h3>\n

Esta herramienta tambi\u00e9n est\u00e1 centrada en el la optimizaci\u00f3n de la conversi\u00f3n de las p\u00e1ginas web pues proporciona varios<\/span> mapas de calor,<\/b> an\u00e1lisis de formularios<\/b>, <\/span>encuestas, grabaciones y gr\u00e1ficos de ventas<\/b> para comprender el recorrido que realizan los usuarios al llegar a un sitio web.<\/span><\/p>\n

\"\"<\/p>\n

Im\u00e1gen extraida de<\/span> luckyorange.com<\/span><\/a><\/p>\n

Crazyegg<\/strong><\/h3>\n

The Crazy Egg es una aplicaci\u00f3n online que ofrece <\/span>mapas de calor, superposici\u00f3n, confeti y otras herramientas<\/b> para captar los intereses del usuario. Utiliza tecnolog\u00eda de seguimiento del rat\u00f3n para registrar c\u00f3mo interact\u00faan los usuarios con un portal.<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de <\/span>crazyegg.com<\/span><\/a>\u00a0<\/span><\/p>\n

CONCLUSIONES<\/b><\/h3>\n

Los mapas de calor desempe\u00f1an un papel fundamental en la mejora continua de un sitio web en t\u00e9rminos de<\/span> aumento de las tasas de conversi\u00f3n, usabilidad y una mejor experiencia de usuario<\/b>.<\/span><\/p>\n

Al analizar los elementos en los que los visitantes hacen clic o las \u00e1reas por las que se desplazan, se obtiene una informaci\u00f3n bastante valiosa sobre su comportamiento, esto permite <\/span>ajustar el dise\u00f1o de la web<\/b> y conseguir que los usuarios puedan <\/span>cumplir sus objetivos<\/b>.<\/span><\/p>\n

No obstante, los mapas de calor deben ser <\/span>analizados conjuntamente con otros datos anal\u00edticos<\/b>. De esta forma, se podr\u00e1<\/span> tener una visi\u00f3n global de la interacci\u00f3n<\/b> en la p\u00e1gina y se podr\u00e1 averiguar si el contenido que se est\u00e1 produciendo realmente atrae a los usuarios o debe ser modificado.<\/span><\/p>\n

\u00bfQuieres aplicar mapas de calor y realizar mejoras para el usuario? En Hiberus tenemos un<\/span> \u00e1rea especializada en proyectos UX<\/b>. Nuestro equipo analizar\u00e1 tus necesidades y te asesorar\u00e1 en los pasos a realizar para <\/span>mejorar la usabilidad y conversi\u00f3n de tu proyecto digital.<\/b><\/p>\n

No dudes en contactarnos, \u00a1en <\/span>Hiberus Digital<\/span><\/a> estaremos encantados de ayudarte!<\/span><\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n

Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t