Dirección visual en diseño web

Uno de los grandes secretos del diseño es aprender a guiar la dirección visual de los espectadores; Este principio a menudo es pasado por alto incluso por los diseñadores más experimentados, por lo que hoy vamos a analizar con más detalle cómo funciona. La dirección visual es controlar el movimiento ocular del usuario; Esto se puede lograr seleccionando cuidadosamente sus imágenes y mediante elementos de diseño alineados y bien ubicados..

Se ha establecido en gran medida que el movimiento del ojo predeterminado a lo largo de la página (en un diseño LTR - De izquierda a derecha) es desde la parte superior izquierda hacia la parte inferior derecha, como muestra la imagen:

Sin embargo; esto no puede estar más lejos de la verdad, al organizar los elementos de la composición de una manera determinada, un diseñador puede controlar y forzar el movimiento de los ojos del espectador en y alrededor del diseño del diseño. Por ejemplo, el ojo viajará a lo largo de una ruta real, como una línea sólida o punteada, o se moverá a lo largo de rutas más sutiles, como de elementos grandes a elementos pequeños, de elementos oscuros a elementos más claros, de color a no color, de formas inusuales a las formas usuales, etc. La graduación del tamaño, y las formas repetidas y el tamaño de los elementos relacionados dirigen sutilmente el ojo también.

1. Controlando Direcciones con Imágenes

Las imágenes pueden controlar fácilmente la forma en que sus clientes ven su diseño, a continuación se muestran algunos ejemplos explícitos de imágenes direccionales que pueden usarse como parte de su diseño o en el contenido para guiar a los visitantes por la página:

Por supuesto, es bastante obvio a qué dirección apuntan estas imágenes; sin embargo, muchas imágenes pueden no ser tan claras, eche un vistazo a estos otros ejemplos:

2. Llevando el ojo

Este es uno de los principales errores en los que se encuentran los diseñadores y editores de contenido. Como regla general, nunca haga que sus imágenes estén orientadas hacia afuera desde su página, las imágenes (especialmente las caras y los ojos) deben mirar hacia el centro de su diseño..

Eche un vistazo a estos ejemplos de los sitios web de CNN y BBC:

En el ejemplo de la BBC, las 2 imágenes de la parte superior izquierda están mirando hacia otro lado desde el centro de la página, esto lleva a "no ver" información importante a lo largo de la ruta predeterminada, como lo ilustra la imagen:

  1. Comienzas en la parte superior izquierda como la ubicación predeterminada habitual
  2. Moviéndose a lo largo del camino predeterminado, encontrará la primera imagen mirando hacia afuera, para que su visión se mueva automáticamente fuera de la página.
  3. Tus ojos empiezan a mirar hacia el centro de la página.
  4. Te encuentras con otra imagen mirando hacia afuera, lo que hace que tu visión se mueva fuera de la página.
  5. Por fin, sus ojos comienzan a moverse hacia el centro de la página, sin embargo, hay un gran "punto ciego" creado por la ubicación de la imagen y la dirección marcada por el "?"

Ahora compare la siguiente versión "fija" de la página de inicio de la BBC con la original anterior:

Al observar esta versión, notará que su ojo no se mueve fuera de la página, las caras de las personas que miran hacia adentro lo ayudan a mirar en la misma dirección hacia el centro de la página..

3. Formularios

Eche un vistazo a este ejemplo que muestra 2 formas de alinear las etiquetas con los campos de su formulario, lo que puede afectar en gran medida la facilidad de los usuarios para completar ese formulario:

A la izquierda tenemos etiquetas alineadas en la parte superior que son más rápidas y fáciles de rellenar que las etiquetas alineadas a la izquierda o la derecha (a la derecha). Esto se debe a que las etiquetas alineadas en la parte superior requieren la mitad de los movimientos de los ojos que las etiquetas alineadas a la izquierda o la derecha. Las etiquetas alineadas en la parte superior también permiten a los usuarios bajar el formulario en una dirección visual, en lugar de dos direcciones visuales con etiquetas alineadas a la izquierda y la derecha. Esto hace que rellenar formularios sea más rápido y más fácil..

La colocación no solo controla la forma en que se mueve el ojo, sino que contribuye a hacer que un diseño sea más fácil de usar, incluso si está en un nivel subconsciente.

4. Dirección de diseño

El elemento de dirección puede tener una poderosa influencia en el estado de ánimo de un diseño, pero tomar una decisión de conciencia acerca de la dirección dominante en un diseño puede tener un efecto notable en la atmósfera del trabajo..

A veces la imagen o el diseño dictará la dirección dominante. A veces te permitirá imponerle una dirección..

Las líneas horizontales claras en los diseños de abajo dan una sensación de quietud, estabilidad, tranquilidad y calma..

En el segundo grupo a continuación, la colocación diagonal de los elementos refuerza la sensación de movimiento y acción..

El tercer grupo tiene una dirección vertical dominante que agrega una influencia estática ordenada a lo que podría ser aleatorio, también da una sensación de alerta y formalidad..

El mismo cambio de carácter se puede ver en estas tres fotografías. El tema es el mismo en cada uno, el cambio en el énfasis direccional crea una atmósfera diferente en cada imagen.

El énfasis vertical en la primera imagen da una sensación de formalidad ordenada, el segundo énfasis horizontal se siente tranquilo y estable, mientras que el tercer énfasis diagonal se siente activo y animado.

Conclusión

Siempre tenga en cuenta cómo desea que se sienta su público, establezca el estado de ánimo eligiendo la dirección de su diseño y, a continuación, aplíquelo seleccionando el diseño de contenido correcto y la selección de imágenes.

Cuando se trata de formas o diseños basados ​​en texto, comprender cómo sus visitantes se moverán de vista alrededor de un diseño mejorará en gran medida la facilidad de uso de su trabajo..