Jerarquía visual diseño ux

¿Alguna vez te has encontrado con una página web tan cargada de elementos de diseño que no tenías ni idea de por dónde empezar a mirar? Si te cuesta centrarte en una pantalla, es probable que el diseño carezca de una jerarquía visual clara.

Versión móvil de Williams-Sonoma.com: ¿Por dónde empezamos a buscar? Aparte del bloque granate del Cyber Monday, los elementos de esta página son todos relativamente iguales en tamaño y color y carecen de espacio para respirar. Como la mayor parte del texto está en mayúsculas, muy poco destaca. Pocos usuarios estarán dispuestos a pasar tiempo analizando este desorden visual.

Definición:    La jerarquía visual de una presentación en 2D (página web, gráfico, impresión, etc.) se refiere a la organización de los elementos de diseño en la página, de manera que el ojo es guiado para consumir cada elemento de diseño en el orden de importancia previsto.

Un buen diseño visual utiliza el color o el contraste (o ambos) para crear una jerarquía visual en la página. La aplicación del color a un diseño hace que algunos elementos parezcan avanzar y otros retroceder y, por tanto, determina lo que capta nuestra atención y la importancia que asignamos a los distintos elementos del diseño.

Principios del diseño gráfico

La jerarquía visual, según la psicología de la Gestalt, es un patrón en el campo visual en el que algunos elementos tienden a “destacar”, o a atraer la atención, con más fuerza que otros elementos, lo que sugiere una jerarquía de importancia[1]. Aunque puede darse de forma natural en cualquier campo visual, el término se utiliza con más frecuencia en el diseño (especialmente en el diseño gráfico y la cartografía), donde los elementos se diseñan intencionadamente para que unos parezcan más importantes que otros. Este orden se crea mediante el contraste visual entre las formas en un campo de percepción. La mente humana reconoce primero los objetos con mayor contraste respecto a su entorno.

Existen algunas pruebas científicas de la jerarquía visual mediante el seguimiento ocular. Por ejemplo, un estudio descubrió que cuando las personas están de acuerdo en que un diseño gráfico es bueno, muestran más movimientos oculares similares; medidos por la distancia de Fréchet[2].

El concepto de jerarquía visual se basa en la teoría psicológica de la Gestalt, una teoría alemana de principios del siglo XX que propone que el cerebro humano tiene tendencias organizativas innatas que “estructuran los elementos, formas o figuras individuales en un todo coherente y organizado”, especialmente cuando se procesa la información visual[3] La palabra alemana Gestalt se traduce en “forma”, “patrón” o “figura” en inglés.[4] Cuando un elemento de un campo visual se desconecta del “todo” creado por la organización perceptiva del cerebro, “destaca” para el espectador. Las formas que más se desconectan de su entorno son las que más destacan. Esto se suele encapsular como el efecto Von Restorff, que afirma que el aislamiento atrae la atención.

11 principios de diseño de la jerarquía visual

La jerarquía visual es importante en el diseño porque define la importancia y la secuencia de los elementos dentro de una composición. Influye en el orden en que el público ve el contenido. El orden puede influir significativamente en la comprensión, el impacto y el valor.

Naturalmente, hay elementos en una composición que son más importantes que otros o que contextualizan otros elementos. Puede utilizar varios principios de jerarquía visual para atraer la atención hacia esos elementos importantes en primer lugar.

Es fácil caer en la ilusión de que todo es importante (es decir, hacer que mi logotipo, mi titular y mi llamada a la acción sean MÁS GRANDES) pero, cuando no se tiene una jerarquía visual, suelen producirse los dos escenarios siguientes

El espectador ve todo al mismo nivel de importancia. Pasan por alto las “partes” porque el “todo” no les informa de por dónde empezar o cómo desplazarse, lo que hace que se pierdan por completo tu objetivo.

Cuanto más grande es un elemento, más atención atrae y, a su vez, indica al lector que ese elemento es importante. Por eso, los titulares o las llamadas a la acción que quieres que se lean primero deben ser el elemento más grande dentro del diseño. El cuerpo del texto y el contenido de apoyo son, por tanto, los siguientes en la lista y deberían ser de menor escala.

Diseño gráfico minimalista

La manipulación de la jerarquía en el diseño gráfico es una forma excelente de mostrar cómo interactúan los elementos de tu pieza, llamando la atención sobre los elementos más importantes y minimizando la atención sobre otros elementos menos críticos del diseño. Al comprender la jerarquía y su relación con la pieza, se pueden crear diseños más eficaces y con más probabilidades de atraer al público.

La jerarquía en el diseño gráfico utiliza varios principios clave, como el tamaño, el color, el contraste, la alineación, la repetición y el brillo, para enfatizar ciertas características del diseño. Controla esos factores para mostrar la importancia dentro del diseño en su conjunto.

Al comprender la jerarquía, puedes entender mejor cómo llamar la atención sobre elementos específicos de tu pieza. Si, por ejemplo, haces demasiado hincapié en un elemento de fondo, puedes desviar la atención de la parte de la pieza que más quieres que capten tus espectadores. Por otro lado, si utiliza la jerarquía adecuadamente, puede mostrar a los usuarios exactamente a qué quiere que presten atención, manteniendo sus ojos en el elemento más crítico de la pieza.