¿Sabéis qué es el eyetracking? (traducido literalmente del inglés significa “seguimiento de ojos”). Enfocado hacia la usabilidad en diseño web, se trata de una serie de técnicas y estudios centrados en escanear el movimiento de los ojos a la hora de ver una página web.

¿Cómo lo hacen? A través de un eyetracker. Como ya explicaban hace unos cuantos años desde Usolab en uno de sus artículos mejor posicionados en Google, un eyectraker es “un monitor especial que lanza rayos infrarrojos a los ojos de quien lo usa. Estos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está mirando“.

Gracias a esos registros de los rayos infrarrojos rebotados, se puede generar sobre una página web un mapa de calor. Los mapas de calor muestran unas zonas rojas, que es donde la mirada del usuario se ha concentrado más durante el escaneo de la página web. En las zonas amarillas, la mirada también se ha detenido, pero durante menos tiempo. En el resto de la página, la mirada no ha llegado.

Esto se conoce como patrón en F, ya que la mirada describe una trayectoria similar a la forma de esa letra:

  1. Primero recorre una línea horizontal larga en la zona superior, de izquierda a derecha.
  2. Luego, también de izquierda a derecha, recorre otra línea horizontal poco más abajo y algo más corta que la primera.
  3. Para terminar, recorre la zona izquierda de arriba abajo.

En base a estos patrones en F, podemos sacar 3 directrices básicas que tener en cuenta a la hora de estructuras contenidos para nuestra web:

Es mejor colocar en nuestra web una barra de menús horizontal en la zona superior que una barra de menús vertical en la zona izquierda

Es el índice de nuestra web y es bueno que lo primero que vea el usuario sea ese índice. Por eso es importante también que los nombres de los menús sean concretos y descriptivos. Por ejemplo, sólo con mirar la barra de navegación de esta misma web, ¿a que os podéis hacer una idea de qué servicios se ofrecen?

En internet atrae más la atención un texto que una imagen

Al contrario que en los medios impresos. Por eso, en las zonas rojas del mapa de calor debemos colocar preferentemente textos en lugar de imágenes. Por ejemplo, fijaos en el pase de destacados de la home de nuestra web. Si las imágenes estuviesen colocadas a la izquierda en lugar de a la derecha, se desperdiciarían oportunidades de lectura hacia los textos destacados.

Las columnas, a la izquierda y con información adicional

En las webs comerciales y exceptuando las grandes como Facebook, Ebay, periódicos digitales, etc., suele haber dos tipos básicos de páginas: las de ancho completo, en las que el mismo contenido ocupa todo el ancho de página desde izquierda a derecha, y las de dos columnas, en las que aproximadamente 1/3 de la página está ocupada por una columna de widgets, accesorios u otra información. Esta misma web es un ejemplo: hay una columna a la derecha del contenido principal donde están colocados un texto descriptivo y dos Like Box de Facebook. Es importante que este tipo de información adicional no se utilice para mostrar información importante para entender la web, sino accesorios como Like Box de Facebook, cronologías de usuario de Twitter, textos para mejorar el posicionamiento SEO… Las promociones y anuncios, si queréis que tengan buena visibilidad (que seguro que es así), colocadlos mejor en la cabecera que en la columna derecha.

Si os interesa el tema del eyetracking, uno de los mayores referentes en este tema es Jakob Nielsen.

¿Se os ocurre alguna otra directriz que parta del patrón en F y que sirva como referencia para estructurar contenidos para web? ¡Compartidla!