Entendiendo el diseño en forma de F en diseño web

Hoy vamos a examinar el “Patrón de Composición en forma de F”. En lugar de forzar el flujo visual del espectador, el “diseño en forma de F” cede a los comportamientos naturales de la mayoría de los navegadores en la web y usa estudios científicos para respaldarlos. Este tutorial te conducirá a través de los principios del Diseño en forma de F; ¿por qué funciona? Y sobre todo cómo puedes crear uno por tu propia cuenta.

“Lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento de los usuarios, es uno de los principios centrales para la creación de una experiencia efectiva para los usuarios”.

Este artículo es el segundo de una serie dónde examinaremos la amplia variedad de diseños paradigmáticos que existen en el mundo del diseño web. El objetivo, mejorar la comprensión de por qué podrías escoger un concepto de diseño en lugar de otro. En estas series, también estaremos viendo el “diseño en forma de Z”, el diseño abierto, y algunos de los diseños de caja que estoy seguro que te darán algunas buenas ideas. Pero, ¿de qué se trata todo esto? De lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento de los usuarios es uno de los principios centrales para la creación de una experiencia efectiva para los usuarios.

Introducción al Diseño en forma de F

El diseño en forma de F se basa en varios estudios de seguimiento de los ojos, y es su concepto más fundamental. Estos estudios científicos muestran que los navegadores en la web leen la pantalla en un patrón en forma de “F”, ¿cómo? Viendo arriba; de la esquina superior izquierda y los lados izquierdos de la mayoría de las pantallas… y sólo ocasionalmente echando miradas hacia el lado derecho de la pantalla. Estos estudios de seguimiento de ojos argumentan a favor de colocar los elementos más importantes de su sitio (la marca –es decir; el logotipo, la navegación, llamados a la acción) en el lado izquierdo del diseño del sitio web.

Echemos un vistazo a un mapa de calor usando como muestra el sitio webdesigntuts+:

Este mapa de calor muestra la forma abstracta de la letra F, hacia la que generalmente gravita el comportamiento de los usuarios. Los puntos calientes (rojo/naranja/amarillo), representan dónde permanece por más tiempo la atención de los usuarios.

Permíteme guiarte a través del patrón de comportamiento general:

• Los visitantes empiezan en la parte superior izquierda de la página.
• Luego analizan la parte superior del sitio (navegación suscripción, búsqueda, etc.).
• A continuación se mueven hacia abajo, leyendo la siguiente fila completa de contenido.
• Por último, los navegadores entran en un “patrón de navegación”, una vez que lleguen a la mayor parte del contenido del sitio.

Pero tomémonos un momento para convertir este patrón en una básica forma de estructura:

Ahora, tómese un momento para observar algunos patrones de comportamiento claves; la lectura se realiza en gran medida de la misma forma que se lee un libro: de arriba hacia abajo, de izquierda a derecha. El contenido de la barra lateral a menudo es descartado por quedar debajo del “dobles”, y por lo general solamente se explora brevemente. La mayor parte de la atención se mantiene dentro de la columna principal en dónde se encuentra contenido, en este caso el artículo listado es ubicado con facilidad.

Una inspección más de cerca revela una jerarquía visual que lógicamente podrías esperar:

• La marca y la navegación ocupan la atención de los visitantes en primer lugar.
• Dentro de la estructura de competencia, las imágenes reciben el mayor nivel de atención.
• Los titulares vienen después.
• Aparece el texto para ser escaneado, no para leerse cuidadosamente aún.

Aplicando el diseño en forma de F a un Diseño.

Como ejercicio, vamos a crear un diseño y aplicaremos los principios del diseño en forma de F. En primer lugar, vamos a delinear la ubicación aproximada de nuestros elementos del contenido principal usando el método de la estructura de alambre:

Observe que estamos procurando hacer nuestro principal “comunicado de misión” tan cerca de la parte superior de la página como sea posible en un intento de comunicar rápidamente el propósito del sitio. También le estamos dando a los visitantes el deseo de “escanear” el contenido dividiendo nuestro diseño en dos columnas principales: una para nuestro contenido primario y otro para la información auxiliar (la barra lateral).

A continuación, agreguemos algo de contenido real al diseño para ver cómo luce:

Es crudo, pero los ingredientes principales están ahí. Se dará cuenta de que el propósito principal del sitio esta comunicado en pocos segundos, la fila superior de contenido esta cumpliendo con su deber de “orientar” a los visitantes, y si tu navegación esta aquí, ellos también saben dónde pueden ir.

Debajo de la fila superior, estamos usando imágenes y titulares pegajosos para captar la atención de los navegadores, incluso si solamente están interesados en escanear contenido, hay una buena posibilidad de que van a ser capaces de encontrar algo de su interés.

También estamos tratando de sacar provecho de la segunda fila de la F para ubicar un anuncio o “llamado a la acción” aquí (#4).

Ahora, vamos a superponer el diseño original en forma de F para ver cómo encajamos:

Nada mal, ¿no lo creen? Podríamos querer jugar con los detalles (estilos, frases de los titulares, etc.), pero en su mayor parte estamos permitiendo que el patrón en forma de F dicte el comportamiento de exploración a nuestro diseño.

Una cosa que se observa aquí es que la altura de cada una de las dos filas en la parte superior de la F puede ser variable. De hecho, algunos diseñadores podrían optar por dejarlas tan delgadas como sea posible para estimular a los usuarios a empezar a explorar inmediatamente. De igual forma, otros diseñadores simplemente pueden optar por hacer las dos filas en la parte superior, una parte mucho más dominante del diseño.

¿Qué sucede cuando se quiere obligar a los navegantes a salir del “patrón de exploración”? Por cierto, no se benefician de un usuario aburrido si empieza a salir todo aburrido, entonces agreguemos algún elemento “incomodo o torpe” dentro del área de exploración para mantener a los usuarios interesados.

Esta técnica de “romper con las expectativas” del diseño puede ser útil cuando se tiene tramos verticales muy largos de contenidos que se sienten muy aburridos una vez que se desplaza más allá del primer par de titulares. Al arrojar al espectador una curva, entonces puedes mantener a los usuarios moviéndose en su sitio proporcionando elementos visualmente interesantes de 1000, 2000, incluso 3000 pixeles debajo de los dobles.

¿Por qué funciona?

El diseño en forma de F funciona porque les permite a los navegadores explorar el contenido naturalmente. El diseño se siente cómodo porque ha leído de arriba hacia abajo y de izquierda a derecha durante todas su vidas. Sin embargo, las implicaciones de este patrón de comportamiento son una especie de espada de doble filo:

• Si necesitas decir algo, a pesar de todo debes decirlo en la parte superior porque…
• Los usuarios no se pondrán a leer todas y cada una de las palabras en la página. De hecho, la mayoría de los lectores no se molestarán en leer el extracto de un artículo. Cualquier cosa más allá de un titular es probable que solamente vaya estar ahí por propósitos de SEO.
• Las imágenes y los titulares son válidos, solamente si son interesantes y atractivos.

Si todo esto suena como si estuvieras diseñando un sitio más como un publicistas que como lo haría un diseñador, entonces estas en lo correcto. La mayoría de los sitios que confían fuertemente en el diseño en forma de F también dependen de los anuncios u otro “llamado a la acción” colocados en el área de la barra lateral para aumentar los ingresos o algún otro tipo de compromiso con el usuario. Esto no es necesariamente algo malo, (Mmm, ¿son esos anuncios ahí en nuestra barra lateral?), pero haz hincapié en la relación entre el contenido y la barra lateral… y recuerda que el contenido es el rey, la barra lateral usualmente esta ahí para que te involucres en algo que te llevará a otro nivel.

Entonces, ¿qué significa esto para una barra lateral? Una excelente relación entre la columna de contenido y la columna de barra lateral en un diseño utilizará la barra lateral en una o dos formas:

1. Para ofrecer contenido “relevante”. Esto puede ser un anuncio, una lista de artículos relacionados, una lista de control de redes sociales, etc.
2. Cómo una herramienta para los usuarios para encontrar contenido especifico. El ejemplo más obvio es “una barra de búsquedas”, pero también podría ser una lista de categorías, una etiqueta, un “blog muy popular”, u otros controles de medios sociales, etc.

¿La gallina o el huevo?

So which came first? Was the F-Layout designed in response to people scanning sites in the F-Pattern, or did web-surfers begin scanning pages in the F-Pattern as a response to so many sites being designed that way... My personal guess is that it's a little bit of both. Yes, people have always been reading top-to-bottom, left-to-right; but the prevalence of the 2-column site layout certainly encourages website visitors to scan the way that they do.

El simple hecho es que el diseño en forma de F está fundamentado en las investigaciones, es decir qué; ya sea si quieres o no que tus diseños se apeguen a esta forma de diseño, funcionará al menos si consideras cómo los visitantes reaccionaran a tu sitio si prefieren escanear la web a través del “escaneado F”.

Ejemplos del diseño en forma de F en acción

Ok, entonces, antes de que realmente empecemos a enumerarlas, vale la pena decir que cualquier sitio configurado en el tradicional método de 2 columnas esta usando el “patrón en forma de F”, por lo tanto es demasiado predecible mostrarte más sitios que usan el estándar diseño en forma de F.

Lo que vamos a ver en estos ejemplos es cómo cada uno de los diseños sobresale en la manipulación de la dirección del ojo a través del diseño en forma de F. Observe que los diseños más efectivos son los que anticipan el comportamiento de exploración del patrón en forma de F y luego usarlo en su beneficio.

Designsnack.com no te están diciendo únicamente acerca de todo lo que son en la parte superior de la “F”, en realidad están consiguiendo que te involucres aún antes de que empieces a desplazarte en el sitio.

El sitio LAtimes.com es uno de mis sitios de periódicos favoritos. Querrás darte cuenta qué tan fuertemente rompen con las expectativas de diseño una vez que has empezado a desplazarte.

Kickstarter.com ofrece una declaración de objetivos eficaz en la parte superior, pero rompen con el molde abandonando completamente la barra lateral en favor de la pura exploración que esta debajo del dobles.

Phototuts (o cualquiera de los sitios de la red tuts+) depende en gran manera del flujo ocular a través del patrón en F. Observa que la barra lateral esta ahí. ¿Es aburrida? ¡Nop! Cada operación incluye un pequeñito diseño personalizado que lo mantiene interesante y relevante. Y por supuesto, observe lo fácil que son los titulares de analizar. Algunas veces un patrón de diseño simple y sencillo es el mejor método.

CollegeHumor quizá podría ser el último lugar en el cual pensar para una lección de diseño normal, pero echa un buen vistazo a la página principal. Verás que ponen en grueso en la parte superior de la F el propósito del sitio, tanto es así que usted puede llamar a esto el diseño FFFF. El razonamiento es muy simple: Si no puede vencer el deseo de un usuario a ojear rápidamente sobre su contenido en busca de algo tentador, entonces puedes unirte a ellos.

GIGaOM.com es otro sitio que sobresale por “romper con las expectativas de diseño”. Al visitar el sitio y desplazarte hacia abajo para ver como entregan el contenido interesante completamente hasta abajo hasta llegar al pie de la página.

SquareSpice Product Tour muestra que no necesitas tener tu barra lateral en el lado derecho, incluso, puedes aprovechar el hecho de que los usuarios dirijan su atención primeramente hacia la derecha la F al colocar una barra de menú para navegar justo ahí.

He guardado la página de CreativeSessions para el final porqué ellos están haciendo algo completamente diferente. Ellos, esencialmente, usan una parte de la parte superior de la F cómo un gran atractivo (observe que no hay nada de marca o un mensaje allí). Al hacer esto, te recomiendan que en verdad leas lo que se encuentra debajo del fold.

Advertencias que valen la pena mencionar

Existen inconvenientes en confiar demasiado en el patrón F como su base de diseño. Para empezar, los diseños que se pegan demasiado al diseño en forma de F puede ser algo aburrido y predecible, pero ¿hay alguna forma de combatir esto? Cómo diseñador tienes que traer un cierto nivel de innovación en la mesa de trabajo. Los controles en la barra lateral bien diseñados, titulares pegajosos e imágenes atractivas son todos trucos útiles, pero es probable que quiera ir un paso más allá.

Una vez que descienden por debajo de las dos primeras filas del diseño en forma de F, a menudo se convierte en un desafío para un diseñador conservar las cosas interesantes. Me he dado cuenta que muchos de los diseñadores venden la parte superior de un sitio, es decir: 600px, a sus clientes. Bueno, eso esta bien (si es lo que los visitantes ven primero), pero la lección del diseño en forma de F es que lo más importante, también es conservar las cosas interesantes cuando empieces a desplazarte hacia abajo.

Al igual que una canción que tiene un ritmo constante puede darle un dolor de cabeza, una página a menudo puede llegar a ser aburrida y repetitiva si no se molesta en lanzar un elemento interesante de vez en cuando. Romper el ritmo de un diseño mediante la limitación de los elementos repetitivos es una técnica crucial es una técnica importante que usted querrá diseñar en su sitio para llevar su trabajo al siguiente nivel.

¡Asegurate de revisar también el diseño en forma de Z!

Un comentario muy importante: Considera el diseño en forma de F cuando estés diseñando un blog o un sitio para compartir información o presentar información, pero no para vender productos.

¿Tienes comentarios al respecto? ¡Por favor, compártelos y escríbelos abajo!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!