Eyetracking e integración persona-ordenador (HCI).
El eyetracking se define cómo un conjunto de técnicas que permiten observar y monitorizar la forma en que una persona mira una imagen, una escena o una página web con la finalidad de estudiar el orden en que fija su atención en cada uno de los elementos y durante cuánto tiempo. El eyetrackingpuede utilizarse para evaluar una interfaz de usuario o utilizarse como dispositivo de entrada para interactuar con sistemas.
Se estudiará la aplicación del eyetracking para evaluar la usabilidad en los siguientes puntos: Representación de los casos de prueba, métricas, campos de actuación, técnicas alternativas y por último, una serie de conclusiones.
Representación de los casos de prueba. Posibilidades.
Para realizar los casos de prueba para evaluar la usabilidad de una determinada interfaz se utilizan los eye-trackers, que no son más que mecanismos que permiten evaluar hacia qué punto focaliza un sujeto su atención visual sobre la interfaz. Esta información puede procesarse para formar:
-
Rutas sacádicas: muestran el orden en que los usuarios habitualmente recorren con la vista los distintos componentes de una interfaz.
-
Mapas de calor: señalan las zonas de la interfaz que reciben mayor focalización por parte de los usuarios. Las zonas van desde colores fríos (mínima atención) hasta las “zonas calientes”.
-
Zonas ciegas: habitualmente se parte de un mapa caliente y se procesa la interfaz para mostrar sólo las zonas calientes, de forma que el resto de elementos se ocultan y por tanto, no se ven.
Las posibilidades de representar los casos de prueba se reducen a conocer en qué zonas fija su atención un usuario, por lo que se puede saber si una interfaz resulta útil y de fácil interacción al usuario mostrando la información que éste espera.
Por contrapartida, para evaluar durante los casos de prueba la usabilidad de una interfaz deben utilizarse los métodos de eye-trackersmenos intrusivos posibles para conseguir una lectura fiable de los ojos del usuario. Otro problema del eyetrackingreside en que los eye-trackersdeben calibrarse para los ojos de los usuarios con la pérdida de tiempo que esto supone y los riesgos que conlleva una mala calibración, puesto que entonces los datos obtenidos no serían de fiar.
Acerca de las métricas.
Los datos obtenidos por los eye-trackersdeben medirse mediante unidades inteligibles para los expertos desarrolladores de interfaces de usuario. Esto se consigue mediante el uso de métricas adecuadas como:
-
El número total de fijaciones que indica la dificultad para encontrar la información deseada por el sujeto medio. A mayor número mayor dificultad para el usuario a la hora de encontrar lo que busca: información poco accesible o mal estructurada.
-
Número de fijaciones sobre un área: cuántas más fijaciones existan sobre un área determinada denota la importancia (interés) de la misma.
-
Duración de la mirada sobre un área de interés, la cual es proporcionalidad a la dificultad que tiene el usuario para comprender la información allí mostrada.
-
Densidad de las fijaciones que indica si la información relacionada entre sí está cerca una de otra, por lo que a mayor densidad mejor calidad de la interfaz y cuanto menor sea, los contenidos estarían mal estructurados.
-
Tiempo transcurrido hasta la primera fijación: A menor tiempo, mayor atractivo visual ofrece la interfaz.
Todas estas métricas citadas auxilian en la labor de mejorar las interfaces web, pero pueden llegar a ser un arma de doble filo. Es decir; no pueden evaluarse dos interfaces de la misma forma con una métrica de duración de la mirada sobre un área de interés, ya que en el caso de una tienda web on-linesignificaría que un usuario comprendió fácilmente la descripción de un producto determinado mientras que si la zona fuese un documento científico en una interfaz, a mayor tiempo no significa que el usuario no lo comprenda, ya que no se tarda el mismo tiempo en leer y comprender ambas cosas.
Campos de actuación destacables.
Los campos de actuación del eyetrackingson multitud. En lo que nos concierne, está el de analizar la usabilidad de una interfaz web, en la cual se pueden evaluar positiva o negativamente los siguientes aspectos para conseguir una interacción optimizada para los usuarios, la cual repercutirá aumentando la calidad de la aplicación:
-
Conocer si el diseño y maquetación web son atractivos para el usuario.
-
Si el tener muchos contenidos en pantalla distrae o dificulta la navegabilidad.
-
El tamaño y la fuente de letras son adecuados a un texto, línea, etc…
-
Saber si el usuario encuentra lo que busca.
-
Mejorar los menús, iconos y gráficos para que sean más atractivos.
-
Comprensibilidad de los contenidos, etc…
Técnicas alternativas como Think-Aloud.
Hacerse con un sistema eye-trackerpuede ser caro. Existen técnicas alternativas como el think-aloudque no es más que grabar el caso de estudio de todos los usuarios mientras éstos utilizan la interfaz y nos cuentan con sus palabras simultáneamente qué hacen y porqué, así como sus opiniones sobre la marcha. A pesar de la facilidad de este método, es poco fiable porque no todos los usuarios se expresan igual de bien ya sin contar que altera habitualmente la forma en que lo haría un usuario sin hablar.
Como solución a este problema se implanta el think-aloudretrospectivo, que no es más que grabar en vídeo la interacción de un usuario con la interfaz, para luego grabar la explicación de éste mientras vé el vídeo de cómo interactuó con el sistema. Este método es altamente fiable, y muy barato. Por contrapartida, procesar la información de multitud de usuarios puede llegar a ser un proceso engorroso y costoso, cosa que con un sistema de eyetrackingde reconocimiento visual podría procesarse en cuestión de minutos.
Conclusiones generales.
El eyetracking es, desde luego, una técnica en auge que permite analizar una interfaz de usuario a fondo bien para analizar un prototipo o para realizar cambios que mejoren la experiencia del usuario con una aplicación web. El objetivo, independientemente de las métricas y métodos utilizados, no es más que conseguir una mayor calidad en la interfaz web.
Áreas de interés para un proceso de análisis de eyetracking para casos reales.
A continuación se procede a estudiar las áreas de interés para un proceso de eyetracking en los siguientes casos:
www.fotocasa.es (home y detalle).
Las áreas de interés para un proceso de eyetrackingdel home de fotocasa son:
-
Área de gestión de usuario, para que un usuario se registre o se autentique en el sistema para gestionar sus anuncios. Está en la parte superior derecha de la interfaz web, por lo que está en un sitio correcto ya que como la mayoría de las páginas el formulario de login se encuentra en esa posición, el usuario lo encuentra enseguida.
-
Pestaña de secciones para buscar los pisos, añadir un anuncio, noticias y demás. Se encuentra debajo del logotipo de fotocasa, por lo que el usuario que desee navegar entre las pestañas la encuentra a mano, siendo la segunda o tercera posición de la interfaz en focalizar. Lo negativo es su fondo azul tan oscuro y el parpadeo en rojo de “Publica tu piso GRATIS” desvían la atención por lo que el usuario tarda más en comprender cada una de las opciones causando una sensación de complejidad en el usuario.
-
El buscador por texto es el área de interés con opciones y cuadro de búsqueda sencillos, el cual facilita las búsquedas más su sencillez provoca que el usuario desvíe la atención hacia el área de la derecha, que sigue a continuación.
-
Buscar por mapa capta la atención y facilita enormemente la búsqueda de inmuebles de forma gráfica, por lo que es valorado positivamente por los usuarios, los cuales habitualmente prefieren interactuar con el ratón a tener que escribir con el teclado.
-
Noticias inmobiliarias ya es un área de interés que se encuentra en la zona media-inferior de la interfaz y que capta la atención de pocos usuarios, pero tampoco es relevante ya que los usuarios mayormente buscan anunciar y buscar inmuebles, por lo que se encuentra correctamente posicionada.
-
Ideas para tu nueva casa y el resto de zonas inferiores son poco llamativas para los usuarios, pero poco relevantes salvo para ciertos usuarios. Están dispuestas correctamente ya que serán utilizadas casi siempre por usuarios experimentados con la interfaz cuyo número es muy reducido.
Respecto al detalle de fotocasa, tenemos que las áreas de interés varían todas menos la de área de gestión de usuario:
-
Barra de navegación de pisos para avanzar entre los inmuebles encontrados para una determinada localidad. Está un poco a desmano, no es de las primeras cosas en que se fija el usuario por ser excesivamente discreto.
-
Fotos del inmueble anunciado que al ser puramente visuales son lo primero en atraer la atención del usuario, por lo que están situados en el sitio correcto.
-
El precio está situado a la derecha de la foto principal del inmueble y en grande y negrita, por lo que si un usuario fija su atención en él lo hará tras ver la foto pero antes de las características y datos que leerá si sigue interesado. Si el interés es mínimo, el usuario buscará la barra de navegación de pisos, el área que seguramente andará buscando porque no es una de las prioridades en la interfaz.
-
Datos del inmueble situados debajo del precio por lo que siguen una estructura lógica en la interfaz y su situación es correcta y su lectura elevada.
-
La descripción escrita por el anunciante acerca del piso ya está en una parte menos relavente de la interfaz, hacia la mitad inferior y su comprensión está sujeta a cómo haya sido redactado, por lo que puede ser un punto no evaluable por técnicas de eyetracking.
-
Formulario de contacto es un área de interés situado a la derecha de todo, a la altura de las fotos del inmueble que permiten al usuario contactar con el anunciado. Un usuario focalizará allí la atención en caso de que esté interesado por lo que está situado en el sitio adecuado.
-
Las características del inmueble se muestran en una tabla con iconos de forma muy visual, pero al encontrarse hacia la zona inferior de la interfaz, algunos usuarios ni se enteran de su existencia si su monitor es panorámico. Igual las áreas de interés que le preceden deberían poseer un tamaño inferior para que el área tuviese mayor relevancia.
-
Ubicación del inmueble mediante la API de Google Maps que capta la mirada del usuario al ser un mapa gráfico y muy visual, que aparece justo al navegar por la parte inferior de la interfaz.
-
Análisis del precio del inmueble: en esta zona que es una tabla comparativa de precios. Poco relevante ya que está abajo de todo, por lo que no se fija mucho un usuario. Colorear la tabla o hacerla más llamativa sería una solución aunque también es cierto que la mayoría de usuarios no encontrarán sus contenidos útiles.
-
Historial del anuncio que muestra el número de usuarios que vieron los anuncios. Su relevancia es mínima y ocupa la posición más baja.
-
El resto de áreas como ¿Quieres que te llame el anunciante?, son de interés mínimo y se sitúan en la parte baja de la interfaz web.
Las áreas de interés son pocas, porque son densas y altamente simples. Enumeradas son:
-
Acceso profesionales: es un área de interés para gente que se “logea” y que utiliza la parte superior derecha de la interfaz como los accesos para usuarios normales en la mayoría de los sitios web. De esta forma, aunque no es de las primeras áreas en ser visualizadas por un usuario, alguien que busque iniciar sesión lo encontrará instintivamente a la primera.
-
Pon tu anuncio gratis es una de las áreas más importantes: va directa al grano y es de las primeras secciones en ser visualizadas debido en parte a su coloración roja intensa. Está en una posición correcta.
-
El mapa para filtrar los anuncios por las distintas provincias españolas es el área con mayor relevancia, ya que uno de los objetivos de esta página es facilitarle el encontrar las ventas a los posibles compradores. Este área es muy visual, está centrada en la interfaz y se interactúa con el ratón, por lo que supone un foco de atención para el usuario.
-
Provincias es el área situado más a la derecha y supone la navegación alternativa al mapa, pero como su relevancia es inferior a éste, su colocación es correcta, ya que la mayoría de usuarios no llegarán a focalizar su visión en esta parte de la interfaz.
Las áreas de la página web de El corte inglés son las siguientes (citadas sólo las relevantes):
-
Buscador: situado en la parte superior de la web, está el cuadro de texto para buscar los diferentes productos buscados. Es lo primero en visualizarse.
-
Secciones: área que comprende los distintos departamentos con sus correspondientes productos. Es lo segundo en visualizarse, por lo que es correcto ya que un usuario interesado en un producto seleccionará el departamento correspondiente.
-
Anunciador de ofertas: área de interés visual que muestra imágenes y precios de productos al azar de distintos departamentos. Muy visual, igual excesivo ya que ciertos anuncios distraen la atención de un comprador que no esté interesado en dicho anuncio y tardará más tiempo en encontrar el producto que busca.
-
Pestañas: Hay muy pocas pestañas que clasifican las ofertas. Están en el lugar adecuado y además facilitan la navegación correctamente.
-
Grid de productos: cuadrícula en que se muestran imágenes de los productos con sus nombres, precios y descuentos. Deberían estar posicionados algo más arriba, ya que el anunciador de ofertas ocupa demasiado y es difícil que justo se muestre un producto que interese al usuario, por lo que el grid de productos debería tener un poco más de relevancia.
www.lacasadellibro.es(home y detalle).
Las áreas de interés en el home de www.lacasdellibro.esson:
-
El área de usuario es lo situado más arriba de en la interfaz. Su usabilidad está penalizada por el simple hecho de estar arriba en la izquierda, en vez de estar en la derecha, como es habitual en la mayoría de webs. Esto hace que un usuario focalice instintivamente la atención si desea autenticarse en dónde no se corresponde.
-
A continuación se muestran las distintas secciones que se repiten en una barra verde y después en la parte inferior. Esto desconcierta en parte al usuario, ya que visualiza lo mismo dos veces, lo cual no tiene mucho sentido. Él área repetida debía estar reservada a otra área de interés.
-
El cuadro de búsqueda está centrado y se observa a simple vista. Debería estar situado antes para que los usuarios que busquen un libro lo localicen antes.
-
Las últimas novedades de libros y ebooks ocupan la mayor parte de la interfaz y está bien situadas. Alguien que busque un libro nuevo lo localizará rápidamente y su satisfacción será alta.
-
Los mejores para regalar son una serie de libros mostrados en un área a la derecha de todo pero que dejan un enorme espacio superior en blanco sin utilizar, el cual está desperdiciado ya que cuanto más arriba en la interfaz web mayor relevancia visual y usabilidad se obtiene. Debería desplazarse más hacia arriba así la comprensibilidad de los usuarios aumenta y en consecuencia su usabilidad.
Por otro lado, las áreas de interés del eyetrackingen el detalle serían concretamente tres:
-
Foto e información del libro seleccionado por el usuario, como ISBN, editorial y descripción entre otros. La información mostrada está un poco desordenada y con una fuente muy pequeña que provoca que sea más difícil leer.
-
Precio y opción de añadir al carro de la compra son legibles pero están demasiado separados de la foto e información del libro citados anteriormente. La usabilidad se ve penalizada para comprar, ya que el usuario tarda algo más en añadir el libro al carrito y que en un sitio de negocio que busca vender, debería ponérselo más cercano al usuario.
-
La última sección es “Inseparables” la cual es de interés para presentar libros relacionados con el que está viendo el usuario en un momento determinado y conseguirlos por un precio inferior. Este área cumple con creces su contenido y resulta intuitiva para utilizar. Se visualiza con suma facilidad.
Si se realizara un estudio de eyetrackingde la tienda de amazon España las principales zonas de interés serían:
-
Área de usuario: en la parte superior de la interfaz dónde cabe esperar encontrarlo.
-
Área de departamentos y carrito de la compra: Este área contrasta con el fondo blanco de la página web al estar coloreada. Divide los productos a vender en categorías (departamentos) para que un usuario pueda localizarlos clasificados o a través de un cuadro de búsqueda. Cada uno de estos elementos están situados uno a continuación de otros por lo que los usuarios enseguida realizan las acciones pertinentes de navegabilidad para situar en el grid los productos que busquen.
-
Grid de productos: Es el área más importante dónde se presentan al usuario los productos que puede ser que adquiera. El fondo blanco y el orden de imagen, título, descripción y precio son sencillos y claros. El usuario localiza con un simple vistazo los productos que le puedan interesar.
-
Productos relacionados: Se muestran ya en la parte media de la interfaz por lo que no son visualmente tan atractivos, pero en caso de querer ser localizados por el usuario se encuentran en el lugar correcto.
-
Los más vendidos: Realmente son dos o más áreas de interés pero desperdigadas por toda la interfaz que entorpecen un poco la usabilidad cuando un usuario busca algo por la página algo que no encuentre. Con una de estas dos áreas bastaría para no sobrecargar al usuario con tantos productos ya que estará sólo interesado en unos concretos.
www.elpais.com (home y detalle noticia).
En la home de la edición digital de El país existen las siguientes áreas de interés:
-
Área de usuario: En la parte superior para los usuarios registrados. Es lo primero que se ve.
-
Las distintas secciones del periódico se encuentran aquí bajo el logotipo. Sirve para ver las noticias clasificadas por temas, los blogs y la versión en inglés. También cuenta con un cuadro de búsqueda que resalta sobre el color azul de la barra de las secciones. La navegabilidad es buena, ya que el usuario en todo momento puede buscar las noticias que le interesen y sabe en qué sección se encuentra en un momento dado.
-
Última hora es el área que se encuentra a la derecha y contiene los titulares de las últimas tres o cuatro noticias publicadas en la edición digital. Realmente no son noticias, son como una especie de microblogging que no tienen que tener una noticia real asociada. Será similar al twitter y al RSS, pero repetir tanto produce confusión… Deberían de mostrarse la últimas noticias en la parte superior y debajo las menos recientes.
-
Las noticias es un área demasiado extensa, en la que los titulares se leen bien más no así las entradillas y las secciones se encuentran desperdigadas, por lo que el ojo del usuario focaliza la mirada en un montón de sitios hasta encontrar algún titular que le interese. Se muestra demasiada información mal estructurada que confunde: debería estructurarse de una forma más óptima y no sobrecargar el ojo del usuario con tanta información.
Las áreas relacionadas con el detalle de la noticia son:
-
El título que claramente es legible.
-
La entradilla tiene un tamaño de fuente inferior a la propia noticia, por lo que confunde al usuario con la fecha y hora de publicación de la misma. Si un usuario no encuentra la entradilla es posible que pierda el interés por seguir leyendo más abajo. La usabilidad se ve reducida ya que el usuario se topa con una estructura poco lógica para seguir la noticia.
-
Foto o vídeo asociados a la noticia están bien posicionados y cumplen con su objetivo. El usuario los observa sin problemas al ver una noticia.
-
Redacción: Es el área que comprende el cuerpo de la noticia en sí. El tamaño de letra es correcto pero sobrecargan la parte derecha con publicidad y otras noticias lo cual deja poco ancho para leer la noticia y el usuario tendrá que mover el scroll de la página a menudo para leer su totalidad. Este área de interés debería ser un poco más ancha para permitir una lectura más cómoda.
www.lavozdegalicia.com(home y detalle noticia).
Áreas de interés del home de la edición digital de la Voz de Galicia:
-
El buscador se encuentra a la derecha de todo a la altura del logotipo del periódico y rodeado de colores por lo que se retrasa que un usuario lo pueda encontrar.
-
Las secciones están resaltada y ofrecen una navegabilidad correcta al usuario, al igual que en El País.
-
Las noticias se muestran unas a continuación de otras por antigüedad por lo que las que el usuario vé a primera vista posiblemente sean las que le interesen. Los titulares, entradillas y fotografías forman un todo con anuncios, el tiempo y vídeos publicitados en la derecha en plan batiburrillo y eso provoca que el usuario se pueda sentir perdido.
Áreas de interés del detalle de noticia de la edición digital de la voz de Galicia:
-
El título está posicionado en la parte superior y es lo primero en que uno se fija.
-
La entradilla tiene un tamaño de fuente superior al de El País y se incita a leerla para acerse una idea del cuerpo de la noticia.
-
La foto o vídeo asociados a la noticia están bien posicionados y cumplen con su objetivo. El usuario los observa sin problemas al ver una noticia como en El País.
-
La redacción del cuerpo de la noticia es la adecuada tanto en tamaño como por anchura y la noticia se lee cómodamente sin problema siguiendo un orden lógico visual.
En Facebook, las áreas de interés para un posible estudio de usabilidad mediante las técnicas de eyetracking son:
-
Barra de menú: situada en la parte superior, comprende las opciones de autenticación del usuario, el acceso al perfil personal o de los amigos, a las redes y al cliente de mensajería. Si un usuario no está habituado a utilizarlo encuentra las opciones un poco desestructuradas.
-
Cuadro de búsqueda: Para buscar gente, se ve a simple vista y se localiza fácilmente.
-
Aplicaciones: justo debajo del cuadro de búsqueda para las fotos, calendario y más cosas. Es un poco una zona baúl que no proporciona claridad por lo que un usuario puede no encontrar lo que busca.
-
Zona de usuario: Foto(s) de un amigo o usuario, qué estás haciendo, el muro o las mini-noticias son tan sólo una de las pocas cosas que se muestran en este área de interés en la cual los ojos de un usuario normal focalizarán un montón de elementos no muy bien estructurados, haciendo que pierda el tiempo. Sencillez es una virtud de la que carece la interfaz de facebook.
