How to handle selections with a lot of options?

Question

In a web app, let's say I have a list of options for the user to select from. I would usually use a drop down in this case,if there is a reasonably small number of options, but how should i approach this differently if there are 50 options? or 100? or 1000?

Answer 1

Perhaps combine a two pane approach with a search?

The UI filters dynamically on the client side as you type in the search box. I like it better than search only, because you can discover what all the options are.

For bonus points, you can construct this on the fly from a regular select/multiple control.

Answer 2

A couple of ideas:

1. Combobox (or some kind of search with autocomplete)
2. Divide options into groups and let the user select group first, then the option from the list which would be smaller in this case

Answer 3

Well, if you have an app where a user can select from 1000s of options, my first response would be that you've designed something incorrectly. Try zooming out and considering the information architecture leading to so many options and see what you can do about that. Does the user really need all those choices? Can you get rid of a few for her or choose some sensible defaults? How do you deal with the paradox of choice problem?

But in more practical terms, try breaking the information up into categories and presenting them that way. I could be more helpful if I knew what information you were designing for, since that often influences what kind of visualisation or controls you can use.

Consider time zones. You can be really specific and offer each individual time zone, leading to a huge list thst you have to do some hardcore work on to make digestible for the user. Or, you can choose only the time zones nearest to most places, which might leave a few exceptional users out, but cover 99% of them.

Same thing with choosing a time for an event. Being specific means a user can choose down to the minute. 60 item dropdown menus? Or you can segment time by 5 minutes. Suddenly the user only has to choose from 12 options, and it's specific enough for the use case.

Answer 4

for that many options any type of multi select would be annoying. Think one wrong click and a half an hour gone.

You should use 2 boxes with arrows like this

it's not too hard to do with a few lines of JS

Answer 5

1. Use a drop down with all the elements logically sorted.
   For example - a timezone list is ordered according to the offset, a country list is alphabetized.
   Moreover, make sure the user can type in the value and it'll auto suggest/jump to the correct one.

2. Group them logically. If it's just names, you could first select the first letter and then have the subset of items that fit. It would be better if the items can be categorized logically, for example people in an organization, which nicely fit into departments, regions, etc.
   You could even have several levels deep.