Diseño y desarrollo de UI / UX. Branding y diseño gráfico. Redes Sociales.

Jerarquía visual: organizar el contenido para seguir los patrones naturales del movimiento ocular

Veamos un tema que trata, curiosamente, de cómo vemos los diseños. Una vez que comprenda cómo el ojo humano procesa estos, se encontrará mejor capacitado para organizar sus elementos de manera más efectiva.

El contenido en cualquier diseño de página digital seguirá una jerarquía específica. Los encabezados aparecen sobre el texto del cuerpo. Los menús van en la parte superior, inferior, izquierda o derecha de la pantalla (o cualquier combinación de estos). Los diseñadores intentan organizar el contenido de modo que primero presenten el contenido de mayor prioridad en cualquier página. Luego, entregan el resto del contenido de mayor a menor prioridad.

“Jerarquía” es simplemente una forma más agradable de decir organizado de mayor a menor importancia. También usamos “jerarquía” para mostrar las relaciones (donde existen relaciones) entre bloques de contenido.

Los usuarios definen la jerarquía visual de un sitio web o aplicación. El elemento que primero atrae la atención del ojo está en la parte superior de la jerarquía. Cada elemento que llama la atención está subordinado al anterior.

Principio de Jerarquía

El ojo humano percibe la información visualmente en lugar de bloques de datos. A diferencia de las computadoras, estamos a merced de las tendencias naturales de nuestros ojos. El material de lectura que probablemente encontramos cuando niños pequeños presentaba muchas imágenes y una letra más grande. Si se trataba de comics, libros para colorear o libros de cuentos, podíamos entender lo que estaba sucediendo porque percibíamos las ilustraciones e interpretamos la secuencia de eventos junto con el texto fácil de leer.

La forma en que percibimos la información se ve afectada por varios factores que contribuyen a la forma en que clasificamos la jerarquía del contenido dentro del diseño. Jones (2011) mostró que los factores que afectan la jerarquía incluyen:

  • Tamaño : Cuanto mayor sea el elemento, más atención atraerá, en comparación con los elementos más pequeños. Piensa en un titular de periódico. El periódico usa ese texto de encabezado (fuente grande) para indicar lo que ofrecerá el resto del texto (en letra más pequeña). Tomemos una hipotética “historia de última hora”. Tu ojo debería ir directamente al título. ¿Te das cuenta de cómo domina y te impulsa a descubrir de qué se trata?
  • Color : los colores brillantes son más propensos a llamar la atención que los tonos monótonos.Probablemente todos hemos usado un resaltador para marcar puntos sobresalientes en un folleto fotocopiado. El amarillo es más rico y brillante que el blanco (en el sentido de que el blanco es más apagado), por lo que se destaca. Después de colores brillantes, los más ricos y oscuros llamarán la atención del ojo. Los tintes más claros siguen, porque parecen más lavados y distantes. En la parte inferior de la jerarquía de colores están los colores de escala de grises o atenuados. Piensa en un día nublado e intentas encontrar cuatro amigos. Uno lleva un chaleco de alta visibilidad: se destacará primero; el que está en una profunda gabardina de color burdeos se destacará a continuación.Alguien lleva un abrigo largo de color crema; ella será más difícil de detectar. Te encuentras y comienzas a hablar preguntando dónde está Jim. Desafortunadamente, Jim lleva una sudadera con capucha gris ahumado y pantalones deportivos a juego. Sin embargo, ya los ha visto a todos.
  • Contraste : colores dramáticamente contrastantes captarán el ojo más que colores ligeramente contrastantes. El contraste lo ayuda a mostrar qué es más importante en su diseño. Todo es relativo.Imagine que desea hacer un diseño basado en el plan de un arquitecto para bloques de apartamentos de gran altura. Desea mostrar los edificios ligeros, ventilados y respetuosos del medio ambiente sobre la superficie, pero también debe mostrar los cimientos fuertes y profundos y el aparcamiento subterráneo a continuación. Al dividir su diseño de esta manera, atraerá la atención a las características de vida alegre de los apartamentos del lado del bosque. Esto juega contra la sección inferior, el pie de página, donde se muestra la utilidad y el lado de seguridad de las estructuras. Una pequeña jerarquía ayuda mucho al usuario.
  • Alineación : la alineación puede crear orden entre elementos de diseño. Por ejemplo, colocar contenido y luego una columna en la barra lateral crea una prioridad para el lector. Esperamos que la información importante (como los botones de inicio de sesión) esté en la esquina superior derecha de la página. También vemos esto en el trabajo en las revistas. Si estás cerca de uno, ¿por qué no pasas? busque una cita de extracción. Eso es parte de, digamos, una entrevista, donde el escritor quiere resaltar lo que dijo el sujeto. Con su fuente más grande y su ruptura con la alineación del otro texto, crea una jerarquía que atrae nuestra atención primero.
  • Repetición : la repetición de estilos puede darle al espectador la sensación de que el contenido está relacionado. Por ejemplo, hemos presentado la mayor parte del texto en este documento de manera similar. Si rompimos ese estilo, por ejemplo, al usar texto en rojo, podría llamar rápidamente la atención del entorno familiar. Funcionó, ¿no? ¿Qué pasa si lo hicimos de nuevo? Otro buen ejemplo son los hipervínculos. Cuando visita una página que tiene muchas palabras azules subrayadas, sabe de inmediato que puede hacer clic en muchas otras páginas.
  • Proximidad : la cercanía que tengamos entre sí los elementos de diseño les indica a nuestros usuarios la probabilidad de que se relacionen. En nuestra lista, hemos separado los elementos con una sola fila de espacios en blanco. No separamos encabezados en esta lección del primer párrafo de información. Esta proximidad muestra que los elementos de la lista están separados (aunque no tanto como para no estar relacionados entre sí), pero los encabezados están relacionados con el contenido que sigue.
  • Espacio en blanco : puede usar el espacio alrededor del contenido (puede ser de cualquier color, no solo blanco) para llamar la atención sobre ciertos contenidos. ¡Imagina cuánto trabajo tendrías sin eso! Hace dos trabajos: hace que la información sea más fácil de digerir para el ojo, y permite que el ojo se centre en cada área de información (párrafos en este caso).
  • Textura y estilo : el uso de texturas y estilos también puede ayudar a priorizar el contenido. Al igual que las fuentes, pueden establecer el tono del diseño. Imagina un par de proyectos. Dos agentes de viajes quieren que una página de destino muestre sus ofertas de paquete turístico. Uno es de temática playera, uno de temática lacustre. Para el complejo temático de playa, presentamos una vista de primer plano de fondo de la clara agua que cubre la hermosa arena blanca. El efecto fue agradable. Sin embargo, cuando tratamos de repetir eso con el lago, descubrimos que el agua cristalina nos proporcionaba piedras y guijarros grandes y oscuros. Esa textura terminó siendo demasiado molesta porque tenía mucha más textura que la arena lisa.

“Los llamativos diseños necesitan psicología”

Los informes de Copenhague confirman que más diseñadores, especialmente diseñadores web, están apreciando la necesidad de involucrar a los usuarios de forma más directa. Llegar a sus días escolares de arte mientras trabajaba un poco de psicología en la mezcla parece ser el truco.

Patrones de jerarquía

Hay patrones comunes para la jerarquía tanto en la página impresa como en la página digital. Estos patrones se basan en los movimientos que nuestros ojos tienden a hacer cuando se les presenta una página nueva. El inglés, por ejemplo, se lee de izquierda a derecha. Los lectores de inglés tienen un patrón de escaneo establecido cuando se enfrentan a una página de texto. Los lectores árabes tienen un patrón diferente. ¿Por qué? Es porque el árabe se lee de derecha a izquierda.

Es importante comprender cómo procesa la audiencia la información antes de adoptar un patrón jerárquico. Como esta lección es en inglés, hemos incluido dos patrones comunes de izquierda a derecha aquí:

Patrón Z

En los sitios web con un bajo nivel de contenido de texto (por ejemplo, sitios web que actúan como pequeños anuncios publicitarios para un negocio o un producto en lugar de entregar volúmenes de información), el patrón Z del escaneo ocular es común. El usuario ve la página “texto ligero” y escanea desde la parte superior izquierda a la parte superior derecha, luego mira hacia abajo a través del contenido (siguiendo una diagonal) hacia la parte inferior izquierda, antes de pasar a la parte inferior derecha.Puede utilizar este patrón asegurándose de incluir la información más importante a lo largo del patrón Z que sigue este movimiento ocular. Tendrás cuatro puntos unidos por tres líneas en forma de Z.

Patrón F

Los diseñadores generalmente aplican el patrón F en los sitios web que incluyen contenido de texto pesado y / o contenido de video .

Con el patrón F, los usuarios comienzan escaneando de izquierda a derecha en la parte superior, pero luego exploran el lado izquierdo de la página en busca de pistas visuales sobre la información que buscan. Cuando encuentran esa pista, escanean de izquierda a derecha. Repiten este proceso hasta que llegan al final de la página.

Este patrón de escaneo a menudo produce un mapa de calor que se parece a la letra “F”, como se muestra en la imagen en la parte superior de este artículo.

Es perfectamente posible utilizar páginas de patrones Z y F en el mismo sitio web. Por ejemplo, puede tener una página de inicio muy limpia que utiliza el patrón Z; sin embargo, cuando el usuario profundiza en el sitio, puede presentar muchos más datos y utilizar un patrón F en su lugar.

The Take Away

Las jerarquías nos dan orden para dar sentido a un diseño con facilidad. Queremos priorizar encabezados y menús de acuerdo a cómo sabemos lo que nuestros usuarios quieren y lo que queremos que hagan.Procesamos la información visualmente, percibiendo los elementos en el orden en que el diseñador los ha enfatizado de acuerdo con:

  • Tamaño: los elementos más grandes dominarán y captarán los ojos primero.
  • Color: los colores brillantes captan los ojos por delante de los apagados y monótonos.
  • Contraste: las diferencias rígidas entre los elementos atraen la mirada a la más brillante.
  • Alineación: los usuarios esperan encontrar ciertos elementos en el mismo lugar.
  • Repetición: una calidad repetida (por ejemplo, partes de texto coloreadas) llama la atención del usuario.
  • Proximidad: poner los elementos relacionados (por ejemplo, encabezado con texto asociado) muy juntos significa que están relacionados.
  • Espacios en blanco: incluir espacios en blanco alrededor de los elementos los separa como grupos separados de información.
  • Textura y estilo: el uso de distintas texturas / estilos (por ejemplo, botones gruesos estilo militar) llama la atención al configurar el tema.

En el mundo occidental, leemos diseños de acuerdo con dos patrones jerárquicos comunes:

El patrón Z : en diseños sin mucho texto, nuestro ojo comienza a escanear desde la parte superior izquierda a la parte superior derecha, luego en diagonal hacia abajo a la parte inferior izquierda, deteniéndose en la parte inferior derecha.

El patrón F : en diseños con más texto, escaneamos por la parte superior, de izquierda a derecha, y luego por la izquierda, en busca de pistas sobre lo que queremos saber. Al encontrar uno, exploraremos hacia la derecha.

Usted tiene el ojo de su usuario para garantizar que puede incluir estos factores para hacer diseños más efectivos. Mantenga todo esto en mente mientras planea. Su mejor esfuerzo podría implicar el uso de todos, incluida una fusión de los patrones Z y F. Recuerde que está diseñando para sus usuarios. ¿Qué están usando y cómo pueden querer verlo en línea?

 

 

Fuente: https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns

próximo Publicación

Atrás Publicación

Dejar una contestacion

© 2018 La Vaca en la Luna

Tema de Anders Norén