Jerarquía visual: Entregando orden a nuestras interfaces

La jerarquía visual, en el diseño de interfaces, es el principio de distribuir los elementos de la pantalla según el orden de su importancia y naturalidad con el fin de hacer el contenido más digerible, menos ambiguo y más directo. Para dejarlo más claro veamos el siguiente ejemplo de un texto:

La hoja de la izquierda corresponde a un texto escrito en prosa sin jerarquía, mientras que la imagen de la derecha corresponde al mismo escrito pero con un orden claro, que nos ayuda a entrar de mejor manera al enunciado y su contenido.

Cuando una composición posee una buena jerarquía visual, basta con un parpadeo de milisegundos para tener una primera imagen del tema central. 

¿Cómo se trabaja?

Para diseñar esta estructura amigable, los diseñadores debemos buscar el balance de la composición usando los recursos de la comunicación y sintaxis visual, siendo estos:

Tamaño

Puede ser muy obvio, pero no está demás recordar que los elementos más grandes siempre -siempre siempre siempre- serán los más importantes y aquellos que queramos que destaquen más frente al resto. 

Color

Crear un buen contraste cromático es una buena manera de guiar la mirada de los usuarios. A menuda podemos ver como aplicaciones resaltan sus llamados a la acción utilizando colores que destacan en comparación a los demás elementos.

Alineación

Para el ojo humano, los elementos que se encuentren alineados comparten características similares. Desalinear elementos es una forma de dar énfasis y remarcar un objeto dentro de un grupo.

Repetición

Mantener una coherencia visual a lo largo de la composición refuerza la idea de que los elementos repetidos mantienen el mismo nivel de importancia y, al ser elementos relativamente iguales, da la sensación de que los contenidos están relacionados.

Proximidad

Distanciar elementos o grupos de ellos, nos permite crear asociación y diferencias. Mientras los elementos estén más cerca, generalmente significa que deben estar relacionadas. Si están más lejos, significa que es posible que no estén relacionados. En resumen, la proximidad crea estas relaciones y aporta organización y jerarquía a la información.

Espacio en blanco

Mantener espacio alrededor de los elementos atrae la atención hacia ellos. La teoría de esto es muy sencilla. Si colocas un punto negro en el medio de una hoja en blanco, la mirada se tornará automáticamente al centro. Si quieres profundizar sobre esto, aquí tienes un artículo sobre el espacio negativo en UX.

Textura

Usar distintas texturas también ayuda a los usuarios a entender diferencias. Esto se debe a que para el ojo humano, los fondos o imágenes con texturas poseen más información visual que aquellos planos, por lo que tienden a llamar la atención.  

Consejos para una jerarquía sólida

Si bien no todos los contenidos y usuarios son iguales en todos los proyectos, existen recomendaciones generales que vale la pena considerar a la hora de jerarquizar una composición.

• Los usuarios reaccionan muy rápido frente a las interfaces. Una buena jerarquía debe dejar en claro qué puede encontrar el usuario en el sitio y qué puede hacer desde ahí. 
• Los ojos de los usuarios siguen caminos de lectura predecibles, que están influenciados culturalmente. Ya sabemos que las personas no leen, si no que escanean las interfaces siguiendo un patrón en forma de “F” o “Z”. Evidencia que podemos -y debemos- usar a favor de nuestros usuarios.
• Los Principios de la Gestalt: Conocer estos principios de la percepción humana nos ayudarán a entender cómo las personas entienden su entorno, lo que nos permite diseñar una mejor estructura visual.

Considerar estos elementos será fundamental para que nuestras interfaces logren su cometido y faciliten los procesos de compresión para los usuarios. Entender a la jerarquía visual como la base del contenido, nos traerá grandes beneficios que no debemos olvidar.