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