72

User have to choose type of food (from 3 or 4 choices) in our application. Default selection is used in 60 - 70% of cases. What will be better: dropdown or radio buttons?

5
  • 5
    impossible to say without a lot more information. Best option would be to design both then user test.
    – DA01
    Sep 1, 2011 at 5:50
  • 1
    Keep in mind also the chances of this number of options changing. Requirements always change ;-)
    – Wivani
    Sep 1, 2011 at 10:55
  • see also ux.stackexchange.com/questions/456/… Oct 30, 2012 at 10:10
  • Personally, I feel the default selection of a radio button works better than the default selection of a dropdown, because with the radio you see the other options.
    – kontur
    Feb 7, 2013 at 8:14
  • Note that just showing a short list might also be a solution. In this way, you also can see all choices.
    – André
    Feb 7, 2013 at 14:21

9 Answers 9

42

It's impossible to give any meaningful rules on UI that would hold across all contexts. You might want to refer to your platform's UX guidelines for some guidance.

For the situation you describe, both widgets are probably reasonable choices. Radio buttons are useful if you want to emphasize the other available choices (e.g. to clarify the level of abstraction or precision), especially if the default choice is not very informative (e.g. “standard menu”). A drop-down list might be somewhat easier to operate with a keyboard, if a lot of data-entry is expected and users know the choices beforehand. It can also be adapted to allow users to enter something else (“combobox”). A big factor will be screen real estate, you can often save some space with a drop-down listbox compared to radio buttons.

If you really want to get to the bottom of this, you would have to test it with your own users but in most cases, it probably doesn't matter that much.

1
  • 1
    Re: keyboard operation in drop-down list: focusing on the Country drop-down, and typing C-A-N-A.. caters to advance users really well. Though when it comes to certain countries like U.S/USA/United States... Nov 13, 2011 at 4:19
39

Radio. If you have preselected the default value, user will open drop-down list to look at other choices (maybe something is better or new). Radio buttons show all choices and you can preselect default food type.

5
  • 18
    Just as long as the number of elements is fixed and relatively small.
    – GUI Junkie
    Sep 1, 2011 at 8:13
  • 2
    +1: reasonable answer imo. However, like DA01 mentioned in a comment: impossible to know for sure without more info. Best way to be sure what option is best: user-test both possibilities :)
    – Jeroen
    Sep 1, 2011 at 9:45
  • 2
    You should be able to preselect the default one in a dropdown too.
    – Wivani
    Sep 1, 2011 at 10:53
  • 1
    Radio. If the list grows, you can easily switch to ComboBox. Sep 1, 2011 at 14:58
  • Nobody forces to preselect a radio button. You can have unselected radio button group as default.
    – MaXi32
    Dec 20, 2021 at 16:17
19

My rule(s) of thumb:

  • if the option is boolean: checkbox
  • if the number of options is 2 - 4: radios
  • if the options have a lot of text: radios
  • if there are lots of options: dropdown
  • if there are LOTS of options: dropdown with search, like chosen
3
  • 2
    Don't confuse boolean option with binary option - a boolean option must be a yes/no-option. But sometimes an option is a this/that-option, where both options are the opposite of each other (Example: min/max, all/nothing, ...) In this case, use radios.
    – piegames
    Sep 7, 2017 at 12:28
  • @piegames I've always been using checkbox for yes/no answer. Recently I'm starting to wonder, what's wrong to use radio button. Isn't yes/no opposite of each other?
    – shiouming
    May 1, 2020 at 11:08
  • @shiouming It has the disadvantage that you need more energy to toggle it. You may want to look at switch buttons as an alternative to check boxes.
    – piegames
    May 1, 2020 at 13:08
16

Nobody offered an answer for "both":

enter image description here

5
  • 23
    That is one weird looking input! :)
    – kontur
    Feb 7, 2013 at 8:15
  • I use this design often, with positive feedbacks
    – Alex
    Aug 5, 2014 at 15:30
  • @kontur LOL I have seen worse. Hey, simpler is not always better, right?
    – Stephen
    Dec 6, 2014 at 1:16
  • 1
    I'll be using this idea in the future for sure!
    – NachoDawg
    Sep 3, 2015 at 13:57
  • 2
    It just needs a picture of a wolf howling at the moon, and it'll be perfect
    – Greg Woods
    Feb 17, 2016 at 11:09
7

According to this great article by UX Movement, using a select menu when there are only 3-4 choices available is not recommended:

When you have less than 5 options for users to select from, you should use radio buttons. This allows users to make their choice faster and easier because all they have to do is look at their options and click once. With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have less than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quicker.

You can find much more about how to (not) use the select menu here in the aforementioned article: http://uxmovement.com/forms/stop-misusing-select-menus/

3

Radio buttons are better if the number of options is absolutely limited. I am currently designing a solution including a set of radio buttons plus an option for "Other". The list of fixed options will always be the same, but there are possibilities for extra choices. This is based on what the clients would like.

If you have the screen space, using radio buttons for the sort of solution you are describing would seem to be the appropriate solution.

1

If you have more than three options you can got for dropdown eg: yes/no - Radio button True/False - Radio button male/Female - Radio button

If we know that there is no increasing in options we can go for Radio button where user can select in single click and visibility is clear.

If we have lot of options and need to be dynamic we can prefer for dropdown.

0

Every case is a special case when it comes to UI design, so you should always experiment and see how well actual users understand your designs. But the image below should help you get to a first approximation of what might be a good choice.

(And also read this article by Jakob Nielsen.)

Decision tree outlining which widgets to use in which situation

0

If the number of answer options is less than two, then we should avoid using dropdown button. This is because the survey participant has to click on the button to see the answer options and he/she might get annoyed if there are only two answer options. Instead, it's better to use a radio button if there are 3 or 4 answer 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.