Nos encanta saber qué hacen los visitantes cuando entran en nuestra web. ¿Leen todo el contenido de las páginas o sólo una parte? ¿Ven el botón que lleva a la página de precios? Nos hacemos miles de preguntas cuya respuesta nos podría ayudar a mejorar la web y, por tanto, los objetivos que nos planteamos con esta. Objetivos que directa o indirectamente querremos convertir en dinero para nuestros bolsillos ?.
Gracias a la analítica web tenemos mucha parte del trabajo hecha. Si eres un lector habitual de nuestro blog sabrás que Google Analytics puede darte mucha información sobre el comportamiento de tus visitantes. Y además es una herramienta gratuita cuya instalación es de lo más sencilla. Pero esto es sólo una parte de lo que podemos llegar a averiguar sobre nuestra web. Existen otras técnicas para entender el comportamiento de los visitantes. Y hoy nos centraremos en los heatmaps.
El porqué de los heatmaps
Cuando hablamos de usabilidad en software una de las pruebas más habituales es la de analizar el comportamiento real de los usuarios. Esto se hace en un laboratorio preparado para ello en el que a un usuario se le plantean ejercicios a realizar delante del ordenador mientras se graba todo lo que hace.
La parte más curiosa suele ser la grabación del seguimiento de la mirada con una cámara que apunta a los ojos directamente (se conoce como eye-tracking). De este modo podemos saber exactamente las coordenadas a las que el usuario apunta la mirada y así ver qué capta su atención y cómo reacciona a la interfaz de usuario que se le presenta.
Analizar el seguimiento de la mirada es algo que se utiliza en infinidad de campos, incluso en supermercados para ver qué productos captan más atención.Esta actividad te da información precisa del comportamiento del usuario, pero tiene algunos inconvenientes. El problema principal de este tipo de pruebas es que el coste es elevado (necesitas un laboratorio especial con el equipamiento adecuado), analizar los datos es complejo (convertir coordenadas en conocimiento útil es difícil si no lo has hecho antes) y además es poco eficiente (hacerle la prueba a cada usuario es lento, tiene que estar presente físicamente en el laboratorio y necesitarás una muestra más o menos representativa de estos para que los datos tengan sentido).
Un heatmap o mapa de calor es una representación visual en la que observamos diferentes colores indicando la relevancia de los distintos elementos o zonas que conforman la web. Los colores más cálidos indican una mayor interacción en la zona mientras que los más fríos muestran lo contrario. En la siguiente captura puedes ver que la parte central, dónde se define el plan de compra medio, capta más la atención.
En este heatmap podemos ver qué zonas reciben más atención en una página de precios de ejemplo.Los heatmaps son la versión low-cost de los análisis de usabilidad convencionales. Te explicaré porqué. El primer punto es que no necesitas un laboratorio complejo; cualquier visitante de tu web puede participar en la prueba de forma anónima y sin enterarse. Por otro lado, el coste es bajo ya que en vez de hacer seguimiento del ojo lo haces del cursor del ratón. Y sí, esto es menos preciso que lo primero, pero funciona bastante bien y tiene su base científica.
Por tanto, los heatmaps son la alternativa perfecta para que puedas comprender cómo interactúan tus visitantes con la web sin tener que necesitar un complejo laboratorio de usabilidad. Además, existen otras variantes como los clickmaps, donde sólo se tienen en cuenta los clics y no el movimiento del cursor, o los scrollmaps, que marcan la profundidad a la que llegan los visitantes desplazándose verticalmente hacia abajo de la web.
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
Script para simular un heatmap en tu web
Si quieres probar cómo hacer un heatmap de tu comportamiento en tu web, estás de suerte porque te voy a explicar cómo hacerlo de forma sencilla. No necesitas tener conocimientos de programación, sólo saber copiar y pegar.
Lo primero que has de hacer es abrir en tu navegador la página web donde desees simular el heatmap. Una vez allí, has de abrir la consola JavaScript del navegador. Esto se hace de forma diferente dependiendo del navegador y el sistema operativo que utilices. Descubre cómo hacerlo en tu caso aquí.
En mi caso concreto, donde utilizo Google Chrome en un sistema Mac OS X, sólo tengo que ir al menú Ver » Opciones para desarrolladores » Consola JavaScript o pulsar Alt+Comando+I directamente. Esto abrirá una vista donde tienes acceso a una especia de terminal en el navegador donde puedes pegar código JavaScript para su ejecución.
Una vez has hecho esto, copia el siguiente fragmento de código (que también puedes encontrar en mi GitHub aquí):
El código que acabas de copiar hace uso de heatmap.js, una librería JavaScript que te permite crear heatmaps de forma rápida en tu web. Ahora lo pegas en la consola JavaScript del navegador que tienes abierta y pulsas intro para ejecutarlo. Si todo ha ido bien y no te salta ningún error, ya puedes cerrar la consola JavaScript. Ahora en cuanto muevas el ratón o hagas clic en la página verás cómo va apareciendo el heatmap con el seguimiento del movimiento y los clics.
Esto sólo ha sido un juego, pero es divertido, ¿verdad? Ten en cuenta que, para que el experimento tenga validez, es obvio que lo idóneo es que lo hagas de forma transparente (sin que tus visitantes vean el halo que van dejando) y agregando los datos de seguimiento del cursor de todos tus visitantes. De esto modo los datos serían reales y las conclusiones que podrías tomar sobre esto, válidas.
Si dominas JavaScript podrías montarte tú mismo un sistema que hiciera el seguimiento y enviara los datos al servidor donde después puedas agregarlos y dar la visualización final. Pero si no es tu caso, hay muchas herramientas de heatmaps ahí fuera, y la que te recomendamos para WordPress es Nelio A/B Testing, dónde podrás crear heatmaps de forma muy sencilla y además tienes la confianza de que ha sido creada por nosotros mismos, aquí en Nelio.
Si te animas, no dudes en dejarme un comentario al respecto con tu experiencia. Seguro que la información que extraes te es de mucha utilidad para entender mejor a tus visitantes y actuar en consecuencia.
Imagen destacada de Cristian Escobar en Unsplash.
Deja una respuesta