Principios UX (I): La jerarquía

La jerarquía es uno de los principios básicos del diseño UX que debe conocer y tener en cuenta todo diseñador de páginas web: Ayuda a los usuarios a navegar fácilmente. Pero ¿a qué nos referimos exactamente cuando hablamos de jerarquía?  En este artículo descubriremos qué es y cómo afecta en la navegación del usuario desde dos ámbitos distintos: la arquitectura de la información y la jerarquía visual.

La arquitectura de la información

La arquitectura web es la forma en la que se organiza y categoriza el contenido de un sitio web.  La base del diseño de esta arquitectura es el mapa web, que supone un esqueleto de cómo se organizan los contenidos dentro de la página.  Aunque esto pudiera parecer sencillo, es una tarea compleja, pues hay múltiples factores a tener en cuenta, ya que debe responder a las necesidades del usuario, pero también a las del negocio. Cabe señalar que la arquitectura del sitio también influirá de manera directa en el posicionamiento SEO.

Antes de diseñar este mapa, deberemos comprender bien los objetivos de la página: ¿Es una página corporativa cuyo objetivo es el branding? ¿Una landing page que quiere captar leads? ¿O es un comercio electrónico que desea aumentar sus ventas? Conocer los objetivos del negocio es esencial para poner guiar al usuario en la navegación.

También es esencial conocer al usuario (al público objetivo) y crear “personas” (historias ficticias de usuarios que navegarán por nuestra web, con sus limitaciones y fortalezas).

Así mismo, necesitaremos recopilar todos los contenidos que tengamos. Estos contenidos deben de estar actualizados y ser consistentes e interesantes para el lector.

Llegados a este punto, podemos empezar a diseñar nuestro mapa, creando unidades semánticas que sean perfectamente comprensibles para el usuario.

Jerarquía Visual

La jerarquía visual es una de las claves del diseño gráfico. Si bien una buena arquitectura de la información hace que el usuario navegue más fácilmente por las secciones de nuestra web, una buena jerarquía visual ayuda a los usuarios a navegar dentro de una página o sección. El contenido de cada página debe estar bien organizado para que sea comprensible y legible.

Para organizar el contenido hay que otorgarle un peso visual a cada elemento. Para ello nos apoyaremos en elementos como el color, los tamaños de las tipografías o los contrastes entre los distintos bloques de información.

Para proporcionar una buena jerarquía visual, es esencial tener en cuenta cómo “leen” los usuarios la página. Lo más común es que se lea de arriba abajo y, en occidente, de izquierda a derecha.  Numerosos estudios han demostrado que el usuario hace primero un escaneado general de la página, y luego comienza a leer. Esto puede ocurrir de dos maneras distintas: en forma de F y en forma de Z, dependiendo del contenido.

La forma de Z se da en anuncios o webs corporativas. El lector revisa primero la parte superior de la página, dónde deberá encontrar la información principal (el logotipo, el contacto, el menú…) y luego desciende de forma diagonal hacia la esquina izquierda.

La forma de F es más común en páginas como blogs o artículos, es decir, páginas que tengan mucho texto. El lector escanea desde la parte izquierda de la página, buscando palabras clave importantes en los títulos. Una vez encuentran lo que quieren, comienzan a leer hacia la derecha. Para este tipo de contenidos hay que cuidar que los títulos sean legibles y que destaquen visualmente, para que el lector pueda identificarlos fácilmente.

Por tanto, dependiendo del contenido y objetivo de la página web, hay que disponer la información siguiendo una dirección determinada.  

Trabajando la arquitectura de la información, así como el diseño de la jerarquía visual, conseguiremos que la web sea navegable, guiaremos al usuario y este se sentirá cómodo en ella.