Long select dropdowns

Question

I'm working on a responsive landing page where users arrive after clicking on online ad. On the form, users need to select a location (105 possible) at which they would like their service. Unfortunately, our CRM stinks and once a lead goes into our system, the location is very very hard to change.

So with 105 locations, currently we have a dropdown. We can break this into opt groups by state, which still is annoying on mobile because it's so long, break it into two select boxes one state and one mobile, or something else?

I would want to just detect the closest loc, but often the user is on the form somewhere other than where they live. For example they visit at work, but want treatment near their home.

What do you think the best way to handle long selects is?

Answer 1

Situation n°1: The user knows where she can find a location: you can use a combo box instead of a drop-down.

You want you design the combo box adequattly so the user knows she has to start typing in it. You surely want it to be auto-complete.

Below, an example taken of Facebook profile editing.

Situation n°2: The user does not know the location she wants:

1. Ask where she lives (works, goes, shops.. your call according to what is relevant)

2. Give her the closest locations and help her by displaying distances for instance.

3. Let her choose other options: there you can have two lists one with the state (combo box if at least a location in every State) and a contextual one (according to the first input) with the location within the chosen State.

4. When the user chooses a location you can show other locations that are close to it.