El blog de dinahosting
  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes

El blog de dinahosting

  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes
#HalloweenDH

Suscríbete a nuestra newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

Newsletter

Mapas de calor: qué son y para qué se usan

escrito por Edi Vieito febrero 3, 2021

Un mapa de calor o heatmap es la representación gráfica de la forma en la que interactúan los usuarios en tu web. Cada vez que hacen clic o scroll los mapas de calor registran su posición y le asignan un color. Habitualmente, cuanto más cálido (rojo) más veces han hecho clic o llegado hasta un sitio determinado.

Diagrama de color

Índice de contenidos

  • 1 Usos principales de los mapas de calor
    • 1.1 Ver los botones más usados
    • 1.2 Medir el scroll de tu página
    • 1.3 Solucionar problemas de UX
    • 1.4 Optimizar versiones mobile y de escritorio
    • 1.5 Hacer Test A/B
  • 2 Cómo crear un mapa de calor de tu web
    • 2.1 Paso 1 – Regístrate
    • 2.2 Paso 2 – Introduce el script o plugin
    • 2.3 Paso 3 – Verifica que queda bien instalado
  • 3 Ventajas e inconvenientes

Usos principales de los mapas de calor

Antes de entrar en su implementación, te explicamos para qué se usan normalmente los heatmap y cómo te pueden ayudar a mejorar la experiencia de usuario (UX) de tu web.

Ver los botones más usados

Cada vez que un usuario haga clic en tu página, esa parte se mostrará de un color. Como hemos comentado antes, cuanto más cálido sea el color más veces habrán hecho clic.

Con el mapa de calor de clics (o taps en móvil) podrás comprobar si los CTA de tu web funcionan. Los botones con más interacciones dentro de la página web deberían ser los de los CTA.

Recuerda que un CTA (Call to action) es una llamada directa a hacer clic en un botón, ya sea para hacer una compra, suscribirte a un boletín, realizar una descarga…

El mapa de calor de clics también te proporciona información sobre los botones o secciones que son menos visitados. Puede ser un buen punto de partida para preguntarte por qué no está funcionando una campaña o si deberías hacer algo para mejorar estas interacciones.

Medir el scroll de tu página

Los mapas de calor de scroll nos dan información sobre hasta dónde hacen scroll nuestros usuarios. Con esta información podremos decidir en qué lugar colocar la información más relevante para intentar convertir más.

Mapa de calor de scroll

Uno de los layouts en alza en diseño web es el One Page. En él ponemos todo nuestro contenido en una misma página para que el usuario únicamente tenga que hacer scroll para encontrar lo que busca.

Este diseño puede derivar en páginas demasiado largas, que provoquen que el usuario abandone nuestra web por aburrimiento tras tanto scroll. Los heatmaps nos ayudarán a decidir si acortar o no el tamaño de nuestra página.

Solucionar problemas de UX

Un heatmap de clic no solamente mide los botones o enlaces en los que se hace clic, sino cualquier parte de la web donde se clique.

En ocasiones, los usuarios hacen clic sobre imágenes o elementos que en un primer momento pensaban que eran botón. El mapa de calor también puede servir para eso, para darnos pistas sobre qué elementos están dando lugar a equívoco y corregir así ese comportamiento.

Hacer clic en un lugar que no corresponde generará en tus usuarios la sensación de que la web es compleja, lo que suele provocar el abandono de la misma.

Optimizar versiones mobile y de escritorio

La mayor parte de las soluciones comerciales que generan mapas de calor de una web ofrecen la posibilidad de distinguir entre las versiones mobile y desktop.

¿Qué nos ofrece esto? Una comparativa muy explícita de qué elementos son superfluos en mobile frente a desktop, y viceversa. Cualquier persona que se haya enfrentado al diseño de una página web para diferentes dispositivos se habrá encontrado en más de una ocasión con el eterno dilema de que elementos puede ocultar sin que se pierdan funcionalidades en la web.

Con los mapas de calor podremos analizar de una manera más empírica qué cosas podemos obviar y cuáles no.

Hacer Test A/B

Un test A/B es la relación de una misma página con un diseño o contenido diferente para ver cuál funciona mejor.

test a/b con mapa de calor

A veces los test A/B pueden resultar complicados. Sin embargo, los mapas de calor nos permiten analizar en pocos minutos cuál de los dos diseños funciona mejor, sin apenas tener conocimientos de medición: clics en CTA, profundidad de scroll, errores de UX… ¡compara todo lo que quieras!

Cómo crear un mapa de calor de tu web

Para realizar un mapa de calor es necesaria una herramienta que registre el comportamiento de los usuarios en tu web. Existen varias en el mercado (Hotjar, Clicktale, Crazyegg…), con un funcionamiento muy parecido.

En este post nos centraremos en la primera, que es la más usada. Además, ofrece una prueba gratuita de 15 días para hacerte una idea bastante acertada de cómo puede ayudarte a medir el comportamiento de los usuarios de tu web.

Paso 1 – Regístrate

Entra en https://www.hotjar.com/ y regístrate como usuario. Es muy sencillo y te pedirán muy pocos datos, entre ellos el dominio de las páginas sobre las que quieres crear los heatmaps.

Registro en la herramienta hotjar

Paso 2 – Introduce el script o plugin

En este paso te darán un script o fragmento de código único para insertar en el header o cabecera de las páginas de las que quieras sacar el mapa. Si usas un CMS, también trabaja con plugins.

Código a incrustar

Paso 3 – Verifica que queda bien instalado

Por último, y cuando tengas incluido el script/plugin, solo tendrás que comprobar que ha quedado bien instalado en tu web.

Verificación instalación script

Ventajas e inconvenientes

Para resumir: podrás pensar que tener un “programita” analizando el comportamiento de tus usuarios en todo momento es todo ventajas, pero lejos de eso… no deja de ser un recurso que ralentizará tu web.

Te recomendamos que lo uses por periodos de tiempo corto. No lo tengas en funcionamiento continuamente.

¡Esperamos que le saques mucho partido a este post! Si quieres recomendarnos otras herramientas o dejar alguna aportación en los comentarios, estaremos encantados de leerte 🙂

heatmapMapa de calortest a/bux
0 comentario
0
Facebook Twitter Google + Pinterest

Deja un comentario Cancelar respuesta

Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional

Información básica sobre protección de datos

Responsable
Dinahosting S.L.  [+ info]
Finalidad y legitimación
Tratamos los datos que nos proporcionas con la finalidad de gestionar tu comentario, incluida su publicación en nuestro blog. Al enviarnos tu comentario o sugerencia nos das tu consentimiento explícito para que tratemos tus datos con esta finalidad  [+ info]
Destinatarios
Publicamos los comentarios que nos envías en el blog. Enviar un comentario en nuestro blog implica la publicación en el blog del ‘nombre’ y, en su caso, el ‘avatar’ que utilices al dejar el comentario  [+ info]
Derechos
Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad

En dinahosting

Promotion Image

Dominios

Promotion Image

Hosting SSD NVMe

Promotion Image

VPS

Suscríbete a nuestra newsletter

Promotion Image Newsletter

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL. [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter.[+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal.[+info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción.[+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.
Hazte afiliado

¡Síguenos!

Facebook Twitter Instagram Linkedin Youtube
Facebook Twitter Instagram Linkedin Youtube

LLÁMANOS GRATIS

900 854 000


ESCRÍBENOS

soporte@dinahosting.com

En dinahosting

  • Hosting
  • Dominios

Área privada

  • Panel de administración
  • Webmail
  • Feedback
  • Protección de datos
  • Ayuda
  • 900 854 000
  • soporte@dinahosting.com

@2020 - Dinahosting

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL  [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter  [+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal  [+ info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad