¿El botón de alternancia debe mostrar el estado actual o el estado al que cambiará? (2010)

¿El botón de alternancia debe mostrar el estado actual o el estado al que cambiará?

• Un botón de alternancia también debe cumplir la función de informar al usuario del estado actual.
• Si un botón de alternancia muestra "apagado" cuando está en estado "encendido", puede generar confusión.
• Debe evitarse el uso de controles flip-flop en botones o menús.

Un interruptor de alternancia puede mostrar tanto el estado actual como el estado al que cambiará

• Una forma de mostrar ambos es colocar texto fuera del botón para indicar tanto el estado actual como el estado al que cambiará.
• Por ejemplo, el diseño del interruptor de iOS muestra el estado "encendido" en azul, mientras que "apagado" no lo hace.
• El diseño del interruptor de OS X no es ambiguo, y el usuario puede entender claramente el estado actual.

Debe evitarse el uso del botón de alternancia de Twitter

• El botón de alternancia de Twitter proporciona información al pasar el mouse por encima, pero en pantallas táctiles puede generar confusión.

En inglés, "on" y "off" pueden ser tanto adverbios como adjetivos

• Es recomendable usar verbos o adjetivos en los botones para ofrecer etiquetas más claras.
• Ejemplos: "activar/desactivar", "iniciar/detener"

Es importante distinguir entre estado y acción

• Cuando la alternancia representa una acción (por ejemplo, reproducir/pausar), debe mostrar la acción que ocurrirá al hacer clic.
• Cuando la alternancia representa una opción (por ejemplo, aleatorio/reproducción normal), debe mostrar el estado actual.

Puede considerarse el uso de una casilla de verificación

• Si el cambio de estado puede resumirse como una pregunta de "sí/no", usar una casilla de verificación puede ser apropiado.

En lugar de un botón de alternancia, usar una forma de mostrar tanto el estado como la acción

• Cuando está desactivado, no se resalta el botón; cuando está activado, se resalta para indicar el estado.

Puede considerarse no usar un botón de alternancia

• Por ejemplo, en el caso de aleatorio/reproducción normal, puede usarse una casilla de verificación con la etiqueta "aleatorio".

El botón "Me gusta" de Facebook es un buen ejemplo de botón de alternancia

• En la app de Android de Facebook, el botón "Me gusta" se muestra en gris cuando está desactivado y en azul cuando está activado.

Mostrar tanto el estado actual como la acción es lo más claro

• Es recomendable ofrecer una etiqueta del estado desactivado junto con un botón clicable que permita cambiar al estado activado.

Opinión de GN⁺:

• El diseño de los botones de alternancia puede tener un gran impacto en la experiencia de usuario, y es importante mostrar con claridad tanto el estado actual como el estado al que cambiará.
• El diseño del interruptor de OS X es un buen ejemplo de cómo permitir que el usuario entienda intuitivamente el estado actual sin generar confusión.
• Este artículo puede ayudar a los desarrolladores de software a crear una mejor experiencia de usuario al ofrecer elementos importantes que deben considerarse al diseñar interfaces de usuario.

[GN⁺]

Comentarios en Hacker News

• La confusión con el botón de silencio en Microsoft Teams

  • En la app de Teams, el botón de silencio muestra un micrófono tachado, lo que indica que el micrófono está apagado cuando el silencio está activado.
  • En las apps de llamadas, el mismo ícono indica que no está en silencio, y cambia a un estado con fondo relleno para mostrar el estado de silencio.
  • No hay problema en que el botón muestre el estado actual, pero hace falta saber cómo se verá cuando cambie de estado.
  • Esta confusión puede ser un problema que surge en el diseño de la "flat UI", al intentar interpretar elementos de diseño sin referencias del mundo real.

• El problema de los botones de alternancia inconsistentes en la UI de los vehículos Tesla

  • Los botones del sistema HVAC reaccionan de manera diferente según el tipo de toque y su duración.
  • Cuando conduces y solo puedes mirar la pantalla por un instante, un pequeño error táctil puede provocar una acción no deseada.
  • La UI de conexión Bluetooth de Tesla tiene un diseño muy confuso, y eso es aún más problemático al conducir.

• El mecanismo de retroalimentación de estado en los interruptores de botón pulsador de la NASA

  • Cuando el interruptor está apagado, todas las luces están apagadas; al pulsarlo, se enciende una luz amarilla, y cuando el dispositivo deseado realmente se enciende, la luz amarilla se apaga y se enciende una luz verde.
  • Esto proporciona confirmación tanto de que se pulsó el interruptor como de que la acción realmente se ejecutó.

• La añoranza por la desaparición de las casillas de verificación

  • Las casillas de verificación eran perfectas y no tenían ambigüedad, pero a los diseñadores de smartphones no les gustaban.

• El diseño confuso de la UI en la pantalla del tablero de Tesla

  • Una etiqueta que dice "Open" parece indicar claramente que esa parte está abierta, pero en realidad el usuario no puede saber que es un botón para abrir ese componente.

• Los problemas de los botones de alternancia y cómo resolverlos

  • Los botones de alternancia pueden generar confusión porque combinan al mismo tiempo el estado del sistema y la acción que cambia ese estado.
  • Un "ON" que representa el estado actual puede en realidad significar la acción de cambiar a "OFF".
  • La solución es separar el estado de la acción: usar una etiqueta fuera del botón o mantener el ícono igual y cambiar alguna otra propiedad del botón.

• El problema de la asincronía en los botones de alternancia

  • Al pulsar el botón, el estado del sistema puede no cambiar de inmediato, así que puede ser necesario pulsarlo varias veces para asegurarse de que cambie al estado deseado.
  • Si hubiera botones separados para cada estado, no habría problema aunque se pulse varias veces.

• La ventaja del diseño de alternancia deslizante de Apple

  • El toggle deslizante de Apple muestra claramente tanto el estado actual como el estado al que cambiará.
  • Las funciones activadas se distinguen con fondo azul y las desactivadas con fondo gris.

• La necesidad de mostrar con claridad el estado actual y el estado al que cambiará un botón de alternancia

  • Debe quedar claro cuál es el estado actual y a qué estado cambiará al modificar el toggle.
  • Los botones de reproducir/pausa siguen precedentes físicos, y como es evidente si el medio se está reproduciendo o no, el usuario puede entenderlos aunque el ícono no cambie.
  • Cambiar ligeramente el color de un toggle no ayuda; hace falta una etiqueta.