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

4

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!

  • Thanks Clint! Unfortunately I can't share real screenshots due to security, but I added a very quick wireframe to my post with the real width of the space I'm working with (537px). Thanks for your input - it's very helpful! – belladactyl Oct 28 '15 at 14:33
  • Not a problem @belladactyl if you have the space to play with I'd go with radio buttons – Clint Oct 28 '15 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 '15 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 '16 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!

  • Thank you! This is very helpful. I've been told that 2-4 options will be the most common scenario. We still have some exploring to do to figure out how often the 9 options can appear and that will help drive our decision. Fortunately the rest of this particular form won't have long lists of radio buttons. – belladactyl Oct 29 '15 at 13:46
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, privacy policy and cookie policy

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