Un interruptor parece sencillo. Un pequeño control que cambia entre activado y desactivado. Pero los interruptores confunden a los usuarios más que casi cualquier otro elemento de formulario. La gente duda. No sabe si al accionar el interruptor algo cambia al instante o si hay que esperar a un botón de enviar. No sabe qué lado significa sí y cuál significa no. Un solo interruptor mal colocado en un formulario puede hundir tus tasas de envío. El interruptor adecuado en el sitio adecuado pasa desapercibido.
Mira cualquier formulario con interruptores y fíjate en lo que hace la gente de verdad. Se mueve despacio. Se queda con el cursor encima. Vuelve atrás para comprobar qué controla el interruptor. Busca botones de enviar porque no está segura de que el cambio del interruptor haya surtido efecto. Estos no son errores del usuario. Son problemas de diseño. Los interruptores tienen una función concreta en los formularios. Hacen una cosa bien. No lo hacen todo. Entender cuándo tienen cabida y cuándo no marca la diferencia entre un formulario que fluye y uno que confunde.
El problema de llamar interruptor a todo
La palabra interruptor significa algo concreto. Un interruptor alterna entre dos estados opuestos. Estás en el estado A o en el estado B. Nada intermedio. Nada más. Pero muchos formularios llaman interruptores a sus preguntas de sí o no, y no lo son. Una pregunta como "¿Quieres recibir correos promocionales?" no es un interruptor. Es una pregunta de sí o no que pertenece a un formulario. Un interruptor de verdad es "Activar modo oscuro". El control cambia tu experiencia ahora mismo. El formulario no necesita un botón de enviar para que ese cambio surta efecto.
Esta confusión crea fricción real. Pon un interruptor de verdad en medio de un formulario lleno de campos de texto y botones de opción. Los usuarios no sabrán si el cambio del interruptor se aplicó al momento o si aún tienen que pulsar enviar. Pueden accionarlo, pensar que no pasó nada, volver a accionarlo y luego confundirse cuando el formulario muestra el estado contrario al que eligieron.
Cuándo tiene sentido un interruptor en un formulario
Un interruptor solo pertenece a un formulario cuando se cumplen a la vez dos condiciones. Primera, la elección debe ser binaria. Exactamente dos estados. Sí o no. Activado o desactivado. Nada más. Segunda, la elección debe surtir efecto de inmediato sin botón de enviar. El usuario acciona el interruptor y el estado cambia al instante.
En la mayoría de los formularios no se cumple ninguna de las dos. La mayoría necesita un botón de enviar al final. Todos los cambios se aplican a la vez cuando alguien pulsa enviar. Poner un interruptor en un formulario con botón de enviar crea confusión porque el interruptor parece que debería funcionar al instante, pero todo el formulario espera al envío.
Los interruptores funcionan en los ajustes. Los interruptores funcionan en los paneles de cuenta donde cada cambio es en vivo. Los interruptores no funcionan en formularios estándar donde recoges información y pides que se envíe al final. Si tu formulario tiene botón de enviar, tus preguntas de sí o no deberían usar casillas o botones de opción en lugar de interruptores.
Interruptor o casilla en los campos de formulario
La diferencia visual entre un interruptor y una casilla es evidente. Pero lo que importa es la diferencia funcional. Una casilla es un control de formulario que espera al envío. Puedes marcar varias casillas. Puedes desmarcarlas. No pasa nada hasta que envías el formulario. Un interruptor es un control de estado que a menudo cambia las cosas al instante. El formulario no necesita envío para que el cambio surta efecto.
Por eso las investigaciones de un grupo de referencia en usabilidad muestran que los usuarios se confunden cuando mezclas interruptores y casillas en el mismo formulario. Los interruptores que actúan al instante se sienten totalmente distintos de las casillas que esperan. Mezclarlos envía señales contradictorias sobre lo que pasa cuando alguien interactúa con el formulario.
Si tienes una pregunta binaria de sí o no en un formulario que necesita botón de enviar, usa una casilla o una pareja de botones de opción. Ambas resultan familiares. Ambas tienen sentido en el contexto de un formulario. Los usuarios entienden que están seleccionando algo que se enviará, no activando un cambio inmediato.
Cuándo usar botones de opción en lugar de un interruptor
Un interruptor solo puede mostrar un estado a la vez. Ves activado o desactivado. Pero a veces los usuarios necesitan ver las dos opciones a la vez para decidir. Ahí los botones de opción funcionan mejor que un interruptor.
Ejemplo: un formulario que pregunta "¿Qué plan quieres?" con las opciones "Básico" o "Premium". Podrías usar un interruptor para alternar entre ellos. Pero el usuario no puede ver los dos planes uno al lado del otro. Tiene que accionar el interruptor para ver cuál es la otra opción. Una pareja de botones de opción muestra las dos opciones a la vez. El usuario ve Básico a la izquierda y Premium a la derecha. Puede comparar y elegir sin accionar nada.
Siempre que quieras que los usuarios comparen dos opciones o vean las dos elecciones, usa botones de opción. Siempre que el interruptor sea la única forma de alternar entre opciones y los usuarios no puedan compararlas, probablemente sean mejores los botones de opción.
Cómo etiquetar un interruptor para que se entienda lo que hace
El mayor problema de los interruptores es el etiquetado. Muchos diseñadores usan solo "Activado" y "Desactivado". Pero ¿activado para qué? El usuario tiene que adivinarlo. Eso crea dudas.
Cada interruptor necesita una etiqueta clara que describa lo que controla. No "Sí/No". Algo como "Activar modo oscuro", "Recibir notificaciones" o "Mostrar opciones avanzadas". La etiqueta le dice al usuario qué pasará si acciona el interruptor.
La etiqueta debe verse de inmediato y estar cerca del interruptor. Si la etiqueta está lejos o es pequeña, los usuarios no la relacionarán con el control. Lo accionarán sin entender qué están cambiando.
Algunos interruptores muestran las etiquetas de activado y desactivado en el propio control. "Sí" en un lado y "No" en el otro. Puede funcionar si las etiquetas son grandes y claras. Pero las pruebas muestran que la gente conoce menos los interruptores de sí/no que los de activado/desactivado. Si usas etiquetas de sí/no, prueba antes con tus usuarios. Pero en general, activado/desactivado es más claro que sí/no en los interruptores.
El problema de accesibilidad de los interruptores
Los interruptores crean problemas reales a los usuarios de lectores de pantalla. Un interruptor visual tiene sentido para quien lo ve. Ve un control deslizarse hacia la derecha y entiende que ahora está activado. Pero un usuario de lector de pantalla no oye nada. El interruptor no tiene etiqueta accesible. El usuario no puede saber en qué estado está el interruptor. No puede saber qué controla.
Crear un interruptor accesible requiere un atributo ARIA llamado aria-pressed. Este atributo indica a los lectores de pantalla que el elemento es un botón y que está pulsado o no pulsado. El usuario del lector de pantalla oye "Botón de modo oscuro, actualmente activado". Sin aria-pressed, el usuario no oye nada con sentido.
Incluso con la configuración ARIA correcta, los interruptores no son controles de formulario naturales. Una casilla es un control de formulario. Todo el mundo sabe qué es una casilla. Un interruptor es un control personalizado que requiere JavaScript adicional. Por eso muchos diseños de formularios accesibles prescinden de los interruptores y usan casillas. Las casillas vienen integradas en todos los navegadores. Funcionan con lectores de pantalla. No necesitan JavaScript personalizado. Simplemente funcionan.
El contraste de color y los indicadores visuales importan en los estados del interruptor
Un interruptor que depende solo del color para mostrar su estado no funcionará para personas con baja visión o daltonismo. Si el interruptor es verde al estar activado y rojo al estar desactivado, un usuario daltónico no puede saber en qué estado está.
Cada interruptor necesita varias señales visuales. Color más forma. Color más posición. Color más texto. La forma del interruptor debe cambiar de posición al accionarse. El círculo interior debe deslizarse de izquierda a derecha. El fondo debe cambiar de color. Juntas, estas tres señales crean redundancia para que cualquier persona con cualquier tipo de discapacidad visual pueda saber si el interruptor está activado o desactivado.
Las etiquetas de texto añaden otra capa. Si el interruptor tiene una etiqueta de activado/desactivado visible en el propio control, la etiqueta refuerza lo que ya muestran el color y la posición. Es redundancia visual. No es un extra. Es accesibilidad.
El tamaño importa en las áreas táctiles
Un interruptor que queda bonito con 24 píxeles de ancho se convierte en una pesadilla en móvil. El usuario intenta tocarlo y acierta en otra cosa. O lo toca varias veces porque no está seguro de que el primer toque se haya registrado.
El tamaño mínimo del área táctil de cualquier elemento interactivo es de 44x44 píxeles. Un interruptor debería ser al menos así de grande. Más grande es mejor, sobre todo en móvil. Un interruptor de 60 píxeles de ancho es mucho más fácil de tocar con precisión que uno de 30 píxeles.
No es una preferencia de diseño. Es un requisito de accesibilidad. Los usuarios con destreza limitada, temblores o simplemente dedos grandes en pantallas pequeñas necesitan interruptores lo bastante grandes para acertar con fiabilidad.
No mezcles interruptores con botones de enviar del formulario
Este es el mayor error. Un formulario con campos de texto, desplegables y otros campos estándar tiene un botón de enviar al final. Todos los cambios se aplican cuando el usuario pulsa enviar. Pero se añade un interruptor al formulario, diseñado para surtir efecto al instante sin envío. El modelo mental del usuario se rompe. Espera que el interruptor espere al envío, como las casillas. Pero el interruptor cambia al momento. Cree que se ha equivocado. Lo vuelve a accionar. Caos.
Si tienes un formulario con botón de enviar, no uses interruptores. Usa casillas para las preguntas de sí o no. Todos los cambios del formulario se aplicarán juntos cuando el usuario pulse enviar. El formulario tiene sentido. El usuario entiende el modelo.
Los interruptores pertenecen a paneles, paneles de ajustes y otros lugares donde cada interacción es inmediata. No pertenecen a formularios que requieren envío.
Cómo gestiona WEMASY los interruptores en los formularios
El creador de formularios de WEMASY incluye interruptores como opción para los campos de formulario. Si decides usar un interruptor, el creador de formularios exige una etiqueta clara. El interruptor es lo bastante grande para el uso táctil. Incluye los atributos ARIA adecuados para la accesibilidad. El creador de formularios también te avisa si añades un interruptor a un formulario que tiene otros tipos de campo y un botón de enviar. Ese aviso está ahí por una razón. Detecta un problema real de usabilidad. Si ves ese aviso, cambia a casillas o botones de opción. Tus usuarios te lo agradecerán.