Patrones de diseño web: patrón Z de Gutenberg y patrón F
(7 votos, promedio: 2,43 de 5)
Cargando...Hablamos de dos de los patrones de diseño web más comunes para realizar un layout: el patrón Z de Gutenberg y el patrón F. Conócelos para exprimir al máximo tu web.
Uno de los principales objetivos que se buscan al llevar a cabo la estructuración de una página web, es que el contenido sea mostrado de manera adecuada para que el mensaje que se busca transmitir al usuario sea recibido de forma efectiva.
Para lograr esto se recurre al uso de patrones de diseño web, los cuales ofrecen soluciones a problemas de percepción que se pueden presentar dentro de nuestro layout.
Con los patrones de diseño se busca crear estándares que de algún modo dicten las formas adecuadas de mostrar el contenido de un sitio web.
Sin embargo no debemos pensar en ellos como reglas o imposiciones sobre la creatividad y variabilidad que se puede presentar en una web, simplemente son sugerencias para el desarrollo las cuales nos indican qué partes son de mayor interés para la vista de los usuarios.
Diagrama de Gutenberg o Patrón Z en diseño web
Este es quizás el patrón de diseño más utilizado en la historia, ya que la estructura que propone se puede ver representada tanto en escritos, carteles, publicidad e inclusive en la televisión.
Como su nombre lo dice, este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha.
Lo que nos define este diagrama, en principio, es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.
Si nos decidimos en utilizar este patrón, entonces a la hora de realizar un diseño web debemos de tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos:
- Nuestra área de exposición estará dividida en cuatro partes.
- Cada cuadrante representa una zona óptica.
- La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.
- La siguiente en la estructura es la zona de atención fuerte, que se encuentra ubicada en el extremo superior derecho.
- En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de atención débil.
- Finalmente en la parte inferior derecha se encuentra la zona terminal.
Este resultado se logra gracias a la costumbre, ya que las personas occidentales comúnmente realizan una lectura que va descendiendo por una serie de barridos hasta llegar a la zona terminal.
Para este patrón de diseño las zonas que presentan menor atención son la esquina superior derecha e inferior izquierda, y en caso de querer atraer atención a esas partes es necesario incluir un elemento llamativo que enfatice de alguna manera la zona. Es por esto que el contenido relevante debe seguir la diagonal que va de la esquina superior izquierda a la inferior derecha.
Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal.
Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.
El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención.
Pero no por esto queremos dar a entender que sólo debe ser limitado a esta clase de diseños.
Este tipo de layout puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio:presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción.
Patrón zig zag
Existen otros patrones que se derivan de este, tal es el caso del patrón zig zag, que básicamente consiste en un conjunto de patrones Z que se van uniendo a lo largo de la página desplegada para continuar con el mismo seguimiento visual del contenido.
Este podría ser considerado el movimiento natural en caso de que el usuario continuará leyendo la información que se encuentra debajo de la primera vista en nuestra página de inicio.
Patrón F en diseño web
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.
¿En qué consiste el Patrón F?
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.
Los elementos colocados dentro de la figura que sugiere este patrón, serán los encargados de llamar la atención del usuario, lo que se observe en ellos debe ser relevante, importante y sobre todo atractivo.
La razón por la que el patrón F funciona muy bien en los diseños de los sitios web, es porque está fundamentado en un escaneo natural del usuario a la página.
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.
Conclusiones
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.
Además 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.
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.
Una respuesta
Muy valiosa esta información. Valdría la pena agregar algunos diagramas o dibujos para enriquecer más la información.
Gracias.