it-swarm-es.com

Enfoque moderno a los botones de radio

Estoy trabajando para actualizar la UI/UX de una aplicación de 20 años y parece que estoy atascado en este caso de uso en particular.

Al hacer clic en el botón Nuevo , el sistema le pide al usuario que elija una de dos opciones

  1. Crear nueva orden de trabajo
  2. Crear una nueva tarea/subtarea para una orden de trabajo preexistente

Tenga en cuenta que el sistema solicita más información. No se trata solo de esto y, en función de la arquitectura de la aplicación, debe conocer esta información (y alguna otra) antes de continuar.

Mi pregunta es, ¿cuál sería una forma moderna de mostrar las dos opciones al usuario? ¿Podría ser una de las opciones mencionadas en la captura de pantalla a continuación?

La antigua pantalla de la aplicación

enter image description here

Mis opciones sugeridas:

enter image description here

22
Shreyas Tripathy

Respuesta corta: Opción 1

No veo ninguna razón para hacer esto más complejo que dos botones de radio normales. Hemos tenido estos elementos de la interfaz de usuario durante tanto tiempo por una razón.

Las otras opciones presentadas por usted son adecuadas/más adecuadas para otros casos.


La regla básica es:

Use botones de opción para hasta un puñado (máx. 5-7) de opciones mutuamente excluyentes y cuando desee que todas las opciones estén visibles.
Utilice menús desplegables para obtener una lista de más de 5-7 opciones, donde presentarlos a todos sería una sobrecarga visual.

La opción 4 con un interruptor no se ajusta en absoluto, ya que se usa para metáforas de encendido/apagado, no para elegir entre dos opciones iguales.

Supongo que la opción 3 también sería posible, pero en realidad no agrega ningún valor sobre los botones de radio normales, incluso podría confundir a algunos usuarios.


Vea esta respuesta aquí explicando las diferencias:
https://ux.stackexchange.com/a/88135/67657

O este artículo de NN Group:
casillas de verificación frente a botones de radio

O esto:
7 Reglas de uso de botones de radio frente a menús desplegables

79
Big_Chair

Crearía pantallas y botones completamente nuevos para las dos tareas. Rotúlelos "Editar orden de trabajo" y "Crear orden de trabajo". Editar es para editar una orden de trabajo existente o agregar subtareas. Crear es para hacer una nueva orden de trabajo. El botón Editar estará al lado de la orden de trabajo en una lista de órdenes de trabajo abiertas. El botón Crear estará en la parte superior de la página.

work order UI

https://www.bootply.com/Ur1q177i95

Esto se aplica a su situación específica. Para los botones de radio normales que hacen cosas de botones de radio (seleccionando de una lista corta de opciones), no los cambiaría.

15
Chloe

Depende del contexto.

  • Los botones de radio son excelentes para mostrar al usuario todas las opciones posibles y resaltan claramente lo que está seleccionado
  • Un menú desplegable es útil si no tiene/quiere usar demasiado espacio
  • la opción 3 (¿pestañas?) es un enfoque muy interesante si el contenido es dinámico, por lo que el usuario ve instantáneamente lo que cambia con cada elección. Aunque como se menciona en los comentarios, puede parecer confuso para los usuarios. Las pestañas separan categorías de contenido; ¿Qué sucede con el contenido de la pestaña no seleccionada?
  • Los botones de tipo interruptor son más familiares para las opciones de encendido/apagado, y es la única opción que no escalará bien si decide agregar más opciones a su formulario en el futuro.
6
Luciano

Una cosa que aún no he visto planteada es que los botones de radio siempre deben tener una opción predeterminada seleccionada, lo que sugiere que el flujo de trabajo aquí es principalmente para agregar una nueva orden de trabajo y, en segundo lugar, para agregar una tarea, es decir, si el usuario no Al tocar este control y rellenar el resto del formulario, obtienen un WO, no una tarea.

Si esa suposición es correcta, puede pedirles que elijan un WO padre si es necesario con una selección. Esto puede ser complicado, dependiendo de si puede buscar una lista de tareas candidatas en esta etapa, y cuántas puede haber.

optional select

Si no puede obtener esa información, o si no es práctico elegir entre los candidatos aquí, puede ir con una simple casilla de verificación "¿Adjuntar como subtarea?".

3
Beejamin

Podrías usar botones de alternar.

El concepto es, por lo tanto, de botones que ofrecen opciones mutuamente excluyentes: cuando se presiona un botón, el otro sube.

Si usa un diseño antiguo de "botón pulsador", asegúrese de que sea obvio qué botón está presionado y cuál está arriba. La imagen a continuación no es tan buena a este respecto, sino solo para ilustrar el concepto.

toggle buttons example

También puede utilizar un diseño más contemporáneo donde la opción seleccionada se "resalta" con un color diferente.

Si su objetivo principal es hacer que la interfaz anterior sea compatible con dispositivos táctiles como teléfonos inteligentes, una alternativa simple es extender el área sensible de sus botones de radio para incluir las etiquetas. Sin embargo, no será obvio que se puede hacer clic en las etiquetas, a menos que dibuje un marco que rodea el botón de radio y su etiqueta.

Para las interfaces de escritorio, los botones de opción siguen siendo una buena opción si el número de opciones es limitado.

3
OuzoPower

Puede reemplazar el botón original "Nuevo" con dos botones, uno para "Nueva orden de trabajo" y otro para "Nueva tarea".

Considere la captura de pantalla de una aplicación de Microsoft a continuación. El archivo -> Nuevo elemento de menú es en realidad un menú que enumera los diferentes tipos de "cosas" nuevas que el usuario puede crear.

Visual Studio Example

En su caso, no habría necesidad de colocar los botones en un menú separado, simplemente reemplace el botón original "Nuevo" con las dos opciones.

1
Harrison Paine