Timezone selection best practices

Question

I am looking for ways to design a UI where the user selects their timezone. I would like to avoid having a map as that can be slow people down on small screen devices. I currently have 2 options:

• Give people a full list of timezones with the city names sorted by either city or UTC offsets (like the timezone slection list in windows).
• Ask the user to select their country first and then base on their country, a second box would display all the time zones in that country.

Obviously the first approach would be easiest for people who live in a popular city or know their UTC offset.

The second approach would be more fine grained, but it would probably slow the more knowlegable users down.

Can people who have implemented something similiar please comment as to what would be the best approach?

Answer 1

Use a simple drop down, but pre-populate it with your best estimate for their zone. You can get the zone from the ip, or use javascript.

Users will rarely have to change the selection.

When it comes the the actual formatting of the list, i would recomend that you look at windows (or mac). They use conventions people understand.

You may also allow users to enter their city and country, and get the time zone automatically. The google maps API can help you with that. See http://www.worldtimebuddy.com/ for an example.

Answer 2

I'd say that this depends on the users you're targeting with your product.

Are most of your users based in large cities? Are most of your users computer savvy?

As I am always using the keyboard to navigate through forms, my favourite timezone selection method is one huge drop-down list with all kinds of options such as cities, countries (=capitals of the countries), UTC offsets, etc. The more options there are, the better: If the user is based in Moscow, for example, they could press M (for Moscow), R (for Russia), or 4 (for a 4 hour offset).

The benefit is that someone used to navigating through drop-down lists using a keyboard won't have to think and will always be a few keypresses away from the timezone they need.

However, this also makes the drop-down list messy and hard to navigate for those not using their keyboards (less computer-savvy users or those on mobile devices).

P.S.: Here's another interesting discussion on this topic: Which way should I display time zone names to make them easily pickable?

Answer 3

I did not implement anything on this, but I have an idea on how this could be done.

One way to do this is to use the user's system time using javascript and figure out the offset.

new Date()

would give out something like this Wed Aug 17 2011 13:00:00 GMT+0530 (IST)

If you don't want to go with the above or have a backup, you could get the country of the user from his IP address, request user for his pincode. There are few services which provide the mapping from pincode to city and there should be services from a city to map the timezone.

Answer 4

Most of Timezone names are absolutely meaningless for people who are not living in the specific area. If you only have to set a personal Timezone (and users don't have to change it every time they are elsewhere) then dropdown should be enough (maybe some prediction capabilities are useful).

Another solution: ask for the current local time, everyone knows knows it and you can compare it to GMT and return the correct timezone. I have never tried this, and don't know if there is anything impossible in this approach - think about it :)

Edit: One disadvantage of asking for time solution is, that people might think that they have to hurry for some reason - don't know, depends on context. Maybe an explanation is necessary for this one.