Sistema de Pestañas UI

¿Qué hace Sistema de Pestañas UI?

Propósito

El Sistema de Pestañas UI proporciona una metodología para diseñar y estructurar pestañas—elementos de navegación que permiten a los usuarios alternar entre paneles de contenido relacionados dentro del mismo contexto. Las pestañas son un patrón clave para la divulgación progresiva, ayudando a reducir la carga cognitiva al organizar la información en grupos lógicos sin necesidad de recargar la página. Un enfoque sistemático garantiza que las pestañas tengan estados activos claros, agrupación lógica y se adapten correctamente entre dispositivos.

Casos de Uso

• Páginas de Detalles de Producto: Organizar especificaciones, reseñas, detalles de envío y preguntas frecuentes en secciones escaneables.
• Configuraciones de Cuenta: Agrupar perfil de usuario, seguridad, notificaciones y configuraciones de facturación.
• Paneles de Control: Cambiar entre diferentes vistas de datos (por ejemplo, "Resumen", "Analíticas", "Historial").
• Resultados de Búsqueda: Filtrar resultados por tipo (por ejemplo, "Todos", "Imágenes", "Videos", "Noticias").
• Formularios Complejos: Dividir formularios grandes en secciones temáticas (si los pasos no necesitan completarse en un orden estricto).

Cuándo NO Usar

• Pasos Secuenciales: Si el usuario debe completar contenido en un orden específico, usa sistema-de-progreso-por-pasos en su lugar.
• Navegación Global: Las pestañas deben gestionar contenido dentro de una página; usa sistema-de-navegación-del-sitio para moverse entre diferentes páginas.
• Comparación de Información: Si un usuario necesita ver contenido de dos secciones simultáneamente, no uses pestañas. Considera un acordeón o un diseño lado a lado.
• Demasiados Pocos Elementos: Si solo hay dos elementos y el contenido es breve, considera mostrar ambos o usar un simple interruptor.
• Demasiados Elementos: Si tienes más de 6-7 pestañas, la interfaz se vuelve desordenada. Considera una navegación lateral o un filtro basado en menú desplegable.

Entradas

1. Inventario de Contenido: Una lista de etiquetas y sus paneles de contenido correspondientes.
2. Contexto de Uso: Dónde residirán las pestañas (por ejemplo, área de contenido principal, barra lateral o dentro de un modal).
3. Nivel de Prioridad: ¿Es este el enfoque principal de la página o un detalle secundario?
4. Sistemas Existentes: Espaciado fluido, escalas tipográficas y definiciones de estado interactivo.

Salidas

1. Especificación de Anatomía de Pestañas: Definiciones visuales para los Disparadores (las pestañas), la Lista de Pestañas (el contenedor) y los Paneles (el contenido).
2. Matriz de Estados: Tratamientos visuales definidos para los estados Predeterminado, Flotante, Activo, Enfoque y Deshabilitado.
3. Estrategia Responsiva: Reglas para manejar el desbordamiento (Desplazable, Envuelto o Contraído en Acordeón/Selección).
4. Plan de Accesibilidad: Roles ARIA, mapeo de teclado y reglas de gestión de enfoque.

Flujo de Trabajo

1. Definir la Relación de Contenido

Asegúrate de que todas las pestañas estén en el mismo nivel de jerarquía y se relacionen con la misma entidad padre. Las etiquetas deben ser cortas (1-3 palabras) y usar mayúsculas consistentes.

2. Establecer la Anatomía Visual

Aplica el sistema-de-jerarquía-visual para definir la lista de pestañas:

• La Pestaña Activa: Debe ser la más prominente. Usa una combinación de color, peso de fuente e indicador visual (como un borde inferior o relleno de fondo).
• La Pestaña Inactiva: Debe verse interactiva pero secundaria.
• El Panel de Contenido: Generalmente comparte un contenedor visual o alineación con la pestaña activa para crear una sensación "conectada".

3. Definir la Lógica de Interacción

• Cambio Inmediato: El contenido debe cambiar instantáneamente al interactuar.
• Flotante vs. Clic: Las pestañas nunca deben cambiar al pasar el ratón; requieren un clic o toque explícito.
• Estado Predeterminado: La primera pestaña suele estar activa por defecto a menos que el usuario regrese a un estado específico.

4. Optimizar para Espaciado y Toque

Aplica sistema-de-espaciado-fluido y sistema-de-estado-interactivo:

• Objetivos Táctiles: Cada disparador de pestaña debe cumplir con WCAG 2.2 SC 2.5.8 (mínimo 24x24px); prefiere 44x44px para interfaces de pestañas principales.
• Espaciado Interno: Usa espaciado consistente entre pestañas (generalmente --space-s o --space-m).
• Indicador Activo: Asegúrate de que la línea o el fondo "Activo" sea lo suficientemente grueso para verse claramente.

5. Planificar la Capacidad de Respuesta

Determina cómo maneja la lista de pestañas los viewports estrechos:

• Desplazamiento Horizontal: El patrón móvil más común. Permite que la lista de pestañas se desborde horizontalmente con un sutil desvanecimiento o flecha para indicar más contenido.
• Transformación en Acordeón: Para contenido largo, transforma las pestañas en un diseño de acordeón en móvil.
• Menú de Selección: Para pestañas con muchas utilidades, reemplaza la lista de pestañas con un elemento <select> en móvil.

Reglas de Decisión

• La Regla de las "Etiquetas": Si las etiquetas varían significativamente en longitud, usa pestañas alineadas a la izquierda. Si son consistentes y pocas, usa pestañas centradas o justificadas.
• Horizontal vs. Vertical:
  • Horizontal: Estándar para organización en la parte superior del contenido.
  • Vertical: Mejor para listas profundas (configuraciones) o cuando el espacio horizontal es limitado pero el vertical es abundante.
• La Regla de los "Siete": Limita las pestañas horizontales a 7 elementos. Si necesitas más, reevalúa tu arquitectura de información o usa un diseño vertical.
• Indicador Activo: Usa siempre más que solo color para indicar el estado activo (por ejemplo, un subrayado de 2px-3px o un cambio de peso de fuente en negrita).

Restricciones

• Accesibilidad: Sigue el patrón de Pestañas ARIA APG — role="tablist" en el contenedor, role="tab" con aria-selected y aria-controls en cada disparador, y role="tabpanel" con aria-labelledby apuntando de vuelta a su pestaña. Solo la pestaña activa tiene tabindex="0"; las pestañas inactivas usan tabindex="-1" (tabindex móvil).
• Modelo de Activación: Prefiere la activación automática (las teclas de flecha mueven el enfoque y cambian el contenido del panel inmediatamente) para paneles rápidos y ligeros. Usa activación manual (las teclas de flecha solo mueven el enfoque; Enter/Espacio confirma) si el cambio desencadena una costosa solicitud de red.
• Navegación por Teclado: Flecha Izquierda/Derecha (o Arriba/Abajo para pestañas verticales) se mueve entre pestañas; Inicio/Fin salta a la primera/última pestaña; Tabulador mueve el enfoque fuera de la lista de pestañas hacia el panel activo.
• Contraste: Los estados Activo e Inactivo deben cumplir con WCAG AA (4.5:1 para texto).
• Capacidad de Respuesta: Las pestañas nunca deben causar desplazamiento horizontal de la página; la propia lista de pestañas debe manejar el desbordamiento.

Patrones de Falla Comunes

• Estado Activo Oculto: Usar un cambio de color sutil que es difícil de ver, dejando a los usuarios inseguros sobre qué sección están viendo.
• Salto de Contenido: Paneles de pestañas que varían enormemente en altura, haciendo que el pie de página salte hacia arriba y hacia abajo mientras los usuarios cambian de pestaña.
• Mal Uso para Navegación: Usar pestañas para enlazar a páginas separadas, lo que rompe las expectativas del usuario sobre el cambio instantáneo de contenido.
• Truncamiento en Móvil: Cortar las etiquetas de las pestañas en móvil sin proporcionar una forma de ver el resto.
• Falta de Estados de Enfoque: Olvidar diseñar un anillo de enfoque visible para usuarios de teclado.

Criterios de Validación

• Todas las pestañas están relacionadas con el mismo contexto.
• El estado activo es visualmente distinto (más que solo color).
• Cada disparador de pestaña cumple al menos con el mínimo de objetivo táctil de 24x24px de WCAG 2.2 (preferiblemente 44x44px).
• Los roles ARIA (tablist, tab, tabpanel) están asignados correctamente, con aria-selected y tabindex móvil implementados.
• La navegación por teclado (teclas de flecha, Inicio/Fin) es compatible según el patrón de Pestañas ARIA APG.
• El comportamiento responsivo (desplazamiento, acordeón o selección) está definido.
• Los paneles de contenido mantienen una relación visual consistente con las pestañas.