Models of user interaction when dealing with selections from a looong list?

Question

I'm a programmer working on a web project.

We need the user to select one item from a given list of universities. It's a list of 100+ elements, and the frontend is XHTML/css/js.

Here are the options we came up with:

• Simple select. Advantages: advanced user could simply type in the beginning of the University name; we are certain (user editing html apart, but we took care of it in validation) the user will select one and only one university. Drawbacks: naive users will have to scroll down the list.

• Ajax-ish suggestions/autocomplete We already use it for city selection, so it won't be hard to implement. Still, we need to be sure that the input field is one of the list. This might lead to awkward error messages (You have to select one of the items that - er - come out while you're typing the name), but will be faster if the user picks it up immediately.

Which one would you recommend?

Additional info:

• The site is designed for modern browser and requires javascript to work anyway;
• The case presented is the only one in which the user would be required to type in exactly one of the ajax suggestions;
• I am for the first solution, altough I tried to be as unbiased as possible in exposing the problem.

Answer 1

The autocomplete suggestion solution is much better. People don't mind filling of text fields They also struggle with drop downs.

EDIT: For example the autocomplete function on http://www.salary.com as the person types in a city a drop down opens that matches all the possible matches. Then the user picks the one they need.

The reason is that the user already knows the answer to the question and can type it in. A drop down requires 1. Scanning the lines, reading and processing. 2. Figuring out if the answer provided matches that of the one in their mind. 3. Drop downs can disorient users as they try to use their scroll button to shuffle through the items but ends up moving the page, and other mishaps.

Answer 2

Common practices when dealing with long drop down lists (often lists of countries) include:

• Put the most used options at the top of the list. In country lists, that usually means putting the US, UK, etc at the top of the list since most users will want those.
• Sort alphabetically. This makes scanning through the list really easy.
• Make sure the keyboard can be used to select an item. This will work if you use a HTML select tag, but make sure it also works if you implement your own dropdown list.
• If an item could be spelled different ways, or have synonyms, include them in the list. Make it as convenient and no-nonsense as possible to find my desired item in the list, even if that means putting the same item in there multiple times in different places (so in the case of the first suggestion where US/UK are at the top, still include them in their alphabetical place in the list as well)
• Autocomplete controls are recommended. Google is your #1 example of how to implement this: it works even if I don't use the autocomplete, but autocomplete enhances my use of the control. Tweak the autocomplete popup so that it doesn't pop up too frequently, but also doesn't take too long to appear - usually this means an onkeyup timeout of around 300ms or so.

Finally:

• Do usability testing. We don't know the details or specific requirements of your audience. Find out by having them sit down and try out the control. If there's anything in there that you didn't anticipate, you'll find out in no time.

Some ideas to make the experience even more compelling:

• Consider how people identify universities other than by name. For instance, the university logo. This could increase scannability of the list.
• Suggest related universities. For instance, when someone types the name of an Ivy League university, show the others in the list of suggestions. Or show universities in the same state as the one they typed, etc.
• Consider ways to group the content that makes sense to visitors. For instance, group by state and allow people to jump through the list by typing the state's abbreviation.

Answer 3

I would show the whole list and above it keep an input so the user can type to filter down the list. The Label picker in Gmail is one example of this.

In my mind this is different from autocomplete in that the entire list is shown and you can select with the mouse.

Answer 4

We implemented a dropdown / input field combobox for a similar thing. That way, you offer your users both kinds of interaction:

1. Click the element to see the list of all options, scroll down and select one, drop-down style. This is useful when you'd like the see the complete list of options to help you decide.

2. Start typing to manually input an item, with the help of auto-complete. This is useful when you know what you want to select and don't want to waste time scrolling a list.

Regarding the manual input of incorrect values - you don't need to use what the user typed:

• As user starts typing, show all the items that match the search string, the best match first and highlighted as "selected" and submit that item on user hitting enter (or whichever item the user clicked / used arrow keys to select).
• If the search is precise enough, the user sees and can submit exactly one option.
• If the search doesn't match anything, it is impossible to submit a value.

Similar behavior: http://bootstrap-combobox-test.herokuapp.com/