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:
- 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)
- 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.)
- 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.