1

I have taken over the development of an application which is basically like a huge questionnaire. Some of the design choices have a led to some invalid HTML, which I am trying to fix up. The major one is where a dropdown is associated with a radio button. This dropdown (select input) has been nested inside the same <label> as the radio input. While trying to fix this, I was wondering if there might be a better way to display this? Here is an example from the current ui:

Choose one of the following options:

  • Radio 1 - dropdown with lots of values
  • Radio 2
  • Radio 3
  • Radio 4

Here is an example with a slider:

How long have you had health issues:

  • No health issues
  • Between 0 & 200 months - Slider input
  • Over 200 months
  • Unknown
  • Not relevant

Radio-1 could have 20 or more values. Only one of the options can be selected, so it is a radio button style question. I can't just put options 2-4 inside the dropdown as they are irrelevant and would get lost in there. They need to be visible to the user as alternative options, rather than alternative choices for Radio-1. Hope this makes sense!

Are there some design patterns or resources you could point me to for these kind of situations?

Any help would be most appreciated!

5
  • Just as an addition to this, I used a bullet list above to show that the radio button icon is visible, even with dropdown/radio option, i.e, Radio 1 – Metaman Aug 21 '20 at 11:25
  • Can you provide a real example of what these answers are and what text is in the drop down? It is unclear if the drop down list should be a second, conditional question or not – musefan Aug 21 '20 at 11:27
  • I've added an example with a slider, as it is easier to understand. You could argue about options 1 and 5 (no health issues, not relevant), but I don't get the choose the options. Hope this helps. – Metaman Aug 21 '20 at 11:49
  • What is the issue with having a radiobutton with a dropdown? Is it purely a technical problem? – Nash Aug 21 '20 at 12:06
  • Technically it's no problem. I could just move the dropdown outside of the label element containing the radio button and then it's valid html. It's not an application where support for screen readers needs to be provided either. It just seems clunky having the radio buttons along side the dropdown. I guess I could CSS my way out of it remove the visual radio icons (the circles), but I was just curious if there were any alternative patterns out there. – Metaman Aug 21 '20 at 12:24
0

I would reveal the other form control(s) as the user selects the radio button:

enter image description here

Side note: avoid sliders and select boxes – they’re hard to use.

1
  • I think both you and @dan00binator have landed on the same answer and I agree with both of you. The problem with sliders are our users love them for some reason! :-D I don't know of any other alternative other than direct text input, which means they have to use the keyboard. Most of them won't be happy with that. Sliders allow them to quickly set a value where there is a large range, though agreed, they are a pain to use when precision is important. – Metaman Aug 24 '20 at 8:36
2

Sounds like an opportunity for a classic progressive disclosure interaction.

From the outset, imagine your users sees the 4 simple phrases, one for each radio button.

Don't show them a drop-down list yet.

When the user selects the top-most radio button (the one with the many underlying options), only at that point have your interface expose a new, conditional field (the condition being: its radio button is selected).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.