Todo lo que necesita saber antes de usar un mapa de calor de la página de destino

El software de Cormac Kinney comenzó como una herramienta para ayudar a los comerciantes de Wall Street a jugar con el mercado de valores. Convirtió los datos financieros en "mosaicos luminosos de cuadrados rojos y azules", llamados "mapas de calor", que indicaban a los comerciantes cuándo comprar o vender usando colores.

Más de dos décadas después, no solo los comerciantes se benefician de los mapas de calor y la información que brindan. Los especialistas en marketing (y ahora los clientes de Instapage) también los están usando. Y al hacerlo, están aprendiendo exactamente cómo se comportan los clientes potenciales en sus páginas web.

¿Qué es un mapa de calor?

Un mapa de calor es una visualización de datos que muestra cómo los visitantes interactúan con una página web utilizando un sistema codificado por colores. Eche un vistazo, por ejemplo, a quizás el mapa de calor más conocido de todos los tiempos (al menos por los especialistas en marketing digital), que muestra que las personas leen en un patrón en forma de F en la web:

Las partes rojas y amarillas del mapa indican un área muy vista. El azul es donde los visitantes miraban menos.

Estos datos en particular fueron recopilados por Nielsen Norman Group a partir de un estudio de seguimiento ocular de 2006 que monitoreaba la mirada de los visitantes cuando encontraban texto en una página web. Pero pruebas como estas no son las que probablemente verá circulando por la web.

Mapas de calor de seguimiento ocular frente a mapas de calor de seguimiento del mouse

Los mapas de calor de los experimentos de seguimiento ocular son los más precisos, pero también son los más costosos e inconvenientes de producir. Los estudios como el de Nielsen Norman anterior generalmente se llevan a cabo en un entorno controlado (laboratorio, interno) con un equipo de investigación o hardware costoso que observa los ojos de sus visitantes mientras interactúan con su página web. Su ejecución puede costar más de varios miles de dólares.

Debido a que la contratación de un equipo completo de investigadores está fuera de discusión para la mayoría de las empresas, muchas, en cambio, recurren al software de seguimiento del mouse. A diferencia de monitorear los movimientos oculares reales, el software de seguimiento del mouse monitorea el movimiento del mouse de los visitantes , como clics, desplazamientos y desplazamientos.

Dado que este método no requiere un entorno de laboratorio formal o una gran parte del presupuesto de una empresa, es mucho más accesible. Hoy en día, puede instalar un software de seguimiento del mouse y comenzar a monitorear el comportamiento de los visitantes de inmediato, y algunas investigaciones muestran que es casi tan preciso como lo hacen los estudios formales de seguimiento ocular.

El mapa de calor de la izquierda se produjo a partir de un estudio formal de seguimiento ocular, mientras que el de la derecha se generó con seguimiento del mouse. Según ClickTale, los experimentos en los que ambas técnicas se administraron simultáneamente han demostrado que hay una correlación del 84 al 88% entre sus resultados.

Básicamente, en algunos casos, donde las personas mueven el mouse y donde miran tienden a coincidir (más sobre esto más adelante).

Los diferentes tipos de mapas de calor de seguimiento del mouse disponibles

Cuando las personas se refieren a un "mapa de calor", se refieren a una visualización que muestra el comportamiento del usuario. Pero ese comportamiento del usuario no siempre es el mismo. Algunos mapas de calor muestran cómo se desplazan las personas, mientras que otros tipos pueden identificar dónde se desplazan las personas con el mouse en una pantalla. Los tipos principales de mapas de calor de seguimiento del mouse son los siguientes:

Haga clic en mapas de calor

Los mapas de clics muestran dónde ha hecho clic un visitante en su página web. Son especialmente valiosos para descubrir enlaces populares o áreas que los visitantes pueden pensar que son enlaces pero no lo son.

Tome este mapa en particular, por ejemplo, que descubrió que los elementos más clicados en una página eran fotos del producto:

El fundador de Brothers Leather Supply Company, Adam Kail, explica cómo este mapa cambió el enfoque de la empresa en lo que respecta al diseño de páginas de productos:

Los mapas de calor han reforzado nuestra necesidad de contar con excelentes imágenes en todas nuestras páginas de productos. Solíamos esclavizarnos con la copia correcta, pero ahora dedicamos tiempo a obtener imágenes correctas. Cada imagen muestra un uso o ángulo diferente para nuestras bolsas ... Los futuros clientes quieren saber cómo se ve la bolsa con una computadora portátil adentro cuando está llena cuando alguien la lleva puesta.

En última instancia, ese es el objetivo del análisis de mapas de calor: descubrir el comportamiento de los visitantes en la vida real que puede utilizar para optimizar la experiencia del usuario. Para ilustrarlo, echemos un vistazo a otro mapa de clics que proviene de una página de destino posterior al clic de un teléfono celular:

Delineado en rojo, notará que el teléfono con más clics está muy por debajo del pliegue, ubicado debajo de varios modelos menos populares. Entonces, ¿cómo puede usar este mapa para mejorar la experiencia del usuario?

Reemplace uno de los modelos menos populares en la parte superior del pliegue por el delineado en rojo. De esa forma, la gente no tiene que buscar para encontrarlo.

Quizás el mapa de calor más relevante para el diseño de la página de destino posterior al clic proviene de un estudio de caso realizado por VWO en un cliente, Pair (ahora Couple).

Aquí está la página de inicio original de la aplicación:

Y así es como se veía el mapa de calor de clics de esa página de inicio:

¿Notas lo que hizo el comercializador de crecimiento de Pair, Lim Cheng Soon, en este mapa de calor? Él dice:

Resulta que descubrí que demasiadas personas hacen clic en la barra de navegación en la parte superior en lugar de hacer clic en el botón de conversión (enlace a AppStore y Google Play). Así que inventé la teoría de que tener demasiadas "distracciones" alrededor del botón de conversión no era una buena idea.

Así que hago un par de pruebas A / B basadas en la teoría de eliminar las "distracciones" alrededor del botón de conversión.

¿Los resultados?

• Ocultar el texto "descargar gratis" encima del botón aumentó la tasa de conversión en un 10%.
• Ocultar el menú de navegación aumentó la tasa de conversión en un 12%

La teoría de Soon de "demasiadas distracciones" no está inventada en absoluto. Como han demostrado varias otras pruebas, los enlaces de navegación pueden reducir drásticamente la tasa de conversión. En su página de destino posterior al clic, es mejor excluirlos de su diseño.

Los mapas de clics como los anteriores son particularmente valiosos debido a la intención de las señales de un clic: es más probable que la acción sea intencionada que aleatoria. Cuando alguien hace clic, lo hace porque quiere aprender más sobre un elemento en particular o el contenido al que corresponde (un botón de llamada a la acción, un enlace "sobre nosotros", etc.).

Desplazarse por mapas de calor

"No terminarás este artículo" fue el título de un artículo publicado por Slate en 2013. En él, el autor Farhad Manjoo reveló los hallazgos de un análisis conjunto de mapas de calor entre Chartbeat y la revista en línea, que mostró que muy pocas personas leen todo el camino a través de los artículos.

A pesar de que un impresionante 86,2% de participación tuvo lugar en la mitad inferior de la página, solo el 25% de las personas se desplazaron más allá del número de píxeles 1600 (la mayoría de los artículos de Slate tienen alrededor de 2000 píxeles de largo). Información como esta es lo que los mapas de desplazamiento son útiles para descubrir, especialmente en páginas más largas.

En términos de la página de destino posterior al clic, lo más probable es que sea una página de ventas. Estas piezas persuasivas de material publicitario redactadas por expertos pueden crecer hasta alcanzar proporciones gigantescas. Este, por ejemplo, tiene más de 5,000 palabras (haga clic aquí para ver la página completa):

Un mapa de desplazamiento en una página como esta puede decirle a sus creadores dónde se están quedando las personas en el proceso de lectura. Con esos datos, los creadores pueden formular hipótesis sobre las razones del abandono: texto deslucido, anuncios molestos o incluso un cambio en el color de fondo, dice Peep Laja:

Si tiene líneas fuertes o cambios de color (p. Ej., El fondo blanco se vuelve naranja), esos se denominan "fines lógicos"; a menudo, la gente piensa que lo que sigue ya no está conectado con lo que vino antes.

A partir de ahí, los optimizadores pueden probar formas potenciales de hacer que las personas lean toda la página, lo que un experimento de Nielsen Norman Group muestra que sin duda es posible:

Es raro pero posible.

Tenga en cuenta que el mapa de arriba es de movimientos oculares, no exclusivamente de profundidad de desplazamiento. Eso significa que es más detallado de lo que verá en un mapa de desplazamiento, que solo mostrará cuánto avanzaron sus visitantes en la página. Aquí hay un ejemplo de una prueba realizada en el sitio web de RJMetrics:

Las áreas más vistas de esta página web, por color, son:

• blanco
• rojo
• Amarillo
• Verde
• Azul

Sabemos lo que está pensando: ¿cómo podría verse menos la parte superior de una página que la mitad?

Bueno, la investigación de Chartbeat muestra que muchas personas tienden a comenzar a desplazarse antes de que se cargue una página, lo que significa que se perderán la parte superior.

Su investigación también muestra que la participación alcanza su punto máximo justo debajo del pliegue en muchas páginas:

Y eso puede explicar por qué el área cercana al pliegue es roja, mientras que gran parte del área superior es amarilla.

A partir de este mapa, Stephanie Liu, una ex desarrolladora de front-end en RJMetrics, planteó la siguiente hipótesis:

Mi hipótesis era que mover el botón al área del mapa de desplazamiento al rojo vivo haría que el diseño tuviera una tasa de conversión más alta en comparación con la página de precios original. Más personas prestarían atención al botón simplemente porque sus ojos permanecerían allí más tiempo.

La página original se veía así:

La variación que creó se veía así:

El resultado fue un aumento del 310% en las conversiones.

Las dos conclusiones importantes de esta prueba de mapa de desplazamiento son:

1. Con un mapa de desplazamiento, no sabrá por qué las personas se desplazan tanto como lo hacen. Usted y su equipo tendrán que hacer algunas pruebas de hipótesis para averiguarlo.

2. A veces no es necesario saber por qué la gente deja donde lo hace. El objetivo no siempre es lograr que las personas se desplacen más profundamente. En el caso de Stephanie, simplemente mover el botón de llamada a la acción a un área más vista generó un gran aumento de conversión para RJMetrics.

Hover mapas de calor (también conocidos como mapas de calor de movimiento)

Sus ojos se mueven donde lo hace el cursor del mouse; esa es la suposición general en la que se basan los mapas de calor flotante, también conocidos como mapas de calor de "movimiento".

La precisión de estos mapas se basa en la correlación entre el movimiento de los ojos y el movimiento del mouse, que según el estudio al que se hizo referencia anteriormente puede rondar el 84-88%. Sin embargo, otras fuentes no están convencidas de que sea tan alto.

En 2010, la Dra. Anne Aula de Google publicó sus hallazgos sobre la precisión de los mapas de calor flotantes:

• El 6% de las personas mostró una correlación vertical entre el movimiento del ratón y el movimiento de los ojos.
• El 19% de las personas mostró una correlación horizontal entre el movimiento del ratón y el movimiento de los ojos.
• El 10% de las personas se desplazó sobre un elemento de página en particular mientras miraba las áreas a su alrededor.

Y otro experimento más de Google y Carnegie Mellon encontró una correlación del 64% entre el movimiento del ratón y el movimiento de los ojos.

No hace falta decir que la investigación sobre mapas de calor de movimiento está por todas partes. Pero, ¿qué pasa con las aplicaciones de la vida real?

Bueno, eso también está por todos lados.

Aquí hay un mapa de calor flotante que North Face usó para optimizar su página de pago:

A la izquierda, la versión A parece mostrar un banner en la barra lateral derecha que está recibiendo más atención que el botón de llamada a la acción (encerrado en un círculo en blanco) debajo de él. La versión B tiene eso en cuenta y cambia el banner con el botón (nuevamente, en un círculo en blanco).

El resultado fue un aumento del 62% en la tasa de conversión.

Aquí hay otro mapa flotante que parece mostrar ... Bueno ... Compruébelo usted mismo:

No parece haber una conclusión clara de este mapa. Hay mucho revoloteo. En todos lados.

En general, lo más importante que se puede extraer de la investigación del mapa de calor flotante y sus aplicaciones prácticas es lo siguiente:

Use mapas flotantes para informar su diseño, pero en palabras de Rory Gallagher de EyeQuant, "no generalice demasiado".

Si su mapa se parece al producido por North Face, es posible que tenga una hipótesis valiosa para las pruebas A / B, como esta:

“Observamos en un mapa de calor flotante que el área sobre el botón de CTA de la página de pago parece estar atrayendo más la atención de los visitantes. Por lo tanto, creemos que al cambiar el botón con el banner promocional encima, podemos impulsar los pagos ".

Sin embargo, si desarrolla una hipótesis de prueba a partir del segundo mapa de calor, probablemente sea culpable de sesgo de confirmación: buscar un resultado particular de una prueba simplemente porque confirma su creencia en algo. Un tramo mal informado podría verse así:

“Notamos en el mapa de calor flotante que las palabras 'Cómo hacer' parecen atraer más atención que cualquier otra cosa por encima del pliegue. Por lo tanto, creemos que todos los titulares de las publicaciones de blogs deben comenzar con 'Cómo hacer' en el futuro para atraer a los lectores ".

"Cómo" es una excelente manera de comenzar un título, pero esta prueba no lo indica. Acérquese a los resultados de su mapa de calor con una mentalidad escéptica y solo pruebe cuando tenga una razón clara para hacerlo.

Usar mapas de calor de manera responsable

Los mapas de calor son valiosos para descubrir cómo las personas usan su página web, pero no deberían ser la única herramienta que use para hacerlo. Por sí solos, pintan una imagen incompleta de sus usuarios, y confiar en ellos como su único indicador del comportamiento del cliente potencial tiene el potencial de engañarlo. El equipo de Optimizely ofrece un ejemplo:

Al mirar un mapa de calor de un formulario, puede mostrar que los usuarios están haciendo clic en el primer campo y que hay menos clics en los campos siguientes.

Esto podría sugerir que los usuarios abandonan el proceso después de completar el primer campo. Sin embargo, lo que no muestran los mapas de calor es si los usuarios han usado su teclado para desplazarse por los campos de formulario, en lugar de su mouse.

Por razones como esa, la combinación de sus mapas de calor con información de otras herramientas como Google Analytics o Instapage Analytics formará una imagen más completa de cómo se comportan sus clientes potenciales en su página de destino posterior al clic.

Pero, ¿valdrá algo esa “imagen más completa”? No si no recopila suficientes datos de usuario, dice Peep Laja:

Necesita suficiente tamaño de muestra por página / pantalla antes de poder confiar en los resultados. Un estadio aproximado sería de 2000 a 3000 páginas vistas por pantalla de diseño. Si el mapa de calor se basa en 34 usuarios, no confíe en ninguno de ellos.

Al final del día, es importante recordar que los mapas de calor no son datos; simplemente organizan los datos de una manera fácilmente digerible. Muestran clics, desplazamientos y desplazamientos. Lo que significan esos movimientos del mouse depende de usted determinarlo.

Siempre conecte todos sus anuncios a páginas de destino post-clic personalizadas para reducir su costo por adquisición de cliente. Comience a crear sus páginas dedicadas posteriores al clic registrándose hoy para una demostración de Instapage Enterprise.