it-swarm-es.com

¿Debería un botón de alternar mostrar su estado actual o el estado al que cambiará?

Tengo una pregunta rápida sobre los botones que alternan entre dos estados. (Piense en Play/Pause, o Shuffle/Regular Play). Como dice el título, ¿debería la palanca mostrar su estado actual o el estado al que hará la transición?

Creo que la gente está acostumbrada a la convención Play/Pause. Pero el juego Shuffle/Regular puede ser más confuso si muestra el estado de transición en lugar del actual. Por ejemplo, el reproductor de música incorporado en la Xbox 360 lo hace de esta manera: cuando está en modo aleatorio, muestra el ícono de reproducción directa y viceversa y siempre me confunde (¿estoy en modo aleatorio o reproducción directa?).

Lo veo de esta manera: Reproducir/Pausa es más parecido a la acción que al comenzar a reproducir o pausar la reproducción. Sí, detrás de escena es una transición de estado, pero para el usuario, hay una acción. Mientras que Shuffle/Straight Play es una opción y es mejor mostrar el estado actual (y posiblemente solo tenga un ícono y un botón de cambio para mostrar que la opción está habilitada/deshabilitada). Pensamientos?

461
Michael Brown

En About Face 2. (hay un v3 pero no lo tengo) Cooper y Reimann (2003, pp. 341-2) tratan este tema bajo el encabezado "Botones de flip-flop: un idioma de selección para evitar". Sugiero consultar este libro, ya que solo presentaré un extracto:

Los controles del botón Flip-flop son muy eficientes. Ahorran espacio al controlar dos opciones mutuamente excluyentes con un solo control. El problema con los controles de flip-flop es que no cumplen con el segundo deber de cada control: informar al usuario de su estado actual. Si el botón dice ENCENDIDO cuando el estado está apagado, no está claro cuál es la configuración. Sin embargo, si está APAGADO cuando el estado está apagado, ¿dónde está el botón ENCENDIDO? No los uses. ¡No en botones y no en menús!

Los autores (y creo que estos son una autoridad en el tema) presentan dos posibles soluciones: debe deletrear la acción del botón como una frase verbal (p. ej., ¡Cambie al modo retrato, sacrificando así parte del espacio guardado) o utilice alguna otra técnica completamente ( por ejemplo, dos botones de radio).

268
jensgram

Respuesta corta:

Una respuesta bastante tardía, pero me sorprende que nadie aquí haya señalado esto antes: es posible que un interruptor de palanca muestre su estado actual y el estado al que cambiará simplemente al tener texto fuera del botón, en lugar de en él.

Real Life Switches

Respuesta larga:

Como señala dotancohen:

El problema es que en inglés "on" y "off" son adverbios y adjetivos.

¡Los botones que tienen texto fuera de su cuerpo aprovechan este hecho para su beneficio! Sigue leyendo ...


iOS On-Off Switch

Centrémonos en el estado que es azul y dice EN por ejemplo.

iOS ON

¿Puede saber si el interruptor está activado actualmente o si continuará si mueve/hace clic/toca el control deslizante? ¿Es obvio el texto? ¿Es "ON" aquí un estado (adjetivo) o una acción (verbo)? Poco claro. ¿El color es útil para ayudarlo a decidir esto? Probablemente, pero no con certeza: los usuarios de iOS pueden estar acostumbrados a los estados de este diseño, pero no se sabe cómo interpretarían esto los usuarios que no sean iOS. Para ver a qué me refiero, tome este interruptor de disparo de la vida real, que tiene el mismo diseño que el interruptor de iOS: ¿puede saber con seguridad si el interruptor de disparo está actualmente ENCENDIDO?

Ambiguous Trip Switch

El interruptor a continuación está en la línea del diseño de iOS, pero mucho peor ...

Ambiguous On-Off Switch

... ¡ni siquiera está claro qué mitad del control deslizante/clic es!


Unambiguous On-Off Switch

La pregunta de la cita de jensgram ...

Si el botón dice ENCENDIDO cuando el estado está apagado, no está claro cuál es la configuración. Sin embargo, si está APAGADO cuando el estado está apagado, ¿dónde está el botón ENCENDIDO?

... nunca aparece aquí ya que el botón no dice ENCENDIDO ni APAGADO, simplemente se mantiene solo. Además, no hay confusión sobre el contexto de las palabras ON y OFF: son estados muy claros (adjetivos) ya que hacer clic en ellos (en el diseño normal) no haría nada.

Puede ser interesante notar que una modificación a este diseño permitiría que el texto en el lado opuesto del botón se pueda hacer clic/presionar. Si es así, la palabra más cercana al controlador del interruptor es el estado, mientras que otro es la acción, y los roles se invierten cuando se activa el interruptor.

Modded On-Off Switch

Aun así, la perspectiva del usuario del interruptor no se ve alterada: en ningún momento el usuario está confundido sobre el estado actual del interruptor. De hecho, el diseño podría mejorarse aún más para la facilidad de uso al resaltar el estado actual:

Highlighted On-Off Switch


Win8 On-Off Switch

El color del botón indica el estado actual (encendido = ENCENDIDO, como en la vida real), y las palabras Encendido/Apagado debajo del texto de la opción tranquilizan al usuario sobre el estado actual.

414
SNag

Lo que decidas, no hagas lo que hace Twitter.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

El problema es que en inglés "on" y "off" son adverbios y adjetivos. Por lo tanto, busque palabras de reemplazo que sean ya sea verbos o adjetivos para etiquetar el botones con:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

Edición muy tardía: Vea este excelente cambio que diseñó un compañero de trabajo mío, que logra mantener la terminología de "encendido/apagado" pero lo hace sin ambigüedades:

on off switch

35
dotancohen

Un compromiso razonable sería hacer que el botón no esté resaltado (tal vez tenga un color de fondo neutro) cuando esté apagado y resaltarlo (cambiar el color de fondo) cuando esté encendido.

Por ejemplo, mirando esta captura de pantalla de la aplicación Spotify (web), ¿crees que la reproducción aleatoria está activada o desactivada?

Shuffle is most certainly on

26
Marks Polakovs

Creo que lo has entendido bien en tu pregunta.

Si el alternar es una acción (Reproducir/Pausa), debería mostrar lo que sucederá. Entonces, mientras estaba en pausa, mostraría Reproducir y luego, mientras jugaba, muestra Pausa.

Si el alternar es una opción (Aleatorio/Lineal), debería mostrar el estado actual.

Cómo le indico al usuario que un botón es una acción y el otro es una opción, no estoy seguro ...

25
ChrisF

Diría que depende del caso, como dijo ChrisF, es importante distinguir entre un botón de acción y un botón de estado.

Si su botón tiene texto, puede cambiar el texto para mostrar que hacer clic en él hará algo (por ejemplo, "Activar reproducción aleatoria"). Sin embargo, en su caso, dado que es solo un ícono, elegiría solo un ícono aleatorio que se ve habilitado/deshabilitado según el estado. Si está deshabilitado, entonces debe quedar claro para el usuario que es un juego directo. Puede encenderlo o mostrar el botón como presionado.

Considere agregar una información sobre herramientas al pasar el mouse para que sea aún más claro.

20
mbillard

Me sorprende no haber mencionado la técnica utilizada en iOS (y en otros lugares), un botón combinado de acción/estado, donde ambas opciones son visibles, agrupadas y la activa está claramente resaltada.

Terrible arte ascii para demostrar:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

Me detendría justo antes de "no los use".

Sugeriría que los botones de alternancia sean aceptables en el caso de que haya un estado claro de encendido y apagado. Esto puede ocurrir, por ejemplo, cuando tiene una línea de botones en gris que se colorean al hacer clic en ellos.

Esta es la razón por la que Play/Pause funciona en muchos casos. El botón de reproducción no es tanto una alternancia entre dos estados como una activación/desactivación. Se vuelve verde brillante cuando está encendido (¡estoy jugando!), Se vuelve gris y muestra un || cuando está apagado (¡no estoy jugando!).

Los otros botones hacen lo mismo, por lo que la consistencia se suma a la capacidad de pago. Probablemente también se base en nuestras percepciones históricas de una platina de casete o videograbadora, que tenía botones presionados (es decir, en estado) o deprimidos (es decir, estado apagado) y creo que este es un gran modelo mental a tener en cuenta al considerar un alternar .

Pero en cualquier caso en el que no estén simplemente "activados", donde no pueda reemplazar la palanca con una casilla de verificación más fea, por defecto sería "no usarlos", por todas las razones ya mencionadas.

ADEMÁS

Acabo de notar hoy que Evernote tiene una palanca bastante efectiva. Adoptaron el enfoque de un mouseover, que en realidad funcionó bastante bien. Tenga en cuenta que este es otro caso de un control de estilo on/off.

toggled off

toggled on

ADICION ADICIONAL

Encontré este cambio interesante hoy y me acordé de estas preguntas y respuestas sobre UX. Observe cómo el estado es inmediatamente obvio, y el hecho de que va a cambiar cuando lo toca también se hace obvio por el "mango" texturizado (es decir, la capacidad de pago): solo sé que cuando agarro esa perilla elevada, cambiará al lado opuesto y decir lo contrario de lo que dice ahora; Es como un baño de avión.

Para que se puedan hacer bien.

toggled offtoggled on

20
Kato

Ya hay 18 respuestas aquí, así que esto podría llegar tarde a la fiesta, pero tiene sentido usar casillas de verificación en tales situaciones. Algunos ejemplos:

enter image description here

Y cuando se selecciona:

enter image description here

Esto es similar al enfoque "tenue/iluminado" que "Me gusta" de Facebook usa , pero se combina con una casilla de verificación para una mejor visibilidad. En cualquier caso, el punto clave es usar solo una Palabra (o un conjunto de palabras) en lugar de intentar que el usuario decida entre varias palabras.

Además, asegúrese de evitar el uso de prefijos negativos (" ¡No", " ¡No -", " Un - = "," Dis - "," Im - "," Mis - "," En - "," Il - "," Ir - ") de lo contrario, el usuario tendría que hacer un" doble negativo " en su mente cuando tenía  unmarcó la casilla de verificación:

enter image description here

20
Pacerier

He estado usando el botón Toggle para "Agregar" y "Eliminar" elementos a una colección usando el botón Toggle simple (uno con estado visible a la vez) que tenía los siguientes estados.

  • AGREGAR (si nunca se hizo clic en el botón)

  • ELIMINAR (si se hizo clic anteriormente en el botón y ahora un elemento formaba parte de la colección)

PERO esto siempre me sorprendió, ya que para un usuario novato (de 50 años o más), inicialmente fue difícil entender lo que sucedió y por qué el botón solicita "Eliminar" incluso antes de saber que ese elemento ahora era parte de la colección. El bit que faltaba en este caso era un mensaje de notificación que decía "Elemento agregado correctamente". Estoy usando un mensaje de estado basado en Javascript que aparece en la parte superior de la pantalla (usando http://Twitter.github.com/bootstrap/javascript.html#alerts ) pero ya que fue visualmente desplazado del elemento de interacción, solo resolví una parte del problema para algunos usuarios.

Otro problema

Su botón cambia su "Postura" o "Invierte sus lados" después de cada clic. A veces dice "Soy el botón Agregar" y otras veces el mismo botón (en la misma columna entre otros botones Agregar) dice "Soy el botón Eliminar". Cambiar los colores ayuda, pero estos siguen siendo dos roles opuestos asumidos por un botón. NO SO DERECHO.

Mi solución:

Mi solución a este problema menor y bien discutido es reemplazar el botón de alternancia con algo así.

Botón que tiene el subtítulo "Agregar" cuando no se hace clic Después de hacer clic, el botón se reemplaza con un mensaje "Agregado con éxito" y muestra un pequeño botón 24x24 que tiene la etiqueta "X" y que le permite cancelar su último acto que siempre es "Agregar" . Por lo tanto, nunca hace clic en el botón "Eliminar" sino que solo "cancela" su "Operación Agregar" anterior. Además, no necesita mostrar una notificación separada "Agregado correctamente" en la página. La desventaja de este enfoque es que necesita más espacio para poner la etiqueta "Agregado con éxito" y un "Botón para cancelar", pero en mi opinión, este es uno de los enfoques menos confusos.

enter image description here

12
Salman Ehsan

En muchos casos, puede ser útil o posible evitar tales botones.

P.ej. en el caso de reproducción aleatoria/normal: simplemente use una casilla de verificación con una etiqueta "aleatoria" al lado, y nadie se confundirá ...

Y en el caso de un botón de reproducción/reproducción aleatoria, tal vez tampoco sea necesario cambiar la etiqueta del botón. Puede usar un botón "presionado" para indicar "reproducción" y un botón "arriba" para indicar "no reproducción". O podría poner un indicador en otro lugar de la interfaz de usuario, por supuesto (eso es lo que hace mi sistema estéreo ...).

No es porque alguna compañía comienza a usar un cierto widget que de repente debería usarse para todo ...

11
JanC

En Facebook, el botón Me gusta es un buen ejemplo para un botón de alternar.

En Facebook aplicación de Android, el me gusta está en un botón y está atenuado cuando está apagado y resaltado en azul cuando está encendido. Ver capturas de pantalla a continuación.

Básicamente, estoy de acuerdo con ellos - enfatice lo positivo y no se meta con los cerebros de los usuarios (cambio mínimo).

No estoy seguro de si es una buena manera de cegar el color. Quizás deberían haber hecho la indicación más audaz.

enter image description hereenter image description here

En Facebook web-app, el patrón es diferente. El texto del botón cambia para indicar la acción, lo que sucede al hacer clic. Esto es confuso. PERO, esto tiene sentido porque tienen mucho espacio y tienen una indicación separada de que a un usuario le gusta una publicación.

enter image description hereenter image description here

9
AlikElzin-kilaka

Recomendaría ver el siguiente video (¡de 1991!) Que fue fundamental para el diseño actual de la palanca de iOS, por ejemplo: https://www.youtube.com/watch?v=wFWbdxicvK

Y el documento correspondiente: http://dl.acm.org/citation.cfm?id=143079

Aquí están los conmutadores que compararon: The toggles they compared Y los resultados en preferencia: Results of the preference test

7
Riche Design

Los botones etiquetados (botones de alternar) a menudo son confusos o incluso ambiguos, como usted señala. En lugar,
muestra el estado y la acción, así:

en línea Go offline

Por lo tanto, tenemos un etiqueta que no se puede hacer clic que indica claramente el estado actual, y un botón que se puede hacer clic para llevar a cabo una acción para cambiar el estado.

Si hace clic en el botón "Desconectarse", la etiqueta cambia a "Desconectado" y el botón cambia a "Conectarse".

Mostrar tanto el estado actual como la acción al mismo tiempo es la única forma de ser completamente claro. Los botones de radio harían esto, pero la solución de etiqueta + botón es mejor porque ofrece una clara distinción visual entre los dos. También es naturalmente más compacto que los botones de radio.

En cuanto a las alternativas, creo que está de acuerdo en que los botones de alternancia pueden ser problemáticos. Incluso las casillas de verificación pueden ser confusas:

 en línea

La casilla de verificación no está marcada, por lo que la aplicación está fuera de línea. Pero esto no está particularmente claro. Si lo miras, lo primero que ves es la palabra "en línea", por lo que es fácil sacar una conclusión incorrecta.

El problema es que todo lo que puedes ver es una sola etiqueta. Debe pensar un poco antes de poder decidir si la etiqueta indica un estado o un comando. Este problema es común en las casillas de verificación y los botones, y tratar de usar consistentemente adjetivos (o verbos o lo que sea) puede mejorar las cosas, pero no hará que el problema desaparezca.

6
Bennett McElwee

Para el ejemplo Reproducir/Pausa, mostraría el estado actual normalmente y lo contrario al pasar el mouse (cuando sea apropiado, es decir, no en las pantallas táctiles). Ese elemento tiene 2 estados naturales y ningún verbo unificador. On/Off, por otro lado, se puede simplificar a Power con el estado On encendido y el estado off, bueno, no.

4
Rob Allen

Yo siempre voy con estado actual. Creo que el idioma de reproducción/pausa es la excepción en lugar de la regla. Creo que reproducir/pausar como es, es posiblemente un remanente de los días de las viejas cintas de cassette. Cuando se combinaron reproducción/pausa en reproductores de CD, recuerdo haber pensado lo genial e innovador que era.

De todos modos, una forma de hacer obvio que el estado actual está "seleccionado" es hacer que el botón brillo un poco, o delinearlo con algo de magia que se vea azul.

enter image description here

El azul mágico generalmente significa que algún estado está "activado"

Entonces, el botón anterior es en realidad un botón de tres estados de iTunes. Tiene 3 estados: repetir, repetir todo y repetir 1. Está bastante claro lo que está sucediendo aquí desde la cara del botón. La repetición 1 es en .

Como otro ejemplo, tengo 3 configuraciones diferentes de cámaras que se alternan con un solo botón: ortográfico 1 arriba, ortográfico 4 arriba y perspectiva. Un solo botón alterna entre estos 3 estados, y estoy mostrando el estado actual en la cara del botón.

Los botones individuales para estado múltiple no son que confunden una vez que se acostumbra a ellos. Son geniales porque grupo configuraciones mutuamente excluyentes, y guardan desorden la interfaz de usuario con muchos botones distintos. En cierto modo, son como un botón de radio compacto.

Otras opciones que se me ocurren son:

  • Mostrar estado actual y abrir un menú para cambiar el estado (incluso si solo hay 2 opciones)

Un ejemplo de esto es cómo Mac os le muestra el estado de su BlueTooth o Aeropuerto: incluso tiene una ventana emergente con oraciones completas sobre lo que hará cada acción:

enter image description here

Muestra su estado actual (gris desvanecido significa apagado), y muestra los siguientes estados a través de un menú emergente con oraciones completas.

3
bobobobo

La etiqueta del botón de alternar como Reproducir/Pausa no debe cambiar. El botón en sí debe indicar visualmente que está presionado (dejando la etiqueta 'Reproducir'). Esto elimina toda la confusión.

2
Denzo

Las imágenes de respuesta de @ Kato de Evernote lo dejan claro: hay una etiqueta que comunica lo que está controlado por la palanca ("Guardar automáticamente"), y la palanca, que funciona como un indicador de estado (O | I).
El problema con algunos conmutadores es tratar de usar el mismo bit para dos propósitos diferentes: comunicar el estado y comunicar la acción.
Las luces de mi casa, por ejemplo, tienen una palanca anónima y un indicador brillante, que es la luz misma (cuando la bombilla falla, generalmente no podemos saber si la palanca está en la posición de encendido o apagado) .
La obra | La disposición de pausa también tiene un claro indicador, el sonido de la música en sí. El conmutador cumple una función (control), la música cumple la otra (estado de comunicación).
La alternancia vs. alternar lineal controla el estado, pero no lo comunica. Tendría que tomar la caja del CD, esperar a que termine un tema y verificar si el que comienza después es el siguiente en la lista o no (y repita para estar seguro). Pero si lo piensas como un shuffle | opción binaria no aleatoria, entonces puede etiquetar después del comportamiento que controla ("barajar" como un verbo) y comunicar el estado iluminándolo.
Como lo veo, en cualquier caso necesitas comunicar el estado.
Un amigo mío está enojado por el control remoto de la cerradura de su automóvil. Tiene un estado impreso y no sabe si es la acción o la retroalimentación.

1
Juan Lanus

Para reducir la ambigüedad, sugiero:

  1. Use la acción como el texto del botón de alternancia, no el estado.

  2. Asegúrese de que el botón no esté resaltado.

  3. Resalte la acción al pasar el mouse sobre/enfocar para enfatizar lo que sucederá.

  4. Resalte el estado actual y colóquelo junto al botón.

P.ej...

enter image description here

(otros ejemplos: "activar" + "desactivar", "desactivar" + "activar")


O puede usar controles deslizantes y

  1. Resalte el estado actual, que debería aparecer en el control de control

  2. Coloque la acción que transita el estado dentro del área vacía (no la resalte)

P.ej...

enter image description here

(Imagine que el control del pulgar se parece a un control del pulgar y no como un botón)


Tomado de mi respuesta a pregunta duplicada cerrada con algunas mejoras.

0
Danny Varod