Mapas de calor: analiza y visualiza el co­m­po­r­ta­mie­n­to de tus vi­si­ta­n­tes

Quien quiera mantener una web de forma pe­r­ma­ne­n­te en Internet, se enfrenta a la tarea de atraer vi­si­ta­n­tes con re­gu­la­ri­dad. Ga­ra­n­ti­zar y mantener la calidad del contenido, así como velar por una correcta op­ti­mi­za­ción en los motores de búsqueda son dos de los pasos más im­po­r­ta­n­tes. Por sí solo, un tráfico muy alto no será su­fi­cie­n­te, pues el proyecto tiene que fi­na­n­ciar­se de alguna forma. In­de­pe­n­die­n­te­me­n­te de si gestionas un comercio ele­c­tró­ni­co y vendes productos o de si ofreces in­fo­r­ma­ción y sostienes tu proyecto online por medio de su­s­cri­p­cio­nes o pu­bli­ci­dad de pago, toda web depende de que sus vi­si­ta­n­tes actúen y hagan los clics decisivos. Por lo tanto, además de un aumento de vi­si­ta­n­tes, es necesario lograr las llamadas co­n­ve­r­sio­nes, en las que los usuarios in­te­re­sa­dos se co­n­vie­r­tan en clientes.

A este respecto, hay un elemento que tiene una in­flue­n­cia es­pe­cia­l­me­n­te alta en el número de co­n­ve­r­sio­nes: la usa­bi­li­dad de tu página web. Cuanto más fácil de usar sea tu página web, mayores serán las po­si­bi­li­da­des de éxito, pero es común que no se alcancen las co­n­ve­r­sio­nes deseadas porque la mayoría de los usuarios si­m­ple­me­n­te pasa por alto el botón donde deben hacer clic. Una forma in­te­re­sa­n­te de analizar la usa­bi­li­dad de tu web es ana­li­za­n­do el llamado mapa de calor.

El análisis de mapas de calor re­pre­se­n­ta una forma especial de in­ve­s­ti­ga­ción para analizar el co­m­po­r­ta­mie­n­to de los usuarios en una página web. Con este fin, se crea un heatmap. Este re­pre­se­n­ta el co­m­po­r­ta­mie­n­to de los vi­si­ta­n­tes uti­li­za­n­do di­fe­re­n­tes colores y re­sa­l­ta­n­do las fo­r­ta­le­zas y de­bi­li­da­des de la usa­bi­li­dad de una web. Al igual que con una cámara de imagen térmica, los colores re­pre­se­n­tan di­fe­re­n­tes grados de te­m­pe­ra­tu­ra. El mapa de calor clásico está compuesto por los colores rojo (caliente), amarillo (tibio) y azul (frío). Tonos como el naranja (medio caliente) o verde (fresco) re­pre­se­n­tan la tra­n­si­ción entre las etapas in­di­vi­dua­les de ca­le­n­ta­mie­n­to.

Los heatmaps no son un invento del marketing online. En el siglo IXX, el estadista Toussaint Loua publicó una re­pre­se­n­ta­ción tabular de los distritos de París en el que, ini­cia­l­me­n­te en blanco y negro, se mostraban ca­ra­c­te­rí­s­ti­cas es­pe­cia­les de la población, aunque más adelante se re­pre­se­n­ta­rían también en colores. Hoy en día, dichas vi­sua­li­za­cio­nes no solo resultan de gran utilidad a efectos del análisis web, sino que también son uti­li­za­das, por ejemplo, para el pro­nó­s­ti­co del tiempo, el ase­so­ra­mie­n­to ene­r­gé­ti­co y para el análisis de partidos de fútbol.

Los valores de las te­m­pe­ra­tu­ras esperadas para mañana se basan en datos simulados y se re­pre­se­n­tan en un heatmap. Los de­s­pla­za­mie­n­tos hechos por los jugadores de fútbol se adquieren de los valores obtenidos a través de su lo­ca­li­za­ción por GPS. Sin embargo, cuando se trata de una página web y del co­m­po­r­ta­mie­n­to de sus usuarios, surge una pregunta: ¿de dónde proviene la in­fo­r­ma­ción que permite realizar dicha re­pre­se­n­ta­ción visual? Esto se logra pri­n­ci­pa­l­me­n­te gracias a los llamados me­ca­ni­s­mos de web tracking o de rastreo que se encargan de capturar ciertas acciones del usuario. Entre estos se destacan pri­n­ci­pa­l­me­n­te los si­guie­n­tes cuatro métodos.

Otra manera eficaz de de­te­r­mi­nar el co­m­po­r­ta­mie­n­to de los usuarios es mediante el registro y análisis de clics. El objetivo es de­te­r­mi­nar qué enlaces, contenido medial o elementos del menú reciben la mayor cantidad de clics. Al mismo tiempo, es posible obtener in­fo­r­ma­ción sobre el interés es­pe­cí­fi­co del usuario en de­te­r­mi­na­das áreas de la web que, a la vez, pueden resultar poco fu­n­cio­na­les. Es común que los usuarios hagan clic en estas áreas, muchas veces in­co­n­s­cie­n­te­me­n­te, por ejemplo para resaltar o copiar pasajes de texto. Para registrar los clics de los usuarios es necesario añadir un co­n­tro­la­dor de eventos al código fuente de la página web. Es por esto que esta técnica de rastreo también es conocida como event tracking. Este co­n­tro­la­dor de eventos designa un ide­n­ti­fi­ca­dor de objetos único para los elementos in­di­vi­dua­les y sus po­si­cio­nes, pe­r­mi­tié­n­do­le al software asignar los clics a uno u otro usuario.

Ge­ne­ra­l­me­n­te, con esta me­to­do­lo­gía el resultado final no es un mapa de calor, sino un mapa de clics. Este tipo de re­pre­se­n­ta­ción muestra aquellos lugares donde el usuario ha hecho clic. Dichos puntos se pueden vi­sua­li­zar en di­fe­re­n­tes colores de­pe­n­die­n­do del proveedor o software de se­gui­mie­n­to se­le­c­cio­na­do para di­s­ti­n­guir a los tipos de usuarios. Así, por ejemplo, es posible di­fe­re­n­ciar entre clientes nuevos y ha­bi­tua­les o cla­si­fi­car los re­su­l­ta­dos de­pe­n­die­n­do de la página de origen. Una opción adicional son los mapas de clics, en los que se presentan cifras acerca de la fre­cue­n­cia con la que los usuarios hicieron clic sobre ciertos enlaces. Un mapa de calor por temas también es una posible opción de vi­sua­li­za­ción.

Si operas un proyecto web que se ca­ra­c­te­ri­za por artículos o pu­bli­ca­cio­nes muy largas, el scroll tracking (se­gui­mie­n­to de de­s­pla­za­mie­n­to) puede ser una solución de primera clase para probar el impacto de este tipo de páginas. Aunque las he­rra­mie­n­tas tra­di­cio­na­les de análisis web te muestran el tiempo de pe­r­ma­ne­n­cia de un usuario, estas no siempre dan in­fo­r­ma­ción sobre si este se ha de­s­pla­za­do hasta el final o solo ha percibido la parte superior. El llamado scroll tracking puede ser un indicador im­po­r­ta­n­te a la hora de de­te­r­mi­nar si el contenido es recibido co­rre­c­ta­me­n­te por parte de los vi­si­ta­n­tes de la web. Si los re­su­l­ta­dos arrojados por el scroll tracking no son tan fa­vo­ra­bles para el ámbito inferior de la página, esto puede ser una señal de que la calidad general del texto y otros co­n­te­ni­dos deben mejorarse o de que, tal vez, la longitud elegida no es la ideal.

El scroll tracking se im­ple­me­n­ta de forma similar al clic tracking. Para ello también se utilizan eventos en los que se le asigna un ID de objeto es­pe­cí­fi­co a di­fe­re­n­tes secciones in­di­vi­dua­les. Por defecto, los re­su­l­ta­dos de este análisis se muestran en po­r­ce­n­ta­jes y se re­pre­se­n­tan en una tabla. De esta manera es posible saber exac­ta­me­n­te, por ejemplo, cuántos usuarios han visto tu página en un 25, 50, 75 o 100 por ciento. También es posible re­pre­se­n­tar los re­su­l­ta­dos uti­li­za­n­do los gra­die­n­tes de color típicos del heatmap, con el color rojo como punto de partida y el azul como punto de menor pe­r­ce­p­ción de la web. Estos re­su­l­ta­dos pueden ser un detonante para re­fle­xio­nar sobre el po­si­cio­na­mie­n­to de los elementos más re­le­va­n­tes, así como también pueden servir como análisis detallado del enfoque de tu contenido.

Los mapas de calor obtenidos por medio del mouse tracking de­te­r­mi­nan el orden en el que los vi­si­ta­n­tes perciben las di­fe­re­n­tes áreas de contenido. Esta forma de vi­sua­li­zar el co­m­po­r­ta­mie­n­to del usuario no se basa en el mo­vi­mie­n­to de los ojos, en su de­s­pla­za­mie­n­to por la web o en la cantidad de clics, sino en los mo­vi­mie­n­tos hechos por los usuarios con el cursor del ratón. Por lo general, este tipo de análisis arroja una imagen muy precisa sobre las áreas que un usuario estuvo ob­se­r­va­n­do en un momento de­te­r­mi­na­do. Al igual que en el eye tracking, este método requiere un registro completo de la sesión del usuario. Sin embargo, no se necesita ningún programa especial, úni­ca­me­n­te una solución de software adecuada que facilite el registro y la eva­lua­ción de los mo­vi­mie­n­tos.

Existen di­fe­re­n­tes po­si­bi­li­da­des técnicas para generar un heatmap, di­fe­re­n­cia­das, en principio, por la in­te­n­si­dad y los métodos de se­gui­mie­n­to que ofrecen. Esto también se refleja en el precio, por lo que, en primer lugar, la elección de la he­rra­mie­n­ta idónea para el análisis es una cuestión de costes.

• Scripts y plugins: con la ayuda de se­cue­n­cias de comandos y ex­te­n­sio­nes para tu CMS, que se ejecutan en el servidor, tendrás el control sobre el registro de los mo­vi­mie­n­tos del ratón y de los clics. Este tipo de so­lu­cio­nes pueden, incluso, pro­gra­mar­se por medios propios si se cuenta con la ex­pe­rie­n­cia y los co­no­ci­mie­n­tos ne­ce­sa­rios. Al­te­r­na­ti­va­me­n­te puedes utilizar he­rra­mie­n­tas como heatmap.js. Esta bi­blio­te­ca de Ja­va­S­cri­pt pro­po­r­cio­na las bases ne­ce­sa­rias, in­clu­ye­n­do una detallada do­cu­me­n­ta­ción para co­n­fi­gu­rar el mouse tracking en tu web con unas pocas líneas de código, para generar, po­s­te­rio­r­me­n­te, el mapa de calor con la in­fo­r­ma­ción re­gi­s­tra­da. Aunque es una he­rra­mie­n­ta gratuita, para realizar el se­gui­mie­n­to es necesario contar con recursos como el servidor web y la base de datos.  

• Si­mu­la­do­res de mapa de calor: si, debido a los altos costes e inversión de tiempo, un análisis profundo es algo renuente, una si­mu­la­ción de se­gui­mie­n­to puede ser la opción adecuada. Di­fe­re­n­tes pro­vee­do­res ofrecen servicios online como EyeQuant o Feng-GUI que, basándose en datos, al­go­ri­t­mos y ob­se­r­va­cio­nes concretas, simulan el co­m­po­r­ta­mie­n­to potencial de los usuarios. Para dicho efecto solo es necesario cargar una captura de pantalla de la página web que va a ana­li­zar­se y, a cambio, el simulador arrojará, en poco tiempo, el co­rre­s­po­n­die­n­te heatmap.   

• He­rra­mie­n­tas de pago: en caso de que estés buscando una he­rra­mie­n­ta de vi­sua­li­za­ción pro­fe­sio­nal del co­m­po­r­ta­mie­n­to de los usuarios que no requiera co­no­ci­mie­n­tos técnicos o de pro­gra­ma­ción y que, además, no se base en valores teóricos, las so­lu­cio­nes online de pago son las adecuadas para ti. Estos servicios ofrecen programas Ja­va­S­cri­pt que registran y asumen el control de la gestión y eva­lua­ción de los datos. Solo necesitas elegir alguna de sus tarifas, in­tro­du­cir las líneas de código co­rre­s­po­n­die­n­tes en tu proyecto web y definir los aspectos que quieres analizar. De­pe­n­die­n­do del proveedor tendrás a tu di­s­po­si­ción (en tiempo real o posterior al análisis) la vi­sua­li­za­ción de cómo se desplaza el usuario por tu web, así como de los lugares en donde hace clic o mueve el cursor del ratón. Algunas he­rra­mie­n­tas de pago que ofrecen extensos análisis de calor son Crazy Egg, Clicktale y Mouseflow.

Crear heatmaps para analizar a los usuarios y su co­m­po­r­ta­mie­n­to permite obtener in­fo­r­ma­ción valiosa sobre el diseño, la fu­n­cio­na­li­dad y la facilidad de uso de un proyecto web. Sin embargo, de la misma forma que la mayoría de análisis web, es necesario cla­si­fi­car y evaluar los re­su­l­ta­dos en el contexto adecuado. Así, mientras que estos análisis permiten la obtención de im­pre­sio­nes altamente si­g­ni­fi­ca­ti­vas como, por ejemplo, cuántas veces se ha hecho clic en un enlace, un mapa de calor no te dirá si después de hacer clic, el usuario realmente encontró lo que estaba buscando. De la misma forma, no será posible ide­n­ti­fi­car las razones del clic (posición o vi­si­bi­li­dad del elemento en la web, coin­ci­de­n­cia). Por esta razón, siempre se re­co­mie­n­da vincular el análisis de mapa de calor a otros datos, en pa­r­ti­cu­lar, la tasa de rebote o el tiempo de pe­r­ma­ne­n­cia en el sitio enlazado. Recuerda que la única manera de obtener in­fo­r­ma­ción cien por cien fiable sobre si un elemento en pa­r­ti­cu­lar tiene el efecto de usa­bi­li­dad deseado es pre­gu­n­ta­n­do di­re­c­ta­me­n­te a tus vi­si­ta­n­tes. Otra de sus de­s­ve­n­ta­jas son las páginas web con poco tráfico: cuanto menor sea el tráfico, menor im­po­r­ta­n­cia tendrán los re­su­l­ta­dos del análisis del heatmap y mayor será la po­si­bi­li­dad de una mala in­te­r­pre­ta­ción, de manera similar, por ejemplo, al A/B Testing. Debido a que la apre­cia­ción y la manera en la que cada visitante utiliza tu web son di­fe­re­n­tes, se necesita recoger una gran cantidad de datos durante largos períodos de tiempo con el fin de de­te­r­mi­nar y concluir una tendencia clara. Adi­cio­na­l­me­n­te, la im­ple­me­n­ta­ción de mapas de calor en proyectos web dinámicos también resulta pro­ble­má­ti­ca, pues sus co­n­te­ni­dos cambian co­n­s­ta­n­te­me­n­te. Sin embargo, aunque puedes centrarte en el análisis de elementos de po­si­cio­na­mie­n­to como la barra de na­ve­ga­ción, analizar la in­flue­n­cia de un contenido cambiante es algo difícil de realizar.

Si quieres saber en dónde deberías colocar uno u otro contenido dentro de tu web o en qué áreas y elementos deberías co­n­ce­n­trar mayores esfuerzos, un análisis del heatmap de tu página te pro­po­r­cio­na­rá las re­s­pue­s­tas que estás buscando. Gracias a la vi­sua­li­za­ción del co­m­po­r­ta­mie­n­to de los vi­si­ta­n­tes, el análisis no se detiene en datos su­pe­r­fi­cia­les como el tiempo de retención absoluto o si se alcanzó o no una co­n­ve­r­sión. Los re­su­l­ta­dos de di­fe­re­n­tes tipos de se­gui­mie­n­to como el clic traking, el eye tracking, el scroll tracking y el mouse movement tracking arrojan in­fo­r­ma­ción detallada sobre cómo se percibe y utiliza tu sitio web. Así, co­m­bi­na­n­do los re­su­l­ta­dos obtenidos del mapa de calor con métodos de análisis web tra­di­cio­na­les, estarás au­me­n­ta­n­do las po­si­bi­li­da­des de mejorar tu tasa de co­n­ve­r­sión.