Sistema de Navegación Sidebar

Sistema de Navegación Lateral (Sidebar)

Propósito

El Sistema de Navegación Lateral proporciona una metodología para diseñar estructuras de navegación vertical persistentes. A diferencia de los encabezados horizontales, las sidebars están optimizadas para arquitecturas de información de alta densidad, soportando anidamiento profundo, acciones utilitarias secundarias y cambio de espacios de trabajo. Este sistema garantiza que los usuarios puedan navegar aplicaciones complejas con una carga cognitiva mínima, manteniendo un sentido claro de su ubicación actual dentro de un entorno jerárquico.

Casos de Uso

• Paneles de Control SaaS: Gestión de múltiples espacios de trabajo, herramientas y vistas de datos.
• Paneles de Administración: Organización de extensas funciones de gestión y configuraciones del sistema.
• Sitios de Documentación: Navegación por jerarquías profundas de artículos, secciones y referencias de API.
• Herramientas Internas: Estructuración de flujos de trabajo complejos y módulos de entrada de datos.
• Sistemas de Gestión de Contenidos (CMS): Cambio entre edición de páginas, bibliotecas multimedia y permisos de usuario.

Cuándo NO Usarlo

• Páginas de Aterrizaje de Marketing: Donde un encabezado horizontal simple es más apropiado para una navegación orientada a la conversión.
• Blogs Simples: Donde las migas de pan y los enlaces de nivel superior proporcionan una orientación suficiente.
• Aplicaciones de Consumo Móvil-Primero: Donde una barra de pestañas inferior es más adecuada para la interacción primaria en la zona del pulgar.
• Sitios Narrativos Inmersivos: Donde los elementos persistentes de la interfaz de usuario podrían distraer de la experiencia narrativa.

Entradas

1. Arquitectura de Información (IA): Un mapa de todas las páginas y herramientas, agrupadas por relación funcional.
2. Contextos de Usuario: Identificación de diferentes roles de usuario y las tareas principales que realizan.
3. Niveles de Espacio de Trabajo: Determinar si la aplicación requiere cambiar entre diferentes cuentas o proyectos.
4. Tokens de Estilo de Marca: Colores, tipografía y espaciado del sistema de diseño existente.
5. Inventario de Componentes Interactivos: Iconos estandarizados, insignias (para notificaciones) y botones.

Salidas

1. Especificación de Anatomía de la Sidebar: Regiones definidas (Marca, Selector de Espacio de Trabajo, Navegación Primaria, Navegación Secundaria, Pie de Usuario).
2. Matriz de Interacción: Comportamiento para estados de hover, foco, activo y anidamiento (expandir/colapsar).
3. Mapeo Responsivo: Reglas sobre cómo se transforma la sidebar (ej. Fija -> Carril Colapsado -> Cajón Móvil).
4. Especificaciones de Estado: Tratamientos visuales definidos para diferentes niveles de navegación e indicadores de notificación.

Flujo de Trabajo

1. Definir los Niveles de Navegación

Organizar la arquitectura de información en una jerarquía vertical:

• Nivel 1 (Directo): Secciones principales siempre visibles en la lista primaria.
• Nivel 2 (Anidado): Subsecciones reveladas mediante expansión o profundización.
• Acciones Globales: Utilidades secundarias como "Configuración", "Ayuda" o "Notificaciones" generalmente colocadas en la parte inferior.

2. Establecer la Anatomía Visual

Dividir la sidebar en zonas funcionales:

• Encabezado: Logotipo de la marca y selector de espacio de trabajo/cuenta.
• Cuerpo (Desplazable): La lista de navegación principal.
• Pie (Fijo): Perfil de usuario, configuraciones del sistema y activador de colapsar/expandir.

3. Diseñar el Patrón de Anidamiento

Elegir cómo manejar la jerarquía profunda:

• Acordeón: Secciones expansibles que empujan otros elementos hacia abajo. Mejor para 2 niveles.
• Flyout: Submenús que aparecen al lado de la sidebar al pasar el ratón o hacer clic. Mejor para sidebars tipo "carril" estrecho.
• Profundización (Drill-down): Toda la vista de la sidebar se intercambia por una vista de subnivel. Mejor para estructuras muy profundas.

4. Crear la Matriz de Estados

Aplicar retroalimentación visual consistente (del sistema-de-estados-interactivos):

• Estado Activo: Usar un indicador de alto contraste (ej. barra de color o cambio de fondo) para mostrar la página actual.
• Hover/Foco: Cambio de fondo sutil para indicar interactividad.
• Insignias de Notificación: Usar el sistema-de-insignias-y-etiquetas para mostrar elementos no leídos o estado.

5. Planificar la Adaptación Responsiva

Mapear el comportamiento de la sidebar en diferentes puntos de interrupción:

• Escritorio (>1200px): Sidebar fija y ancha (240px-280px).
• Tableta (768px-1200px): "Carril" colapsado que muestra solo iconos, expandiéndose al pasar el ratón o hacer clic.
• Móvil (<768px): Oculto por defecto, apareciendo como un cajón de pantalla completa activado por un icono de hamburguesa. Aplicar el atributo inert (o equivalente) al contenido principal mientras el cajón esté abierto para que los usuarios de teclado y lectores de pantalla no puedan tabular hacia el contenido oculto detrás de él.

Reglas de Decisión

• La "Regla de los Siete" Elementos: Limitar los grupos de nivel superior a siete o menos para garantizar que se puedan escanear fácilmente sin desplazamiento.
• Requisito de Iconografía: Usar siempre iconos para los elementos de Nivel 1. Los iconos proporcionan un ancla visual que ayuda al reconocimiento, especialmente en estados colapsados.
• Persistencia de Etiquetas: Las etiquetas nunca deben ocultarse en la vista de escritorio a menos que el usuario colapse explícitamente la sidebar.
• Distinción Visual: Asegurar que los elementos de Nivel 2 sean visualmente distintos de los de Nivel 1 (ej. mediante sangría, tamaño de fuente más pequeño o color atenuado).
• Visibilidad de la Página Activa: El indicador de página activa debe ser el estado visual más prominente en la sidebar.

Restricciones

• Accesibilidad: La sidebar debe estar envuelta en un <nav> con un aria-label único. Usar aria-expanded para elementos anidados. Cuando la sidebar o sus flyouts superpongan contenido, asegurarse de que el elemento enfocado actualmente nunca quede completamente oculto detrás de otra capa (WCAG 2.2, 2.4.11 Foco No Obscurecido).
• Responsividad: La sidebar no debe superponerse al contenido en escritorio; debe empujar o comprimir el área de contenido principal.
• Jerarquía Visual: La marca y los selectores de espacio de trabajo deben estar en la parte superior; la configuración de usuario y la ayuda deben estar en la parte inferior.
• Objetivos Táctiles: Todos los enlaces y activadores de expansión deben cumplir al menos el tamaño mínimo de objetivo de 24x24px de WCAG 2.2 (2.5.8); se prefiere 44x44px para elementos de navegación primaria dada su frecuencia de uso.

Patrones de Falla Comunes

• Desplazamiento-dentro-Desplazamiento: Tener una sidebar desplazable y un área de contenido desplazable que compiten por la atención del usuario, dando una sensación de "secuestro de desplazamiento".
• El Estado "Activo Invisible": Hacer que el indicador de página actual sea tan sutil que el usuario pierda su ubicación.
• Sobre-anidamiento: Ir más profundo de 3 niveles, haciendo que la navegación se sienta como un sistema de archivos en lugar de una aplicación.
• Activador de Colapso Oculto: Ocultar el botón "Cerrar" o "Colapsar" en un lugar donde los usuarios no puedan encontrarlo.
• Iconos sin Etiqueta: Usar iconos sin etiquetas de texto en la vista principal, confiando en la navegación de "carne misteriosa".

Criterios de Validación

• La sidebar está estructurada en zonas claras (Encabezado, Cuerpo, Pie).
• El estado activo es claramente distinto de los estados hover y predeterminado.
• Todos los elementos de Nivel 1 tienen un icono único y reconocible.
• Los elementos anidados están subordinados visualmente a sus elementos padre.
• La sidebar es completamente navegable por teclado (teclas Tab y Flechas).
• Los estados responsivos para Móvil y Tableta están definidos y son funcionales.
• Los puntos de referencia y estados ARIA están implementados correctamente.
• Las proporciones de contraste para texto e indicadores cumplen con WCAG AA (4.5:1).
• Los objetivos táctiles cumplen al menos el mínimo de 24x24px de WCAG 2.2.
• El cajón móvil aplica inert (o equivalente) al contenido de fondo mientras está abierto.