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: enter image description here

This switch should attract attention of users, but I haven't got any idea of how can I improve what I've done.


  • 1
    If there are not so much cities, a radio button list or thumbnail list would be enough. If there are more cities, you can use a select, but if you want all the cities, a linked select list would be preferable.
    – Taha Paksu
    Feb 13, 2016 at 19:29

6 Answers 6


If you really want to make this grab attention, you could use an interactive map to select the city.

something like this

however for this do note that it will take quite a bit of space

  • Those are very cool but only if most/all are selectable. With too many unselectable areas users may simply think the map doesn't work.
    – DasBeasto
    Sep 12, 2016 at 22:05

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:

enter image description here

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:

enter image description here

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

enter image description here


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.


enter image description here


This may be a good way

Screen 1 - The user can type the location to be filtered in the Input

enter image description here

And this it's what happen when the user types the first letters of the city name

Screen 2 - The user types a few letters in the input field and the options are presented to be choosen

enter image description here

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.

  • I think these processes overload UX. There are onlly 4-5 cities. It's may be a good pattern for long list items. Thanks btw.
    – Hola
    Feb 13, 2016 at 19:28
  • This way it's a good option if you have a lot of options. The real UX need to take into consideration the number of cities to be shown. Feb 13, 2016 at 19:33
  • @Hola if you have just a few cities, then may be better to use the option @ Taha suggested in the comments, about using images to be the selectors. Feb 13, 2016 at 19:43

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.

Your Answer

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

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