La jerarquía proporciona al usuario una hoja de ruta para navegar a través de tu diseño. En una era donde la capacidad de atención es limitada y de gran sensibilidad, la jerarquía puede ser un recurso para facilitar la lectura y asegurarte que los usuarios encuentran lo que necesitan, al mismo tiempo que los motivas a explorar más.
La jerarquía en el diseño es muy importante. Muchos otros principios universales de diseño como la alineación, peso visual, equilibrio, etc, pueden ayudar a influir en una estructura jerárquica con consistencia en tu diseño. En este caso, la jerarquía se centra en una visión general de “nivel superior” de cómo crear orden en el diseño de la interfaz de usuario.
Jerarquía tipográfica
Normalmente hojeamos primero el contenido y luego continuamos leyendo solo si nos ha llamado la atención. A continuación, en el mapa de calor podrás ver el patrón que seguimos cuando hojeamos un texto.
Las áreas rojas y amarillas representan donde más atención ponemos. Y con este ejemplo podemos observar que normalmente se hojea de arriba abajo primero y de derecha a izquierda. La jerarquía tipográfica permite organizar tu contenido de una forma que facilite a los lectores a encontrar la información que es más relevante según tus necesidades.
La jerarquía tipográfica se podría estructurar de forma básica en encabezados, seguidos del texto. Si estás familiarizado con los encabezados en HTML, sabrás que hay seis niveles de encabezados que se pueden aplicar al contenido, aunque el uso de más de 3 o 4 niveles se vuelve difícil de seguir. Además, estos encabezados son clave para el SEO, si tu diseño tiene como objetivo algún tipo de servicio web.
Sin embargo, el orden de estos encabezados no deben seguir estrictamente este orden en tus diseños, aunque sí que deberás encontrar el equilibrio para un buen SEO. Aquí un ejemplo:
Conclusión
En general, la jerarquía no solo ayuda al usuario a encontrar la información más relevante, sino que también se puede utilizar para guiar a los usuarios en la dirección que creas preferente, así que recuerda también no olvidar añadir el diseño de botones de acción “CTA” para crear un nuevo camino y así orientar al usuario por las acciones que puede realizar.
Photo by Roman Kraft on Unsplash
