La jerarquía visual es el principio de diseño que consiste en dotar de un orden a los elementos de una interfaz según su importancia, para facilitar la interacción a la persona usuaria.
Una jerarquía visual correcta permite facilitar la comprensión de la información y guiar la interacción hacia las acciones que se buscan incentivar.
A menudo trabajamos con interfaces saturadas de elementos e información. No aplicar una jerarquía visual que ordene y priorice los componentes de la interfaz creará confusión y frustración e incrementará la carga cognitiva de la persona usuaria.
Con una jerarquía clara, el usuario puede, de un vistazo, identificar los elementos principales de la interfaz y hacer una lectura en diagonal que le permita, casi de manera intuitiva, operar con la interfaz para completar sus objetivos.
La jerarquía visual no es, por tanto, una consideración estética, sino de usabilidad y de mejora de experiencia de usuario.
Elementos para construir una jerarquía visual
Hay una serie de características y elementos con los que podemos jugar para construir jerarquía visual y ordenar la importancia del contenido.
Tamaño
La atención de los usuarios va primero a los elementos más grandes, tanto textuales como visuales. Usar el tamaño para jerarquizar elementos nos permite crear un camino para el usuario a la hora de procesar el contenido, pasando de los elementos más grandes, como encabezados, a los más pequeños.
Color
Los colores más luminosos y vivos atraen más la atención de los usuarios. El tono, la saturación y la luminosidad son tres características del color que podemos utilizar para priorizar unos elementos sobre otros. Con el color también podemos destacar los elementos interactivos y ofrecer información al usuario sobre el estado de la interfaz. Por ejemplo, oscureciendo elementos inactivos.
Alineamiento
Los elementos que están desalineados con el resto destacan más. Alineando unos elementos con otros creamos un orden en la interfaz. Es importante para diseñar interfaces limpias y coherentes, facilitando su comprensión. La forma de procesar la información de nuestro cerebro, a través del reconocimiento de patrones, favorece la comprensión a través del orden.
Pero también podemos romper esta norma de forma estratégica en ciertos momentos, sacando elementos de la alineación con el resto, para llamar la atención del usuario sobre ellos.
Repetición
Los elementos que están diseñados de forma similar se perciben como relacionados o al mismo nivel jerárquico. Por ejemplo, los encabezados del mismo nivel siempre tendrán el mismo tamaño, color y estilo, lo que permite al usuario identificarlos fácilmente. Esta consistencia favorece la comprensión y la navegación por la interfaz.
Proximidad
La atención del usuario tiende a ir de un elemento al siguiente más próximo. Por eso, para crear un orden de lectura, tendremos que agrupar los elementos según el orden de atención que queremos conseguir.
Relacionando elementos a través de la proximidad de unos con otros podemos organizar y crear una jerarquía en la información de la interfaz.
Espacio vacío
El espacio vacío alrededor de un elemento hace que ese elemento llame más la atención del usuario. También permite que la interfaz respire mejor, sin abrumar al usuario.
Aislar elementos del resto de la interfaz ayuda a situarlos jerárquicamente por encima del resto de elementos. También ayuda al diseñador a crear una estructura en la que el usuario puede navegar para pasar de un elemento a otro.
Textura
Las texturas más elaboradas o complejas destacan sobre las más sencillas. Es un recurso que hay que utilizar en dosis pequeñas, por el riesgo de saturar o distraer al usuario.
Contraste y equilibrio
Un diseñador de interfaz de usuario puede aprovechar estas características que hemos descrito para crear contraste entre los diferentes elementos de la interfaz y jerarquizar la información. Pero es importante mantener consistencia y equilibrio para no distraer la atención del usuario y ayudarle a centrarse primero en los elementos más importantes.
El uso de una jerarquía visual refuerza y, a la vez, rompe los patrones de lectura en F y en Z, habituales en países con idiomas que se leen de izquierda a derecha. Reforzar esos patrones naturales permite al diseñador construir un camino a través de la información de la interfaz hacia un objetivo concreto. Por otro lado, romper con esos patrones permite crear un punto focal al que dirigir la atención del usuario en momentos concretos.
Entender las prioridades de los usuarios
Enfatizar todo es lo mismo que no enfatizar nada. Para saber qué elementos debemos destacar y cómo jerarquizarlos en una interfaz, es importante entender:
- Qué queremos comunicar y transmitir como prioritario desde el producto.
- Las necesidades de los usuarios y su mapa mental.
La investigación de usuarios nos ayudará a conocer qué objetivos tienen a la hora de usar el producto o servicio, para saber qué caminos trazar en la organización jerárquica de la información y qué elementos se han de destacar sobre el resto.
Pero también podemos testear la jerarquía visual para saber si encaja con las prioridades de nuestros usuarios o si les resulta confusa o poco usable. Para ello podemos utilizar:
- Test de tareas. En este tipo de prueba se le encarga una tarea al usuario y se evalúa cómo procede y el tiempo que ha tardado en completarla.
- Test de desenfoque. Para comprobar rápidamente la jerarquización de elementos en una interfaz podemos hacer una captura de pantalla y aplicar un filtro de desenfoque. Si podemos identificar las secciones y elementos principales de la interfaz, como encabezados, logos o botones, es probable que estemos en la buena dirección.
- Test A/B. Con un test A/B podemos comparar dos versiones de la interfaz para comprobar cuál es más efectiva para incrementar las tasas de conversión o de finalización de una tarea. Este tipo de tests los podemos hacer en un entorno de prueba con un panel de participantes o en un entorno real en producción.
- Seguimiento visual (eye tracking). Con este tipo de pruebas podemos seguir el camino de la atención del usuario en el producto para comprobar o rechazar hipótesis respecto a la jerarquía visual.
Jerarquía visual para facilitar el consumo de información
Cuando la jerarquización visual de los elementos de una interfaz no es clara, aumentamos la carga cognitiva del usuario y le forzamos a adaptar su percepción de la información a patrones artificiales.
Una correcta jerarquización visual de la información, en cambio, aumenta la efectividad de la comunicación y facilita a los usuarios alcanzar sus objetivos.
Las técnicas de jerarquización están basadas en las peculiaridades de la percepción humana y permiten al usuario darle sentido a la información y utilizar un producto de manera ágil, segura y reduciendo la posibilidad de error.
