coastdigitalgroup/coastai-skills

Sistema de Navegación del Sitio

Propósito

El skill Sistema de Navegación del Sitio proporciona una metodología para organizar y diseñar las rutas estructurales de un sitio web. Garantiza que los usuarios puedan orientarse, encontrar información rápidamente y moverse entre secciones sin esfuerzo en todos los tipos de dispositivos. Un sistema de navegación robusto equilibra la densidad de información con la claridad, manteniendo la accesibilidad y la jerarquía visual.

Casos de Uso

• Diseñar el encabezado y pie de página globales para un nuevo sitio web.
• Reestructurar la arquitectura de información (IA) de un sitio complejo.
• Implementar patrones de navegación responsivos (p. ej., cajones móviles, mega-menús).
• Mejorar la "orientación" en sitios con mucho contenido (migas de pan, subnavegación).
• Auditar la navegación existente para detectar brechas de accesibilidad y usabilidad.

Cuándo NO Usarlo

• Aplicaciones de Página Única (SPA) con Enrutamiento Mínimo: Donde la navegación es puramente funcional dentro de una sola vista (p. ej., una herramienta de panel simple).
• Sitios Inmersivos/Experimentales: Donde las convenciones de navegación estándar se evitan intencionalmente con fines narrativos o artísticos.
• Páginas de Aterrizaje Independientes: Donde el objetivo es una única ruta de conversión y la navegación global podría distraer al usuario (aunque un "volver arriba" o una navegación mínima con anclajes aún podría usarse).

Entradas

1. Arquitectura de Información (IA): Un mapa del sitio o lista de páginas categorizadas por jerarquía.
2. Personas de Usuario y Objetivos: ¿Cuáles son las tareas más frecuentes que los usuarios necesitan realizar?
3. Prioridad de Contenido: ¿Qué enlaces son "Primarios" (Globales), "Secundarios" (Contextuales) o "Utilidad" (Herramientas/Cuenta)?
4. Restricciones de Dispositivo: Puntos de interrupción objetivo y requisitos de interacción táctil vs. ratón.

Salidas

1. Mapa de Navegación: Una guía estructural para los elementos de Encabezado, Pie de página y Subnavegación.
2. Estrategia Responsiva: Definiciones de cómo la navegación se adapta de Escritorio a Móvil.
3. Especificación de Interacción: Comportamiento de menús desplegables, estados activos y gestión del foco.
4. Hitos de Accesibilidad: Roles y etiquetas definidos para la navegación mediante lectores de pantalla.

Flujo de Trabajo

1. Categorizar Niveles de Navegación

Divide tu mapa del sitio en niveles funcionales:

• Primaria: Secciones principales del sitio (p. ej., Productos, Servicios, Acerca de).
• Secundaria/Contextual: Enlaces específicos de una sección (p. ej., categorías de productos específicas).
• Utilidad: Herramientas no esenciales pero necesarias (p. ej., Búsqueda, Inicio de sesión, Selector de idioma).
• Terciaria (Pie de página): Enlaces SEO, legales, sociales y enlaces globales redundantes.

2. Seleccionar Patrones de Navegación

Elige patrones según la densidad de contenido:

• Barra Simple: 3–7 enlaces. Ideal para sitios pequeños y medianos.
• Desplegables: Ideal para sitios con 2 niveles de jerarquía.
• Mega-menú: Ideal para grandes sitios de comercio electrónico o empresariales con muchas categorías.
• Cajón Móvil: Estándar para móviles; contiene todos los niveles de navegación en una pila vertical.

3. Diseñar para la Orientación

Asegúrate de que los usuarios siempre sepan dónde están:

• Estados Activos: Distingue visualmente el enlace de la página actual y márcalo con aria-current="page" para tecnología de asistencia.
• Migas de Pan: Úsalas para sitios de más de 3 niveles de profundidad.
• Ubicación Consistente: Mantén la navegación global en la misma ubicación en todas las páginas.

4. Definir el Comportamiento Responsivo

Determina cómo se contrae la navegación:

• El Cambio de Punto de Interrupción: Decide exactamente cuándo el menú de escritorio se convierte en un menú "Hamburguesa".
• Reducción de Prioridades: En móvil, mueve los enlaces de utilidad (como "Búsqueda") fuera del cajón y dentro del encabezado si son de alta prioridad.
• Objetivos Táctiles: Cumple con WCAG 2.2 SC 2.5.8 (Tamaño Mínimo de Objetivo) a 24x24px con espaciado adecuado; prefiere 44x44px para objetivos de interacción principal con el pulgar.

5. Establecer Accesibilidad

• Hitos: Usa etiquetas <nav> con aria-labels únicos (p. ej., "Principal", "Pie de página").
• Ruta del Teclado: Asegura un orden de Tabulación lógico y estados :focus-visible visibles que nunca sean oscurecidos por encabezados fijos o superposiciones (WCAG 2.2 SC 2.4.11 Foco No Oscurecido).
• Enlaces de Salto: Proporciona un enlace "Saltar al Contenido" para usuarios de teclado.
• Estados ARIA: Usa aria-expanded y aria-controls para menús conmutables.

Reglas de Decisión

• La Regla de los 7 Enlaces: Intenta limitar la navegación primaria a 7 elementos o menos para reducir la carga cognitiva (Ley de Miller).
• Predecibilidad sobre Innovación: Usa iconos estándar (hamburguesa para menú, lupa para búsqueda) para asegurar el reconocimiento inmediato.
• Jerarquía Visual: La acción más importante (p. ej., "Comenzar") debe ser un botón con estilo, no un enlace de texto.
• Fijo vs. Estático: Usa encabezados fijos solo si los usuarios necesitan acceso frecuente a la navegación mientras se desplazan (p. ej., contenido de formato largo o paneles).

Restricciones

• Accesibilidad: Debe ser completamente navegable solo con teclado. El contraste de los enlaces de navegación debe cumplir con WCAG AA (4.5:1). Los objetivos táctiles deben cumplir con WCAG 2.2 SC 2.5.8.
• Responsividad: La navegación nunca debe desbordar el viewport horizontalmente.
• Jerarquía: La navegación no debe competir con el H1 de la página o la Llamada a la Acción (CTA) principal.

Patrones de Falla Comunes

• La Navegación "Carne Misteriosa": Usar iconos sin etiquetas que no son universalmente entendidos.
• Encabezado Sobrecargado: Intentar incluir demasiados enlaces de utilidad, lo que genera desorden y clics erróneos.
• Cajones Inaccesibles: Crear menús móviles que no se pueden cerrar con el teclado o que no atrapan el foco cuando están abiertos.
• Falta de Retroalimentación: Sin cambio visual cuando un usuario está en la página actual o pasa el ratón sobre un enlace.

Criterios de Validación

• La navegación está estructurada en niveles claros (Primaria, Utilidad, Pie de página).
• Los estados activos son visualmente distintos y accesibles.
• La navegación móvil es funcional e incluye todos los enlaces primarios.
• Los usuarios de teclado pueden acceder a todos los enlaces y cerrar menús usando solo el teclado.
• Los hitos (<nav>) se usan y etiquetan correctamente.
• Los objetivos táctiles en móvil cumplen al menos con el mínimo de WCAG 2.2 de 24x24px (44x44px preferido para acciones primarias).
• El enlace "Saltar al Contenido" está presente y es funcional.