I am making a website for an Internet Service Provider which provides services in several cities.
I'm stuck with the city selection functionality.
I have made a concept, but not sure if this will work. Here is the header of the page:
This switch should attract attention of users, but I haven't got any idea of how can I improve what I've done.
Thanks!
If you really want to make this grab attention, you could use an interactive map to select the city.
something like this
https://www.amcharts.com/visited_countries/
however for this do note that it will take quite a bit of space
With only a few cities, i would rather stick with the classic list style using checkbox (if it's able to select more than one option) or radio AND if the cities are predefined. Something like this:
click(touch) is faster than having to type the city name and/or open a dropdown and then having to "browse" from the list. That is, if the cities are predefined. Otherwise, the option would be to use a dropdown like many suggested.
It is not immediately clear from how you phrased your question what the exact problem is, but I suspect a "Segmented Control" might be what you are looking for:
Alternatively you might consider a tabbed interface with a bounding box (as I mentioned, it's not immediately clear what you are trying to achieve):
Citymapper have a similar challenge (although they have now expanded to many cities).
Check out their city selection page which lists all the cities, stays on brand but also injects some personality into each choice.
Fundamentally though it is just a list of cities, and clicking on the image/name will take you to the city.
This may be a good way
Screen 1 - The user can type the location to be filtered in the Input
And this it's what happen when the user types the first letters of the city name
After the user selects the name of the city the page redirects the user to the internal page with the city already selected.
This way you can create a very direct and clear functionality for the end user, without creating any additional information the may confuse them in the process.
-- Update:
Added Images directly to the post, as @Aprillion suggested.
It all depends on how the user is using the application.
What is the maximum number of cities a user have on their account? You max might be the cities were the provider is servicing.
And in this case, are they selecting a city to customize stuff for it?
Some approaches are: If 1 to 5 cities, use a pill approach. Or radials.
If more, use dropdown.
If the number is too high, use dropdown with predictive search.
