Eye Tracking para la usabilidad Web

La información obtenida del Eye Tracking puede ayudar a convertirte en un diseñador web más competente , a ser un mejor escritor de contenido, y un experto en optimización de la conversión y venta online.

Eye Tracking en Google

Para mi, se ha convertido en una pequeña obsesión, la obtención de todo tipo de datos para nuestra web, y estoy convencido de que para muchos de vosotros también , llegando a un punto en el que nunca es suficiente. Realizando todo tipo de métricas, ejecutando pruebas, estudiando detenidamente la obtención de nuevos enlaces, analizando tendencias – ya que todo esto es lo que ayuda a construir grandes negocios y sitios web impresionantes.

Pero entre todas ellas, me gustaría enseñarte los beneficios de un fascinante campo de estudio del comportamiento del consumidor que es el Eye Tracking . La información obtenida del Eye Tracking puede ayudar a convertirte en un diseñador web más competente , a ser un mejor escritor de contenido, y un experto en optimización de la conversión y venta online.

En este post, he resumido los resultados finales de alguna de esas pruebas de Eye Tracking,  y los pongo en tus manos para que puedas empezar a ver mejoras en los resultados  de tu negocio o web.

Antes de empezar, debemos definir previamente en concepto de Eye Tracking. Según la Wikipedia, el Eye tracking básicamente es el proceso de evaluar, bien el punto donde se fija la mirada (donde estamos mirando), o el movimiento del ojo en relación con la cabeza. Extendiendo esta definición al concepto Web como, la medición visual cuando la gente busca en una determinada página web y por cuánto tiempo lo hace. Los datos de seguimiento de los ojos se presenta visualmente, sobreponiendo en la pantalla lo que los sujetos estaban mirando en relación al tiempo, de manera similar a la imagen mostrada.

Con el Eye Tracking , podemos descubrir que es lo primero que una persona ve de una web , segundo, tercero, y así sucesivamente. Con esto, podemos averiguar que es lo que el usuario considera como la parte más interesante de la pantalla y el tiempo que él o ella observó otras ciertas áreas.

Al igual que cualquier investigación de datos de gran alcance, los estudios de Eye Tracking no son baratos. Los dispositivos menos costosos cuestan unos cuantos miles de euros, lo cual no es nada asequible para la mayoría de nosotros. Pero como esta es una de mis pasiones dentro del mundo de la obtención de datos, a lo largo de el tiempo, he descubierto dos alternativas que me han brindado grandísimos resultados. Por un lado, un sistema Headmap, parecido al sistema Eye Tracking, pero basado en mapas de calor sobre el movimiento del puntero del ratón he implementado en Java ( JS Headmap ) y por otro lado una web que nos simula y nos da reportes de una imagen de nuestra página ( Attention Wizard )

1. Pon tu contenido mas valioso por encima del encabezado

No es sorprendente decir que todo lo que se muestre por encima o en el top de nuestra web, será el contenido mas llamativo y visto por los visitantes. Es hay, donde deberemos poner el contenido mas importante o relevante para nosotros.

Aunque queramos llamar la atención sobre dicho punto, no significa que debamos descuidar el resto de espacios. Saturar la cabecera de información puede destruir por completo la usabilidad de un sitio web. Como vemos en la imagen siguiente, donde el contenido a pasado desapercibido por el usuario.

Eye Tracking en la cabecera web

Solo tienes  8 segundos para captar la atención de tus visitantes , así que asegúrate de que estás colocando la información mas atractiva en la parte superior. Pero al hacer esto, ten cuidado: no trates de hacer una venta por encima del header ni implementes distintas llamadas a la acción.

Trabaja en hacer un mensaje atractivo y llamativo. Eso es lo que animará a la gente a seguir leyendo más y potenciando una futura compra. Hacer una llamada a la acción en la parte superior puede disminuir la conversión en mas de un 20%.

2.Pon llamadas a la acción en la parte inferior

Aunque la parte superior de la web es la parte más vista de la página, la parte inferior es la segunda sección más vista de toda la web. Las personas se desplazan hacia abajo y cuando lo hacen, van directamente a la parte inferior de la página, donde se detiene el desplazamiento. Ahí es donde debes golpear con la llamada a la acción.

Se pueden usar llamadas a la acción en distintos puntos de la web, esta es una técnica muy usada, y yo te recomendaría que hicieras lo mismo. Por ejemplo, poniendo llamadas a la acción en medio del contenido, hacia la parte inferior, podemos observar que podemos llegar a incrementar la conversión en casi un 40%. Es por ello, que nos encontramos la típica caja de subscripción al blog, en medio del contenido hacia el final de este en múltiples diseños web.

3.La gente lee los titulares grandes

Cuanto mas grandes y más molestos sean tus titulares, más probable es que la gente lo lea. Varios estudios , incluyendo el popular patrón en forma de F , ya han demostrado con anterioridad que el tamaño del título es importante.

Patron en Forma de F

¿Que es el patrón de lectura F?

En un estudio realizado sobre la navegación de 232 usuarios, se encontró un comportamiento similar. Este patrón de lectura dominante se parece a una F y tiene los siguientes tres componentes:

  • Los usuarios primero leen en un movimiento horizontal. Usualmente sobre la parte superior del área de contenido.
  • Luego, el usuario mueve un poco la página hacia abajo y vuelve a leer en una segunda línea horizontal
  • Finalmente, el usuario realiza una revisión rápida del contenido en el lado izquierdo de la página.

4. La división de información es lo mejor

Probablemente ya hayas oído que necesitas romper y estructurar tu contenido en párrafos mas pequeños , proporcionar títulos, utilizar columnas, y crear listas numeradas.

La razón de esto es intuitiva. No podemos absorber fácilmente grandes bloques de texto, a no ser que sean de un increíble interés para nosotros.

Con este concepto, me gustaría hacer hincapié en un diseño web muy relacionado con la división de información, que me encanta, y que creo, debería estar obteniendo increíbles resultados.

No dispongo de los resultados del Eye Tracking , pero os muestro una captura de la web Bitelia , del Grupo Hipertextual. Donde podemos ver dos conceptos vistos hasta ahora. Por un lado tenemos la información importante por encima del encabezado, y que en este caso seria el anuncio de adsense, y por el otro y muy remarcado en toda la web, el concepto de estructuración de la información.

Información Estructurada

5. Usa una gran cantidad de espacios en blanco

El espacio en blanco, también conocido como espacio negativo, es una parte importante del diseño web. La evidencia de los estudios Eye Tracking lo confirman:

Espacios en blanco e Eye Tracking

En la foto anterior , podemos observar que la distribución más amplia con espacios negativos o espacios en blanco fomenta un movimiento limpio y una mejor ingesta de los datos.

Los espacios en blanco parecen perdidos. Por qué no poner algo allí, ¿no? En realidad, el espacio negativo es valioso porque facilita el movimiento a través del resto de la página. El ojo humano necesita un lugar para “descansar”, por así decirlo, de los diversos componentes de la página que intentan distraerle.

El ojo humano necesita saber dónde ir después, tras leer cierta información. El espacio negativo proporciona una forma de seguimiento, y continuidad, para que las distracciones sean menores, formando una lectura fluida y continuada.

Los post que hago, son realmente largos en relación a muchas paginas, rondando en algunos casos casi las 2000 palabras. Mucha gente se asusta y se aburre antes de empezar a leerlo con detenimiento, pero quien este realmente interesado en el articulo, genera esa uniformidad de lectura, alcanzando tiempos en la pagina de mas de 15 minutos.

6. Utiliza el sidebar izquierdo

Estudios de seguimiento de los ojos indican que los usuarios pasan la mayor parte de su tiempo con los ojos puestos en la mitad izquierda de la página . Ya hemos visto como trabajaba el patrón en forma de F.

Sidebar en la parte izquierda para mejorar la usabilidad

Podemos observar la importancia en relación a los pixeles izquierdos. Por ello, colocar un sidebar en la parte izquierda, os puede dar grandes resultados (Teniendo en cuenta, el contenido que queráis poner). Existen plantillas, que dan la opción en cada artículo de cambiar la posición del sidebar. Os aconsejo que probéis y me comentáis que tal los resultados …

Muchos lenguajes escritos por no decir que casi su mayoría, utilizan patrones de lectura de izquierda a derecha. Estos hábitos de lectura sumado al diseño web se han convertido en un factor muy arraigado. Tendemos a mirar a la izquierda, aunque no se por qué, en la mayoría de las webs, veo el sidebar en la parte derecha. (Yo sigo apostando por el a la izquierda de momento, como resultado: Un mayor salto entre artículos y mayor numero de seguidores)

En el diseño web o contenidos de posicionamiento, maximizar el lado izquierdo de la página mediante la colocación de elementos importantes allí, maximizará los resultados.

 7. Fuera banners

La gente ignora las webs llenas de banners. Esta disminución de atención a los banners comenzó justo en el momento que los banners estaban en pleno apogeo.

La evolución de los banners, a pasado por distintas fases. Pasando por simples imágenes, posteriormente empezaron a vibrar diciéndote que eras millonario, y posteriormente se han convertido en juegos y vídeos interactivos. Toda esta evolución, ha creado usuarios perfectamente adiestrados para esquivar estos anuncios, llegando a abandonar cualquier web que se exceda en su uso.

Bautizada como la “ceguera por banners” esta fue una de las primeras hipótesis  más estudiadas  y habladas entorno al fenómenos de la usabilidad en los primeros días de los estudios de Eye Tracking . Jakob Nielsen comenzó a descubrir estos datos en 1997. (La empresa Nielsen es un referente en el estudio del consumidor). PD: Yo mismo he participado es ciertos estudios, son remunerados y podéis inscribiros en  su web.La Ceguera por Banner es aceptada por la sabiduría de Internet y el sentido común de la usabilidad, siendo un movimiento tan relevante, que dispone de su propio artículo en la Wikipedia .

Estudio Eye Tracking en VirginVemos en la imagen mediante el estudios Eye Tracking como los anuncios son saltados por el usuario.Si a esto le sumamos una gran cantidad de anuncios, el usuario no encontrará la información deseada y se marchará de la web, incrementando el porcentaje de rebote.

A menos que no tengas ninguna otra forma de obtener beneficios económicos en tu sitio web, debes huir del uso de banners.

8. Usa fotos de personas

En la usabilidad y optimización web podemos afirmar que las imágenes de personas son buenas, ya que estas realizan una reacción fisiológica positiva de la atracción, comprensión, o identificación.

Una página que tiene imágenes de la cara de una persona fomenta la interacción y la visualización , disminuyendo el porcentaje de abandono.

Existen estudios Eye Tracking para la usabilidad web que afirman los beneficios de:

  • Utilizar imágenes de personas como elementos de diseño : es posible que desee utilizar imágenes de personas en tu web. La gente mira a los demás y, como resultado, se quedará más tiempo en la página.
  • Usar una imagen en su página Acerca de / Nosotros – las personas son más propensas a creer en usted, confiar en usted, y hacer negocios con usted si ven lo que pareces.
  • Utiliza la foto en tu perfil de LinkedIn – genera confianza.
  • Trabajar con Google Author – Existen muchos estudios que demuestran que la gente hace clic con más frecuencia en las entradas SERP que tienen imágenes de autoría.

Conclusiónes del Eye Tracking

Puedes mejorar tu sitio web, sus conversiones, tu negocio y productos simplemente prestando atención a los estudios de Eye Tracking. Cuando la gente busca es increíblemente importante aprender todo lo referente al comportamiento del usuario, lo que hace, lo que compra, donde hace un clic.

¿Conocías algún estudio Eye Tracking? ¿Has implementado algún resultado de estos estudios en tu web? ¿ Conoces que haces tus usuarios en tu web?. Cuéntanos como lo haces.