3

I have a list of options where the maximum number that can appear is 9. I am wondering if it will be confusing to switch controls for these options depending on how many appear i.e. use radio buttons for 5 or less, use dropdowns for 5 or more. I am leaning toward using radio buttons across the board for consistency, even though 9 options at most can appear (though this will be in rare cases).

Here are some wireframes of the width of the space I'm working with (537px)

enter image description here

enter image description here

0

7 Answers 7

5

I'd go with radio buttons based on this following the article "Checkboxes vs. Radio Buttons" by Jakob Nielsen.

The article references the radio buttons vs dropdown menu as the following:

If possible, use radio buttons rather than drop-down menus. Radio buttons have lower cognitive load because they make all options permanently visible so that users can easily compare them. Radio buttons are also easier to operate for users who have difficulty making precise mouse movements. (Limited space might sometimes force you to violate this guideline, but do try to keep choices visible whenever possible.)

As you said 9 radio button options would be an edge case, I think radio buttons will do the best job of reducing cognitive load on the user as all options will be presented straight away. The amount of UI space you have will also be a factor so an example of the screen your designing for would be appreciated!

3
  • Not a problem @belladactyl if you have the space to play with I'd go with radio buttons
    – Clint
    Oct 28, 2015 at 14:42
  • 1
    I'd like to add that radio buttons (and their labels) offer far better accessibility support. For example drop down menus don't scale when the user is zoomed in.
    – Martyn
    Nov 2, 2015 at 11:24
  • Actually I believe dropdown are way more accessible for screen readers. This is because major screen readers have a weird support of radiobutton focus
    – Leths
    Oct 10, 2016 at 9:28
3

Not nine radio buttons…

I recommend you either follow the guideline or use a different solution.

For radio buttons, Microsoft has this guideline for radio buttons:

Is the number of options between two and seven? Since the screen space used is proportional to the number of options, keep the number of options in a group between two and seven. For eight or more options, use a drop-down list or single-selection list.

In the same guideline, Microsoft acknowledges that a drop-down list performs differently than a set of radio buttons:

Would a drop-down list be a better choice? If the default option is recommended for most users in most situations, radio buttons might draw more attention to the options than necessary.

  • Consider using a drop-down list if you don't want to draw attention to the options, or you don't want to encourage users to make changes. A drop-down list focuses on the current selection, whereas radio buttons emphasize all options equally.

  • Consider a drop-down list if there are other drop-down lists on the page.

You might decide not to use a drop-down list, either.

A third option: the single-selection list

Other answers have compared radio buttons to a drop-down list, but there's a third option: the single-selection list:

A single-selection list

The user can select one value, not multiple.

2

A dropdown should be used when the options in the dropdown do not require the user to see them displayed.

For example: "Pick a number between 1 and 10 [dropdown]". Your instructions make it clear what to expect in the dropdown options, so they don't have to be visible.

"Which of the following is your favourite fruit? apple [radio] orange [radio] pear [radio]". Your user wants to see the options for this.

1

I would add another consideration: the label length. If it's only one or two short words, it could be a select option. If it's a phrase or a sentence, I would definitely go with the radio buttons.

0

Select dropdowns are better when lists are long and/or the user is likely to familiar with the available options in the select. As far as length, 9 choices is borderline. Probably ok, but if you have a number of different inputs that each have 9 radio choices the form is going to look pretty taxing cognitively.

More important may be familiarity/understanding of the options. Dropdowns work well for "U.S. State" (50 choices, where the order is understood) or "Size" : [XS,SM,MD,LG,XL] (where the list isn't that long, but the options are commonly understood).

So it really depends what your options are!

0
0

It really depends on how much screen real estate you need to devote towards this particular item in the form. Based on @Clint's research I would show preference to radio buttons, but if there are other items demanding the user's attention, I would use a select box.

0

As considering the limitations

  • Multi Lingual

  • Availability of space

I prefer to go with

  • Radio button if option are less than equal to 4
  • Dropdown for more than 4 options.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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