UX-UI / Attentioninsight (heatmaps con IA)
Hace unos días uno de mis compañeros de profesión Jose Luis García Benito(grandísimo profesional especializado en UX/UI/ Accesibilidad y CRO) me hizo llegar una publicación de twitter con una nueva herramienta cualitativa en la que aplicando Inteligencia Artificial lleva a cabo heatmaps predictivos antes de poner en producción un diseño. Suena bien ehhhhh….
Pues claro, me faltó tiempo para empezar a trastear y ver de qué iba el tema.
La herramienta se llama https://app.attentioninsight.com/.
Entre que pensaba cuándo publicar el artículo y no, he visto algún plugin más de Figma, se me han adelantado, pero no indicaban la herramienta, quizás haya más.
Esta herramienta puede instalarse como un plugin en Figma o se puede usar en el propio site cargar un diseño y analizarlo.
Lo primero que hice fue instalar el plugin en Figma y como es lógico, al intentar hacer uso de él te pide un registro y te permite un trial de 7 días.
El registro es sencillo, mediante la cuenta de Google en 1 minuto lo tienes listo papeles.
Una vez instalado y registrado, hay que seleccionar el Frame del proyecto de Figma que quieras analizar, hacer clic con el botón derecho y aparecerá dentro de la sección de plugins:
En el desplegable se selecciona el tipo de dispositivo y tipología de site a analizar. ¡¡¡Cuidado aquí !!! porque para que puedas hacer uso del mismo debes tener las capas dentro de un frame, y seleccionar el frame, de lo contrario no te funcionará.
A continuación se hace la magia…aparece en Figma un heatmap con la predicción de interacción sobre elementos.
Una vez generado el heatmap da la posibilidad de ir a la página de la herramienta (haciendo clic “Get more insights”) para poder guardar el proyecto y además generar un informe más detallado con los resultados que puedes exportar en pdf.
Con la versión de pago puedes descargarlo en una ppt editable (WTF pensaréis, pero bueno, tampoco es que el informe sea la rehos,te lo cuento porque yo me quedé un poco como el meme de lo que pides en aliexpress y lo que te llega, quizás con la versión de pago o con un diseño más completo sea mejor)
Además puedes incluir más diseños para poder validar varios diseños en un mismo proyecto.
En el informe no solo te indica y muestra los heatmaps generados, si no que además te da “briconsejos” para que se cuestione el diseñador. Esto me parece acertado sobre todo porque al final la herramienta no tiene los objetivos buscados con el diseño o el contexto y el por qué de situar o dar mayor visibilidad a ciertos CTAs.
Os dejo algún pantallazo del PDF (la portada no la actualizan, ta feo eso!”):
Dicho esto, como pasa en la vida, no es oro todo lo que reluce, ya que una de las pruebas que he hecho ha sido con un prototipo que está puesto en producción y comparar los heatmaps generados entre IA y los generados con Clarity (es decir, con datos reales), y distaban bastante.
Esta comparativa no os la puedo compartir ya que pertenece a un proyecto sobre el que estoy trabajando, pero os invito a que hagáis esa prueba y lo comprobéis vosotros mismos. Al fin y al cabo, una de las reglas principales de nuestro trabajo es cuestionarlo todo, incluyendo lo que yo o cualquier otro os pueda contar.
Si bien son herramientas diferentes Attentioninsigth y Clarity, que tienen una funcionalidad diferente y que aportan y extraen datos de forma diferente, tenemos que ser conscientes para qué nos puede servir.
Por no terminar de manera negativa, os diré que le encuentro una gran utilidad en casos como por ejemplo:
- No tenemos ningún tipo de dato del que partir para iniciar un diseño
- Aunque tenemos datos nos son suficientes y podemos “asegurarnos” una justificación del diseño
- Queremos comparar dos diseños entre los que nos debatimos a la hora de mostrar a cliente o responsable y no sabemos por cual decantarnos
Además también como punto positivo es que la herramienta tiene un coste (la licencia básica) de 19€ al mes. Si te ahorra una hora de discusiones sobre un diseño o hacer 45 cambios y el pino puente hasta dar con la aprobación del diseño, creo que coincidiras conmigo que son los mejores 19€ invertidos de tu vida, y si lo paga tu empresa ni te cuento.
Si la probais y hacéis el test de comparar el diseño con esta herramienta y con Clarity o Hotjar o similar, me encantará conocer vuestra experiencia.
¡Gracias por leerme y sobre todo si has llegado hasta aquí! 🙂