Combining select field with freeform entry

Question

I have a "university/college" field in a web form. In the interests of data normalisation I want users to select their university from a dropdown. However, if their uni is not there they should enter it manually.

One option I've tried is a regular text box in which they start entering their uni and options appear below for them to click, which fills in the full name. The main problem here is many people enter things that are on the list but don't click the dropdown (for example they type "bristol" but the correct option is "Bristol University").

Currently I'm looking at using select2 so that they can easily type to filter, then have a checkbox below saying "my uni does not appear" that shows a text field so they can enter it freeform. This is certainly better when their uni does appear, but if it's not there it seems pretty awkward with many extra steps - first they type in the select field, then they close it, then tick a box, then type again.

My final alternative would be to make the field optional, so if their uni is not there they can leave it blank. But this could mean losing a lot of data.

What is the best way to present this workflow? Or is there a better workflow?

Answer 1

I have to enter my University in often for various sign-ups, and I think a drop-down with an embedded search/input field might be the solution you're looking for:

Start with a drop-down

^{download bmml source – Wireframes created with Balsamiq Mockups}

Reveal a list with embedded search bar

Allow the user to scroll through a list of colleges and universities, and give them the ability to search through them. Include a link that persists at the bottom that their school isn't listed. The field is not complete until they either click one of the options, or complete the following step. This should prevent incomplete entries.

^{download bmml source}

Change the search bar to a text input

The user may then input their own school name. You may consider copying the string into this field to prevent the repeated typing issue. They will need to have the ability to return to the list/search, hence the 'x' icon.

^{download bmml source}

Unlisted school is now selected

^{download bmml source}

Answer 2

For a product HIG, I recently defined two independent widgets, as you described, for specific workflows.

Typeahead basically follows the constructs of Typeahead.js. The workflow is similar to the one you describe where, as the user types, a list of available options appears that can be selected from. The user is, however, not forced to select one of these items and can enter their own value.

The input field alone is a form of recall, vs. recognition. In recall instances the user must remember what they are looking for a remember it completely. The typeahead helps to bridge the gap.

Filterable Drop Down follows many of the patterns in Select2. This use case it for items we know are on a list and are of a specific type (e.g., a university). By providing the filter, you can help the user more quickly find their school.

A drop down is a form of recognition. I can see and recognize the entry that I am looking for, but there might be a lot of entries! The filter field helps to scope those down if I remember at least a little segment of my desired item.

In the case where you might still want to allow free form entry, include the traditional "other" option:

^{download bmml source – Wireframes created with Balsamiq Mockups}

When selected a second input field can be shown to allow a free form entry. You can automatically fill it with the contents of the filter field to speed up the user entry process.

Use language that helps users recognize selection. Don't just say "Other" in the option, which the user can too easily just select at a whim. Use language that encourages them to realize that selection of an existing option is preferable - for example: "Enter a different school" or "I don't see my school", or something similar.