Skip to main content

Usando mapas de calor del sitio web para mejorar los UX y las conversiones

27. April 2020

Desde bloques de células de color hasta complejos programas de mapas de calor

El término mapa de calor o heatmap fue registrado por Cormac Kinney en 1993, y la primera aplicación a gran escala del mismo parecía una tabla de bloques de celdas rectangulares de colores. El propósito era tratar de mostrar datos de los mercados de valores de una manera fácil de usar que pudiera ayudar a identificar las tendencias y vencer a los mercados financieros. En pocas palabras, eran visualizaciones de datos que usaban el color para representar los valores en una matriz.

30 años después, se han ganado un lugar en el nicho de la analítica de sitios web, también.

¿Por qué los mapas de calor son una herramienta de análisis de datos tan poderosa cuando se trata de análisis web y de entender cómo los usuarios interactúan con los sitios web?

Los mapas de calor son mucho más visuales que sus informes analíticos habituales. Los hace más accesibles, particularmente para la gente que no está acostumbrada a analizar datos.

Los colores de la carta de calor van desde el rojo oscuro al azul frío, para indicar el nivel de interacción con un elemento de la página. Puedes ver fácilmente los puntos calientes de tu sitio web, la forma en que los usuarios navegan y las áreas con las que están más o menos interactuados. Cuanto más cálido es el color, más interéshay.

Basándose en este esquema de colores, puede ajustar el diseño de la página web para que coincida con los puntos de atención que se muestran en el mapa de calor. Se aconsejaría mover los elementos importantes de las áreas frías (azuladas) a las áreas calientes (rojas).

Tipos de mapas de calor

Hay al menos cinco tipos diferentes de mapas de calor disponibles en la mayoría de los programas de mapas de calor:

Los mapas de clic muestran los lugares de una determinada página en los que los visitantes hacen clic más a menudo. Las áreas con más clics de los usuarios mostrarán un color más "caliente"...

Losmapas de movimiento rastrean todos los movimientos del ratón a través de la página y muestran los elementos que más se ciernen sobre ellos.

Losmapas de toques son el equivalente a los mapas de clic, pero para los dispositivos móviles. Rastrean los toques de pantalla.

Losmapas de desplazamiento (scroll) son una medida de la profundidad de desplazamiento. Utilizan colores para mostrar dónde la mayoría de los usuarios dejan de desplazarse. Con los mapas de desplazamiento, la sección superior de la página será, por supuesto, la más caliente. El pie de página será, probablemente, el más frío, ya que menos gente se desplaza al final de la página.

Los mapas de calor de atención son un tipo de herramienta que sólo algunos programas de mapas de calor ofrecen. Ajustan los datos de los mapas de desplazamiento para mostrar los colores también en función del tiempo empleado en cada sección de la página.


Por qué usar mapas de calor?

Los mapas de calor de los sitios web le dan un rápido acceso a la información sobre cómo se utiliza su sitio web. Puede obtener datos similares de las grabaciones de las sesiones de los visitantes, pero probablemente no tendrá tiempo de ver miles de grabaciones una por una. Los mapas de calor funcionan como datos agregados de estas grabaciones y proporcionan información de un vistazo.

Puede averiguar las siguientes cosas sobre sus usuarios y tomar medidas:

  • ¿Están interactuando con los elementos importantes de su página: CTAs, botones, videos, etc.? Si no es así, cambie su tamaño, color, fuentes o posición.

  • ¿Los visitantes no llegan al contenido que usted considera importante, al no desplazarse lo suficiente? Mueva este contenido hacia arriba en la página.

  • ¿Los visitantes hacen clic en elementos no seleccionables? Hágalos clicables o cambie su design web.

 

Ejemplos de mapas de calor y estudios de casos

1. Dan, el blogger, y su texto mal formateado

Dan tenía un blog moderadamente exitoso y trató de monetizarlo uniéndose a los programas de afiliados. Empezó a vincular textos de anclaje de sus entradas a sus páginas de socios para ganar una comisión.

Un mes después, más de 3.800 usuarios habían leído su brillante reseña de un reciente libro electrónico de gran venta. También hubo muchos comentarios sobre el post y el contenido había sido compartido por algunos. Sin embargo, mirando su análisis, Dan vio que sólo 3 visitantes habían hecho clic en los enlaces de afiliados en su texto. Pensó que era muy poco, pero no tenía idea de las razones detrás de esto.

Para su siguiente entrada, también usó una herramienta de mapa de calor. Lo que encontró, le sorprendió. Mirando el mapa de calor de la página, notó que los usuarios estaban tratando de hacer clic, pero en los lugares equivocados. Algunos fragmentos de texto estaban resaltados de tal manera que la gente pensaba que se podía hacer clic en ellos. Por otro lado, el estilo de los enlaces reales no recibía suficiente atención y clics.

Dan decidió que la forma más fácil de resolver esto, era hacer que los fragmentos que estaban "calientes" fueran sus verdaderos enlaces de afiliados. También decidió usar ese estilo particular en todos sus futuros enlaces afiliados. Para mayor seguridad, añadió un botón visible de CTA al texto. Los resultados fueron masivos. Su CTR pasó de menos del 0,1% al 6% después de las ediciones.

 

2. La compañía X y su posición de botón CTA

La compañía X tenía un sitio web muy organizado y bien estructurado, y aún así estaban luchando para obtener conversiones de sus visitas. Colocaron un botón de CTA en la página principal, pero, aún así, su porcentaje de conversión estaba por debajo del 0,5%. Sólo 1 de cada 200 visitantes haría clic en el botón CTA.

Para entender por qué, instalaron una herramienta de mapa de calor y la usaron para hacer un mapa de movimiento. Después de una semana, fueron capaces de notar que la gente estaba flotando mucho más en el lado izquierdo de la página principal. El botón CTA estaba a la derecha. La solución fue mover el botón a un área más "caliente". Después de otra semana, el porcentaje de personas que lo pulsaban aumentó al 2,8%. Esto tuvo un efecto inmediato en las ventas.

3. La compañía Y y las zonas frías en su mapa de desplazamiento

La compañía Y publicó una serie de entradas de blog sobre temas relacionados con su producto. Al final de cada entrada, animaban a los usuarios a suscribirse a su boletín informativo. Aunque, en promedio, recibían 11.700 visitas por semana en sus entradas de blog, los nuevos suscriptores eran de 3 a 4 por semana.

Para averiguar por qué, usaron los Mapas de Calor de los Visitantes y descubrieron que sólo el 5% de los visitantes se desplazaban hacia abajo hasta donde estaba el botón de "Suscribirse al Boletín". Así que colocaron una copia del mismo botón más arriba, bajo el primer párrafo de sus entradas de blog, en un área "caliente". La semana siguiente al cambio, el número de suscriptores había aumentado en 43.

Mapas de calor de Visitor Analytics

Estar atento a los errores y oportunidades de su sitio web es crucial para su éxito. Le ayudan, como propietario de un sitio web, a tomar decisiones críticas de negocios, diseño y tecnología rápidamente. Puede usarlos como una herramienta de diagnóstico, y descubrir qué es lo que está mal con el rendimiento de su sitio web.

La información que proporcionan los mapas de calor es intuitiva y tiene muchos usos. Son una gran adición para tener en su arsenal de herramientas de análisis.

El propósito de Visitor Analytics es dar a los usuarios una verdadera aplicación "todo en uno", que puede combinar los datos de los mapas de calor con otros conjuntos de estadísticas relevantes: rutas de visita, número de visitantes únicos y otras características de comportamiento del usuario, incluyendo el análisis de embudo.

Mira el vídeo para entender más sobre cómo funcionan los heatmaps de Visitor Analytics.

Start using Heatmaps
Traffic stats + recordings + heatmaps - from $0/month