Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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

share|improve this question
    
you can give a dropdown along with country and time zone Eg: India +5GMT India +9GMT USA -3GMT –  sree May 10 '12 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 '12 at 10:57
add comment

4 Answers 4

up vote 5 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Beautiful! Great use of the fact that timezone is only necessarily in certain countries. –  Alvin May 10 '12 at 13:49
add comment

Why not just put them on the same row?

mockup

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.

mockup

download bmml source

share|improve this answer
    
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. –  Schroedingers Cat May 10 '12 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 '12 at 11:00
    
What's the rationale for such a lengthy timezone value? –  dhmholley May 10 '12 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 '12 at 11:37
add comment

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

share|improve this answer
    
Crumbbars are an example of hierarchical comboboxes. –  Danny Varod May 10 '12 at 16:13
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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