2

I have this major UX issue, I have a set of locations with hierarchy

Country>
  State> (Optional, to be placed if it makes the UX better)
    City>
       Neighbourhood>

I don't know what is the best way to design this, few options which I have are:

  1. Have a multi level dropdown in which when you click on one location it will open all the location nested under the clicked on inside the same dropdown with a little padding introduced. (I don't know 4 level of nesting will be such a great idea)
  2. When you will hover on the a particular location it will open a dropdown just next to the nested one. (I don't know whether four level of opened dropdowns will be such a great UX.)
  3. Have a blank input field with a feature of showing the related locations in a dropdown based on what user types. (I don't know if the idea of hiding all the locations from the viewer's eye is UX friendly.)

Should I make an AJAX call, or should I load it in the DOM? I can make sure that the AJAX gives the response almost instantly.

Let me clarify that the above question is asked mainly in context of a web-based application.

Improve this question

3 Answers 3

Reset to default
1

Break it up

Sometimes trying to do everything in one control is just too much. Think of how you select a car when shopping online: You choose at the highest level (year or manufacturer) which filters down the choices that follow.

In your case,
Select country to filter the state chooser
Select state to filter the city chooser ...

Depending on how granular your choices are, you might be able to combine the city/neighborhood, but I wouldn't nest them. Try listing as City, Neighborhood for easy selection.

Allowing search-to-select in the menu can be a big help with long lists.

Standard combo box

Improve this answer
1

After they choose country, they should be able to enter the ZIP. The back-end can be smart about narrowing down the neighborhood options available while filling in things like city/state.

A zip will be much easier to type on a numbers-only keyboard (larger, fewer buttons than qwerty) and will narrow the search quite a bit.

Improve this answer
1
  • ZIP is the easiest option. Some ZIP codes cover more than one city, but there is a preferred city in such cases, and the user can override the default if they live in a secondary city. Using ZIP code gives you correct state and city 95+% of the time.
    – Eric Stoltz
    Dec 1, 2015 at 23:55
0

I'm not sure what the person is selecting, but what about using a map for selection? You could allow them to focus on what is near them or just choose a city at first so they can zoom in, as necessary.

Google Maps does this for offline turn-by-turn navigation:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.