comparte el articulo 

Patrones de diseño web: Patrón F

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: Segunda parte de un artículo donde exponemos algunos de los patrones de diseño web más comunes para realizar un layout, en esta ocasión nos enfocamos en el patrón F.

En el artículo anterior pudimos exponer dos de los patrones de diseño web más utilizados en la actualidad; tanto el diagrama de Gutenberg y el patrón Z son estructuras que basan la exposición del contenido en barridos de lectura producidos por la gravedad natural de la vista del lector occidental.

Es por ello, que son considerados patrones que convocan a lo tradicional, no arriesgando la comprensión del producto con una experimentación visual poco natural.

Tenemos que dejar en claro que estos no son los únicos dos patrones que existen, con el tiempo se ha decidido a continuar probando técnicas y formas de diseñar layouts de tal manera que se cree un patrón innovador.

Muchos se han basado en la teoría clásica de la composición del arte, la cual indica que las esquinas y el centro son los puntos más observados, mientras que otros indican que para poder determinar las zonas de mayor atención debemos dividir la pantalla en tercios tanto horizontales como verticales y los puntos de intersección serán los indicados para colocar información relevante.

Lo cierto es que ambas teorías de la composición son aplicables únicamente en sitios que están basados en imágenes o ilustraciones, ya que es muy poco probable que el usuario invierta su atención de esa manera si la página esta mostrando un texto como contenido. Es por ello que se ha seguido buscando otro patrón que permita mostrar grandes cantidades de contenido sin caer en lo tradicional.

Un estudio de rastreo visual realizado por Jakob Nielsen, dio como resultado que las páginas que son dominadas en mayoría por texto son escaneadas de tal manera que se forma un patrón en forma de F. Es decir, la manera en que el ojo se mueve va de la parte superior izquierda hacia el extremo derecho, después baja y hace el mismo movimiento, marcando también el patrón del triángulo rectángulo.

Patrón F en diseño web

El patrón F es una técnica que en lugar de tratar de forzar el flujo visual del espectador, cede a los comportamientos naturales de la mayoría de los usuarios.

Como ya explicamos este es un patrón diseñado especialmente para sitios que muestran mucho texto, pero que a la vez tienen imágenes de acompañamiento, por lo que es ideal para blogs y sitios de noticias.

El comportamiento definido por este patrón es el siguiente:

  • El usuario ingresa al sitio y centra su vista en la esquina superior izquierda de la página.
  • Después escanea la parte superior del sitio, donde generalmente se encuentra la barra de navegación, la búsqueda, entre otros elementos.
  • Prosigue con una lectura hacia abajo, donde percibe el contenido en filas y en caso de existir una barra lateral se analiza su contenido.
  • Al final los usuarios repiten el patrón con el resto del contenido del sitio.

Si lo que sugiere este patrón es cierto, entonces la información más importante de nuestro sitio debe de ir colocada en la parte superior de este, ya que es ahí donde seguramente será leída.

El resto de la información deberá ser colocada a lo largo del borde izquierdo del diseño, donde a menudo se recurre al uso de viñetas o estructuras de puntos para desplegarla, permitiendo que el movimiento horizontal del ojo para poder percibir toda la información sea relativamente poco.

Desafortunadamente existen muchos casos donde este patrón es llevado más alla del texto e imágenes de apoyo, y es aplicado a todo tipo de páginas en la red. Este patrón debe ser aplicado únicamente para mostrar el contenido principal de los sitios web y no debe tratarse de extenderlo para todo el resto del diseño.

Los elementos colocados dentro de la figura que sugiere este patrón, serán los encargados de hacer llamar la atención del usuario, lo que se observe en ellos debe ser relevante, importante y sobre todo atractivo, de esa manera el usuario se interesará en la página y leerá el resto del contenido.

La razón por la que el patrón F funciona muy bien en los diseños de los sitios, es porque esta fundamentado en un escaneo natural del usuario a la página. Basa su éxito en lo que se muestra en la parte superior del sitio, es esta parte donde generalmente el usuario centra la atención cuando ingresas a una página por primera vez.

Son pocos los usuarios que se determinan a leer todo el contenido del sitio si el encabezado no les parece atractivo, es por ello que la vista siempre irá en busca de las partes donde se muestran los encabezados y las imágenes, si colocamos dichos elementos dentro de las zonas definidas por este patrón existe mucha más posibilidad de que el usuario se interese por el artículo anunciado y termine ingresando a más páginas de nuestro sitio.

Conclusión

Tenemos que recordar que los patrones de diseño web son indicadores que tratan de predecir el movimiento natural del ojo del usuario, únicamente debemos tomarlos como sugerencias para elegir los lugares donde colocaremos los elementos que deseemos sean los más vistos por las personas que ingresan a nuestro sitio web.

Debemos tener en mente que estos patrones sólo hacen referencia a un tipo de diseño dominado por grandes bloques de contenido, donde la jerarquía no puede apreciarse de manera sencilla, y que por lo tanto la atención puede perderse fácilmente.

Al momento de escoger un patrón, o incluso combinar dos o más de ellos, no te ves obligado a continuar de forma exacta las reglas que dictan estos.

Si deseas cambiar el diseño de tu sitio a una manera que creas más conveniente, podrás hacerlo ya que el patrón es simplemente un apoyo, lo más importante es el camino que tú trazas con los elementos y el contenido de tu sitio.

Publicado el 18/05/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras