Jerarquía visual en UX: definición – Usabilidad web y seo

Jerarquía visual en UX: definición

Vistas: 161
0 0
Tiempo de lectura:7 Minutos, 43 Segundos


¿Alguna vez te has encontrado con una página web que estaba tan cargada con varios elementos de diseño que ni siquiera sabías por dónde empezar? Si le resulta difícil concentrarse en la pantalla, es probable que el diseño carezca de una jerarquía visual clara.

La jerarquía visual de la página controla la entrega de información desde el sistema al usuario final; permite a los usuarios saber dónde centrar su atención.

Versión móvil de Williams-Sonoma.com: ¿Por dónde empezar a buscar? Además de borgoña Lunes cibernético bloque, todos los elementos de esa página son relativamente iguales en tamaño y color, y no tienen suficiente espacio para respirar. Dado que la mayor parte del texto está escrito en mayúsculas, se destaca muy poco texto. Pocos usuarios querrán dedicar tiempo a analizar este desorden visual.

Definición: EN jerarquía visual La visualización en 2D (página web, gráficos, impresión, etc.) se refiere a la organización de elementos de diseño en una página para que el ojo dirija la atención a cada elemento de diseño en orden de importancia percibida.

La jerarquía visual se puede crear usando:

  1. Color y contraste
  2. Escala
  3. Agrupación (proximidad y regiones comunes)

1. Color y contraste

Un buen diseño visual usa color o contraste (o ambos) para crear una jerarquía visual en una página. La aplicación de color a un diseño hace que algunos elementos avancen y otros retrocedan, y así determina qué nos llama la atención y la importancia que damos a los diferentes elementos del diseño.

No es el color real del elemento lo que crea la jerarquía, sino el contraste de valor y saturación entre el elemento y el contexto en el que aparece (incluido el fondo y otros elementos cercanos).

Los diseñadores también suelen utilizar contraste de fuente para denotar jerarquía, indicando importancia mediante un manejo especial de fuentes. Los tipos de letra en negrita, como el negrita, se destacan frente a los tipos de letra livianos o regulares. Las palabras que tienen un estilo diferente al del texto circundante (como cursiva o subrayado) también llaman la atención.

MoMA.org utiliza el color para transmitir la jerarquía: los enlaces verdes en la esquina superior derecha se destacan sobre el fondo negro debajo del logotipo
TheNounProject.com: El campo de búsqueda primero llama la atención no solo por su gran tamaño, sino también por su color blanco, que contrasta con el fondo negro. El campo solicita al usuario que inicie una búsqueda Luego, la mirada se dirige a los iconos blancos debajo del cuadro de búsqueda para mostrar posibles resultados.

Recomendaciones para usar color y contraste:

  • Considere la saturación de color. Los colores brillantes se destacan de forma natural, así que utilícelos para artículos importantes; Se pueden usar colores menos saturados para artículos menos importantes. Deje colores cálidos y brillantes como el rojo para advertencias o errores.
  • No uses demasiados colores. Si bien algunos esquemas de color complejos son hermosos, pueden parecer abrumadores en una página web. Cuando se utilizan demasiados colores del mismo valor o saturación, la percepción de las personas de la jerarquía entre elementos a menudo se deteriora. En diseños comunes y sencillos, limite el uso del color a dos colores primarios y dos secundarios.
  • No uses demasiadas opciones de contraste. Para diseños complejos, no use más de tres opciones de contraste. Si todo se opone, nada destaca. Los diseños eficaces a menudo utilizan diferentes métodos para manejar el encabezado, el subtítulo y el cuerpo del texto.

2. Escala

El principio de escala es clave para crear una jerarquía visual en el diseño. Los elementos más grandes destacan más y captan la atención de los usuarios, por lo que el tamaño se puede utilizar como un marcador de importancia.

Leche de leche de Jersey: El procesamiento tipográfico de este cartón de leche crea una jerarquía visual impresionante a través de variaciones de escala. Lo más importante del producto llama la atención de inmediato: la leche y su contenido de grasa.
Hipcamp.com: La jerarquía visual se transmite a través del tamaño de fuente (y contraste). Primero se llama la atención Encuéntrate afuera el texto debido a su gran tamaño en negrita. Este texto le brinda una descripción general de lo que puede hacer en este sitio web.

Pautas de escala:

  • No use más de 3 tamaños – pequeño, mediano y grande. Los tres tamaños brindan una amplia variedad para trabajar (piense en el tamaño de fuente del título, subtítulo y texto del cuerpo) mientras mantiene una relación jerárquica clara y clara. En el diseño web, los tamaños pueden variar de 14 a 16 píxeles para el texto del cuerpo, de 18 a 22 píxeles para un subtítulo y hasta 32 píxeles para un título.
  • Haz grande el elemento más importante. Enfatice el aspecto más importante de su diseño haciéndolo el más grande. Asimismo, reduzca los elementos menos importantes. Limite el número de elementos grandes a un máximo de 2 para que destaquen y fortalezcan la jerarquía.

3. Agrupación: proximidad y regiones comunes.

Las agrupaciones implícitas y explícitas nos ayudan a ver la base o estructura de una página y nos permiten dirigir nuestra atención a áreas de la pantalla que pueden ser relevantes para nuestro propósito. Sin agrupaciones, sería mucho más difícil averiguar dónde están las áreas estándar como navegación, contenido, anuncios y, por lo tanto, sería más difícil averiguar en qué enfocarse y qué áreas pueden ignorarse de manera segura. Por ejemplo, una vez que los usuarios identifican a un grupo diestro, pueden ignorarlo debido a su asociación con la publicidad, un caso de ceguera de los banners.

La agrupación generalmente se transmite implícitamente a través de la proximidad y el uso de espacios en blanco, o explícitamente a través del anidamiento (área común).

Spotify en iPhone: en esta pantalla, el ojo ve 3 grupos a la vez. El aumento deliberado de la distancia entre grupos hace que cada conjunto sea distinto e individual. Igualmente importante es la reducción intencional del espacio en blanco entre los titulares y el contenido relacionado. Este espaciado reducido crea una relación jerárquica entre el título y el contenido.
Campos del formulario de pago de Shopify: El principio de intimidad se manifiesta en buenas diseño de formularios El espacio mínimo entre los encabezados de sección y los campos de formulario correspondientes deja en claro que pertenecen juntos. También hay un mayor espacio entre cada bloque de campos, lo que ayuda aún más al ojo a ver este patrón espacial jerárquico. Note el borde alrededor de los dos chequeo rápido botones (ejemplo de un principio de área común) que los separa del formulario de pago a continuación.

Mejores prácticas para grupos:

  • Déjalo respirar. Un elemento alrededor del cual hay más espacio se percibirá como un solo grupo y, por lo tanto, recibirá más atención. (Si hay muchos elementos en un grupo, es probable que la atención se divida entre ellos). Considere resaltar el aspecto más importante de su diseño dándole más espacio.
  • Considere usar un recipiente. Si cambiar el espacio en blanco por sí solo no es suficiente para crear una jerarquía, agregue elementos adicionales como bordes o fondos. Estos elementos adicionales pueden crear desorden visual, así que úselos con moderación.

Prueba de estrabismo

En la escuela de diseño se nos enseña a entrecerrar los ojos o difuminar ligeramente el diseño para tener una idea de las agrupaciones y jerarquías transmitidas. Esta técnica enfatiza lo que se enfatiza en el diseño y revela la jerarquía subyacente.

En el ejemplo de Spotify anterior, difuminar el diseño con un radio de 5 o 10 px muestra que las agrupaciones funcionan según lo previsto y que Últimamente Jugó La sección se destaca más, incluso si no puedes leer el texto. El desenfoque de 20 píxeles revela una jerarquía no deseada, siendo uno de los elementos renderizados recientemente el elemento más destacado en la página debido a su color vibrante; el efecto también se nota en la captura de pantalla original.

Spotify: original (arriba a la izquierda) y borroso con radios de 5 (arriba a la derecha), 10 (abajo a la izquierda) y 20 píxeles (abajo a la derecha)

Este ejemplo muestra que no es suficiente diseñar una plantilla, también debe considerar el contenido que la llenará. Por ejemplo, una fotografía de noticias con colores muy vibrantes puede dominar la página de inicio de noticias, incluso si está destinada a ilustrar una historia secundaria. Los editores deben considerar las consecuencias de UX de sus elecciones de contenido.

Conclusión

Antes de comenzar su diseño, retroceda un paso de las imágenes y defina la jerarquía de contenido y los puntos clave que el usuario debe eliminar. Una vez que haya establecido esta jerarquía, concéntrese en aplicar variaciones de color y contraste, escala o agrupación. Después de diseñar teniendo en cuenta la jerarquía visual, retroceda un paso y compruebe si el diseño se lee como lo deseaba probando con los usuarios objetivo.

Cuando la jerarquía visual de una página refleja con precisión la importancia de varios elementos de diseño, los usuarios pueden entender esto fácilmente y pueden completar con éxito las tareas, ganando así confianza en el diseño y la marca.

Recomendaciones

Davis, M. y Hunt, J. (2017). Diseño de comunicación visual. Artes visuales de Bloomsbury.

Lupton, E. (2008). Diseño gráfico: nuevas bases. Nueva York: Princeton Architectural Press.



Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post 3 Principios del diseño inclusivo y por qué es importante
Next post Historias web podrían aparecer en los resultados de búsqueda en otros países

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta