Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Dirección visual en diseño web

by
Length:ShortLanguages:
This post is part of a series called Web Design Theory.
Concept and Inspiration: Design Theory for Web Designers
The Web Designer’s Theory of Relativity

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Uno de los grandes secretos de diseño es aprender cómo guiar la dirección visual de los usuarios. De hecho, este principio a menudo se pasa por alto, incluso a los diseñadores con más experiencia, por esa razón el día de hoy vamos a tomarnos el tiempo para ver cómo funciona. Pero, ¿de qué se trata: La dirección visual? Se trata de controlar el movimiento del ojo de los usuarios. Ok, pero ¿cómo es eso posible? Bueno, esto se puede lograr cuidadosamente seleccionando sus imágenes y colocándolas bien y alineando los elementos de diseño.

Se ha establecido magníficamente que por defecto el movimiento del ojo a través de la página (en el diseño occidental que es de izquierda a derecha, por ejemplo) es desde la esquina superior izquierda hasta la parte inferior derecha de las imágenes como se ilustra a continuación:

9 Tips to get your design approved

Sin embargo, esto no puede ser del todo cierto, mediante la ubicación de los elementos en la composición en cierta forma, un diseñador puede controlar y manipular el movimiento de los ojos de los espectadores ya sea dentro y alrededor del esquema del diseño. ¿Aún no entiendes nada? Si es así veamos. Por ejemplo, el ojo se desplazará a lo largo de un camino real, tales como una línea continua o discontinua o se moverá a lo largo de una trayectoria aún más sutil, como desde los elementos más grandes a los más pequeños, desde elementos oscuros a elementos claros, desde los elementos coloreados hasta los que no lo son, desde formas muy inusuales hasta las formas más comunes, etc. Intervalos de tamaño y formas repetidas y tamaños de elementos relacionados sutilmente guían muy bien el ojo.

1. Controlando la Dirección con Imágenes

Las imágenes pueden controlar fácilmente cómo ven tus clientes tu diseño, más abajo verás algunas muestras explicitas de imágenes direccionales que pueden perfectamente ser usadas; ya sea como parte de su diseño en el contenido para guiar a los visitantes alrededor de la página, pero veamos de una vez estas imágenes:

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

Pero, por supuesto, la dirección en la cuál están apuntando estas imágenes es muy obvia. No obstante, muchas imágenes pueden no ser tan obvias y para corroborar esa afirmación veamos una vez más los siguientes ejemplos:

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

2. Guiando al ojo

A continuación presentaré uno de los más grandes errores en los que caen; tanto los diseñadores y también los editores de contenido, es casi cómo una regla, pero NUNCA hagas que tus imágenes vean hacia afuera de la página, ¿por qué? Porqué las imágenes (especialmente las caras y los ojos) deben mirar al centro de su diseño.

Echemos un vistazo a los siguientes ejemplos, ambos tomados de los sitios CNN y BBC:

9 Tips to get your design approved
9 Tips to get your design approved

En el ejemplo de las imágenes del sitio de la BBC, las 2 imágenes que se encuentran en la parte de arriba, ambas están mirando fuera del centro de la página, y lo más probable es que estés afirmando; ok, pero ¿qué tiene de malo? Es muy sencillo, ambas imágenes conducen a “no ver” la información importante a través de la trayectoria por defecto como se muestra a continuación:

9 Tips to get your design approved
9 Tips to get your design approved

Solamente para que tengas una mejor perspectiva visual de lo que estoy tratando de explicarte, consideremos los siguientes puntos:

  1. Empiezas en la esquina superior izquierda como es de esperar.
  2. Cuando avanzas a través de la trayectoria por defecto del ojo, te encuentras con la primera imagen viendo hacia afuera, por lo tanto, tu visión automáticamente se moverá fuera de la página ¿correcto?
  3. Entonces tus ojos empiezan a mirar hacia atrás en dirección al centro de la página.
  4. Luego encuentra otra imagen que también está viendo hacia afuera haciendo que tu visión nuevamente se mueva hacia afuera de la página.
  5. A menos que tus ojos empiecen a moverse en dirección del centro de la página, sin embargo, hay un gran “punto ciego” que se creo por colocar la imagen y la dirección marcada por el símbolo “¿?”

Ahora, compare la siguiente versión “arreglada” de la página de inicio del original que esta arriba del sitio de la BBC:

9 Tips to get your design approved

Viendo esta versión, notarás que tus ojos no se mueven afuera de la página, la mirada de las personas de las fotografías mirando hacia adentro te ayudaran a que veas en la misma dirección, qué es: hacia el centro de la página.

3. Formularios

Echemos un vistazo a estos ejemplos que presentamos a continuación que muestran 2 formas de alinear las etiquetas con sus campos de formularios que pueden afectar enormemente cuán fácil es para los usuarios llenar esos formularios:

9 Tips to get your design approved

A la izquierda tenemos las etiquetas alineadas hacia arriba lo cuál lo hace más rápido y más fácil de llenar que el de las etiquetas alineado de izquierda a derecha que esta a la derecha en la imagen. Pero… ¿por qué razón? ¿Cuál es la diferencia, si ambas parecen estar bien? Bueno, esto es porque las etiquetas que están alineadas verticalmente hacia arriba requieren la mitad del tiempo del movimiento del ojo que las etiquetas alineadas de izquierda a derecha. Además, las etiquetas alineadas verticalmente le permiten a los usuarios desplazarse hacia abajo del formulario en “una sola dirección visual”, en vez de “dos direcciones visuales” como las etiquetas que están alineadas de izquierda a derecha. Y también esto hace que llenar el formulario sea mucho más rápido y mucho más fácil.

La ubicación no solamente controla cómo se mueve el ojo, sino que contribuye a hacer que un diseño sea mucho más fácil de usar, incluso en un nivel subconsciente.

4. Diseñando la Dirección

Los elementos de dirección pueden tener una poderosa influencia en el estado de ánimo de un diseño, pero haciendo una consciente decisión acerca de la dirección dominante en un diseño puede tener un efecto notable en la atmosfera del trabajo.

Algunas veces las imágenes o los diseños dictaran la dirección dominante. Algunas veces te permitirán imponer una dirección a los diseños.

Las claras líneas horizontales en los diseños de abajo dan un sentimiento de quietud, estabilidad, tranquilidad y calma.

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

Ahora en el segundo grupo de imágenes que se muestran a continuación abajo, la ubicación diagonal de los elementos solamente refuerza el sentimiento de movimiento y acción.

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

Ahora, el tercer grupo tiene una dominante dirección vertical que añade una estática influencia ordenada o a lo que podría ser de otra manera aleatoria, también da una sensación de atención y formalidad.

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

El mismo cambio de carácter se puede ver en estas tres fotografías. De hecho, el sujeto es el mismo en cada una de las fotografías, pero el cambio de orientación direccional crea un ambiente diferente en cada imagen.

9 Tips to get your design approved
9 Tips to get your design approved
9 Tips to get your design approved

¿Cuál es la diferencia? Qué la orientación vertical en la primera fotografía da un sentimiento de orden y formalidad, luego en la segunda imagen con una orientación horizontal provoca una sensación de calma y estabilidad, mientras que en la tercera imagen con la orientación diagonal da una sensación activa y animada.

Conclusión

Siempre ten en cuenta “cómo quieres que tu público objetivo se sienta”, pero ¿cómo? Bueno, ajustando los estados de ánimo seleccionado la dirección de tu diseño, luego aplicando estos principios y seleccionando el diseño de correcto de contenido y por supuesto la selección de las imágenes.

Cuando se trata de formularios o diseños basados en texto, comprender como los usuarios moverán sus ojos alrededor de un diseño mejorará la usabilidad de su trabajo enormemente.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.