EBAC Logotipo
Menú

2.4 Conoce las vistas y mapas de sitio

Representar visualmente la jerarquía de contenido y estructura general del sitio o aplicación, conectando la información con sus posibles vistas.

1. Introducción

En el diseño de cualquier proyecto digital, es fundamental tener claridad sobre cómo organizar la información.


Esto permite ofrecerle al usuario herramientas que lo ayuden a ubicarse y moverse con facilidad dentro del sitio o aplicación.


Para esto debemos de preguntarnos.

  1. ¿Qué páginas necesito?
  2. ¿Cómo se conecta todo entre sí?
  3. ¿Qué es lo primero que verá el usuario?
  4. ¿Qué no puede faltar?

2. ¿Qué es un mapa de sitio?

Un mapa de sitio es una representación visual o esquemática de la estructura de un sitio web.


Muestra cómo se organizan y conectan las diferentes páginas y secciones. Su objetivo es mostrar cómo se relacionan las secciones entre sí y guiar el diseño de la experiencia de usuario.


¿Para qué sirve?

  1. Planear la estructura antes de diseñar.
  2. Entender qué contenido necesita cada página.
  3. Guiar al usuario de forma lógica.

3. Elementos, Características

Los mapas de sitio muestran las páginas principales y su relación con otras.


No incluyen el diseño visual, solo visualiza la arquitectura de la información.


  1. Ayuda a planificar la navegación y flujo de usuario.
  2. Puede hacerse a mano o digital.
  3. Tiene elementos clave y mandatorios (Página principal, Secciones, Jerarquía)

4. Jerarquización de contenido

Jerarquizar es ordenar la información por niveles de importancia o categoría. Esto ayuda a organizar mejor las páginas y definir rutas de navegación.


Pasos básicos para jerarquizar:

  1. Identifica lo principal
  2. Agrupa lo relacionado
  3. Define niveles
  4. Representa visualmente


5. Vista: La página de un sitio web, tipos

Una vista es una página o pantalla específica. Cada vista corresponde a una sección del mapa.


Tipos comunes de vistas:

  1. Informativas: Inicio, Nosotros, Servicios.
  2. Interactivas: Formularios, Login, Registro.
  3. Listado/Detalle: Blog + artículo individual, catálogo + producto.

6. Buenas Prácticas / Recomendaciones

Un mapa de sitio útil tiene pocas reglas, pero importantes:


  1. Prioriza lo esencial
  2. Usa 3–4 niveles máximo
  3. Nombres claros
  4. Una idea por vista
  5. Todo conectado
  6. Valida con otros
  7. Revisa y ajusta


7. Errores Comunes

Evita estos errores frecuentes que afectan la claridad y usabilidad de tu sitio:


  1. Contenido duplicado
  2. Páginas sin sentido
  3. Rutas confusas
  4. Nombres vagos
  5. Profundidad excesiva
  6. Inconsistencias
  7. Ignorar móviles
  8. Esconder lo importante

8. Mapa de sitio ≠ Menú de navegación

Una vez tengas listo tu mapa de sitio, es momento de pensar tu menú:


El menú es como un escaparate: sólo muestra lo esencial.


El mapa es el inventario completo (páginas públicas + ocultas).


Ubicaciones del menú: header, footer, overlay hamburguesa.


El menú facilita accesos clave para el usuario; todo lo demás vive fuera del menú.

9. Recursos Adicionales

Herramientas útiles:

  1. Papel y lápiz (sí, aún sirven).
  2. draw.io, Figma (modo FigJam).


Libros / recursos:

  1. Don't Make Me Think – Steve Krug.
  2. Information Architecture for the Web and Beyond – Louis Rosenfeld.
  3. UX Collective Blog (uxdesign.cc).