Sistema de Diseño de Interruptores y Conmutadores

¿Qué hace Sistema de Diseño de Interruptores y Conmutadores?

Propósito

El Sistema de Diseño de Interruptores y Conmutadores proporciona un marco estandarizado para diseñar, posicionar e implementar controles de estado binario en interfaces web. Los interruptores representan interruptores físicos de encendido/apagado que activan o conmutan inmediatamente un cambio de estado, establecen una preferencia o el estado de una función sin requerir un paso de envío de formulario manual (como hacer clic en "Guardar").

Sin un sistema de diseño dedicado para interruptores, las interfaces con frecuencia utilizan interruptores incorrectamente en lugar de casillas de verificación, no cumplen con los requisitos de contraste WCAG en estados deshabilitados o inactivos, carecen de etiquetas de estado claras, crean objetivos táctiles demasiado pequeños para pantallas móviles o provocan cambios de diseño inesperados y efectos secundarios de fondo sin retroalimentación visual inmediata.

Este sistema establece reglas para la geometría del interruptor, las proporciones de la pista y el pulgar, la alineación de las etiquetas, el mapeo de colores de estado, la accesibilidad del teclado (role="switch"), la expansión del área táctil, los diseños de listas adaptables y los estados de carga/pendientes asíncronos.

Casos de Uso

• Configuración y Preferencias de Aplicaciones: Activar preferencias instantáneas del sistema (por ejemplo, "Notificaciones Push", "Tema Oscuro", "Guardar Borradores Automáticamente" o "Autenticación de Dos Factores").
• Selección de Período de Suscripción y Facturación: Cambiar las tarjetas de planes de precios entre ciclos de facturación Mensual y Anual con insignias de descuento en línea.
• Control de Filas en Tablas de Datos: Habilitar o deshabilitar el acceso de usuarios individuales, integraciones de API, webhooks o reglas automatizadas directamente dentro de las filas de la tabla de datos.
• Conmutadores de Indicadores de Funciones y Modos del Sistema: Activar estados operativos en paneles de desarrollador (por ejemplo, "Modo Mantenimiento", "Registro de Depuración" o "Funciones Beta").
• Paneles de Privacidad y Consentimiento de Cookies: Gestionar permisos de seguimiento granulares (por ejemplo, "Cookies de Analítica", "Cookies de Marketing") dentro de cajones deslizables o diálogos modales.

Cuándo NO Usar

• Selección de Múltiples Opciones: Para elegir entre 3 o más opciones mutuamente excluyentes, use sistema-de-control-segmentado o sistema-de-selector-y-combobox-personalizado.
• Envíos de Formularios que Requieren Aprobación Explícita: Para términos de acuerdo (por ejemplo, "Acepto los Términos y Condiciones") dentro de un formulario estándar de múltiples campos que requiere hacer clic en un botón "Enviar", use casillas de verificación estándar (sistema-de-diseño-de-formularios).
• Elección Binaria con Efecto No Inmediato: Si al activar el control no se aplica hasta que se presiona un botón secundario "Aplicar" o "Guardar Cambios", use una casilla de verificación en lugar de un interruptor.
• Selección Masiva en Tablas: Para seleccionar múltiples elementos para operaciones por lotes (por ejemplo, "Eliminar Seleccionados"), use casillas de verificación (sistema-de-ui-de-tabla-de-datos).

Entradas

1. Definición de Estado: Parámetros de estado binario (Apagado/No Marcado/false vs. Encendido/Marcado/true).
2. Contexto y Modo de Ejecución: Cambio de estado inmediato del lado del cliente (por ejemplo, interruptor de tema oscuro) vs. Efecto secundario asíncrono del servidor (por ejemplo, habilitar/deshabilitar webhook de API).
3. Estructura de Etiquetado: Texto de etiqueta en línea, texto de ayuda/descripción de soporte y requisito de insignia de estado.
4. Contexto de Diseño: Tarjeta de configuración independiente, fila densa de tabla, grupo de preferencias de múltiples elementos o interruptor de precios principal.
5. Tema y Paleta de Tokens: Colores de superficie, color de pista activa, color de pista inactiva, color del pulgar y tokens de desplazamiento del anillo de enfoque.

Salidas

1. Geometría del Interruptor y Especificación de Tokens: Dimensiones espaciales para ancho de pista, alto, diámetro del pulgar, radio de esquina y tiempos de transición (ancho: 44px, alto: 24px, pulgar: 20px).
2. Plano de Estado y Contraste: Tokens de paleta que garantizan un contraste mínimo de 3:1 para objetos gráficos WCAG para pistas y pulgares en estados Predeterminado (Apagado), Activo (Encendido), Flotante, Enfoque Visible, Deshabilitado y Pendiente.
3. Especificación de Diseño Estructural y Tipografía: Relaciones de espaciado entre el elemento interruptor, la etiqueta principal (h4/span), el texto de descripción y los indicadores de estado opcionales (ON/OFF).
4. Mapeo de Accesibilidad y ARIA: Estructura semántica HTML <button role="switch" aria-checked="true|false"> con asociación de etiqueta para lectores de pantalla (aria-labelledby / aria-describedby).
5. Protocolo de Manejo Asíncrono: Especificación del estado de carga visual (pulgar con spinner o reducción de opacidad de la pista) para verificación de red en segundo plano.

---

Flujo de Trabajo

1. Determinar la Semántica del Control (Interruptor vs Casilla de Verificación)

Antes del diseño visual, confirme que la intención de interacción coincide con el modelo mental del interruptor físico:

• Efecto Inmediato: Al activar el interruptor, el cambio se aplica instantáneamente (o activa una solicitud de fondo inmediata).
• Acción Independiente: Opera sin necesidad de un botón explícito de "Guardar" o "Enviar".
• Metáfora de Estado Encendido/Apagado: Representa activar o desactivar una función o estado, en lugar de hacer una selección en un cuestionario de múltiples campos.

2. Establecer la Geometría Espacial y los Márgenes Táctiles

Diseñe componentes de interruptor con proporciones que se alineen con las pautas táctiles móviles manteniendo la armonía visual en escritorio:

[   PISTA INACTIVA / APAGADA   ]          [    PISTA ACTIVA / ENCENDIDA    ]
+------------------------------+          +-------------------------------+
|  (Pulgar)                    |  ----->  |                         (Pulgar) |
|   20px                       |          |                       20px     |
+------------------------------+          +-------------------------------+
<-------- 44px ---------------->          <---------- 44px -------------->
           24px de alto                                24px de alto

• Escala Estándar de Interruptor:
  • Ancho de Pista: 44px (o 2.75rem)
  • Alto de Pista: 24px (o 1.5rem)
  • Radio de Borde de Pista: 999px (Forma de píldora completa)
  • Diámetro del Pulgar: 20px (dejando un margen interno de pista de 2px en todos los lados)
  • Radio de Borde del Pulgar: 50% (Círculo)
• Escala Compacta/Densa de Interruptor (Filas de Tabla):
  • Ancho de Pista: 36px
  • Alto de Pista: 20px
  • Diámetro del Pulgar: 16px (con margen interno de 2px)
• Área Táctil Encerrada:
  • La zona interactiva DEBE expandirse al menos a 44x44px en dispositivos móviles usando pseudo-elementos (::before / ::after) o relleno, evitando clics incorrectos en pantallas táctiles.

3. Definir los Tokens de Color de Estado y las Métricas de Contraste

Para cumplir con los requisitos de contraste no textual WCAG 2.1 / 2.2 AA (SC 1.4.11 - contraste mínimo 3:1), siga pares de tokens de color estrictos:

• Estado Inactivo/Apagado:
  • Fondo de Pista: Superficie gris neutra (#E2E8F0 / modo oscuro: #334155).
  • Borde de Pista: Borde de 1px (#CBD5E1 / modo oscuro: #475569) para garantizar un contraste 3:1 contra superficies de fondo claras.
  • Color del Pulgar: Blanco sólido o superficie clara (#FFFFFF / modo oscuro: #F8FAFC).
  • Icono Opcional dentro del Pulgar: Icono de Luna/Sol o Cruz/Marca (12px) para doble retroalimentación visual.
• Estado Activo/Encendido:
  • Fondo de Pista: Color de acción del sistema o marca de alto contraste (#2563EB azul primario o #16A34A verde éxito). La relación de contraste contra la superficie de la página de fondo debe superar 3:1.
  • Borde de Pista: Borde transparente o que coincida con el activo.
  • Color del Pulgar: Blanco sólido (#FFFFFF) con transición CSS suave (transform: translateX(20px) durante 200ms cubic-bezier(0.4, 0, 0.2, 1)).
• Estados Flotante y de Enfoque:
  • Flotante: Cambio sutil de brillo de la pista (+5% o -5%) o agrandamiento de la sombra del pulgar (box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15)).
  • Enfoque Visible: Anillo de enfoque desplazado de 2px distintivo (outline: 2px solid #2563EB; outline-offset: 2px).
• Estado Deshabilitado:
  • Opacidad de Pista y Pulgar: Reducida a 0.5 o 0.4 con cursor: not-allowed.

4. Diseñar la Alineación de Etiquetas y la Jerarquía de Descripción

Los interruptores siempre deben ir acompañados de etiquetas de texto claras. Nunca presente un interruptor aislado sin una etiqueta accesible o contexto visible.

• Diseño de Fila Horizontal (Tarjeta de Preferencia Predeterminada):
  • Coloque el bloque de texto a la izquierda (Título + Descripción) y coloque el interruptor en el borde derecho.
  • Alinee el centro vertical de la pista del interruptor con la primera línea del texto del título (no centrado en descripciones de varias líneas).
  • Mantenga un espacio mínimo de 16px entre el texto del título y el elemento interruptor.
• Diseño en Línea de Formulario:
  • Coloque el interruptor a la izquierda y el texto de la etiqueta a la derecha (gap: 12px), recomendado cuando los interruptores están integrados dentro de campos de formulario densos.
• Diseño de Conmutador de Nivel de Precios:
  • Centre el interruptor horizontalmente entre dos opciones de etiqueta explícitas (por ejemplo, "Mensual" — [ Interruptor ] — "Anual (Ahorra 20%)"). Al hacer clic en cualquier etiqueta de texto o en el interruptor se cambia el estado activo.

5. Manejar Efectos Secundarios Asíncronos y Estados de Carga

Cuando un interruptor activa una llamada API asíncrona (por ejemplo, cambiar una configuración de recurso en la nube o habilitar una integración):

1. Estado Visual Optimista: Deslice instantáneamente el pulgar a la posición objetivo (aria-checked="true").
2. Retroalimentación Pendiente: Renderice una superposición sutil de spinner dentro del pulgar o reduzca ligeramente la opacidad de la pista durante la latencia de la red.
3. Recuperación de Errores: Si el servidor devuelve un error, muestre un mensaje emergente/toast en línea y anime suavemente el pulgar de vuelta a su estado anterior con aria-checked="false".

6. Implementar Patrones de Accesibilidad WCAG AA

Asegure la navegación nativa por teclado y el soporte de lectores de pantalla en todos los motores de navegador:

• Marcado HTML Semántico:

  <button
    type="button"
    role="switch"
    aria-checked="true"
    id="switch-notificaciones-push"
    aria-labelledby="etiqueta-notificaciones-push"
    aria-describedby="desc-notificaciones-push"
    class="toggle-switch">
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </button>
  

• Interacción por Teclado:
  • Enfocable mediante la tecla Tab.
  • Presionar Espacio o Enter cambia el estado aria-checked (true <-> false) y activa el manejador asociado.
• Anuncios del Lector de Pantalla:
  • Los lectores de pantalla anuncian explícitamente: "Notificaciones Push, interruptor, activado" o "Notificaciones Push, interruptor, desactivado".
  • NO escriba texto como "On/Off" dentro de la etiqueta si duplica el estado ARIA nativo del interruptor.

---

Reglas de Decisión

Matriz de Selección: Interruptor vs. Casilla de Verificación vs. Control Segmentado

Escenario / Requisito	Control Recomendado	Motivo
Opción binaria única con efecto inmediato (ej., Tema Oscuro)	Interruptor	El modelo de ejecución instantánea coincide con el interruptor físico.
Opción binaria única dentro de un formulario enviado (ej., Aceptar Términos)	Casilla de Verificación	Los cambios no se aplican hasta que se hace clic en el botón "Enviar".
Selección de múltiples elementos de una lista (ej., Seleccionar 5 correos)	Casillas de Verificación	Comportamiento estándar de selección por lotes.
Elegir entre 2 modos distintos (ej., Vista Cuadrícula vs. Vista Lista)	Control Segmentado	Ambas etiquetas de estado permanecen visibles lado a lado.
Configurar una opción activada/desactivada en una vista de lista móvil	Interruptor	Objetivo de pulgar claro y retroalimentación de estado explícita.

Matriz de Posición de Etiqueta

Contexto de Diseño	Posición del Interruptor	Posición de la Etiqueta	Comportamiento Espacial
Lista de Preferencias de Configuración	Alineado a la derecha	Alineado a la izquierda	justify-content: space-between en todo el contenedor de la fila.
Campo de Formulario en Línea	Alineado a la izquierda	Alineado a la derecha	display: inline-flex; align-items: center; gap: 12px.
Conmutador de Precios Principal	Anclado al centro	Flanqueando Izquierda y Derecha	Flanqueado por las opciones de texto "Mensual" y "Anual".

---

Restricciones

• Accesibilidad (WCAG 2.1 / 2.2 AA):
  • Relación de contraste no textual mínima de 3:1 para el borde/fondo de la pista y el pulgar contra el fondo de la página en los estados Encendido y Apagado.
  • Relación de contraste de texto mínima de 4.5:1 para todas las etiquetas asociadas y el texto de ayuda de descripción.
  • El anillo de enfoque debe proporcionar al menos 3:1 de contraste contra el fondo circundante y medir al menos 2 px de grosor.
• Objetivos Táctiles:
  • El área táctil interactiva debe medir al menos 44x44px en dispositivos táctiles (WCAG 2.5.5 / 2.5.8).
• Independencia del Color:
  • El color NO debe ser el único indicador del estado. La posición espacial física del pulgar (izquierda = apagado, derecha = encendido) y el valor semántico aria-checked deben comunicar el estado independientemente del color.

---

Patrones de Falla Comunes

• Mal uso de Interruptores en Formularios Enviados: Usar interruptores dentro de formularios donde los cambios no se aplican hasta hacer clic en un botón "Guardar" separado, confundiendo a los usuarios que esperan una aplicación instantánea.
• Contraste Inadecuado de la Pista: Usar pistas grises claras (#F1F5F9) contra fondos blancos sin un borde delimitador, haciendo que el interruptor sea invisible para usuarios con baja visión.
• Comunicación de Estado Solo por Color: Depender estrictamente de colores de pista rojos vs. verdes sin mover la posición del deslizador del pulgar o actualizar los atributos ARIA.
• Objetivos Táctiles Microscópicos: Restringir la zona interactiva a la pista visual de 36x20px, causando frustración y toques fallidos en pantallas móviles.
• Falta de Etiquetas Accesibles: Renderizar interruptores de icono independientes sin un aria-label o referencia aria-labelledby.
• Texto de Varias Líneas Superpuesto: Centrar el interruptor verticalmente contra un párrafo de descripción largo de 4 líneas, rompiendo la alineación visual con el título principal.

---

Criterios de Validación

• El interruptor utiliza la estructura semántica HTML <button role="switch" aria-checked="true|false">.
• La pista y el pulgar cumplen con la relación de contraste mínima de 3:1 contra el fondo en los estados ENCENDIDO y APAGADO.
• La navegación por teclado (Tab, Espacio, Enter) cambia suavemente el estado del interruptor y actualiza aria-checked.
• El área táctil se extiende al menos a 44x44px usando relleno invisible o pseudo-elementos.
• El interruptor está emparejado con texto de etiqueta visible y de alto contraste asociado mediante aria-labelledby.
• La posición del interruptor realiza la transición suavemente (transform: translateX()) durante 150 ms–250 ms cumpliendo con prefers-reduced-motion.
• Las listas de configuración adaptables mantienen el espaciado adecuado (gap: 16px) sin que el texto se superponga en pantallas móviles estrechas.