Share
Hoy vamos a examinar el "F Pattern Layout". En lugar de tratar de forzar el flujo visual del espectador, F-Layout cede a los comportamientos naturales de la mayoría de los internautas y utiliza estudios científicos para respaldarlo. Este tutorial lo guiará a través de los principios de F-Layout, por qué funciona y cómo puede crear su propio.
Lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento del usuario es uno de los principios centrales para crear una experiencia de usuario efectiva..
Este post marca el segundo de una serie en la que examinaremos la gran variedad de paradigmas de diseño que existen en el mundo del diseño web. El objetivo: comprender mejor por qué puede elegir un concepto de diseño en lugar de otro. En esta serie, también veremos el diseño en forma de "Z", el diseño abierto y algunos diseños listos para usar que seguramente te darán algunas ideas geniales. Lograr una mejor comprensión de cómo los diferentes diseños pueden cambiar el comportamiento del usuario es uno de los principios centrales para crear una experiencia de usuario efectiva..
El F-Layout se basa en varios estudios de seguimiento de la vista por su concepto fundamental. Estos estudios científicos muestran que los internautas leen la pantalla con un patrón "F": ven la parte superior, la esquina superior izquierda y los lados izquierdos de la pantalla ... solo ocasionalmente miran hacia el lado derecho de la pantalla. Estos estudios sobre el seguimiento del ojo argumentan a favor de colocar los elementos más importantes de su sitio (marca, navegación, llamada a la acción) en el lado izquierdo del diseño..
Echemos un vistazo a un mapa de calor usando Webdesigntuts + como ejemplo:
Este mapa de calor muestra la forma F abstracta que el usuario general gravita hacia. Los puntos calientes (rojo / naranja / amarillo) representan donde la atención del usuario permanece más tiempo. Permítame guiarlo a través del patrón de comportamiento general:
Tomemos un momento para convertir este patrón en una estructura de alambre de barebones:
Tómese un momento para notar algunos patrones de comportamiento clave; La lectura se hace en gran parte de la misma manera que se lee un libro: De arriba a abajo, de izquierda a derecha; El contenido de la barra lateral suele descartarse debajo del "pliegue" y, por lo general, solo se analiza brevemente. La mayor parte de la atención permanece dentro de la columna de contenido principal donde, en este caso, se encuentra la lista de artículos.
Una inspección detallada revela una jerarquía visual que lógicamente podría esperar:
Como ejercicio, veamos la creación de un diseño utilizando F-Layout. Primero, dibujemos la ubicación aproximada de nuestros principales elementos de contenido utilizando un método de estructura alámbrica:
Tenga en cuenta que estamos tratando de hacer que nuestra "declaración de misión" principal se encuentre lo más cerca posible de la parte superior de la página en un intento de comunicar el propósito del sitio rápidamente. También estamos cediendo al deseo de los visitantes de "escanear" el contenido dividiendo nuestro diseño en dos columnas principales: una para nuestro contenido principal, la otra para información auxiliar (la barra lateral).
A continuación, agreguemos algo de contenido real al diseño para ver cómo se ve:
Es duro, pero los ingredientes clave están ahí. Notará que la intención principal del sitio ahora se comunica en unos pocos segundos ... la fila superior de contenido ahora cumple con su deber de "orientar" al visitante; Si su navegación está aquí, también saben dónde pueden ir..
Debajo de la fila superior, estamos usando imágenes y titulares "pegadizos" para captar la atención de un surfista ... incluso si solo están interesados en escanear el contenido, hay una buena posibilidad de que puedan encontrar algo de interés.
También estamos tratando de capitalizar la segunda fila de la "F" colocando un anuncio o "llamada a la acción" aquí (# 4).
Ahora, vamos a superponer el diseño F original para ver cómo coincidimos:
No esta mal verdad Podríamos querer jugar con los detalles (estilo, fraseo de los titulares, etc.), pero en su mayor parte estamos permitiendo que el comportamiento de escaneo del patrón F dicte nuestro diseño..
Una cosa a tener en cuenta aquí es que la altura de cada una de las dos filas en la parte superior de la "F" puede ser variable. Algunos diseñadores pueden optar por dejarlos lo más finos posible para alentar a los usuarios a comenzar a escanear de inmediato; otros pueden optar por convertirlo en una parte mucho más dominante del diseño.
Sin embargo, ¿qué sucede cuando quiere sacar al surfista del "patrón de escaneo"? Ciertamente no se beneficia de un usuario aburrido si comienzan a aburrir todo, así que agreguemos un elemento "incómodo" dentro del área de escaneo para mantener al usuario interesado.
Esta técnica de "romper las expectativas" de la disposición puede ser útil cuando tiene vanos verticales realmente largos de contenido que se sienten aburridos o aburridos una vez que se desplaza más allá de los primeros titulares. Al lanzar al espectador una bola curva, puede hacer que los usuarios se muevan por su sitio proporcionando elementos visualmente interesantes 1000, 2000, incluso 3000 píxeles por debajo del pliegue..
F-Layout funciona porque permite a los usuarios de Internet escanear contenido de forma natural. El diseño se siente cómodo porque la gente ha estado leyendo de arriba abajo, de izquierda a derecha, durante toda su vida. Sin embargo, las implicaciones de este patrón de comportamiento son una especie de espada de doble filo:
Si todo esto suena como si estuvieras diseñando un sitio más como lo haría un anunciante que un diseñador, tendrías razón. La mayoría de los sitios que dependen en gran medida de F-Layout también dependen de la publicidad u otros lanzamientos de "llamada a la acción" en la barra lateral para generar ingresos o algún otro tipo de participación de los usuarios. Esto no es necesariamente algo malo (oye, ¡¿son esos anuncios en nuestra barra lateral ?!), pero subraya la relación entre el contenido y la barra lateral ... el contenido es el rey, la barra lateral generalmente está ahí para involucrarte. En algo que te llevará a otro nivel..
Entonces, ¿qué significa esto para una barra lateral? Una relación efectiva entre la columna de contenido y la columna de barra lateral en un diseño utilizará la barra lateral de una de las siguientes dos maneras:
Entonces, ¿qué vino primero? ¿Se diseñó el F-Layout en respuesta a las personas que exploran sitios en el F-Pattern, o los navegadores web comenzaron a escanear las páginas en el F-Pattern como respuesta a tantos sitios diseñados de esa manera? Mi opinión personal es que es un poco de ambos Sí, la gente siempre ha estado leyendo de arriba a abajo, de izquierda a derecha; pero la prevalencia del diseño del sitio de 2 columnas sin duda alienta a los visitantes del sitio a escanear la forma en que lo hacen.
El simple hecho es que el F-Pattern está respaldado por la investigación, por lo tanto si desea o no que su diseño se adhiera estrechamente a él, vale la pena al menos considerar cómo reaccionarán los visitantes a su sitio si prefieren "F-scan" La web.
Bien, antes de que enumere esto, vale la pena decir que casi cualquier configuración de sitio web en el diseño de blog tradicional de 2 columnas está usando un diseño "F-Pattern", por lo que es casi demasiado predecible mostrarle más sitios que usan el estándar Patrón F.
Lo que nosotros son Lo que veremos en estos ejemplos es cómo cada uno de estos diseños se destaca en la manipulación del flujo ocular del patrón F ... Observe que los diseños más efectivos son aquellos que anticipan el comportamiento de escaneo del patrón F, y luego lo utilizan para su ventaja..
DesignSnack.com no solo le informa de qué se trata en la parte superior de la "F", sino que lo involucra incluso antes de que comience a desplazarse.. 
El sitio LAtimes.com es uno de mis sitios de periódicos favoritos. Usted querrá darse cuenta de cuánto "rompen las expectativas de diseño" una vez que comienza a desplazarse hacia abajo. 
Kickstarter ofrece una declaración de misión efectiva en la parte superior, pero se desprenden del molde al abandonar completamente la barra lateral a favor de la bondad del escaneado puro por debajo del pliegue.. 
Phototuts (o cualquiera de los sitios en la red Tuts +) se basa en gran medida en el flujo ocular de patrón-F. Toma nota de esa barra lateral de allí. ¿Es aburrido? No ... cada widget de barra lateral incluye un poco de diseño personalizado que lo mantiene interesante y relevante. Ah, y observe cómo se pueden escanear los titulares ... a veces, un patrón de diseño simple y directo es el mejor enfoque.. 
CollegeHumor podría ser el último lugar en el que pienses para una lección de diseño formal, pero echa un buen vistazo a su página principal. Lo colocan en GRUESO en la parte superior de la parte F ... tanto que podría llamar a esto el diseño FFFFF. El razonamiento de esto es simple: si no puede superar el deseo de un usuario de hojear rápidamente su contenido en busca de algo tentador, también puede unirse a ellos.. 
GigaOm es otro sitio que sobresale en "romper las expectativas de diseño". Cuando visite el sitio, desplácese hacia abajo para ver cómo ofrecen contenido interesante hasta el pie de página.. 
El Tour de productos de SquareSpace muestra que no necesita tener la barra lateral en el lado derecho ... de hecho, puede aprovechar el hecho de que los usuarios gravitarán hacia el vástago de la F colocando una sub-navegación allí.. 
He guardado CreativeSessions para el final porque están haciendo algo completamente diferente. Básicamente, utilizan la parte superior de la F como un gran reclamo (observe que no hay marca ni mensaje allí). Al hacer esto, te animan a leer lo que está debajo del pliegue.. Hay inconvenientes en confiar demasiado en el "F-Pattern" como su base de diseño. Por un lado, los diseños que se adhieren demasiado al diseño F pueden parecer aburridos y predecibles ... para combatir esto, usted como diseñador tendrá que aportar cierto nivel de innovación a la mesa. Los widgets de barra lateral bien diseñados, los titulares llamativos y las imágenes atractivas son trucos útiles, pero es probable que desees ir un paso más allá..
Una vez que te sumerges debajo de las dos filas superiores de la "F", a menudo se convierte en un desafío para un diseñador mantener las cosas interesantes. Descubrí que muchos diseñadores venden los mejores 600px de un sitio a sus clientes ... todo esto está bien (es lo que los visitantes ven primero), pero las lecciones del diseño F son que también es importante mantener las cosas interesante a medida que comienzas a desplazarte hacia abajo.
Al igual que una canción que tiene un ritmo constante puede darte un dolor de cabeza, una página a menudo puede ser aburrida y repetitiva si no te molestas en lanzar un elemento interesante de vez en cuando. Romper el ritmo de un diseño al limitar los elementos repetitivos es una técnica crucial que querrá diseñar en sus sitios para llevar su trabajo al siguiente nivel.
Asegúrese de revisar también la publicación "Z-Layout"!
¿Tienes tus propios pensamientos o comentarios? Compartirlos abajo!
Accentsconagua