“La percepción nace cuando la solicitud de objetos y sus cualidades lleva la demanda orgánica de adhesión a la conciencia.” John Dewey

Eye tracking y heat maps: ¿qué ve (y qué no) el usuario en nuestra web?

Te explicamos las dos herramientas más eficaces para conocer al milímetro la experiencia de usuario en web

La experiencia del usuario en web se ha convertido en uno de los mayores quebraderos de cabeza para las marcas en cuanto a diseño se refiere. Secciones que consideramos importantes pero que pasan totalmente desapercibidas. Botones de llamada a la acción que no reciben un solo clic. Distracciones innecesarias que desvían (sin querer) la atención de lo que queremos resaltar. ¿Es nuestra página demasiado sencilla, o quizás tan compleja que nuestros visitantes no son capaces de encontrar lo que buscan? Hoy comentaremos las técnicas más utilizadas en analítica web para tratar de resolver estos problemas: el eye tracking y el heat map.

¿Qué es el eye tracking, o seguimiento ocular?

Con esta herramienta podemos dibujar, literalmente, el recorrido visual y/o del puntero sobre nuestra web. Existe la idea generalizada, y errónea, de que todas las personas “leen” las páginas de forma suavizada, de arriba abajo y de derecha a izquierda, como haríamos como un libro. En realidad, se trata de un proceso de búsqueda constante que se realiza mediante saltos de vista de un lado para otro, con breves fijaciones en aquellos puntos que más llaman la atención del usuario. Es más, no todos los usuarios tienen el mismo interés visual por nuestros contenidos, ni tampoco las mismas motivaciones ni capacidad de concentración ante ellos. Esto implica una enorme variabilidad en la experiencia de usuario, que puede resultar un grave problema para la web de nuestra marca si no se estudia adecuadamente.

Gracias a esta técnica de análisis cuantitativo, podemos responder las siguientes preguntas:

  • ¿Qué atrae la atención del usuario?
  • ¿En qué orden presta atención a los elementos de una página?
  • ¿Qué elementos son ignorados?
  • ¿Qué elementos distraen su atención?
  • ¿Qué ruta sigue el usuario en su recorrido visual, y qué jerarquía podemos establecer respecto a la información recibida?

Recuerda: los 10 primeros segundos de visita en web son extremadamente importantes. Si durante este tiempo no le convences en su recorrido, ¡se marchará a otra!

¿Qué es el heat map?

También conocidos como mapas de calor, señalan las zonas donde el usuario retiene más tiempo la vista (y por lo tanto, su atención), así como los puntos donde interactúa mayoritariamente mediante clics. Las secciones donde se registra mayor actividad se marcan en colores cálidos, mientras que el resto se describen con colores más fríos.

Consejo: No olvides que las imágenes captan la atención del usuario mucho más que las zonas donde solo hay texto, ¡sobretodo si en ellas aparecen rostros humanos! Aprovecha esta sencilla técnica para dirigir la vista hacia los puntos más importantes de tu web.

Algunos factores que determinan la percepción visual del usuario

Existen una serie de principios universales que podemos aplicar en el diseño web, con el objetivo de focalizar la atención hacia las secciones que consideremos de mayor importancia para nuestra marca. Los siguientes heurísticos (atajos mentales), han sido heredados de la escuela de psicología Gestalt, y podemos utilizarlos como referencia básica para un diseño óptimo de nuestra página.

  • Figura y fondo: el fondo de cada sección enmarca las figuras y, por su contraste menor ante el resto de figuras, hará que sea omitido.
  • Buena forma: los elementos se organizan en figuras lo más simples posibles.
  • Cierre: las formas cerradas son más estables a nivel visual (por ejemplo: un círculo).
  • Contraste: el tamaño de las figuras y/o secciones, por ejemplo, determinará la jerarquía entre ellos a nivel de visualización.
  • Proximidad: nuestro cerebro tiende a agrupar los diversos elementos que visualiza en función de su proximidad, aunque no tengan ninguna relación entre ellos.
  • Similitud: lo mismo sucede con los que son similares en forma, color, tamaño, etc.
  • Movimiento común: de igual modo que en los dos últimos casos, los elementos que se desplazan hacia una misma dirección tienden a ser agrupados bajo un mismo conjunto.

Recuerda: las personas miran de forma automática aquello que contrasta con el resto del entorno, sea en figura o en color. El movimiento genera muchísima más atención que los elementos estáticos: ¡no dudes en implementar recursos audiovisuales en tus contenidos!

En DGallery conocemos la importancia que tiene la experiencia del usuario en enotornos 2.0, y es por ello por lo que ofrecemos un servicio de análisis con estas dos técnicas de forma conjunta, para así poder aconsejarte de la forma más objetiva posible el diseño de tu web. Pídenos más información sin compromiso en dgallery@dgallery.es