I have a simple interface in a webapp for users to edit their profiles. In the interface, the user is able to choose his timezone, so that we can localize the dates and times in the application.

To make the selection easier, the user first selects his country, then selects the appropriate timezone within that country. This is achieved by 2 dropdowns.

I am having trouble trying to get these 2 dropdowns to be cohesive and act as 1 unit. I have tired putting them in a form group, but I think the result is a bit too jarring, and the group no longer looks like its part of the overall form.

A simple drawing of the interface is as follows:


download bmml source – Wireframes created with Balsamiq Mockups

Could anyone suggest a way to get those 2 combo boxes to "feel" like 1 field?

Some clarification:

  • The country dropdown contains a full list of countries.

  • The timezone dropdown contains a list of regions/timezones within that country, for example Currie, Hobart, Melbourne, Sydney (EST) would be one of the values in the timezone dropdown, along with 4 more value of similiar lenght, if Australia is selected in the country dropdown.

  • Due to lack of space, we can't place them side by side (horizontally).

  • you can give a dropdown along with country and time zone Eg: India +5GMT India +9GMT USA -3GMT
    – sree
    May 10, 2012 at 10:55
  • That will result in a list that's too long. Not everyone is familiar with the timezone they are in, which is why we had 2 dropdowns, 1 for country and 1 for their timezone/region within that country.
    – F21
    May 10, 2012 at 10:57

4 Answers 4


Building on Alvin's answer here, maybe try a more interactive approach. Since the City dropdown only appears when the Country one closes that should make them feel like one field. You should also use some visual cues to group them (I used a box). The arrows look quite janky in the mockup but try out some right angled ones. They help guide the user as to what happened and what to do next.


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Beautiful! Great use of the fact that timezone is only necessarily in certain countries.
    – Alvin
    May 10, 2012 at 13:49

Why not just put them on the same row?


download bmml source – Wireframes created with Balsamiq Mockups

The downside is that you break the horizontal flow of the form. But if you set the timezone when selecting the country many users won have to change it.


Having locations in the timezone is very resonable, I should have thought of that. One Idea is to break up the timezone into towns. So instead of Sydney, Hobart... being one option. Put them into different options.

If it still wont fit. Put it underneath but use some inset to show that it's grouped with the country.


download bmml source

  • Actually, same row or not, making one feed the other, as a starting point will give a sense of connectedness. Maybe, if the timezone is set, the countries list could be reduced to those in that timezone. May 10, 2012 at 11:00
  • The second dropdown isn't just a simple offset and can be quite long, so we will have problems fitting that horizontally. The timezone dropdown contains values like Currie, Hobart, Melbourne, Sydney (EST).
    – F21
    May 10, 2012 at 11:00
  • What's the rationale for such a lengthy timezone value?
    – kastark
    May 10, 2012 at 11:28
  • 1
    dhmholley: a rationale would be that most people have no idea if they're in GMT-2, EST, Mountain Time or something else. They do know what city they are in or close to, though. If you have cities further apart, people might not know if they're in the same TZ as they are or not. For instance, if you had a timezone marked as San Fransisco (USA), would Las Vegas be in the same TZ or not?
    – André
    May 10, 2012 at 11:37

Hierarchical Dropdowns

I’ll assume that user research has convinced you that it’s preferred that users select their country first, then their time zone, as opposed to the user selecting their time zone alone (e.g., users don't know their time zone in GMT+/- format).

There are various ways to graphically tie the two dropdowns together:

  • Place Time Zone directly below Country so their respective top and bottom abut each other.

  • Suppress borders of both dropdowns and supply you own tightly wrapping border than surrounds both controls.

  • Place both controls on a shared background shade or color (easiest to do in a web app). A subtle shade is all you need and shouldn't be too jarring.

As for behavior, disable Time Zone until the user selects Country. When the user selects a country, populate and enable Time Zone and automatically advance focus to the Time Zone for its selection. Ideally, the Time Zone dropdown should open revealing the new list. It’s also probably preferred that you default to the correct time zone for countries with a single zone. If the user changes the country, then repopulate the Time Zone, advance focus, and automatically select either the equivalent or default zone as applicable.


If you have the space, maybe a tree control, rather than two dropdowns, would be a better approach. However, overall this seems like a lot of work for the user –having to choose among ~200 countries in order to determine which of 40-odd possible times zones to use. Your requiring the users to enter more information than you’re actually using, assuming you don’t really care about their countries, just the time.

The simplest alternative (for the user) is to automatically determine the user’s rough geographic location from their IP address and use that to set the local time. If this is prone to error, then provide the user with a means to adjust the time (e.g., spinner buttons beside the clock). You’ll usually be in the ballpark if not exactly right.

Another approach is to ask the user to enter the current local time. Compare it with your server time to get the right time zone (rounding the difference to the nearest quarter hour). Handling daylight savings time can be an issue, but that’s true with your two-dropdown design too. And it may not make much difference if the time is off by an hour, depending on your application (e.g., if it's just to let other users guess when the user is at work or may be asleep).

  • Crumbbars are an example of hierarchical comboboxes. May 10, 2012 at 16:13

Use some whitespace and either:

  • move Country and Timezone further away from the fields above
  • keep both fields closer together by half a measure

(By measure I mean the vertical spacing between rows.)

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.