Sistema de Control Segmentado

¿Qué hace Sistema de Control Segmentado?

Propósito

El Sistema de Control Segmentado proporciona una metodología de diseño para selectores compactos y mutuamente excluyentes (también conocidos como Grupos de Botones, Alternancias Deslizantes o Botones Segmentados). A diferencia de los menús de navegación o las pestañas de paneles de contenido, un control segmentado sirve como un modificador en línea dentro de un solo contexto o formulario. Permite a los usuarios alterar inmediatamente el formato de visualización, filtrar un solo conjunto de datos o seleccionar una opción de entrada dentro de un espacio físico altamente restringido.

Un enfoque sistemático asegura que estos controles tengan una relación visual cohesiva, señales interactivas claras, escalado de diseño fluido y patrones de accesibilidad semántica adecuados para evitar que se confundan con botones genéricos o navegación por pestañas.

Casos de Uso

• Cambio de Vista: Cambiar la presentación de visualización de contenido idéntico (ej., "Cuadrícula vs. Lista vs. Mapa" o "Tablero vs. Calendario").
• Alternancias de Precios y Facturación: Elegir frecuencias de facturación (ej., "Mensual vs. Anual") alterando directamente las pantallas de precios.
• Micro-filtrado / Sub-segmentación: Filtrar una lista activa dentro de una subcategoría específica (ej., "Todos vs. No leídos vs. Destacados" en mensajes).
• Selección de Opciones en Línea: Reemplazar menús desplegables voluminosos en formularios para 2 a 5 opciones de alta prioridad (ej., "Pequeño vs. Mediano vs. Grande").
• Conmutadores de Estado Interactivo: Modificar un parámetro métrico activo en gráficos en vivo (ej., periodos de "7D vs. 30D vs. 1A").

Cuándo NO Usar

• Navegación de Página Completa: Si al hacer clic en un elemento se cambia la URL de la página o se navega al usuario fuera del contexto de vista actual, use sistema-de-navegacion-del-sitio.
• Cambio de Panel de Contenido Grande: Si al cambiar opciones se muestran bloques de contenido completamente diferentes con diseños complejos (como paneles de configuración o pestañas de documentos), use sistema-ui-de-pestanas.
• Recuento Elevado de Opciones: Si hay más de 5 opciones, use una selección desplegable o un cajón de filtros para evitar la saturación visual y el desbordamiento de texto horizontal.
• Configuraciones de Selección Múltiple: Si los usuarios pueden seleccionar más de una opción activa simultáneamente, use casillas de verificación agrupadas o etiquetas (sistema-de-insignias-y-etiquetas).
• Alternancias Dinámicas Binarias: Para configuraciones de activación/desactivación únicas que desencadenan un proceso de fondo inmediato (ej., "Habilitar Notificaciones"), use un Interruptor de Alternancia estándar (implementacion-de-interruptor-accesible).

Entradas

1. Inventario de Opciones: La lista de etiquetas, iconos o valores mutuamente excluyentes (generalmente de 2 a 5 elementos).
2. Alcance del Control: Si el control actúa como una entrada de formulario, un modificador de vista de diseño o un conmutador de métricas.
3. Restricciones del Contenedor: El ancho exacto y el entorno de diseño (ej., en línea junto a la búsqueda, centrado en tarjetas de precios o ancho completo en móvil).
4. Tokens de Estilo: Escala tipográfica, variables de espaciado (sistema-de-espaciado-fluido), estados interactivos (sistema-de-estados-interactivos) y tokens de color.

Salidas

1. Especificación de Anatomía del Control: Definición visual de la Pista (el contenedor de fondo), los Segmentos (botones individuales) y el Indicador Activo (el fondo deslizante o resaltado).
2. Mapeo ARIA de Comportamiento: Selección de roles ARIA correctos (role="radiogroup" vs. role="tablist") y reglas de navegación por teclado.
3. Matriz de Transición de Estados: Definiciones de estilo para los estados Predeterminado, Flotante, Activo/Seleccionado, Enfoque y Deshabilitado.
4. Reglas de Flujo Responsivo: Especificaciones para escalado horizontal, comportamiento fluido de ancho completo y reflujo móvil o degradación a <select>.

Flujo de Trabajo

1. Identificar la Intención Semántica

Determinar si el control modifica un valor o modifica una vista de visualización:

• Entrada de Formulario o Micro-filtro: Actúa semánticamente como un Grupo de Radio. Cambia un valor almacenado o enviado al enviar, o refiltra inmediatamente una lista en línea.
• Controlador de Vista: Actúa semánticamente como una Lista de Pestañas. Cambia el panel visible activo o la presentación dentro del mismo contenedor.

2. Diseñar la Anatomía Visual

Construir un componente visual unificado y altamente pulido. El diseño consta de tres capas principales:

• La Pista: Un contenedor horizontal único con un color de fondo sutil (ej., gris de bajo contraste), relleno pequeño (generalmente 2px a 4px) y esquinas redondeadas (semi-redondeadas o de píldora).
• Los Segmentos: Botones colocados hombro con hombro dentro de la Pista. Deben compartir el mismo ancho (justificado) o adaptarse al ancho del contenido con relleno consistente.
• El Indicador Activo: Una tarjeta física deslizante o resaltado con un fondo distintivo (a menudo blanco o color del tema principal) y una sombra sutil (sistema-de-elevacion-y-profundidad) que se coloca debajo del texto activo para elevarlo visualmente.

3. Establecer la Coreografía de Estado y Movimiento

Configurar retroalimentación visual distinta para cada fase de interacción:

• Estado Predeterminado: El texto no activo usa un color neutro secundario con una relación de contraste suficientemente alta (al menos 4.5:1).
• Estado Flotante: Un resaltado de fondo sutil al pasar el ratón sobre el segmento objetivo para indicar que se puede hacer clic.
• Estado Seleccionado: El texto cambia a estilo primario/negrita, y el Indicador Activo se desliza detrás de él.
• Estado de Enfoque: Al navegar con el teclado, dibujar un contorno de enfoque distintivo y de alto contraste alrededor del segmento activo. El indicador de enfoque no debe recortarse fuera del límite de la Pista.
• Estado Deshabilitado: Opacidad atenuada (generalmente 40%) con el cursor puntero deshabilitado.

4. Anotaciones de Código y Entrega

Anotar los requisitos estructurales para la implementación:

• Distribución de Igual Ancho: Especificar alineación flexbox (flex: 1 1 0%) para distribuir los segmentos equitativamente cuando sea apropiado.
• Transición del Indicador Deslizante: Especificar reglas de transición CSS (transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)) para la tarjeta del indicador activo deslizante, asegurando que no desencadene un Cambio de Diseño Acumulativo (CLS) utilizando propiedades aceleradas por hardware (transform y opacity en lugar de alterar directamente las propiedades left/width).

5. Planificar Comportamientos Responsivos

Definir cómo se escala el control segmentado en ventanas pequeñas:

• Justificación Fluida: Expandir la Pista y los Segmentos para ocupar el 100% del ancho en pantallas móviles, actuando como una barra inferior o componente de encabezado de ancho completo.
• Truncamiento de Etiqueta y Ancho Mínimo: Exigir anchos mínimos estrictos para los segmentos para evitar que los saltos de línea apilen líneas dentro de un solo botón.
• Degradación a Desplegable por Desbordamiento: Si las opciones no caben dentro de una ventana de 320px sin roturas visuales, intercambiar el diseño del control segmentado por un desplegable <select> nativo utilizando consultas de medios CSS responsivas.

Reglas de Decisión

Patrones de Grupo de Radio vs. Lista de Pestañas

Criterio	Usar Patrón de Grupo de Radio (role="radiogroup")	Usar Patrón de Lista de Pestañas (role="tablist")
Función Principal	Edita una propiedad de datos o filtra una lista en línea.	Cambia entre vistas de diseño o paneles distintos.
Integración en Formulario	Integrado dentro de un <form> o actúa como una entrada.	Fuera de formularios estándar; gestiona modos de vista de diseño.
Rol ARIA	Padre: role="radiogroup", Hijo: role="radio" con aria-checked="true/false".	Padre: role="tablist", Hijo: role="tab" con aria-selected="true/false".
Navegación por Teclado	Las teclas de flecha mueven la selección inmediatamente; Tab sale del grupo.	Las teclas de flecha mueven el foco inmediatamente; Espacio/Enter activa.

Diseño Visual: Ancho Fijo Igual vs. Ancho Fluido Automático

• Ancho Fijo Igual: Mejor para etiquetas cortas y uniformes (ej., "7D", "30D", "90D" o "Cuadrícula", "Lista"). Cada segmento tiene un ancho idéntico, ofreciendo simetría visual.
• Ancho Fluido Automático: Mejor cuando las etiquetas difieren significativamente en longitud de caracteres (ej., "Todos los Elementos" vs. "Pendiente de Verificación"). Cada segmento se ajusta alrededor de su texto con relleno consistente (ej., 12px 16px).

Restricciones

• Relaciones de Contraste: Tanto los segmentos de texto activos como los inactivos deben cumplir con la relación de contraste mínima WCAG AA de 4.5:1 contra su fondo.
• Dimensiones del Objetivo Táctil: Cada segmento individual debe proporcionar un área interactiva mínima de 24x24px (WCAG 2.2 SC 2.5.8), pero se recomienda encarecidamente una altura mínima de 40px a 44px para toques con los dedos sin problemas en móvil.
• Indicadores de Enfoque: El enfoque del teclado debe ser claramente visible en el segmento actualmente seleccionado o en el objetivo de enfoque activo. Asegúrese de que los anillos de enfoque no se recorten ni se oculten detrás de los segmentos adyacentes.
• Sin Ajuste de Texto: El texto del segmento debe ser de una sola línea y nunca debe ajustarse a varias líneas dentro de un botón. Esto rompe el ritmo vertical y causa superposición visual.
• Movimiento Reducido: Si se implementan indicadores deslizantes animados, respete las preferencias del sistema operativo del usuario a través de @media (prefers-reduced-motion: reduce) deshabilitando el efecto de deslizamiento y cambiando instantáneamente la opacidad o los resaltados de contorno.

Patrones de Falla Comunes

• El Cambio de Diseño (CLS): Cambiar el segmento activo altera el ancho del botón activo, causando que los elementos adyacentes salten a la izquierda o a la derecha.
• La Falacia de Navegación: Dar estilo a la navegación global de página principal para que parezcan controles segmentados, confundiendo a los usuarios que esperan cambios de contenido instantáneos dentro de la página.
• Falta de Señal de Selección: Usar solo un cambio sutil en el peso de la fuente o un indicador de bajo contraste, dificultando que los usuarios con baja visión identifiquen qué opción está seleccionada.
• Trampa de Teclado: No vincular las teclas de flecha estándar del teclado dentro del control, obligando a los usuarios que solo usan teclado a presionar Tab a través de cada opción individualmente.
• Aplastamiento Móvil: Permitir que un control de 4 segmentos se encoja en móvil hasta que las etiquetas se superpongan, se trunquen de forma ilegible o se recorten fuera de los límites de la Pista.

Criterios de Validación

• Se elige un patrón ARIA semántico claro basado en la función del control (Grupo de Radio vs. Lista de Pestañas).
• Los segmentos individuales cumplen con el tamaño mínimo de objetivo táctil de 24x24px (44px preferido en móvil).
• Los contrastes de texto inactivo y activo cumplen con WCAG AA (relación >= 4.5:1).
• El indicador activo utiliza propiedades CSS aceleradas por hardware (transform) durante las transiciones deslizantes para prevenir el Cambio de Diseño Acumulativo (CLS).
• El comportamiento responsivo está definido (justificación fluida, ancho mínimo o degradación a menú desplegable).
• El texto dentro de los segmentos permanece en una sola línea sin ajuste vertical ni recorte.
• La degradación de transición @media (prefers-reduced-motion: reduce) se maneja explícitamente.