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'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.
share|improve this question
    
Make the Ajax search incredibly forgiving. Assuming this list comes from a table, create a second table of alternate spellings and variations and if one of them is entered return with the authoritative entry. For example, for University of Virginia, you'd have "UVA", "Univ. of Virginia", etc. in the related table. If someone types out "UVA", then the dropdown shows "University of Virginia (UVA)" and "University of Virginia" is popped into the input box. A select box with hundreds of items will be very slow, annoying to use, and awful on a mobile phone. –  Jordan Reiter Aug 29 '12 at 23:17

4 Answers 4

up vote 6 down vote accepted

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.

share|improve this answer
    
I know the autocomplete is better ideally. The problem in this one case is, we can't allow users to input anything that does not match perfectly one list item. –  cbrandolino May 26 '11 at 22:47
    
Yeah, I get it. From what they type you offer the selection. For example, use salary.com and type in a city. –  jonshariat May 26 '11 at 22:54
    
@jonshariate, it makes plenty of sense and I think we'll test that. don't you think that in a long form - with that kind of compulsory selection present in just one instance - that could be frustrating? –  cbrandolino May 26 '11 at 22:57
    
I see your point. But I think when dealing with a looong list, the user will appreciate the help. –  jonshariat May 26 '11 at 23:11
    
+1 for the form conversion article link. Nice find. –  Phil May 27 '11 at 8:01

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.
share|improve this answer
    
Thats a great check list for any form! –  jonshariat May 26 '11 at 22:44
    
What would you think of a two-step (state -> university) selection? –  cbrandolino May 26 '11 at 22:48
    
@cbrandolino Sounds great to me, but I live in Europe so I don't really know what I'm talking about. I suggest you prototype it and then grab a random person from the water cooler and see what they think. –  Rahul May 26 '11 at 23:01
    
I live in Europe too - I assumed you were american and used State instead of Region. Anyway, great answer - I learned a lot and I think I'll save it for future reference. –  cbrandolino May 26 '11 at 23:02
    
@cbrandolino Haha. Funny how that works, assuming people are American on the internet. Stupid Americans. ;) –  Rahul May 26 '11 at 23:06

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.

share|improve this answer
    
thought about it, but the whole list would occupy one screen by itself. –  cbrandolino May 26 '11 at 23:05

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/

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.