Desplegables u otras entradas dentro del grupo de botones de radio
Me he encargado del desarrollo de una aplicación que es básicamente como un gran cuestionario. Algunas de las opciones de diseño han dado lugar a HTML no válido, que estoy tratando de corregir. El principal es donde se asocia un menú desplegable con un botón de opción. Este menú desplegable (seleccionar entrada) se ha anidado dentro de la misma <label>que la entrada de radio. Mientras intentaba arreglar esto, me preguntaba si podría haber una mejor manera de mostrar esto. Aquí hay un ejemplo de la interfaz de usuario actual:
Elija una de las siguientes opciones:
- Radio 1: menú desplegable con muchos valores
- Radio 2
- Radio 3
- Radio 4
Aquí hay un ejemplo con un control deslizante:
¿Cuánto tiempo ha tenido problemas de salud?
- Sin problemas de salud
- Entre 0 y 200 meses - Entrada deslizante
- Más de 200 meses
- Desconocido
- Irrelevante
Radio-1 podría tener 20 o más valores. Solo se puede seleccionar una de las opciones, por lo que es una pregunta de estilo de botón de opción. No puedo simplemente poner las opciones 2-4 dentro del menú desplegable, ya que son irrelevantes y se perderían allí. Deben ser visibles para el usuario como opciones alternativas, en lugar de opciones alternativas para Radio-1. ¡Espero que esto tenga sentido!
¿Hay algunos patrones de diseño o recursos que pueda indicarme para este tipo de situaciones?
¡Cualquier ayuda sería muy apreciada!
Respuestas
Revelaría los otros controles de formulario cuando el usuario selecciona el botón de opción:
Nota al margen: evite los controles deslizantes y los cuadros de selección, son difíciles de usar.
Suena como una oportunidad para una interacción clásica de divulgación progresiva.
Desde el principio, imagine que sus usuarios ven las 4 frases simples, una para cada botón de opción.
No les muestre todavía una lista desplegable.
Cuando el usuario selecciona el botón de opción superior (el que tiene muchas opciones subyacentes), solo en ese punto su interfaz expone un nuevo campo condicional (la condición es: su botón de opción está seleccionado).