lunes, 19 de diciembre de 2016

Usabilidad, neuromarketing y mapas de calor para mejorar el diseño web

No hace mucho, en un curso sobre diseño web, el profesor nos habló (cómo no), de la importancia de que las webs sean usables y sencillas de manejar para cualquier usuario, independientemente de su edad o familiaridad con Internet. En este contexto nos habló también de varios conceptos de diseño web y de herramientas que podían ayudar a conocer los patrones de uso/lectura de los usuarios de un sitio, y que podían contribuir a que los elementos de las webs se posicionarán en el texto teniendo en cuenta estos patrones.
Son recomendaciones basadas en estudios de neuromarketing, testados y ensayados que constatan que la mayoría de los usuarios tienen un comportamiento similar cuando visitan una web, y hacen el mismo tipo de recorrido visual por el sitio.

 Vamos a enumerar los principales:

Patrón de Composición en forma de F


Como su nombre indica, este patrón adquiere la forma de esta letra, y se ciñe al movimiento natural del ojo humano al leer en web. Su uso está avalado por estudios científicos que reflejan el recorrido que nuestros ojos realizan al leer en Internet, y que difiere del movimiento que realiza cuando lee en otro soporte.

Pero no sólo el ojo humano lee siguiendo este orden, también lo hacen así los navegadores web. Por ello, en términos de SEO se recomienda incluir siempre las palabras clave que queramos posicionar lo más arriba y a la izquierda posible.

Diseño web patrón F

Si os fijáis en la imagen superior, la primera franja horizontal de la F coincide con el título de la página, o H1, y la segunda con el H2, categorías de títulos que deben aparecer en cada una de las páginas. En este sentido, el contenido principal  de la página, el texto que va a posicionar, está a la izquierda.

Mejor imágenes de personas que ilustraciones

Otras de las recomendaciones que nos dio este profesor es la de incluir siempre que sea posible y tenga sentido, a personas en las imágenes que pongamos en la web. Si es una foto vuestra, mucho mejor, ya que estáis mostrando a vuestros lectores/clientes quién está detrás del proyecto, y aumentáis su confianza en el mismo.
Además, el ojo humano prefiere este tipo de imágenes, como se ha constatado en los mapas de calor que reflejan el recorrido que hace un ojo por una web, por lo que si os es posible y tienen sentido en vuestro sitio incluidlas, de este modo se favorece que el lector se quede más tiempo en ella, y aumentas el SEO.

Mapas de calor


Una de las mejores formas de saber si nuestra web se adapta a los consejos de diseño mencionados es acudir al uso de los llamados mapas de calor (heat maps), que se usan para conocer qué partes de una web son más visitadas por los usuarios. Esos mapas pueden estar basados en:

  • El recorrido que realiza un ratón en una página. Pero no reflejan la realidad de la visita de un usuario en las webs, ya que muchas veces, cuando estamos leyendo un contenido determinado no dejamos el ratón quieto y realizamos movimientos aleatorios por el sitio.
  • El recorrido del ojo humano en la web. Se trata de la forma más fiable, pero también más cara, de testar el diseño de nuestra web. 
Como se observa en la página superior, con un ejemplo de Wikipedia, la forma registrada del mapa de calor de la página responde a la estructura en F, con una parte destacada, que incluye un resumen del artículo, y el índice de contenidos del artículo. 

¿Y tú,que estructura prefieres para tu sitio web?