¿Alguna vez has entrado en una página web, has echado un vistazo y has dicho: «Hm, eso va a ser un no» y te has ido? Generalmente, se debe a tres razones: la página parece obsoleta, está llena de gente o es difícil de navegar.
Esta es la razón por la cual la jerarquía visual es tan importante en el diseño web, ya que una mala página web puede evitar que los visitantes se interesen en tu marca.
A continuación, te mostramos una guía fácil para conocer los principios de diseño clave de la jerarquía visual para atraer a tu audiencia, mantenerla comprometida y generar conversiones.
¿Qué es la jerarquía visual?
La jerarquía visual es el método de organizar los elementos gráficos por orden de importancia. Al basarte en principios relacionados con el tamaño, el color, el contraste, el blanco, etc., puedes influir en la forma en que los usuarios interactúan con tus diseños, desde tus imágenes hasta tu página web.
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 la arquitectura de la información (es decir, cómo se organiza y muestras la información para facilitar la comprensión y la navegación) y puede tener un gran impacto en la experiencia del usuario (UX).
Cuando pienses en la jerarquía visual, debes hacerte algunas preguntas:
- ¿Sobre qué quiero llamar la atención?
- ¿Qué acciones quiero que realicen los usuarios?
- ¿Hacia dónde va naturalmente el ojo y dónde miran?
Hacer estas preguntas te 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, existe una regla de oro: si todos los elementos parecen importantes, nada parecerá importante.
La jerarquía visual sirve como una forma de clasificar la información que estás consumiendo. Si no hay forma de diferenciar los elementos, se considera una jerarquía deficiente.
Una jerarquía visual pobre:
- Confunde al usuario.
- Hace que no quede claro dónde buscar.
- Muestra un diseño pobre.
En su lugar, crea una estructura visual que facilite la comprensión y guíe al usuario. La jerarquía visual correcta en una página web ayuda a comprender de qué se trata la página.
Conceptos básicos de la jerarquía visual en el diseño web
- Usa la alineación y la composición para crear puntos focales
La alineación y la composición te ayudan a estructurar los elementos de tu página y crear puntos focales para los espectadores. Dos reglas de composición comunes son la regla de los tercios y la regla de las probabilidades.
- Con la regla de los tercios, tu página se divide por dos líneas horizontales y verticales, creando una cuadrícula de nueve cuadrados del mismo tamaño. Los puntos donde las líneas se cruzan son puntos focales donde colocarás los elementos importantes de tu diseño.
- La regla de las probabilidades dice que un número impar de elementos crea más interés y participación de los espectadores porque cada elemento se puede evaluar individualmente en lugar de en agrupaciones de números pares.
- Considera patrones de lectura
Leer de arriba hacia abajo es un estándar global, pero existe una variación cultural en la forma en que las personas leen horizontalmente. El estándar «occidental» para idiomas como el español y el inglés es leer de izquierda a derecha, mientras que los idiomas semíticos e indoarios, como el árabe, el hebreo y el urdu, se leen de derecha a izquierda.
Esta variación trae dos estilos diferentes de lectura/escaneo: patrones F y Z.
- Los visores de patrón Z comienzan en la parte superior izquierda de una página y se mueven hacia la parte superior derecha, luego hacia abajo y hacia atrás hasta la parte inferior izquierda y luego hacia la parte inferior derecha.
- Los visores de patrón F comienzan en la parte superior izquierda y se mueven hacia la parte superior derecha como los visores de patrón Z, pero usan el lado izquierdo de una página como guía y escanean rápidamente hacia la derecha en un movimiento más corto (la línea más corta de una F), luego de vuelta a la izquierda y hacia abajo hasta la parte inferior de la página.
Puedes seguir los patrones de lectura tradicionales y diseñar páginas que coincidan con el procesamiento natural de uno o interrumpir un patrón tradicional y proporcionar un elemento principal de enfoque para que lo utilicen para la navegación. Recordar esto te ayudará a diseñar proyectos que conviertan, especialmente las landing pages.
- Los usuarios notan los elementos más grandes con mayor facilidad
El tamaño es esencial en la jerarquía visual porque los elementos más grandes reciben la mayor atención y se consideran más importantes.
Toma el ejemplo de Netflix. En su página web, lo primero que leerás al mirar la imagen es «Películas, programas de TV y más ilimitados«. Luego, leerás la siguiente línea y luego la siguiente antes de explorar los otros elementos de la página.
«Películas, programas de TV y más ilimitados» se muestra como la parte más esencial del mensaje, lo cual tiene sentido, porque ese es el principal punto de venta de Netflix.
Mientras diseñas tu página web, considera lo que quieres que tu audiencia vea primero y utilízalo para guiar tu estrategia.
- El color y el contraste atraen la atención
Las personas se sienten atraídas por los colores, que evocan emociones y tienen connotaciones culturales y sociales. Solo mira los logotipos por industria y notarás que las marcas de alimentos gravitan hacia los amarillos, y las instituciones financieras tienden al azul.
En el diseño, el color es excelente para llamar la atención sobre elementos específicos. Y los colores contrastantes son excelentes para mostrar una diferencia entre los elementos de tu página o llamar la atención de uno sobre otro. Por ejemplo, usar un verde neón y luego un color blanquecino llamaría la atención sobre los elementos en verde neón.
- El espacio en blanco crea énfasis
El espacio en blanco se refiere al espacio vacío dentro de un diseño.
El espacio en blanco en tu diseño web es clave para llamar la atención y mantener el equilibrio.
Menos es más, ya que llenar el espacio con tantos elementos como sea posible puede confundir y disuadir a los espectadores si no pueden darse cuenta de lo que están viendo.
Apple también es conocida por su uso de espacios en blanco. La marca ofrece una interfaz de usuario simple, enfatizando elementos en la página. El uso de espacios en blanco por parte de Apple también refleja la identidad de la marca.
- La proximidad y la repetición crean unidad
Poner elementos juntos les dice a los usuarios que los elementos están relacionados.
Si no estás seguro de cómo agrupar ciertos elementos, puedes usar estrategias de investigación de UX, como la clasificación de tarjetas, para agrupar elementos según las expectativas de tu audiencia.
- La jerarquía de fuentes te ayuda a organizar el texto
Las fuentes agregan un elemento visual importante a tu página web y te ayudan a organizar y clasificar el texto (a veces por nivel de importancia).
Una jerarquía de fuentes tiene tres partes:
- Principal: tu texto principal es el más grande de la página, atrae la atención inicial y contiene las palabras de moda más importantes para atraer a las personas.
- Secundaria: la fuente secundaria son tus subtítulos o descripciones secundarias. No se destaca tanto como el texto principal, pero aun así da valor y ayuda a que la mirada viaje por la página.
- Terciaria: el texto terciario es el texto de tamaño más pequeño en tu página, pero aún se puede leer. Puede brindar más detalles sobre tu página y ser breve (como un pie de foto) o largo (como un párrafo completo o una descripción).
Más información
- Psicología del logotipo: cómo elegir las formas, los colores y las fuentes correctas
- Como utilizar correctamente la psicología publicitaria para mejorar tu campaña: Los Colores
- Tendencias de diseño gráfico
- Cómo aplicar las mejores estrategias en diseño UX para mejorar las ventas
- 4 elementos clave de diseño de la marca corporativa
