¿Debería un botón de alternancia mostrar su estado actual o el estado al que cambiará? (2010)
Los controles de alternancia ambiguos —como botones de silencio, iconos de reproducción aleatoria o indicadores de bloqueo en coches— a menudo dejan a los usuarios sin saber si un símbolo muestra el estado actual o lo que ocurrirá al tocarlo. Los comentaristas sostienen que los controles deberían indicar claramente tanto el estado como la acción, a menudo separando el indicador de estado (por ejemplo, una luz o una etiqueta) del control en sí, o usando casillas de verificación y botones de opción simples basados en texto en lugar de toggles ingeniosos solo con iconos. Muchos culpan a las tendencias de diseño plano, con poco espacio y “dribbblizadas”, de sacrificar la claridad, y señalan que esta ambigüedad se vuelve especialmente problemática en contextos de alto riesgo como micrófonos, telemedicina o conducción.
Consenso general sobre la semántica de los toggles
- Muchos sostienen que un toggle debería mostrar el estado actual, no la acción, para que la interfaz pueda inspeccionarse y responder “qué es verdadero ahora mismo”.
- Otros insisten en que un botón es, fundamentalmente, un control de acción y debe decir qué ocurrirá si se pulsa (“Silenciar”, “Activar sonido”), dejando el estado en otro lugar.
- Varios señalan que esto es una falsa dicotomía: los buenos diseños muestran tanto el estado como el posible siguiente estado (por ejemplo, switches con doble etiqueta, o una flecha que indique la transición).
Casillas de verificación, botones de opción y switches con etiqueta
- Las casillas de verificación y los botones de opción son ampliamente elogiados por ser inequívocos, especialmente con etiquetas claras como “Micrófono encendido / Micrófono apagado” o “Silenciado / Con sonido”.
- Algunos lamentan que el móvil y el diseño plano los desplazaran, a pesar de que pueden estilizarse fácilmente con una estética moderna.
- Los toggles con doble etiqueta (por ejemplo, “Encendido [—●] Apagado”) se sugieren repetidamente como el patrón más claro.
Iconos, lenguaje y ambigüedad
- Los toggles solo con icono (micrófono, cámara, avión, encendido, aleatorio) son una gran fuente de confusión, especialmente cuando la diferenciación depende solo de ligeros cambios de color.
- La superposición en inglés de verbo/adjetivo (por ejemplo, “Open”) hace que las etiquetas sean ambiguas; los comentaristas señalan que esto es menos problemático en otros idiomas.
- Conceptos negativos como “Mute” y “Airplane mode” invierten las expectativas: “On” puede significar “sin sonido” o “wifi apagado”.
Metáforas físicas y skeuomorfismo
- Muchos prefieren imitar interruptores físicos: la posición, el estado “presionado” y las luces indicadoras señalan claramente el estado.
- Play/pause se destaca como un caso especial en el que la retroalimentación del entorno (audio/video reproduciéndose) compensa la ambigüedad del icono.
- Algunos piden aprender de los controles de aviación/industriales, donde la consistencia y los indicadores separados son críticos para la seguridad.
Operaciones asíncronas e indicadores separados
- Combinar control y estado en un solo elemento falla cuando las acciones se retrasan o pueden fallar (red, hardware, dispositivos remotos).
- Patrón sugerido: botón para el comando + una luz/etiqueta distinta para el estado real, posiblemente con una retroalimentación intermedia de “pendiente”.
Casos problemáticos reales y restricciones
- Se señalan como confusos: silencio en Microsoft Teams y Discord, bloqueos y maleteros de Tesla, aleatorio en Spotify, modo avión en Kindle y varias interfaces de coches y hardware.
- Algunos sospechan de patrones oscuros en los toggles de suscripción/cancelación y en las casillas de consentimiento por correo electrónico.
- Otros señalan las limitaciones de espacio en móvil y el tamaño del área táctil como restricciones reales, pero argumentan que eso no excusa la ambigüedad ni la mala accesibilidad.