Árbol de Contenidos / Mapa del Sitio

También conocido como: Mapa del Sitio / Modelo Estructural

exploracionmediaIntermedio

TL;DR

Estructura jerárquica de la información y navegación de un producto digital.

Valor estratégico

Permite descubrir rutas muertas y errores estructurales antes de escribir una línea de código. Facilita la comunicación entre UX, desarrollo y stakeholders mediante un lenguaje visual común.

Categoría: arquitectura-informacionTiempo estimado: 4-8 horas para sitio mediano (50-100 páginas)

Qué es

El Árbol de Contenidos (o Sitemap / Mapa del Sitio) es una representación visual jerárquica de la arquitectura de información de un producto digital. Muestra cómo se organizan las páginas, secciones y contenidos, y cómo se conectan entre sí a través de la navegación.

Para qué sirve

✓Definir la estructura de navegación de un producto digital
✓Alinear al equipo sobre la arquitectura de información
✓Identificar contenido faltante o redundante
✓Servir como base para el diseño de la navegación y menús

Qué métodos lo alimentan

Card Sorting (abierto y cerrado)Tree TestingAnálisis de contenido existenteEntrevistas sobre modelos mentales

Cuándo usarlo

✓Al diseñar un sitio web o app desde cero
✓Al reestructurar la navegación de un producto existente
✓Cuando usuarios reportan problemas para encontrar información
✓Antes de diseñar wireframes o prototipos

Cuándo NO usarlo

✗Para productos muy simples con 3-4 pantallas
✗Si no has investigado cómo los usuarios piensan la estructura (haz Card Sorting primero)
✗Como documento final — debe evolucionar con el producto

Componentes obligatorios

✓Nodos de páginas: rectángulos o cajas etiquetadas con el nombre de cada página
✓Conectores y flechas: líneas que muestran relaciones jerárquicas entre áreas del sitio
✓Sistema de numeración (identificadores): cada página con número único (ej. 1.0, 2.0, 2.1, 2.1.1) para vincular con wireframes y flujos

Componentes opcionales

○Pilas de páginas (Pagestacks): ícono de cajas apiladas para múltiples páginas con estructura similar
○Puntos de decisión (rombos): cuando la visualización depende de una condición
○Contexto de negocio/usuario: tamaños variados o códigos de color para representar prioridad
○Leyenda (Key/Legend): explicación de símbolos, líneas y colores
○Rationale: documento adjunto explicando el razonamiento de las decisiones

Cómo hacerlo paso a paso

1Inventario de contenido: Lista todo el contenido actual o planificado del producto.
2Investiga modelos mentales: Usa Card Sorting para entender cómo los usuarios agrupan la información.
3Define niveles jerárquicos: Organiza el contenido en niveles (L1: secciones principales, L2: subsecciones, L3: páginas/pantallas).
4Mapea conexiones: Define las relaciones entre secciones y los flujos de navegación principales.
5Valida con Tree Testing: Prueba la estructura con usuarios pidiendo que encuentren información específica.
6Documenta y comparte: Crea un diagrama visual usando herramientas como Miro, FigJam o GlooMaps.

Tips para equipos pequeños

Empieza con los 3 flujos más críticos, no intentes mapear todo
Usa herramientas gratuitas como GlooMaps o Octopus.do
Valida con Tree Testing remoto (no necesitas lab)
Mantén máximo 3 niveles de profundidad para evitar complejidad

Errores comunes

✗Organizar por estructura interna de la empresa en vez del modelo mental del usuario
✗Crear demasiados niveles de profundidad (más de 3 clicks)
✗No validar con usuarios reales
✗Tratar el mapa como un documento estático

Criterios de calidad

✓Trazabilidad unívoca: convención de numeración que coincide exactamente con matrices de contenido, wireframes y planes de pruebas
✓Jerarquía de información reforzada: facilita entender relaciones padre-hijo y descubrir rutas muertas antes de codificar
✓Escalabilidad del formato: para sitios masivos, puede trasladarse a formato spreadsheet sacrificando lo visual por eficiencia

Citas de autoridad

“En términos prácticos, el diseño centrado en el usuario significa que los días de diseñar un mapa del sitio que sea el reflejo de un organigrama han terminado.”
— Visual Vocabulary / JJG

“Cualquier página que identifiques en tu mapa del sitio debe tener un número, y tu sistema de numeración debe permitir que ocurran cambios posteriores.”
— IA Documentation Standards

“Crear una estructura de sitio puede parecer un proceso algo arbitrario para el ojo inexperto, y por lo tanto, fácil de modificar sin considerar las consecuencias.”
— Information Architecture

Ejemplo contextualizado

Contexto: Rediseño de un sitio web de universidad.

Antes: Navegación organizada por departamento (Admisión, Académico, Administración). Los estudiantes no encontraban los formularios de becas.

Card Sorting reveló: Los estudiantes agrupan por 'lo que quiero hacer': Postular → Estudiar → Pagar → Graduarme.

Nuevo árbol: L1: Quiero Postular | Mi Carrera | Financiamiento | Vida Universitaria. Resultado: 40% menos de tickets de soporte sobre 'no encuentro X'.

Plantilla disponible

Formato: Google Slides$10 USD

Fase

exploracion

Audiencia

equipo-productodesarrollo

Complejidad

media

Nivel de experiencia

Intermedio

Entregables relacionados

Metodologías relacionadas

Herramienta gratuita de UXR — Consultoría de UX Research en Chile