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 have a form which dynamically creates the user's choices as radio buttons. It functionally works, but it does not look that pretty.

It looks ugly, particularly if the number of radio buttons grows. So if I have 5 to 10 options it is fine. But if I have hundreds it is not.

What's the alternative to hundreds of radio buttons?

share|improve this question
3  
Of course the simple answer is "yes, like a dyson". –  Schroedingers Cat Sep 22 '11 at 16:15
    
What happens when the dynamic list of choices happen to number exactly one? Will that appear as a single radio button? –  Erics Sep 22 '11 at 23:42
add comment

10 Answers

up vote 23 down vote accepted

What kind of “hundreds of options” is it?

If the field is something like “Country”, where the user will know what their answer should be without needing to read all the options, then a drop-down list is ideal: it’s simple to use, it takes little page-space, and is easy to display and to select from on most devices.

If the field is something like “Airport”, where the user doesn’t need to read most of the options but may not know exactly what they want, then an auto-complete text field is good: it’s a little more effort to set up, and may be a little more fragile (eg on old software, or over a bad network connection) but will be much easier to use in general.

But if it’s something where the user needs to read the range of options to make their decision, then hundreds of options is way too many. You could divide them up somehow — perhaps hierarchically, with a drill-down approach, perhaps some other way.

share|improve this answer
add comment

As soon as there are more than a few options, I tend to use a dropdown-list. (<select> in HTML). The added benefit is that it's a lot nicer to use on iPhone/iPad than a bunch of radio buttons.

share|improve this answer
add comment

Semantically equivalent control would be a drop down list.

share|improve this answer
1  
Semantically equivalent, but doesn't accomplish the same thing. I'm really hating radio buttons, but I have a grid of up to 25 choices along with information about the choices like a spreadsheet, one of the lines needs to be selected, and a drop down doesn't work in this case, and radio buttons just look horrible. –  stephenbayer Oct 18 '11 at 16:06
add comment

With so many possible options use a list (not a dropdown-list) and show at least 5 or more items (SELECT tag, size=5, multiple=false in HTML). Only if space is an issue, then use a dropdown-list. Dropdown-list are just a bit more of a hassle to work with then regular ones.

share|improve this answer
add comment

I do not like dropdown lists and the way they hide choices and only allow for a limited number of options to be seen by the user at any given time. Dropdown lists are the accepted means for displaying options like the State field in an address and I agree that is currently the best option for that use, but I think for hundreds or even thousands of possible choices, I think we can do better.

  1. An auto-complete text box to allow a user to find one choice among many.
  2. Using search to filter the options.
  3. Break the choices into smaller chunks so the user can drill-down to a smaller set to make a selection

Maybe the best choice is a combination of the above ideas with dropdown lists and/or groups of radio buttons.

share|improve this answer
add comment

Why are there so many choices possible?

Put another way: what does the app need, that such a large number of choices is possible? Even on a large (24" diag.) screen, more than five choices is tough to comprehend. More than 20 can be mind-boggling. Asking your user to look at, read, comprehend and then ACT on 100 choices is not considerate, plain and simple. Such a UI will not be helping your user, but creating new, hard, unexciting cognitive work for him/her.

The problem to solve is not a UI problem: how to display the choices. The problem to solve is a UX problem: how to create an approach to the user's goal that will not need to present more than about five choices at a time.

Think about what the user is trying to accomplish overall. Map your app's task flow. Map your user's work flow and articulate their mental model. Then go back the your "drawing board" and re-design the UX to eliminate your app's need to present so many choices at once.

share|improve this answer
add comment

Can the items be logically grouped on the form so that people can show and hide those groups? You could put those groups under tabs or in an accordion, making it easier to deal with cognitively while still having room to grow.

share|improve this answer
add comment

If you have a variable number of entries, and there is a chance of there being more than 10, then radio buttons are a bad idea. The main reason is that visually, a lot of radio buttons are hard to take in. A drop down box is an obvious alternative, particualrly if is a searched box ( that is, allow the user to type in an entry and have it select this ).

But the question that others have asked is still pertinent - how come there are so many options? How can the user actually make selections across these? I think you need to start by reconsidering exactly what the user expectation is and design an interface around this.

share|improve this answer
add comment

Us a drop-down list

As stated in the Microsoft UX Guidelines

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.

share|improve this answer
add comment

There is a great JavaScript plugin, Chosen, that adds searching capabilities to drop-down menus. It would be great for a scenario like this.

share|improve this answer
add comment

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.