How can you combine multiple dropdowns into an apparent single control?

Question

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

Answer 1

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}

Answer 2

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.

-Edit-

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}

Answer 3

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.

Alternatives

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

Answer 4

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