29 marzo 2021

Hace unas semanas estuvimos leyendo un estudio que han hecho en Nielsen Norman sobre patrones de lectura, más concretamente sobre el escaneo que hacen los usuarios cuando están viendo tablas comparativas con mucha información: el patrón de la cortadora de césped.

¿Qué es el patrón de cortadora de césped?

Si en una página encontramos una tabla con distintas celdas de contenido, lo que la gente suele hacer es escanearlas como haría una cortadora de césped. 

Se empieza en la celda superior izquierda, moviéndose hasta el final de fila, y después se baja a la siguiente fila para recorrerla de derecha a izquierda, y vuelta a empezar con la siguiente fila. 

En la investigación de eyetracking llevada a cabo por Nielsen Norman descubrieron que este patrón se da especialmente en muchos tipos de páginas y tablas, pero de manera más acusada en diseños de zigzag, aunque hay un tipo especial de páginas en la que destaca: en las tablas de comparación, en las que nos vamos a centrar.

Escaneo de características

Lo más probable es que los usuarios sigan este patrón cuando están comparando varias características de dos o más productos presentados en una tabla comparativa. Sin embargo, una excepción se daría cuando solo se está interesado en una característica, como el precio. En este caso el usuario se centraría solo en una fila en concreto y no seguiría este patrón.

No obstante, antes de que el movimiento de la vista empiece,  el usuario procesa rápidamente la disposición de la información en la tabla antes de leerla con más detenimiento. 

Vamos a ver un ejemplo de un experimento realizado por NNG para visualizar el concepto. En él, un participante lee una reseña con una tabla comparativa de CNET sobre el altavoz Sonos One. 

Cuando el usuario llega a la página, lo primero que hace es evaluar la tabla observando las columnas y las filas, así como algunas de las celdas para reconocer los términos y la información que se muestra en ello. 

Dependiendo de los intereses de cada usuario, es probable que solo se escanee una parte de la tabla utilizando el patrón de la cortadora de césped. Por ejemplo, en el caso que estamos viendo de CNET, el participante comienza realizando el patrón entero, pero rápidamente decide que solo le interesan las tres primeras columnas de las 5 que hay en total, por lo que sus movimientos oculares se centran en estas, sin procesar los valores de las dos últimas.

Desde NNG se sorprendieron al encontrar este comportamiento, pues esperaban que los usuarios escanearan cada fila de izquierda a derecha, empezando por la etiqueta de cada fila y siguiendo un patrón similar al de la F, que ya hemos visto anteriormente. 

Es en estos casos cuando se ve el valor de la investigación con eyetracking, porque se pueden identificar comportamientos tan sutiles que de otra forma pasarían inadvertidos. Este patrón de mirada es una forma eficaz para que los usuarios procesen y asimilen las diferencias entre dos o más productos, minimizando de esta manera la cantidad de movimientos oculares. Es por ello sumamente importante que el contenido de la tabla sea informativo y esté dispuesto correctamente, porque en caso contrario puede interrumpir este patrón y hacer que la tarea de comparación sea más difícil. 

La importancia del diseño de la tabla comparativa 

Junto a ese artículo de CNET, en Nielsen Norman dan unas cuantas pistas más en dos casos prácticos que sirven para ilustrar este patrón. 

Caso 1. IGN 

El primer ejemplo para ilustrar los posibles problemas es una tabla de comparación muy compleja de IGN.

En este experimento el participante quería decidir entre dos consolas de videojuegos diferentes. En primer lugar lo que hace es evaluar la tabla, fijándose en la colocación de las columnas y las filas. Después, vuelve a mirar en la parte de arriba para comprobar los títulos de las comunas y de la sección. 

A partir de ahí comienza a mover la mirada como una cortadora de césped, de izquierda a derecha y luego de derecha a izquierda, recorriendo cada celda de la tabla. 

Sin embargo, el participante se encuentra con tres grandes problemas durante el proceso de examinar esta tabla comparativa:

  1. La longitud de la tabla. Aunque el participante solo estaba comparando dos elementos, debido a la longitud de la tabla, perdía la noción de qué se estaba hablando en cada columna, por lo que de vez en cuando sus ojos volvían a leer la etiqueta de la columna.
  2. Aunque recordar dos títulos de columna pueda parecer sencillo, hay que tener en cuenta que los humanos tenemos una memoria de trabajo limitada. Si a esto añadimos que el usuario estaba intentando comprender y contrastar características técnicas complejas, se convierte enlo que hace que sea una tarea muy exigente desde el punto de vista cognitivo.  
  3. Vocabulario muy técnico. En algunas de las celdas más complicadas, el participante se ve obligado a interrumpir la lectura para intentar comprender el contenido. En estas filas se aprecia que sus ojos se movían rápidamente entre las dos celdas de contenido, posiblemente preguntándose cuál era la diferencia entre ellas. 
  4. Falta de información marcada con las letras TBA (“to be announced”, pendiente de ser anunciado). Cuando se dio cuenta de que muchas celdas contenían el mismo texto sin aportar información el participante abandona la lectura. 

Caso 2. Apple Watch 

Otro participante estaba tratando de decidir entre dos modelos diferentes de Apple Watch, utilizando una tabla comparativa personalizable. En cada fila pasa de una columna a la siguiente, utilizando un patrón de cortadora de césped muy claro. De vez en cuando sus ojos retroceden para volver a mirar una palabra o una imagen de la fila anterior. Con esta información podemos ver que como la mayoría de los patrones de mirada, este tampoco es siempre limpio y ordenado.

Este participante fue muy metódico y se fijó en la mayoría de las características de la tabla, incluso siendo algunas características idénticas en ambas columnas, lo que no aporta ningún valor adicional a la información leída. Al utilizar el patrón de cortadora de césped, el participante invirtió mucho tiempo leyendo toda la tabla comparativa, pero es posible que se quede con la sensación de no haber recibido toda la información que esperaba.

Cómo diseñar una buena tabla comparativa teniendo en cuenta el patrón de la cortadora de césped

Las tablas comparativas son muy útiles para ayudar a los usuarios a tomar decisiones de forma rápida y sencilla, pero solo si están diseñadas correctamente. 

A continuación enumeramos una serie de características de diseño que desde NNG consideran importantes:

  1. Encabezados de columna fijos. Si la tabla es muy larga es muy útil que las cabeceras sean fijas para que los títulos estén siempre visibles. De esta forma se evita que el usuario tenga que perturbar su patrón de escaneo para volver a mirar los títulos de la tabla, lo que puede hacer que pierda su lugar en la tabla.
  2. Permitir a los usuarios ocultar columnas. Si un usuario, por ejemplo, solo se interesa por la primera y la última columna de una tabla, puede resultar difícil mantener el hilo. Si los usuarios pueden ocultar los productos o servicios que no les interesan, este problema se soluciona. 
  3. Utilizar celdas de contenido autoexplicativo. Lo mejor es que cada celda sea independiente y se pueda entender sin necesidad de leer otros apartados. Si la etiqueta de fila es crucial para entender el contenido, es probable que el usuario tenga que escanear más de una vez el mismo contenido para entenderlo. El reto está en cumplir este objetivo sin abrumar al usuario con demasiado texto en la misma celda.
  4. Agrupar las características Sí/No. Aunque lo recomendable es que las celdas tengan sentido por sí mismas, si las características solo tienen dos posibles valores es más sencillo utilizar celdas de sí/no o marcas como una x.  Con este tipo de información se puede alterar el patrón de la cortadora de césped, por lo que lo recomendable es agrupar estas filas.
  5. Evitar celdas repetitivas. Si una característica se comparte entre dos o más ofertas, se puede considerar utilizar únicamente una celda combinada entre las dos columnas, de forma que el usuario solo lo tenga que leer una vez.
  6. No utilizar lenguaje técnico. Si es indispensable utilizar este tipo de lenguaje, es necesario proporcionar definiciones o explicaciones rápidas dentro de la misma tabla. Si los usuarios no entienden estos términos lo más probable es que se interrumpa el patrón de escaneo.
  7. Posicionar las celdas vacías al final de la ruta de escaneo. Es importante evitar el contenido de relleno que no aporta información útil. Sin embargo, si tenemos filas de ese tipo, lo mejor es agruparlas al final de la tabla.

Con todo esto en mente, construir una buena tabla comparativa puede parecer una labor difícil, pero un buen benchmarking puede ayudar a que las mismas funcionen para conseguir que el usuario tome la mejor decisión posible de manera consciente.

Trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso.