Universos virtuales

Herramientas de prueba de usabilidad

Qué son mapa de calor de sitios web y cómo usarlos

¿QUÉ ES UN MAPA DE CALOR DE SITIOS WEB Y CÓMO USARLOS?

Desmitificando los mapa de calor de sitios web: una guía completa para compradores y emprendedores que quieren comprender como sus clientes potenciales se manejan en sus tiendas online o sitios web.

Un mapa de calor o en ingles (Heat maps): es probablemente la categoría más amplia y popular de herramientas de información disponible para cualquier empresa que desee comprender y mejorar la experiencia del usuario en su tienda online o sitio web.

Herramientas de prueba de usabilidad

Así que vayamos directamente a todo eso…

Tabla de Contenido

Han existido durante años y la mayoría de las empresas los han utilizado en algún momento u otro. Son una herramienta básica para los departamentos de análisis, los equipos de optimización de conversiones y los profesionales de la experiencia del usuario de todo el mundo.

Pero existe una enorme confusión acerca de lo que realmente miden los mapa de calor y cómo deben usarse.

La verdad es que la mayoría de las personas que usan mapa de calor los están usando mal.

Mapa de calor: es probablemente la categoría más amplia y popular de herramientas de información disponible para cualquier empresa que desee comprender y mejorar la experiencia del usuario en su sitio web.

No es de extrañar que la gente se confunda; todos los mapas tienen el mismo aspecto, solo una mancha rojiza-amarillenta-verde azulada sobre la parte superior de su sitio web.

Los proveedores de este espacio no lo han facilitado. En un esfuerzo por simplificar su mensaje, muchos son culpables de usar términos demasiado vagos para describir lo que hacen, y no existen convenciones de nomenclatura consistentes para los diferentes tipos de mapa de calor.

En esta publicación, intentaremos arrojar algo de luz sobre el tema para que obtenga más valor de los mapas que usa y sepa qué tipos realmente necesita según sus objetivos. También señalaremos errores y malentendidos comunes.

Comencemos con la  regla n. ° 1 que debe conocer:

Los mapa de calor no son más que un método para visualizar datos, y no hay información hasta que comprenda qué datos está visualizando.

Es increíblemente importante internalizar este concepto. Los mapa de calor no son datos, presentan datos . Son una forma de codificar números por colores. Un mapa de calor puede representar cualquier cosa, desde el clima, la congestión del tráfico, la eficiencia energética de su casa, etc.

Los-mapas-de-calor-no-son-mas-que-un-metodo-para-visualizar-datos

Como puede ver, existen notables diferencias entre ellos. El mapa de la izquierda es de EyeQuant, y muestra qué contenido es más probable que llame la atención de los usuarios cuando llegan por primera vez a la página (nota: esto se simula en realidad usando una IA , más sobre eso más adelante). Notará que las personas tienden a ver el título, la llamada a la acción y la imagen del producto de inmediato.

El segundo mapa (de HotJar ) muestra dónde estaban los cursores de los usuarios durante su tiempo en la página. Puede ver que muchas personas se desplazaron sobre el texto y los enlaces en la navegación, mientras que otros usuarios movieron el cursor hacia un lado (en un espacio en blanco) para que estuviera fuera del camino. Aquí, podemos obtener un poco de información sobre qué contenido fue más interesante para los usuarios.

Finalmente, el mapa de clics (también de HotJar) muestra dónde la gente finalmente hizo clic. Ver estos 3 mapas juntos muestra una buena imagen de la experiencia del usuario: desde lo que les llamó la atención inicialmente, hasta qué contenido fue interesante, hasta lo que los usuarios finalmente decidieron hacer.

¿Cuál es el más relevante? Depende completamente de lo que intente lograr. Con eso en mente, echemos un vistazo más profundo a los diferentes tipos de mapa de calor disponibles.

Mapa de calor de seguimiento del mouse

Mapa-de-calor-de-seguimiento-del-mouse

Éstas son la categoría más común de mapa de calor. Coloca un código de seguimiento en su sitio web, lo deja correr el tiempo suficiente para recopilar suficientes datos y terminará con alguna información interesante sobre cómo los usuarios utilizan el mouse para interactuar con su sitio web. Hay 3 tipos principales de mapa de calor basados ​​en el mouse que puede obtener:

clic en Mapa

Muestran en qué partes de una página se hace más (y menos) clic; ya sea un enlace, una foto, un texto o incluso un espacio en blanco.

mapa-de-clics-de-Hacknovations

Este mapa de clics de Hacknovations muestra que los visitantes a menudo hacían clic en la función de búsqueda y el panel de navegación.

Los mapas de clics son útiles para visualizar qué enlaces y botones son los más populares, pero también son útiles para detectar algunas fallas de usabilidad. Por ejemplo, es posible que ocasionalmente descubra que las personas hacen clic en algo que no tiene un vínculo en ninguna parte. Esto puede indicar una posible confusión sobre cómo navegar por el sitio. 

Por ejemplo, las personas pueden hacer clic en la imagen de un producto porque esperan que les lleve a una página con más información sobre ese producto específico. Una vez que los haya detectado, problemas como este son relativamente fáciles de solucionar.

 

Muchas personas también usan mapas de clics para comprender dónde se quedan las personas cuando completan formas. Esto puede ayudarlo a realizar algunos cambios rápidos en los campos del formulario para aumentar las tasas de finalización.

Mapas de movimiento del mouse

También llamados “mapas de desplazamiento” o “mapas de atención”, estos mapa de calor identifican las partes de la pantalla sobre las que los usuarios se desplazan con el cursor.

mapas-de-desplazamiento o Mapas de movimiento del mouse

Este mapa de calor del movimiento del mouse del blog de  Optimizely  muestra que los usuarios tienden a desplazarse sobre la tabla a la izquierda de la página, lo que sugiere que era una característica útil.

Estos mapas son interesantes porque muchos usuarios tienden a mover el cursor a la parte de la página a la que están atendiendo actualmente. Como resultado, un mapa de movimiento del mouse puede ayudarlo a comprender qué contenido las personas tienden a encontrar más relevantes o interesantes en su página.

Sin embargo, tenga cuidado de no generalizar demasiado: también hay muchos usuarios que son “aparcadores”, lo que significa que dejan el mouse en un lugar independientemente del contenido que les interese en ese momento. Por esa razón, es importante reconocer que estos los mapas no cuentan la historia completa. 

Los proveedores que ofrecen estos mapas a menudo los comparan con el seguimiento ocular, a pesar de un estudio de 2013 de Google y la Universidad Carnegie Mellon que sugiere que el seguimiento del ratón es un proxy débil para el seguimiento ocular y no un sustituto apropiado. Un estudio de Google de 2007 exploró la posibilidad de usar datos de movimiento del mouse para predecir los movimientos de los ojos, pero los investigadores solo pudieron lograr un 64% de precisión con este enfoque.

Desplazarse por mapas

Éstas son una excelente manera de visualizar hasta qué punto la mayoría de los usuarios se desplazan hacia abajo en una página y en qué secciones pasan más tiempo.

mapa-de-desplazamiento

Este mapa de desplazamiento muestra que casi la mitad de los usuarios no se desplazarán lo suficiente como para descubrir lo que buscan.

Los mapas de desplazamiento lo ayudan a comprender cuánto saben realmente sus usuarios sobre sus productos o servicios. Puede ser bastante esclarecedor y un poco angustioso descubrir que muchos usuarios no llegan lo suficientemente abajo en la página para absorber cierto contenido.

Pros y contras de los mapas térmicos de seguimiento del mouse

Pros-y-contras-de-los-mapas-termicos-de-seguimiento-del-mouse

Principales proveedores de mapa de calor de seguimiento del mouse

Hot Jar , Crazy Egg y Clicktale  parecen ser las opciones más populares en el espacio. Hot Jar es el más nuevo de los 3 y ha ganado rápidamente cuota de mercado desde su fundación en 2014. Crazy Egg es la opción más básica, con una oferta bastante limitada pero muy asequible.

 

Decibel Insight es otra buena opción para los compradores empresariales.

 

Por último, pero no menos importante, TruConversion es un nuevo jugador interesante en el espacio. De acuerdo El fundador Justin Rondeau, la empresa (fue adquirida por Digital Marketer) tiene la intención de diferenciarse con potentes funciones de segmentación y filtros avanzados.

Mapa de calor de seguimiento ocular

Mapas-de-calor-de-seguimiento-ocular

Para entender realmente cómo los usuarios realmente se ven tu tienda online o tu sitio web, puede realizar estudios que implican medición y registro de los movimientos oculares físicos de las personas que utilizan su sitio web o o Comercio electronico. 

 

El enfoque clásico para esto se basa en un laboratorio, donde los participantes en el estudio usan dispositivos de seguimiento que miden con precisión cada movimiento de los ojos, aunque algunos proveedores ahora también ofrecen un enfoque basado en cámaras web.

 

Al realizar estudios de seguimiento ocular físico, tiene la capacidad de recopilar muchos datos interesantes que se pueden visualizar como un mapa de calor. Cuando se trata de mapa de calor de seguimiento ocular, es increíblemente importante comprender exactamente lo que está mirando. Una fuente importante de confusión es el marco de tiempo.

 

 

Un mapa de calor que muestra cómo los usuarios ven la página de productos de tu tienda online o las paginas de servicios de tu sitio web durante los primeros 3 segundos, aunque es muy valioso, no se verá igual que uno que se extiende por 30 segundos. El siguiente ejemplo muestra cómo el marco de tiempo afecta el aspecto del mapa de calor:

ejemplo-de-IMOTIONS

Este ejemplo de IMOTIONS muestra cómo las fijaciones en el anuncio evolucionan en varios períodos de tiempo diferentes (de 0 a 2000 milisegundos).

Otra fuente común de confusión con los mapa de calor de seguimiento ocular es alrededor de los datos reales que se muestran. Hay 2 tipos principales de mapa de calor en el seguimiento ocular y son muy diferentes.

Un mapa de calor del volumen de fijación muestra qué partes de la página atrajeron el mayor número de fijaciones oculares. Por lo general, se registra una fijación cada vez que un usuario mira en un solo lugar durante más de 50 milisegundos, lo que básicamente mide la frecuencia con la que las personas miraron un contenido en particular. 

Mientras tanto, un mapa de calor de duración de la fijación muestra cuánto tiempo miraron en un lugar en particular. Mucha gente confunde los dos o no se da cuenta de que existe esta distinción. Como resultado, malinterpretan los datos. Nuevamente, la regla n. ° 1: debe comprender qué datos está visualizando realmente el mapa de calor; de lo contrario, no es útil.

 

Por ejemplo, un mapa de calor de volumen de fijación será más útil para comprender qué contenido realmente se destaca en un diseño (es decir, es el más llamativo), mientras que un mapa de calor de duración de fijación puede proporcionar más información sobre qué contenido fue más interesante visualmente para usuarios.

Un estudio de seguimiento ocular también permite comprender las rutas comunes de la mirada y el orden típico de las fijaciones en la página.

Los pros y los contras del seguimiento ocular varían según los métodos que utilice, pero en general obtiene información que va más allá de la naturaleza transaccional de los clics y los movimientos del mouse. Además, puede realizar un estudio de seguimiento ocular en prototipos y maquetas, no solo en sitios web activos. Esa es una gran ventaja si está trabajando en un rediseño importante.

 

La desventaja del seguimiento ocular se reduce principalmente a la practicidad. Tiende a ser costoso y lento, sin embargo, puede tener sentido dependiendo del proyecto. Echemos un vistazo a algunas de sus opciones si desea recopilar algunos datos de seguimiento ocular:

Laboratorios profesionales de seguimiento ocular

Hay muchos laboratorios de investigación de usuarios que puede contratar para realizar estudios de seguimiento ocular profesionales con hardware de alta calidad y configuración de experimentos expertos. Este enfoque ofrece los resultados más precisos y le permite personalizar los diferentes tipos de información que le gustaría obtener del estudio.

Laboratorios-profesionales-de-seguimiento-ocular

Un laboratorio de usabilidad profesional en la   consultoría Experience Dynamics.

Es probable que pueda combinar los datos con entrevistas cualitativas con las personas que visitan su sitio, lo que puede brindar información adicional. Esta es una opción interesante si está buscando un proyecto único para obtener una comprensión más profunda de cómo los usuarios ven su sitio web, no solo cómo hacen clic o navegan por él. 

También podría ser un excelente método si desea validar prototipos de última etapa para un rediseño importante que aún no se ha lanzado.

Pros y contras del uso de Professional de laboratorios

Pros-y-contras-del-seguimiento-ocular-interno

Seguimiento ocular interno

También hay una opción de bricolaje para el seguimiento ocular. El hardware requerido se ha vuelto mucho más asequible en los últimos años, por lo que es completamente posible comprar su propio equipo y configurar sus propios estudios de seguimiento ocular. Esto puede tener sentido si planea realizar pruebas constantes en proyectos de alto valor y está dispuesto a invertir tanto en el equipo como en la experiencia.

Seguimiento-ocular-interno

Un ejemplo de una configuración de seguimiento ocular interna del blog de ConversionXL.

Proveedor principal de equipos de seguimiento ocular:

El líder en el espacio es Tobii, que ofrece una amplia gama de hardware de seguimiento ocular.

Seguimiento ocular remoto a través de la cámara web

Este enfoque no utiliza ningún equipo profesional y le permite a los participantes hacer un seguimiento colectivo de los movimientos oculares a través de su propia cámara web. Esta es una opción interesante para cuando desea realizar un seguimiento ocular regular pero no tiene el presupuesto para un estudio profesional.

Seguimiento-ocular-remoto-a-traves-de-la-camara-web

Pros y contras del seguimiento ocular remoto a través de la cámara web

Pros-y-contras-del-seguimiento-ocular-remoto-a-traves-de-la-cámara-web

Proveedor principal para el seguimiento ocular de cámara web:

Sticky es el proveedor líder en este espacio.

Proveedor principal para el seguimiento ocular de cámara web:

Los mapa de calor que ofrecen  enfoque popular para obtener información sobre el diseño web, que habría parecido ciencia ficción hace una década.

 

Al aplicar algoritmos de aprendizaje automático a los datos de investigación del usuario, hemos creado una IA para el análisis de diseño que incluye mapas térmicos de atención visual iniciales. ¿Qué tiene de especial esto? El enfoque es que puede obtener comentarios sobre cualquier diseño en cuestión de segundos.

 

Aquí hay un vistazo rápido a los diferentes mapas que puede obtener:

Mapa de calor de atención inicial

Este mapa es el equivalente a un mapa de calor de seguimiento ocular de volumen de fijación de 3 segundos con al menos 25 participantes. Muestra qué contenido es más y menos llamativo para los usuarios cuando llegan por primera vez.

Mapa-de-calor-de-atencion-inicial

Con este mapa, es fácil detectar contenido que pueda distraer a los usuarios. Los resultados son un 85-90% más precisos que el seguimiento ocular en laboratorio.

Mapa de percepción

Esta visualización muestra qué contenido AI espera que las personas vean dentro de los 3 segundos posteriores al aterrizaje en la página (cubriendo aproximadamente los primeros 10 movimientos oculares).

Mapa-de-percepcion

Esto le permite verificar rápida y fácilmente si los usuarios verán el contenido más importante en la página de inmediato, o si tienen que esforzarse para encontrarlo. Si has hecho un buen trabajo Al establecer una jerarquía visual en la página, los usuarios deberían ver inmediatamente de qué trata la página, por qué deberían preocuparse y adónde ir a continuación.

Mapa de claridad

Los mapas de claridad (también conocidos como mapas de desorden) muestran qué partes de su diseño tienen más (y menos) probabilidades de ser consideradas demasiado desordenadas.

Mapa-de-claridad

El mapa de claridad de Fans.com sugiere que las imágenes de fondo pueden estar demasiado ocupadas.

Este mapa es útil para detectar áreas en un diseño que deben arreglarse, eliminarse o rediseñarse.

 

Algunos casos de uso típicos son: comparar y validar ideas de diseño, comunicar decisiones de diseño a las partes interesadas, calificar variantes de diseño para pruebas adicionales y para el control de calidad en creatividades (opciones de banner, imágenes de héroe).

Cuáles necesitas según tus objetivos

No todos los mapa de calor son necesarios para ayudarlo a realizar tareas específicas. Otras veces un cierto mapa de calor puede ser bueno tener, pero no es tan factible de implementar. Aquí tienes las que te recomendamos que utilices según el tipo de trabajo que estés realizando.

Un gran rediseño

Seguimiento ocular profesional

Nadie quiere invertir una gran cantidad de tiempo y dinero en el rediseño de su sitio web solo para que fracase cuando se lance. Pero sucede todo el tiempo: desde Marks & Spencer, a Healthcare.gov, a los múltiples rediseños fallidos de Target.com.

El-rediseño-de-Target-en-2013

El rediseño de Target en 2013 generó un artículo de AdWeek titulado “Casi todo el mundo odia el nuevo rediseño de Target.com”.

No hay absolutamente ninguna excusa para enviar un nuevo sitio web sin realizar algunas pruebas previas para validar el nuevo diseño. No hacer esto puede ser un error costoso que retrasa a la empresa en su transformación digital e incluso podría costarle su trabajo.

 

Además de las pruebas de usuario cualitativas, puede resultar útil realizar un estudio de seguimiento ocular profesional sobre los nuevos diseños antes de su lanzamiento. Sin embargo, ese diseño final será el resultado de miles de decisiones de diseño más pequeñas, y cada una de ellas debe tomarse como objetivamente como sea posible. Aquellos del día a día en los que los mapa de calor  pueden ser de gran ayuda.

Construyendo una pila de análisis

Mapa de calor de seguimiento del mouse

Muchas empresas comienzan a buscar mapa de calor porque recientemente decidieron invertir en un conjunto de análisis más sofisticado y están creando una pila de herramientas para proporcionar datos concretos sobre cómo se comportan los usuarios en su sitio web. En la mayoría de los casos, el equipo de análisis será el propietario de esta pila y proporcionará información sobre otras áreas del negocio cuando sea necesario.

El-rediseño-de-Target-en-2013

Ejemplo de un   panel de Adobe Analytics.

Para este caso de uso, los mapa de calor de seguimiento del mouse (que recopilan datos pasivamente) son probablemente la mejor opción, mientras que un investigador especializado en UX podría estar más interesado en los otros métodos que hemos analizado.

Un programa de optimización de conversiones

Mapa de calor de seguimiento del mouse

Muchas empresas ahora tienen un equipo de optimización de conversión dedicado que recopila ideas sobre cómo mejorar su sitio web y realiza pruebas A / B con la esperanza de aumentar las tasas de conversión. El mantra en años anteriores era que incluso las pruebas perdidas son en realidad ganadoras, porque aprendes algo sobre tus usuarios. Si bien es cierto en cierto sentido, la empresa también necesita ver un retorno de la inversión, y muy pocas pruebas A / B realmente generan mejoras significativas.

Mapa-de-calor-de-seguimiento-del-mouse en tienda

Foto de la publicación de Neil Patel  sobre el dominio de las pruebas A / B

Eso ejerce presión sobre el equipo de optimización para mejorar su tasa de ganancias. La forma más fundamental de hacerlo es formular mejores hipótesis mediante una investigación más directa sobre cómo los usuarios interactúan actualmente con tu tienda online o tu sitio web. Cuantas más fuentes de datos apunten en la misma dirección, mejor. Ahí es donde los mapa de calor de seguimiento del mouse pueden ser muy valiosos, además de las pruebas de los usuarios, las encuestas, etc.  también puede ayudar aquí al mostrar posibles fallas en la interfaz de usuario.

 

Otra forma clave de mejorar las tasas de ganancia es validando posibles variantes de página antes de comprometerse con la prueba A / B. Para los cambios relacionados con el diseño, es una excelente manera de validar variantes de diseño antes de iniciar una prueba y eliminar las variantes más débiles. El efecto de esto es doble: debería ver una tasa de ganancia más alta y perderá menos tiempo en variantes deficientes, lo que lo ayuda a aumentar la velocidad de la prueba.

 

El seguimiento ocular no suele ser una gran solución para el trabajo diario de los equipos de optimización, principalmente por razones prácticas y presupuestarias.

Conclusión

Los profesionales de Internet han estado usando mapa de calor durante años para mejorar sus sitios web asi como sus tiendas online y comprender como los usuarios interactúan con su sitio web. En este punto, debería estar bien equipado para atravesar la jungla de los mensajes de marketing y llevar los mapa de calor adecuados a su arsenal de herramientas. Aquí hay algunas cosas importantes para recordar.

 

  1. La pieza más importante del rompecabezas es comprender los datos que representa cada mapa de calor. Determine lo que está tratando de lograr, luego averigüe qué datos son más relevantes para ayudarlo a llegar allí.
  1. Piense en su flujo de trabajo: ¿cuándo necesita información y con qué frecuencia? Algunas herramientas de mapa de calor son más adecuadas para proyectos únicos, mientras que otras se pueden usar todos los días. Algunos se pueden usar durante el proceso de diseño, mientras que otros solo pueden brindarle comentarios una vez que una página esté activa en su sitio web.
  1. No es una decisión de una u otra. Los equipos digitales de clase mundial a menudo usan varios tipos diferentes de mapa de calor en diferentes partes de su flujo de trabajo. Es posible que deba considerar el uso de más de un proveedor.

La mayoría de los proveedores ofrecen demostraciones personalizadas, informes técnicos o pruebas gratuitas, por lo que es bastante sencillo conocer lo que su servicio tiene para ofrecer.