22

I'm redesigning a PMS (Property Management System) and this is a screen from the set up of a hotel. Now there are radio buttons in all of the categories/tabs. I know that there is a 'rule' that if the choices are less than 6 it is better to use radio button and show all the choices instead of a dropdown button. Although there are more than 5 categories/tabs that you need to choose one choice and I don't know what is the best solution for my problem. Do you think I should stay with the radio buttons or a drop down button? Do you have any other ideas?

  • 2
    One other issue not mentioned below: Many users are not as agile with their mousing skills, even full-time desk jockeys. So a pop-up menu is more prone to error and frustration. – Basil Bourque Sep 5 '16 at 22:53
  • 1
    People often use built-for-desktop websites on their phones or tablets. Just yesterday I saw the internet technician filling out a servicing form on his phone and noticed how awful it was for him to try to select everything. How likely is this to be the case for your PMS? If it is often, you want to avoid radio buttons. – RoboticRenaissance Sep 6 '16 at 0:33
43

Guidelines

The Apple OSX Human Interface Guidelines (2012) recommend a drop down if you have more than 5 options, while the Microsoft Windows 10 User Experience Guidelines recommend a drop down if you have more than 8 options. So, take the average and stay with radio buttons if you less than 6.5 options (shrug). You’re near the borderline (at least for one book of guidelines) in any case so it probably doesn’t make much difference what you do.

Considerations in the Trade-off

If you want get more precise (and complicated), consider the primary tradeoff of radio buttons versus drop downs as they apply in your case.

  • Radio buttons have the advantage of one-click option selection (versus two clicks to select from a drop down). They save the user a click.

  • Dropdowns have the advantage of one-glance value reading (the user only has to look in one place to see what is currently selected, rather than scan down a list).

So, the tradeoff depends on how often users change the item’s value versus simply read it and leave it alone.

  • If the task very often involves only checking the value (e.g., to know how to set something else), then a drop down may be better even with fewer than 5 options.

  • If the user almost always takes the default, then a drop down may be better with fewer than 5 options.

  • On the other hand, if the user almost always needs to the change the value (the default is rarely right), then you may want radio buttons even if there are more than 8 options.

The difference between Apple and Microsoft’s guidelines probably reflects different assumptions on how often users need to change a value.

Get Mathematical

If you want to get really precise, assume each click takes about 2 seconds and each glance takes about 0.1 seconds and calculate the time to do the task with radio buttons versus a drop down for whatever proportion of your users you expect will change the value. Pick the fastest one for your number of options.

If you want to get really really precise, do a usability test of radio buttons versus drop down in your prototype and compare average times.

Other Considerations

Here're other things to think about, or include mathematically, in addition to the proportion of users changing a value:

  • Sorting options by frequency of use. You may want to favor radio buttons with over 5 options if the options are sorted by frequency of use, and the first five options are almost always the right ones, and the users know enough about the options that they stop looking once they find the right one. In that case, there won’t be a lot of full-list scanning very often -you functionally have 5 options.

  • Expectations of the current choice. You may want to favor radio buttons with over 5 options if the users can anticipate the likely current value, and know roughly where the value is on the list (e.g., they’ve seen the list repeatedly and/or it’s sensibly sorted). Scan time in that case varies with log of the number of items (Hick-Hyman law) rather than linearly with the number of items, so you can double the number of items (e.g., go from 5 to 10) and only incrementally increase the scan time.

  • Usefulness of seeing other options. You may want to favor radio buttons when the users are very unfamiliar with the options, or the options can be ambiguous, so the users need to see them all to accurately pick which to choose. This is easier to do with radio buttons because the users don’t have to open the drop down first to see what the options are (and then end up keeping the default anyway in some cases). With a drop down, users may not even bother to look at all the options, which in this case would be a bad thing.

  • Space limitations. One the other hand, you may want to favor a drop down if your space is so limited on the page that using radio buttons will force most the users to scroll to get to other items. If users have to scroll, then that adds at least one click, which erases the primary advantage of radio buttons. Also don't underestimate the effects of clutter --even if the users don't have to scroll, all those radio buttons can distract them from other elements of the page. Usually non-selected items are not as important as other fields or controls on a page.

  • Safety covers. You may also want to use a dropdown rather than radio buttons (or a checkbox) if changing the value could have dangerous implications (e.g., change a security level). The very convenience of one-click changing makes radio buttons and checkboxes susceptible to being accidentally and unknowingly changed by mis-click while the user is distracted. Using a dropdown instead is like having a safety cover over a physical toggle switch, reducing the chance of accidental input. It's less disruptive than a warning box when the user is deliberately changing the value.

Neither One: The List Box

One often-forgotten alternative to both drop downs and radio buttons is the list box, which can be a good compromise between radio buttons and drop downs:

  • It has one-click selection like radio buttons, but generally takes less space.

  • The current selection is highlighted, which may be easier to spot than a small filled radio button.

  • A list box can scroll when there is a large number of items, so you can put the high-use items in view for one-click selection, and put low-use items "below the fold" so you balance space with importance.

  • Like a drop down, a list box can be easily populated with options from a database table, (something hard to do with radio buttons on many platforms).

A list box should be considered over radio buttons whenever there are more than 5 options.

  • Great answer, as for the first paragraph though I don't know if I'd say take the average of the two guidelines. In this case he is working with an in house PMS not a web page so he can likely make the distinction of whether it will be a windows or apple application. But still, likely not much of a difference. – DasBeasto Sep 6 '16 at 12:06
9

According to Checkboxes vs. Radio Buttons (Nielsen, 2004):

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.)

That is to say a Dropdown is a clever choice to save space without removing any options. But it does remove the possibility for the user to know all options beforehand, and it increases the number of clicks per task* (clicking the dropdown, possibly scrolling the list, and finally choosing your option vs the one click for radio).

  • NOTE: I take the number of clicks per task as guideline to build more intuitive interfaces. I do not, however advise its use as an actual "rule". See this and this for more on the subject.

I've seen other possibilities proposed in this very forum. @LarsTech proposed the following mixture between widgets to both save space while retaining the most likely options to be selected in a Radio button. If space is a problem but you still recognize the usefulness of a Radio Button, this might be worth considering.

enter image description here

  • 2
    The screenshot looks confusing. Will the radio button be selected, if you click in the dropdown? Or only, if you select something from the dropdown? Will selecting a radio button change the dropdown back to the default choice? What if you change the dropdown to the default choice (which is probably without function)? Then no item is selected, while radio buttons should make sure that one is selected. – allo Sep 5 '16 at 17:33
  • 7
    @allo As I mentioned the example is not mine, but all of the behaviors you have pointed out are just a matter of implementation. I'm quite familiar with the Qt library and this widget does not seem at all difficult to implement, including the guarantee that there will never be the possibility for "no selection". Also, if done correctly, there would be no "Other Options" in the dropdown, that's just the label for a disabled state and not a real choice. At least for me it seems quite a feasible solution. – armatita Sep 5 '16 at 19:04
  • 2
    @allo, I used this pattern before with the dropdown disabled when the radio was unchecked. Users would have to explicitly check the radio button to enable the dropdown and avoid the possible expectation that the dropdown value also gets posted. As armatita mentioned, the dropdown shouldn’t have a “no selection” state. – jazZRo Sep 6 '16 at 8:58
  • Of course you can do it, i just say i find it rather confusing and it needs the mentioned constraints to be consistent, which may even mean that you change state (like disabling the dropdown) of one ui item when selecting another one. You're mixing two concepts, which isn't always intuitive. – allo Sep 6 '16 at 21:13
0

How much do you expect your users to change the default choice?

  • If most of your users will go with the default option and you're not expecting them to change it a lot, then I'd go with the Dropdown and have the default option selected.
  • If, however, there's a lot of variability in users' choices, and it's better for them to see all the options right away, then I'd go with Radio buttons.
  • 1
    Radio buttons should always have one option selected by default anyway, so that wouldn't really make much difference here as both dropdown and radios will have something selected by default. Except with dropdown the user doesn't get visibility of the other options up-front. – JonW Sep 5 '16 at 10:43
  • I will go with Radio buttons in a vertical order (the 2nd choice is more suitable in my project). The problem is that with the vertical order you need to scroll a lot, but I think it is better because you can't confuse the choices – Eva Soroniati Sep 5 '16 at 11:41
0

The other commenters have made some good suggestions. You may want to consider variations or other options than radios or a dropdown, however. If you have options to select between that would benefit from visual identification, you might consider a variation on radio buttons in which you show the items and let the user select them directly. If your options are along a spectrum with a fixed range, perhaps a slider would be a decent option.

While a dropdown offers a more vertically compact layout, being able to see all of the options makes for a bit less work on the part of the user. However you decide to do it, however, you can make even less work for the users by providing intelligent defaults for them - if you can anticipate what 80% of your users are likely to select, make that option pre-selected.

0

If you're designing for mobile and web together, dropdowns are much nicer to work with. There's usually built-in handling on many phones, providing an instantly familiar environment to the user(unless they're switching devices frequently. More likely, they're switching sites frequently).

On my phone, it usually takes me about three to seven times to actually click a radio button unless it's enlarged. That could be fixed if made all the text inside the radio button so you can click on the text, not just the tiny circle, but people forget to do that. A drop-down has the entire rectangle as it's hitbox and then I get a full-screen selection area.

  • I think the implementation is simpler. Use radio buttons unless the items disturb the layout flow, or in mobile. – Eshwaren Manoharen Sep 6 '16 at 2:47

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.