Una guía para no diseñadores sobre jerarquía visual [Best Practices + Examples]

¿Alguna vez hizo clic en un sitio web, echó un vistazo y dijo «Hm, eso va a ser un no» mientras busca el botón de salida?

Para mí, generalmente se debe a tres razones: el sitio parece obsoleto, lleno de gente o difícil de navegar.

Un mal diseño puede evitar que su público objetivo se interese por su marca.

Por eso es importante comprender los principios de diseño clave que lo ayudarán a atraer a su audiencia, mantenerla en la página y generar conversiones.

Aquí hay una guía sencilla sobre un principio de diseño específico: jerarquía visual. Cubriremos todos los elementos que contribuyen a la jerarquía visual y veremos buenos y malos ejemplos.

La jerarquía visual afecta lo que miras y en lo que te enfocas en un diseño, ya sea una imagen, un diseño gráfico o un diseño web. Es un actor clave en ct (es decir, cómo se organiza y muestra la información para una fácil comprensión y navegación) y puede tener un gran impacto en la experiencia del usuario (UX).

Cuando piense en la jerarquía visual, debe hacerse algunas preguntas:

• ¿Sobre qué queremos llamar la atención?
• ¿Qué acciones queremos que realicen nuestros usuarios?
• ¿A dónde va naturalmente el ojo y dónde aterriza?

Hacer estas preguntas le ayudará a utilizar los principios que se describen a continuación para crear una jerarquía visual clara.

¿Qué constituye una mala jerarquía visual?

Cuando se trata de jerarquía visual, hay una regla de oro: si cada elemento parece importante, nada parecerá importante.

La jerarquía visual sirve como una forma de clasificar la información que consume. Si no hay forma de diferenciar entre los elementos, se considera una jerarquía deficiente.

Toma este ejemplo:

A la izquierda, hay mucho está pasando mucho. Los dos elementos principales son del mismo tamaño, hay muchos colores diferentes. Hace que sea difícil saber dónde buscar. Tus ojos se ponen vidriosos sobre todo, creando cierta inquietud y falta de dirección.

A la derecha, su ojo se dirige automáticamente al cuadro azul principal de la izquierda, luego, naturalmente, va a los elementos de la derecha antes de aterrizar en la llamada a la acción naranja (CTA).

Una jerarquía visual deficiente:

• Confunde al usuario.
• Hace que no quede claro dónde buscar.
• Crea un diseño suave.

En su lugar, cree una estructura visual que facilite la comprensión y oriente al usuario.

1. Considere los patrones de lectura.

Al diseñar, desea tener en cuenta los patrones de ojos naturales de su público objetivo.

En todas las culturas, leemos de arriba a abajo. Sin embargo, existe alguna variación en la forma en que leemos horizontalmente. Las culturas occidentales tienden a leer de izquierda a derecha, mientras que algunos idiomas semíticos e indo-arios, como el árabe, el hebreo y el urdu se leen de derecha a izquierda.

Teniendo esto en cuenta, afecta la forma en que escaneamos y entendemos los diseños. Por ejemplo, los usuarios occidentales suelen seguir un patrón de lectura F o Z.

Conocer esta información te ayudará a diseñar proyectos que conviertan, particularmente en páginas de destino.

2. Los usuarios notan los elementos más grandes con mayor facilidad.

El tamaño juega un papel importante en la jerarquía visual. Es una de las principales formas de clasificar elementos en un diseño.

Tome este ejemplo de Netflix.

Fuente de imagen

Lo primero que leerá al mirar esta imagen es «Películas, programas de TV y más ilimitados.«

Luego leerá la siguiente línea y luego la siguiente antes de explorar los otros elementos de la página.

El tamaño significa importancia. Cuanto más grande es un elemento, más atención atrae y es más probable que lo mire primero.

Al diseñar su página web, considere lo que desea que su audiencia mire primero y utilícelo para guiar su estrategia.

3. El color y el contraste llaman la atención.

El segundo principio a tener en cuenta es el color.

Sabemos que el color puede evocar emoción y puede tener ciertas connotaciones culturales y sociales. Solo mire los logotipos por industria y notará una tendencia. Las marcas de alimentos tienden a tener rojos y amarillos, mientras que las instituciones financieras tienden a ser azules.

En diseño, el color es excelente para llamar la atención.

En el ejemplo anterior, verás que los elementos que más se destacan están en naranja. Solo después de mirarlos escaneará los otros elementos de la página.

En un sitio web, puede usar esto para llamar la atención sobre sus llamadas a la acción.

En el siguiente ejemplo, el CTA que más se destaca está en el medio. Es probable que la marca quiera que los usuarios elijan esta opción. Las otras llamadas a la acción aún son visibles pero silenciadas en comparación con la naranja.

Para crear el mayor impacto visual con el color, utilícelo con moderación. Eso hará que los elementos se destaquen más, como se ve en el ejemplo anterior.

4. El espacio en blanco crea énfasis.

El espacio en blanco se refiere al espacio vacío dentro de un diseño.

Fuente de imagen

A veces, existe el deseo de llenar el espacio con tantos elementos como sea posible. Sin embargo, esto se remonta al concepto de importancia: si todos parecen igualmente importantes, ninguno se percibe como importante.

Es por eso que agregar espacios en blanco a su diseño web es clave para atraer a sus visitantes.

Apple también es conocida por su uso de espacios en blanco.

Fuente de imagen

La marca ofrece una interfaz de usuario simple, que crea más énfasis en los elementos de la página. El uso que hace Apple del espacio en blanco también refleja la identidad de una marca.

5. La proximidad y la repetición crean unidad.

Cuando junta varios elementos, le dice al usuario que los conceptos están relacionados.

Fuente de imagen

Este diseño ofrece muchos ejemplos de proximidad.

Toma los elementos de «Domina los conceptos básicos». Al tener todas estas casillas agrupadas estrechamente, el visitante puede comprender que pertenecen a la misma categoría.

Lo mismo ocurre con los iconos de «Síguenos». Si los íconos estuvieran todos distribuidos al azar en la página, sería difícil para los usuarios entender su propósito.

Si no está seguro de cómo agrupar ciertos elementos, puede emplear ciertas estrategias de investigación de UX, como la clasificación de tarjetas, para agrupar elementos según las expectativas de su audiencia.

Ejemplos de buena jerarquía visual

1. Visme.co

Fuente de imagen

Visme.co tiene una ventana emergente llamativa que anima a los usuarios a suscribirse a su boletín.

La marca utiliza con éxito el espacio en blanco, el color, el tamaño y el contraste para resaltar los elementos clave. También notará que los elementos están diseñados siguiendo el patrón Z, por lo que es más probable que los usuarios se conviertan.

2. Estudio 8AD

Al diseñar su sitio web, esta marca aprovecha el espacio en blanco para centrar la atención de los usuarios en tres elementos clave: la imagen y las dos llamadas a la acción ubicadas en la parte inferior izquierda.

Fuente de imagen

3. Predominantemente negros

Esta marca ofrece un gran ejemplo de proximidad para crear jerarquía visual.

Fuente de imagen

Al organizar todos los productos bajo el título principal y dejar poco espacio entre ellos, los visitantes comprenden rápidamente que estos productos pertenecen a la misma categoría.

La jerarquía visual se trata de clasificar sus elementos por orden de importancia. Una vez que delimite en qué desea enfocarse y considere las necesidades de su audiencia, puede crear diseños que produzcan el impacto deseado.