it-swarm-es.com

¿Son dos botones de alternancia mejores que un interruptor de tres estados?

Tengo una cuadrícula de personas donde cada usuario debe decidir si incluir a la persona en un grupo predefinido, excluirlos del grupo o dejarlo sin decidir. El estado inicial es indeciso. Tener dos botones de opción no funcionará porque el usuario debería poder cambiar de opinión a "indeciso" después de seleccionar inicialmente "entrar" o "salir" (por eso esto es una pregunta diferente).

Surgieron dos enfoques. Uno es tener dos botones de alternar, y el otro es tener un "interruptor" de tres estados (que es esencialmente un grupo de tres radios, visualizados de manera diferente).

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

  • Los botones de alternancia serían mutuamente excluyentes (solo se puede seleccionar uno, pero ambos no se pueden seleccionar)
  • Esto está dentro de una cuadrícula bastante ocupada, por lo que bienes inmuebles (ancho de columna) es definitivamente un factor
  • Esta no es una interfaz táctil

¿Cuál es el mejor enfoque aquí? ¿Pros y contras?

32
Vitaly Mijiritsky

Diseño para el micro flujo de trabajo.


Observaciones

  • La mayoría de los usuarios harán una selección y seguirán adelante, como notó. No es muy probable que los usuarios anulen la selección de una opción, ya sea inmediatamente o después.

  • Dentro y fuera son las opciones principales aquí. La elección indecisa es un incumplimiento imparcial.

    • Las opciones nulas/predeterminadas/indecisas/desconocidas a menudo son muy difíciles de diseñar correctamente, y los diseñadores a menudo no piensan en ellas lo suficiente al diseñar controles.
    • Los programadores a menudo son mejores en esto por hábito (piense en null vs '' vs undefined en javascript), pero aun así la semántica es a menudo fácil de arruinar.
  • La alineación de la cuadrícula y la economía del espacio son importantes .... dado que hay muchos otros controles en la página.

Un posible diseño

in/out button pair, with visually distinct and de-emphasized 'none' button

La lógica de diseño aquí es:

  • Haga las opciones principales claras. Los botones grandes proporcionan puntos de aterrizaje fáciles para el cursor, y las opciones principales son visualmente claras.

  • Resalte la opción indecisa. Puede ocultarlo hasta que el usuario elija (ejemplo superior) o mantenerlo mostrado (ejemplo inferior y probablemente mejor). Este botón es una opción/escenario relativamente raro, por lo que no es necesario promocionarlo a la prominencia de las selecciones principales.

  • Deshazte de los iconos. Estos solo agregan desorden visual y ocupan un valioso espacio horizontal.

  • Considere agregar una marca de verificación al botón seleccionado para mayor claridad (ejemplo inferior).

  • Mantenga los botones compatibles con la cuadrícula para compacidad y para calmar la interfaz general.

En alternar vs tri-estado ...

Esta respuesta (con suerte) ilustra que ninguno de los enfoques es intrínsecamente mejor que el otro. Creo que la forma de decidir entre los dos es establecer los objetivos y las limitaciones del diseño, pensar cuidadosamente sobre lo que significa el estado nulo , y luego el diseño La tarea debería ser mucho más clara.

36
tohster

Si no le importa ocultar las opciones disponibles a primera vista, también puede usar un combo en lugar de botones de radio que podrían ahorrarle algo de ancho de columna.

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

25
Vincent Robert

Sugeriría un conjunto de tres botones de radio: uno para 'entrada', uno para 'salida' y otro para 'indeciso'.

Es probable que los conmutadores mutuamente exclusivos requieran mucha explicación y puedan confundir al usuario: un par de botones alternados parece ofrecer 4 combinaciones diferentes (A +/B +, A +/B-, A-/B +, A-/B-) pero necesitará explicar que solo hay tres (A +/B-, A-/B +, A-/B-). Además de eso, la tercera opción nunca se muestra explícitamente en la configuración de control; en su caso, se muestra 'dentro' o 'fuera', pero 'indeciso' solo se muestra por la ausencia de cualquier otra configuración. Esto también requeriría más explicaciones.

Un conjunto de tres botones de radio exclusivos debe hacer exactamente lo que desea: las tres opciones son visibles y el hecho de que el usuario solo puede seleccionar una se indica mediante un patrón establecido.

23
Andrew Martin

La primera opción es mejor, con la palanca. La razón es porque los usuarios que reciben instrucciones claras sobre las posibles respuestas tienen más probabilidades de comprenderlas y responderlas (correctamente) que cuando las instrucciones están ocultas. En el caso del tri-switch, hay dos opciones visibles y una opción invisible. Cada uno tiene tres estados, pero el último tiene una opción que no es inherente, lo que significa que tendrá que proporcionar instrucciones o esperar que el usuario pueda "resolverlo".

Dependiendo de su demografía, eso puede no ser un problema. Los usuarios más jóvenes y más expertos en tecnología recibirán el cambio con una sola instrucción. Sin embargo, dado que he cambiado de trabajo a una empresa cuyo grupo demográfico es blanco de más de 55 años, incluso las instrucciones simples no siempre son suficientes. Por ejemplo, su ejemplo de tres botones no funcionaría: el botón indeciso no indica que está indeciso, solo que tiene un signo de interrogación. En mi universo eso significa "Tengo una pregunta y hacer clic en este botón me permitirá hacerla o brindarle consejos".

6
Jamezrp

Para responder a su pregunta, se debe considerar la frecuencia de esta acción.


Baja frecuencia:

Los usuarios no recuerdan sus opciones cuando no las usan con regularidad, por lo que las opciones deben ser fáciles de encontrar y entender.

Teniendo en cuenta el estado real de la pantalla que ha mencionado, y para que los usuarios entiendan fácilmente sus opciones, también sugeriría un menú desplegable similar al de Vincent.

Por supuesto, el menú desplegable agrega un clic adicional para llegar a las opciones, pero está bien, ya que el objetivo principal aquí es hacer que el usuario se identifique y decida su próxima acción sin mucha molestia. Por lo tanto, se recomienda utilizar elementos de IU con los que el usuario ya esté familiarizado para pantallas que no se usan con frecuencia.


Alta frecuencia:

Si esta pantalla se usa con frecuencia, y los usuarios tienen que alternar frecuentemente entre indeciso, dentro y fuera, un menú desplegable frustrará al usuario. Aquí, los usuarios deberían tener acceso rápido a sus opciones.

En este caso, recomendaría el interruptor de tres estados. La curva de aprendizaje es pequeña cuando los usuarios usan esta palanca con frecuencia, por lo que a su debido tiempo podrán adaptarse a su interruptor de tres estados. Pero, no sugeriría un signo de interrogación.

Por favor, mira mi maqueta a continuación. Es un simple interruptor de tres estados con algo de diversión añadido, lo que podría resultar en una mejor participación del usuario. Se ajustará a los bienes inmuebles que ha descrito. Pero, tenga en cuenta mi sugerencia solo si esta acción de alternancia se usa con frecuencia. Gracias

Tristate switch suggestion

6
Gautham Raja

Parece que hay dos problemas a la mano

¿Tri-estado explícito o implícito? Por unanimidad por razones dadas, el Tri-estado explícito es mejor

Visualización compacta de Tri-state explícito Tres botones, grupo de botones de radio, cuadro combinado, todos hacen el trabajo. Pero otra interfaz de usuario que ayuda a comunicar claramente la conexión de conceptos es también el control deslizante u otras imágenes similares que recuerdan una escala similar

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

3
Jason A.

Su solución sigue siendo un botón de radio. Es un botón de radio con tres opciones: "dentro", "fuera" y "indeciso"; de los cuales "indeciso" es el predeterminado. Si muestra claramente "indeciso" como una tercera opción, entonces no hay ambigüedad para el usuario.

No hay una razón UX por la que no pueda seleccionar una opción de botón de radio y luego cambiarla más tarde, al igual que seleccionar botones de alternar o escribir cosas. No estoy seguro de dónde viene su preconcepción de que esto no sería aceptable. Si su diseño lanza una gran cantidad de cosas cuando selecciona una u otra, entonces puedo entender cómo complicaría su implementación, pero en ese caso probablemente comenzaría con el diseño incorrecto en primer lugar.

2
Graham Bartlett

Aunque algunas guías de IU sugerirían que las casillas de verificación solo deberían usarse en casos donde cualquier combinación de selecciones sería válida, sugeriría (y algunos diseñadores parecen estar de acuerdo conmigo) que también son apropiadas en muchos casos donde combinación de estados anteriores y estado cliqueado, sería "obvio" cuál sería la próxima combinación de estados deseada.

En la situación particular en la que las casillas de verificación representarían una opción con "A, B o ninguna" semántica [con "ambas" no es una opción válida], la opción de usar un botón de tres estados o un par de verificación Las cajas dependerían de si el caso "ninguno" representa un estado en sí mismo, frente a la falta de otros estados. Por ejemplo, el cuadro "Fuente" para MS-Word de la década de 1990 tenía casillas de verificación para "Todas mayúsculas" y "Mayúsculas", y para "Superíndice" y "Subíndice", junto a los cuadros de "Negrita", "Cursiva", El uso de casillas de verificación para todo daba una apariencia más ordenada que la que tendrían los botones de radio, y también evitó la necesidad de crear etiquetas para los botones "No todas las mayúsculas o minúsculas" y "No superíndice o subíndice".

Si se usa un botón de tres estados para "incluir", "excluir" o "indeciso", la última opción sugeriría que su estado se establezca en "indeciso". Si las casillas de verificación "incluyen" o "excluyen", dejar ambas casillas sin seleccionar sugeriría que las personas deberían quedar adentro si están adentro, o afuera si están afuera. Si se pretende la última semántica, puede ser mejor usar casillas de verificación.

1
supercat

Entre las dos opciones mencionadas, la opción botón de dos botones será un buen método. Ventajas:

  • posibilidades claras
  • no distrae del contenido principal

ejemplos existentes:

botones upvote/downvote en varios sitios como este (stackexchange), reddit, quora, etc.

[p.s. dado que los elementos estarían dentro de una grilla ocupada, implementar un diseño con énfasis en los elementos visuales llamaría mucho la atención y se sumaría a la agitación]

1
BatlaDanny

Este es uno que debe probarse porque no tengo idea si funcionará. Quería crear algo que use elementos comunes y muestre todas las opciones de forma compacta. La idea es omitir la etiqueta "indeciso" utilizando dos casillas de verificación.

¿Por qué casillas de verificación? Debería ser común para las personas que si no se desea ninguna opción, solo tiene que desmarcarlas. Es inevitable que la gente piense que ambos pueden verificarse. Esto se puede resolver de dos maneras:

  1. deshabilitando la otra casilla de verificación cuando se marca una:

enter image description here

  1. con un mensaje cuando la gente intenta verificar ambos. En este ejemplo, se hizo clic en "Fuera":

enter image description here

Me gusta más el # 2 porque no da la idea de que estás atrapado con tu elección y es más útil cuando alguien no entiende la intención.

0
jazZRo

Puede usar tres botones de radio con su color de fondo coloreado con Rojo = Fuera, Amarillo = Indeciso y Verde = Dentro (esto porque mencionó una cuadrícula ocupada (atada)) y usar una leyenda que explica el significado del color.

0
Aneido Gp

¿Por qué no simplemente usar una columna de casilla de verificación de tres estados intuitiva (si está disponible)?

Ahorra espacio y representa adecuadamente sus datos (si/cuando los usuarios están familiarizados con dichos controles).

0
Astrogator