UX · Arquitectura de información

Arquitectura de información

Sitemaps simples, jerarquía de contenidos y esquemas mínimos para que una web se entienda sin tener que memorizar el mapa entero.

Qué entendemos por arquitectura de información

No va de dibujar cajas por dibujar: se trata de decidir qué va dentro, qué va fuera y qué hay que agrupar para que la persona usuaria llegue donde necesita.

Aquí tienes patrones mínimos de arquitectura de información para webs pequeñas y medianas: cómo agrupar secciones, qué nivel de profundidad tiene sentido y cómo mantener el menú principal limpio sin esconder cosas importantes.

No pretende sustituir un card sorting o una research completa, pero sí servir como base rápida para:

  • Organizar el contenido de un proyecto nuevo.
  • Reordenar una web que creció sin una estrategia clara.
  • Explicar a un cliente o a un grupo por qué ciertas secciones cambian de lugar.

Principios básicos para ordenar contenido

Cuatro reglas que puedes usar como checklist antes de dibujar cualquier mapa.

1. Primero tareas, luego departamentos

El menú principal debería reflejar lo que la persona quiere hacer (pedir cita, ver servicios, comprar, contactar), no el organigrama interno.

2. Profundidad razonable

Mejor pocas capas claras que muchos niveles ocultos. Como referencia, intenta que la mayoría de contenidos clave estén a 2–3 clics desde la home.

3. Nombres que se entienden

Evita títulos crípticos. “Servicios”, “Proyectos”, “Blog”, “Contacto” suelen funcionar mejor que conceptos ambiguos tipo “Soluciones” o “Universo”.

4. Menú principal limpio

Si todo es importante, nada es importante. Intenta limitar el menú principal a 5–7 elementos como máximo, y usa subniveles cuando realmente hagan falta.

Ejemplos de mapas de sitio básicos

Esquemas listos para copiar y adaptar: web de servicios, portfolio y pequeño ecommerce.

Web de servicios (estudio pequeño)

Estructura mínima para un estudio, despacho o profesional con varios servicios y contenido editorial ligero.

HOME

├─ Quiénes somos

├─ Servicios

│ ├─ Servicio 1

│ ├─ Servicio 2

│ └─ Servicio 3

├─ Proyectos / Casos

├─ Blog / Recursos

└─ Contacto

Portfolio de diseño / ilustración

Pensado para mostrar trabajos ordenados por categoría, con un foco claro en el contacto.

HOME

├─ Portfolio

│ ├─ Editorial

│ ├─ Branding

│ ├─ Ilustración

│ └─ Otros proyectos

├─ Sobre mí / Sobre el estudio

├─ Servicios

└─ Contacto

Pequeño ecommerce

Pensado para pocas categorías y foco en compra directa, con contenido de apoyo.

HOME

├─ Tienda

│ ├─ Categoría 1

│ ├─ Categoría 2

│ └─ Categoría 3

├─ Sobre la marca

├─ Preguntas frecuentes

├─ Blog / Inspiración

└─ Contacto / Soporte

Patrones listos para copiar

Pequeñas plantillas que puedes pegar en un documento, pizarra o presentación para trabajar la estructura con el equipo o el alumnado.

Plantilla de menú principal

Rellena con verbos o secciones claras. Ideal para empezar una conversación de arquitectura sin entrar todavía en el detalle de cada página.

HOME

├─ [Acción / Sección 1]

├─ [Acción / Sección 2]

├─ [Acción / Sección 3]

├─ [Acción / Sección 4]

└─ [Contacto / Ayuda]

Profundidad por niveles

Úsalo como esquema genérico para explicar los niveles: menú principal, páginas de sección y detalle.

Nivel 1 → Menú principal (5–7 ítems)

Nivel 2 → Páginas de sección

Nivel 3 → Páginas de detalle / ficha

Nivel 4 (opcional) → Contenido muy específico

Checklist rápida de arquitectura

Para validar un mapa de sitio antes de pasar a wireframes.

  • ¿La persona usuaria encuentra lo que busca en 2–3 clics?
  • ¿Hay secciones duplicadas que puedan fusionarse?
  • ¿El menú principal refleja las tareas, no los departamentos?
  • ¿Alguien ajeno entiende los nombres de las secciones?

Uso docente y práctico

Cómo trabajar arquitectura de información en clase

Puedes usar estos esquemas como punto de partida para ejercicios rápidos o como base de proyectos más largos. La clave está en que el alumnado no solo dibuje cajas, sino que tenga que justificar por qué una sección va en el menú principal o en un nivel inferior.

Algunas ideas de uso:

  • Escoger una web existente y pedir que el grupo reconstruya su mapa real a partir de la navegación, comparándolo con los patrones de esta página.
  • Pedir un rediseño de arquitectura para un proyecto: mantener el contenido, pero reorganizarlo usando los ejemplos como guía.
  • Usar las plantillas de menú y niveles como entregable intermedio antes de pasar a wireframes o prototipos en Figma.

Como siempre en KIT UX UI: entra, copia, adapta y, si te ayuda en clase o en proyectos, citarnos cuando te apetezca.