Estructura de navegación: cómo reducir los niveles

¿Qué son los niveles de navegación de un sitio web? ¿Cuántos clics sirven para llegar a una página web empezando desde la homepage?

Los niveles de navegación representan ese valor para cada página. Por ejemplo, una página de nivel superior al 3 podría tener problemas en posicionarse en los resultados de búsqueda.

La información presente dentro de un sitio web puede organizarse en jerarquías planas u horizontales y profundas o verticales; ambas tienen sus ventajas y desventajas.

La estructura de un sitio crea los niveles de navegación. Los sitios web normalmente incluyen por lo menos dos niveles. El nivel más alto se llama raíz (más conocido como root, con la palabra inglés). Este nivel se conoce como Home Page o página de destino del sitio web.

Los sitios web que tienen pocas páginas usan una estructura de enlaces internos para organizar el contenido. La estructura más común (y más fácilmente comprensible) consiste en clasificar las páginas en grupos o niveles, con diferentes subniveles. El resultado final es una jerarquía de contenidos divididos en niveles.

Las decisiones sobre cómo agrupar exactamente los contenidos pueden tener consecuencias importantes sobre la experiencia de usuario, ya que determina cómo funciona (o no funciona) la estructura del sitio web para las personas. Y también influye de cara a la SEO, como casi todo lo que se hace bien o mal a nivel de experiencia de usuario. Para analizar cómo funciona una estructura es necesario visualizarlas a través de mapas conceptuales.

Tipos de jerarquías en arquitectura web

Puede haber dos estructuras diferentes: en ambas se puede mostrar de manera lógica la misma cantidad de información, pero la forma de organizar el contenido es muy diferente. Con lo cual lo es también la experiencia de navegación en las dos jerarquías. En la jerarquía profunda hay muchos subniveles y en la plana hay pocos. Ambas jerarquías empiezan por arriba con una única homepage, pero las informaciones debajo están organizadas de manera muy diferente.

Aunque las personas que visiten un sitio web no ven enseguida este tipo de visualización tal y como nosotros ahora mismo que la estamos analizando, la forma de la jerarquía tiene un gran impacto sobre la experiencia de usuario y la SEO.

Con las jerarquías planas es fácil para las personas usuarias entender cómo está dividido el sitio web y cómo una página está conectada con las otras. Sin embargo, cuanto más profunda es una jerarquía, más probable es que los usuarios se pierdan durante la navegación.

Navegación y migas de pan

Para los sitios web con pocos niveles de profundidad, los breadcrumbs (migas de pan en castellano) son de ayuda, ya que muestran una conexión por cada nivel del sitio desde la Home a la página actual en el cual el usuario se encuentra. Sirven para orientar al usuario y ayudan a comprender la estructura del sitio.

Otra manera para ayudar a los usuarios a visualizar la estructura de un sitio web son los mapas del sitio.

Estructura de navegación y PageRank

Cuando hablamos de estructura del sitio web, es importante que mencionemos su importancia de cara al PageRank.

Para un buen SEO el PageRank tiene que distribuirse en el sitio desde las páginas más importantes a las más débiles. La página más relevante es la Home. Para cada nivel se produce una pérdida natural de PageRank, así que las páginas de nivel inferior reciben menos juice de la página de nivel superior, y cada vez menos al bajar de nivel.

¿Cuál es la mejor estructura de navegación?

Más de una persona se preguntará: ¿Cómo debería ser la jerarquía de mi sitio web? ¿Plana o profunda? La respuesta es: depende. Porque no existe una única respuesta. Veamos los motivos.

Las jerarquías planas funcionan bien en sitios web con categorías distintas y reconocibles, porque las personas no tienen que navegar por muchos niveles para llegar rápido a su destino.

Pero hay excepciones por cada regla. En algunas situaciones, el sitio web puede que tenga demasiadas categorías para enlazarlas todas como páginas de segundo nivel. En otros casos, mostrar temas específicos muy pronto confunde al usuario.

Observar a las personas usuarias, a través de Google Analytics y sobre todo con test de usabilidad (aquí te dejamos 5 consejos para montar un buen test de usabilidad), ayudará a entender qué problemas tiene que resolver tu público, el recorrido de navegación y cuánto los usuarios conocen tus contenidos. Este conocimiento es esencial para alcanzar el justo equilibrio entre amplitud y profundidad en la jerarquía de un sitio web.

Desde el punto de vista del SEO, los expertos dicen que no hay una estructura mejor que la otra. Depende todo del sitio web, de su autoridad y de cuáles y cuántas páginas estratégicas necesita posicionar. Amazon, por ejemplo, puede permitirse enlazar desde la Home más de 200 páginas porque su PageRank es tan alto que puede distribuirlo. 

Cómo reducir el número de niveles de navegación

• Paginación granular

Si el sitio web que tienes que optimizar tiene archivos muy largos y una navegación entre páginas basadas solo en next & prev, hay que mejorar los enlaces de navegación del archivo y hacerlos más difusos.

• Aumentando los elementos en los listados

Otra manera es aumentando el número de elementos contenidos en la página. Hay que tener en cuenta que las personas usuarias están más que acostumbradas a hacer scroll. En lo que se refiere a este tema, puede interesarte leer este otro post donde hemos hablado de scroll infinito y la paginación.

• Usar enlaces horizontales

Un enlace horizontal conecta páginas del mismo nivel o tipología. Estos son algunos ejemplos de tipologías de enlaces horizontales que se pueden implementar en un sitio web:

• Enlaces cruzados entre diferentes categorías del sitio web
• Enlaces entre posts sobre temáticas parecidas en el blog 
• Enlaces entre artículos relacionados en un e-commerce 
• Enlaces cruzados entre páginas comerciales que se encuentran en categorías diferentes pero tienen aspectos correlacionados.

• Usar enlaces verticales

Un enlace vertical es una manera de enlazar páginas de nivel bajo desde páginas de nivel superior, y viceversa.

El ejemplo más evidente de conexión son los breadcrumbs, que hemos nombrado arriba. Son aquellos enlaces que se visualizan en la parte superior de una página y se quedan estáticos en cada página que visualiza la persona usuaria. Si la persona necesita subir de nivel o necesita ayuda para entender dónde se encuentra, las migas de pan están allí para ayudar. 

Si quieres profundizar sobre las migas de pan, te invitamos a leer nuestros posts:

• Migas de pan en productos digitales
• Analizando la usabilidad de las migas de pan
• Poniendo en tela de juicio la pertinencia de las migas de pan

Otro ejemplo de enlace vertical son los productos más vendidos enseñados en la HomePage de un e-commerce. Si tienes un producto importante, una regla básica para una buena experiencia de usuario es que la persona no tenga que clicar y navegar por categorías para llegar a ello. Los productos estratégicos para un negocio se han de enseñar en el nivel más alto posible. De esta manera, además, usamos los enlaces verticales para transferir el PageRank desde las páginas más fuertes del sitio a los productos más importantes para la venta.

• Sitemap.html

Un sitemap es una página HTML con un listado de enlaces a todas las páginas importantes del sitio web. Esta página funciona como un directorio para todas las páginas y subpáginas. A las personas usuarias les sirve para hacerse una idea general de los contenidos del sitio web y a los bot para encontrar el enlace directo a los contenidos importantes.

Para los bot es como un camino rápido. Normalmente el sitemap se enlaza desde el footer, con lo cual está en todas las páginas del sitio web y, por consecuencia, es una página de segundo nivel. Todas las páginas enlazadas dentro del sitemap HTML serán por consecuencia de tercer nivel, aunque siguiendo la navegación clásica serían de nivel superior.

• Widget

No hay que infravalorar las partes comunes a todas las páginas de un sitio. En estas áreas como los sidebar o el footer se pueden poner bloques o widget dinámicos que enlazan a páginas relacionadas. Así lo que estamos haciendo es pasarle PageRank a páginas que hemos elegido previamente y además ayudar al usuario a visualizar páginas que de otra manera, igual no llegaría a ver.

• Selecciona el contenido del Footer y del Menú

En el footer suele ponerse el “menú secundario” con los enlaces a las páginas importantes, pero menos visitadas como “Quiénes somos”, “Política de Privacidad”, “Botones sociales”, etc. 

En el Menú en alto se tienen solo las páginas más importantes para la navegación. Para profundizar sobre el Menú de navegación, te aconsejamos leer estos posts:

• 10 pautas de diseñar menús de navegación de forma adecuada
• ¿Cuántos elementos en un menú de navegación?
• Mejorar menús de navegación en ecommerce usando el UX Research