Qué es un mapa de navegación web y cómo crearlo (con ejemplo)

¿Alguna vez has entrado en un sitio web donde no logras encontrar nada? Es exasperante y lo más probable es que salgas corriendo de ahí.

Lo que hace la diferencia es tener una jerarquía bien delimitada acerca de cómo se relacionan unas páginas con otras. Un mapa de navegación web es, por lo tanto, indispensable para hacer la planificación de tu sitio web.

Aquí veremos todo lo básico acerca de esta herramienta para la administración y para los visitantes en la red. ¡Comencemos!

Ten en cuenta que el 71 % de los compradores en línea abandonarán las web que tienen problemas de usabilidad, así que un mapa es indispensable para que los usuarios permanezcan por más tiempo y completen las acciones que deseas (por ejemplo, dejen sus datos o realicen una compra de principio a fin).

Asimismo, este esquema será fundamental para la administración, ya que cada generador de contenido sabrá dónde debe quedar cada pieza de información y podrán realizarse procesos de revisión como las auditorías web con mayor facilidad.

También es útil como guía para crear el mapa XML, un archivo que es posible generar de manera automática (con herramientas como Yoast) y que puede enviarse en la Google Search Console para que tu sitio web esté indexado y aparezca en el buscador.

Características de un mapa de navegación web

Estas son las características esenciales del mapa de navegación que dará una estructura simple y accesible a tu web.

Contempla diferentes categorías de navegación

Hay tres categorías básicas para jerarquizar un sitio web:

1. Navegación por estructura: muestra la relación entre un tema principal y los subtemas o contenidos asociados que depende de este. Ejemplo: tema «Sobre nuestra empresa» con subtemas «Trabaja con nosotros» e «Historia».
2. Asociativa: relaciona diversas páginas que tienen contenidos similares, incluso si no están bajo la misma estructura. Ejemplo: página de blog que conecta con una landing page de producto.
3. Utilitaria: integra contenidos que muchas veces son independientes de la estructura jerárquica. Ejemplo: «Políticas de privacidad» y «Contacto».

Tiene en cuenta los enlaces internos de tu sitio

En principio, el mapa podría ayudar a enlazar contenidos relacionados jerárquicamente o de manera asociativa fuera de las jerarquías, como ya vimos.

Esto permitirá que los usuarios puedan navegar de una página a otra con los recursos informativos que requieren a la mano y que esto genere una experiencia (UX) sin problemas, a la vez que los buscadores como Google entiendan perfectamente cuál es la estructura de la información, cómo se relaciona un tópico con el otro, y cuáles son las piezas más relevantes.

Parte del tamaño del sitio

Un mapa de navegación web podrá contemplar más o menos tópicos o temas principales, según el tamaño de cada sitio web.

Así, un sitio de marca personal, por ejemplo, podrá requerir solo de algunas páginas como «Acerca de mí», «Contacto» y «Muestras de trabajo»; mientras que el sitio de una empresa o de una wiki requerirá muchas más categorías.

Es indispensable para el diseño y administración web

El mapa del sitio web hará patente si es necesario un sistema con breadcrums que le permitan al usuario visualizar exactamente dónde se encuentra o si es suficiente con una barra de navegación principal donde no hay lugar a confusiones. 

También, como ya dijimos, ayudará a los administradores del sitio a saber dónde agregar cada nuevo contenido y a relocalizarlo cada vez que sea necesario.

Debe satisfacer las necesidades del usuario

Por último, pero no menos importante, considera que el mapa está orientado para que el usuario encuentre lo que necesita en tu sitio. Al hacerlo pregúntate si, desde su perspectiva, podrías satisfacer distintas necesidades de información con la mayor facilidad posible.

Ahora sí, pasemos a ver el procedimiento para crear tu mapa de navegación web con un ejemplo muy sencillo.

1. Utiliza una plantilla

Lo más fácil es comenzar por una plantilla de sitio web para que no te compliques. Puedes comenzar con una herramienta especializada como Lucidchart o una de diseño simplificado como Canva. Nosotros usaremos esta última opción.

Imagen de Canva

También puedes emplear un programa de hojas de cálculo o de presentaciones. Es a tu gusto.

2. Decide cuáles son las categorías principales de tu sitio web

Comienza por pensar qué es lo que quieres reflejar en tu sitio. Estos son algunos ejemplos:

• Para una tienda en línea: «Inicio», «Ropa», «Calzado», «Accesorios», «Contacto»
• Para una empresa de servicios: «Inicio», «Nuestros clientes», «Cotizaciones», «Blog», «Escríbenos».
• Para un prestador de servicios: «Inicio», «Acerca de mí», «Casos de éxito», «Contacto».

Verás que siempre se contempla el inicio o home, en tanto que deberás detallar qué es lo que quieres que aparezca en esa primera página y que capture a los visitantes para que sigan navegando.

3. Establece los subtemas o categorías secundarias

A partir de aquí, puedes añadir algunas páginas asociadas que consideres relevantes. Debes tener en cuenta qué es lo que necesita tu audiencia en cada una de las categorías. Por ejemplo, en «Casos de éxito» esperarán ver quiénes son tus clientes más relevantes y qué es lo que has logrado con ellos; en «Acerca de mí» podrían interesarse por algunos consejos profesionales que des, etc.

4. Define cuáles son las páginas no jerarquizadas

Establece cuáles serán las páginas que no serán parte de algún otro menú; por lo regular, son las que aparecen a pie de página. Usualmente, querrás usar alguna sobre los derechos de uso de tus contenidos y la política de privacidad, entre otras.

5. Comparte y mejora tu mapa

En este ejemplo empleamos un servicio unipersonal donde probablemente nadie más tendrá que dar el visto bueno a este mapa. No obstante, en un negocio con diversas áreas querrás que te den retroalimentación acerca de estas jerarquías.

Además, optimízalo cada vez que sea necesario de acuerdo con un diseño centrado en el usuario, pues ya sabes que uno de los fines principales es que los visitantes permanezcan en tu web, por medio de una navegación intuitiva y funcional.

Una vez que optimices tu mapa, podrás compartirlo para que todos quienes manejan el sitio o lo consultan (por ejemplo, tus agentes que atienden a los clientes), puedan conocer la estructura básica.

Ejemplo de mapa de navegación web

Así se vería el mapa final del que partimos:

Ahora sabes cómo realizar tu propio mapa de navegación web fácilmente y por qué es tan relevante para tus usuarios y administradores.

Con el gestor de contenido gratuito de HubSpot podrás partir de plantillas para crear tu sitio web y configurarlas de acuerdo con las necesidades de tu servicio, negocio o fin particular. Así, tus páginas estarán bien estructuradas desde el inicio y podrás enfocarte en lo que más te gusta: lograr tus objetivos en la red.