Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I know that a select box takes up less space and is good for lots of options. But should there be any deeper influences to my choice than space? Are there any studies that show users preferring one or the other?

There's also the issue of multi-select vs checkboxes in html, which can be discussed here as well, seeing as the answer will probably be the same.

share|improve this question
    
See also on SO: Select vs Radio Buttons and Checkboxes –  unor Sep 7 '13 at 20:02

8 Answers 8

up vote 49 down vote accepted

I use select when the user doesn't need to know all of the alternative choices available. Autosuggest is useful for a long list. Generally, they know what they want and selects save space. Example: Choose a "State" like California or New York. You would never use radio buttons.

I use radio buttons when the alternatives matter. When I want to user to see what they are NOT choosing. Radio buttons allow you to expand the selection and even use longer text.

Rule of thumb: If it's a long list or the alternatives aren't that important, use a select.

share|improve this answer
    
Indeed, radio buttons are better for inputs asking the user to select options they aren't expected to already know, like "which of these colors do you like best?" Radios are also good for inputs that are effectively booleans but where true/false would be incorrect, like gender (having a Male checkbox would not go over well). With low option count, dropdowns add a level of complexity to the UI that makes it cumbersome, like if a form had a series of true/false questions or "rank from 1 - 10", you want to just click 10 all the way down without expanding a list each time. –  Anthony Jun 3 at 9:14

Other than space and the number of options, there really isn't a big difference. One thing I do like about radio buttons is that you can style them to look like large buttons, which can be useful for touch interfaces. If you only have a few options, it would be much easier to push a big button than to push the little dropdown and push the little option.

As far as multi-selects vs checkboxes, I really prefer not to use multi-selects. Just because you have to use a key combination along with your mouse click. Many users are unaware of how shortcuts work and would be unable to select multiple options.

share|improve this answer
3  
Good point about the multi-selects –  Sruly Aug 17 '10 at 6:36
    
Now multiselect can be a "dropdown+checkbox menu". So no ctrl+click for multi-selecting elements. code.google.com/p/dropdown-check-list –  Marc D May 4 '11 at 9:22

I was just pondering this myself for an interaction, and think another benefit of radio buttons is can they provide a bit of extra space for support text or explanation about the possible choices.

share|improve this answer

User interface guidelines like from MS, Apple, Gnome etc give usually quite clear suggestions on this:

  • Radio buttons: less than 5 choices

  • Select Box: 6 to 10 options

  • Scrollable list: 11 or more options or
    • Need to support drag and drop into list
    • number of elements vary

In addition you can use select box when you have to save space or default choices is usually good enough, so users seldom have to look at their choices.

Thirdly it can be used for days of week, months etc. That is things where you know what choices you have without being shown all of them. If I see "February" in a select box I can pretty much guess what all the other options will be.

Rational for why you use one GUI element over another

I general radio buttons are usually preferred because users can see all their choices right away. However showing all the choices can take up a lot of valuable space in the user interface. That is why most guidelines suggest using other methods of selecting when there are a lot of choices.

E.g. a scrollable list can show arbitrary number of choices without taking up a lot of space. The downside is that you can't see all the choices.

A select box is different in that we use it when showing the user all the choices are not that important. E.g. when the user can can guess the choices, or will very seldom need to change the default settings. The select box is primarily there to show the user what the setting is. However when there are lot of choices a select box can be awkward to navigate and thus a scrollable list would be preferable.

share|improve this answer
2  
Other than coming from the guidelines, what is the underlying rationale for the number of items to the type of control being used? There seems to be conflicting opinions about the 'magic number' +/- 2, and it seems like you still have to take into account the context of the task to be completed. –  Michael Lai Jul 10 '13 at 23:31
    
+1 for clearly giving numbers. –  Shivanand Sep 21 '13 at 8:19

Another difference between the two inputs that's often overlooked: If a radio-button isn't selected, it isn't passed along on the form submit. Or to look at it another way, radio buttons offer the option of not selecting any options.

With a dropdown (select box), you might have an option with no value (blank, "") and make it the default, but if a user leaves this option untouched, they are effectively saying "my answer is blank", since the form passes along "my_input_name : ''". By having a radio button, you can offer an option like "N/A" or "None of the above" that a user can explicitly choose and therefore distinguish between the user selecting "-blank-" and a user skipping the question / opting to not answer (This distinction becomes a real pickle in lower-level DB logic when distinguishing between a field stored with value NULL versus empty (blank) value).

On the flipside of this feature of radio buttons is something else that's often forgotten about radio buttons: you can't un-answer the question. If you have a radio fieldset like:

Gender : Male () Female ()

a user can skip over the question and the field is not even passed along as blank. But if a user selects male, well now they are stuck. They can either change the answer to female, or leave it as male. (For HTML forms, they can also learn a little bit about using their browser console, but that falls outside of UI/UX design and into programming and security).

So with this "no take backs" feature of radio buttons, you end up with a few options that a dropdown wouldn't provide:

  1. Ability to distinguish "didn't answer" from "my answer is blank"
  2. Ability to present all options without forcing a blank or default option. With dropdowns, you either have to make blank an option and then deal with that option not actually being a valid user choice, or pre-select an option for the user (like the first option on the list), which has the risk of being unintentionally submitted if the user neglects to make a selection (maybe they meant to come back to it, maybe they didn't see it), or if it is left unselected intentionally due to the lack of a blank option. In either case, the data is now less valuable since the "default" option may or may not be the true answer (if you don't believe me, query your data to get a ratio of rows with the default option for the field versus rows with another option. You'll be stunned at how many people apparently live in Alabama when it's the default option).

  3. Better control over handling form validation, specifically "required" fields. There is no such thing as required dropdown field. There are only dropdown fields where the blank option is not valid. Obviously it would be better to provide a dropdown of states with a blank option and treat the blank as not selecting a state, rather than blow out your form to avoid a blank option, but for questions that have 4-5 responses at most, it's better to provide the full list of options rather than use a dropdown with a blank option that isn't really an option and then have to deal with distinguishing blank from unselected.

Bonus opinion:

By the same token as the above ideas, it is also really dumb to use dropdowns instead of checkboxes. A dropdown with options "Yes/No" or "True/False" makes me roll my eyes every time. The only reason to use a dropdown is if you provide a third blank option and it's considered a valid selection. And even then, a radio button would probably be the better choice.

share|improve this answer

Radio buttons are usually preferable until you have more than couple of options. They only require a single click compared to two. Radio buttons are also better for nesting sub options.

share|improve this answer

I use select boxes (check box) to enable selection of multiple options or while making a binary choice.

Best Practice For using Select Boxes:

  1. Consider setting a default for the option users select 80% or more of the time.
  2. Avoid default opt-ins, such as signing up for email marketing.

I use Radio Buttons to enable of one item from two or more mutually exclusive options.

Best Practice For using Radio Buttons :

  1. Don not use radio buttons to launch actions.
  2. Always use two or more radio buttons
share|improve this answer

If just a few choices, radio buttons win for ease of use and fast selection. using a dropdown select prevents the user from seeing all choices until they get to that field.

This question could equally be applied to checkboxes vs multi-selects.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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