fbpx
Tels: 5552735451 – 5544816687

Qué es un mapa de calor y para qué sirve: Hotjar

¿Qué hacen los visitantes cuando entran en mi página web? Una pregunta importante para qué los diseñadores analicen la experiencia de navegación en sus páginas web. Un ejemplo con Hotjar

El mapa de calor, o heatmap en inglés, es una representación gráfica del comportamiento de los usuarios cuando visitan tu página web. Te permite analizar la efectividad del sitio.

¿Qué es un mapa de calor?

Con un esquema de colores que van de rojo a azul, pasando por el amarillo y verde, las herramientas te indican los movimientos del mouse, los botones más cliqueados de tu página y qué tanto los visitantes usan el scroll, es decir, qué tanto ven el contenido en la parte inferior de tu página. El resultado es un promedio de todas las visitas:

hotjar

El mapa de calor se usa desde hace muchos años, en particular en urbanismo. Saber cómo los ciudadanos se mueven en la ciudad, cómo la usan, mediante un mapa de calor, te permite mejorar el flujo urbano: tráfico, semáforos, calles, puentes y hasta parques.

Tuve en la universidad un profesor de urbanización que nos explicaba el método para crear un parque. Primero diseñas una prueba del parque, con sus caminos, sus arbustos y el pasto, y lo abres al público. Regresas y observas cómo realmente fue usado: pasto dañado porque todos lo cruzaron sin seguir el camino, buscando un atajo, por ejemplo. Luego haces los ajustes necesarios y creas la versión final del parque. Es un mapa de calor, su base es la observación.

El mapa de calor en internet es lo mismo: observar, analizar la experiencia del usuario para rediseñar un sitio web y hacerlo más cómodo para el usuario, con la finalidad de generar más conversiones y ventas.

¿Para qué me sirve un mapa de calor?

Básicamente, para analizar el comportamiento del usuario y, en función de ello, rediseñar tus páginas web. En muchos casos, el diseñador coloca los diferentes botones de tu página según sus propios criterios creativos, pero ¿qué tal si te nutres de la experiencia del usuario?

• Mapa de clics
Es interesante saber qué botones o hipertexto usan tus visitantes y, más todavía, cuáles no usan. De ahí empiezas las experimentaciones, algo tan sencillo como hacer un botón más grande o cambiar su color, o el texto, y probarlo.

• Mapa de movimiento
El movimiento del mouse sobre la pantalla te indica dónde los usuarios prestan atención: un párrafo en particular en caso de una nota de blog, una descripción de producto en caso de una tienda. Realiza una prueba A/B, es decir, crea dos diseños diferentes y pruébalos.

• Mapa de desplazamiento
¿Qué tanto los usuarios se desplazan con el scroll en tu página? ¿Para qué te sirve tener un contenido importante, como un formulario de registro al final de tu página, si nadie llega a esa parte?

Con este análisis puedes mejorar tu CRO (Convertion Rate Optimization) y, por supuesto, tus ventas en línea.

Mapa de calor con Hotjar

La gran mayoría de las plataformas que ofrecen mapa de calor te dan una prueba de 15 días antes de pagar una renta mensual de 100 dólares, en el caso de Hotjar. Si realizas un diagnóstico y buscas rediseñar tu sitio web, lo puedes rentar sólo por unos meses. Hotjar es la más popular, su ventaja: tiene una versión gratuita, pero reducida en cuanto a análisis.

Para que el heatmap funcione, tienes que instalar en tu sitio web el plugin y colocar el código que te da Hotjar. Así, la plataforma podrá rastrear los datos de navegación de tu sitio web.

Además de las funcionalidades que mencionamos (el mapa de clics, de movimiento y de scroll), Hotjar graba en video la navegación de cada usuario. Puedes revisar a detalle el trayecto del visitante en tu página, y detectar errores de diseño o inconvenientes.

Como estás rastreando actividad de tus usuarios, tendrás que pedirles que acepten las cookies de tu página.

Jean-Luc Lenoble
https://www.linkedin.com/in/jeanluclenoble

Te recomendamos nuestro taller de diseño de página web con WordPress

Comentarios

    Deja una respuesta

    XHTML: Puede usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    Quiero recibir los últimos artículos de MKT

    * indicates required
    Leer el aviso de privacidad