El flujo visual lleva el ojo del espectador a través del documento de manera que todos los elementos importantes reciben prominencia, y nada engancha la visión o hace que el espectador pierda el sentido de la pieza. El uso de elementos de flujo obvios como flechas o números es la forma más común en que los diseñadores web usan el flujo, pero existen otros tipos de elementos que pueden usarse y utilizarse incorrectamente para que sus lectores se muevan por un camino específico. Los pasos en este tutorial le mostrarán ejemplos de flujo bueno y malo y lo ayudarán a aprender el vocabulario del flujo visual en el diseño.
¿Qué es el flujo visual?
El flujo visual se puede lograr de muchas maneras:
- Flechas
- Imágenes secuenciales o elementos de texto.
- Perspectiva
- Gradientes
- Cambios de tamaño
- Curvas
- Movimiento en imagenes
- Caras - especialmente los ojos.
Las siguientes imágenes le mostrarán algunos errores comunes en el flujo de las páginas web y cómo corregirlos.
02 de 07El texto occidental fluye de izquierda a derecha
Si creciste leyendo un lenguaje occidental, estás acostumbrado a pensar que el texto debería moverse de izquierda a derecha. Entonces, a medida que el ojo se mueve a través de una línea de texto, se mueve de izquierda a derecha.
En la imagen anterior, la cascada fluye de derecha a izquierda, y el texto fluye hacia la cascada. Como todos sabemos que las cascadas caen, hay una desconexión en la dirección del flujo de agua con el flujo del texto. El ojo del espectador se mueve en la dirección equivocada para leer el texto.
03 de 07Tu texto debe fluir con las imágenes
En este caso, la imagen se ha invertido para que el texto fluya en la misma dirección que el agua. Todos los elementos llevan al ojo del espectador hacia abajo con el flujo del agua y el flujo del texto.
04 de 07De izquierda a derecha es igual a rápido
El caballo en esta foto corre de derecha a izquierda, pero el texto es en inglés y por lo tanto de izquierda a derecha. El impacto visual de las carreras de caballos en una dirección disminuye el ritmo de todo el documento porque va en una dirección diferente a la del texto.
En las culturas occidentales, debido a que nuestros idiomas se mueven de izquierda a derecha, hemos llegado a asociar una dirección visual de izquierda a derecha como hacia adelante y rápido, mientras que de derecha a izquierda es más hacia atrás y más lento. Cuando esté creando un diseño con una connotación de velocidad, debe recordar esto y mantener sus imágenes en la misma dirección que el texto.
05 de 07No fuerce el ojo del espectador a disminuir la velocidad
Cuando el caballo y el texto van en la misma dirección, aumenta la velocidad implícita.
06 de 07Mira los ojos en fotos web
Muchos sitios web con fotos cometen este error: ponen una foto de una persona en la página y la persona está mirando lejos a partir del contenido. Esto incluso se puede ver en el sitio de diseño web de About.com en el diseño anterior.
Como puedes ver, mi foto se coloca al lado de un texto. Pero estoy apartando la vista de ese texto, casi me vuelvo la espalda. Si vieras ese lenguaje corporal entre dos personas en un grupo, sería fácil suponer que no me gusta la persona que estoy al lado (en este caso, el bloque de texto).
Muchos estudios de seguimiento ocular han demostrado que las personas ven caras en las páginas web. Y estudios relacionados han demostrado que cuando miran imágenes, las personas siguen inconscientemente los ojos para ver lo que la imagen está mirando. Si una foto en su sitio se ve fuera del borde del navegador, ahí es donde sus clientes mirarán y luego presione el botón Atrás.
07 de 07Los ojos en cualquier foto deben enfrentar el contenido
En el nuevo diseño de About.com, la foto es un poco mejor. Ahora mis ojos miran más hacia adelante, y hay un ligero indicio de que estoy mirando a mi izquierda, donde está el texto.
Una foto aún mejor para esa posición sería una en la que mis hombros también estuvieran inclinados hacia el texto. Pero esta es una solución mucho mejor que la primera foto. Y, para situaciones donde la imagen estará a la derecha del contenido así como a la izquierda, esto podría ser un buen compromiso.
Recuerde también que mientras las imágenes de los rostros de las personas atraen la mayor atención, lo mismo ocurre con las fotos de animales. Por ejemplo, en este diseño de muestra, tengo a mis perros mirando a la izquierda, pero la imagen está a la derecha. Así que están mirando fuera de la página. Este diseño mejoraría si cambiara la orientación de los perros para que estuvieran mirando hacia el centro de la pantalla.
