Time zones pose an occasional software localization challenge. Assuming your software needs to include this as a configurable setting (more on that below), what's the best way to help a user choose a time zone?

The problem is, there are a lot of time zones. A lot of time zones, most without a naturally elegant identity or universally understood name. Time zones were designed be mostly unthought-of: invented so most people wouldn't have to worry about the effect of longitude on time. Within a time zone's geopolitical boundary, there's little need to think or talk about time zones.

As we'll soon see, timezones are very closely tied to location. People may not know the official name or relative offset or exact boundaries of a particular time zone, but they understand that there is one for any particular place.

Collected examples

To see how a user might expect us to solve this interaction problem, I've gathered a variety of "time zone chooser" examples.

Original Mac — circa 1984

Screenshot via http://macfloppy.net/post/18502052008/susan-kare-designed-the-original-macintosh-control:

This is the Control Panel in the original Macintosh operating system. Note how the user sets the time zone: they don't! A personal computer was more of an island back then; a user set "the" time (their time) and that was that.

Windows 3.1 — circa 1992

For Windows 3.1 applications — remember Netscape Navigator 2.0? — a user would set their timezone configuration via a variable in AUTOEXEC.BAT:

SET TZ=aaahhbbb

For interfaces of the "Application Programming" sort, this general approach is still reasonable. Identifiers referencing rules in the Olson database are preferable to the ambiguous local three letter abbreviations and manually-configured offset values needed here.

Windows NT 3.1 — circa 1993

Screenshot via http://www.guidebookgallery.org/screenshots/winnt31:

While I haven't been able to find a screenshot of this dropdown when expanded, from the looks of things it was sorted by GMT offset (see how there's multiple cities listed in the chosen option?).

Newton OS — circa 1993

Screenshot via http://cs.gmu.edu/~sean/stuff/n800/:

The Newton — a PDA that goes wherever people need to communicate — needed to know about timezones. Already we see a map, and an interface based on locations (major cities) rather than the underlying timezones. Since it's somewhat natural to associate time zones with a list of "nearby" major cities, why not use a map to narrow down that list? Tapping the map pulls up a short list of cities near the stylus.

Windows 9x — circa 1995

Screenshot (s) via http://www.petri.co.il/summer_clock_in_israel_for_2006.htm:

These screenshots confirm my theory of how Windows NT's dropdown worked. There is a map, presumably clickable, but it doesn't actually seem to show the selected timezone. Apparently, there's a reason for that.

Mac OS 9 — circa 1999

Screenshot via http://www.guidebookgallery.org/screenshots/macos90:

By Mac OS 9 we again see a list of cities as the interface to the underlying time zone database. The key takeaway is that a user is only expected to know and find a nearby major city in their timezone — there may be more than one city listed per timezone. This reduces the geopolitical knowledge (and guesswork) necessary to find a suitable setting. Just because I share the same time zone rules as Los Angeles doesn't mean it would come to mind as representative of my locale.

Windows CE — circa 2000

Screenshot via http://h20000.www2.hp.com/bizsupport/TechSupport/Document.jsp?lang=en&cc=us&taskId=115&prodSeriesId=322914&prodTypeId=215348&objectID=c00009393:

Windows CE provided a similar dropdown interface as Microsoft's early desktop interfaces (although certain cities were grouped differently). Note the easy affordance made for switching to a temporary timezone while traveling.

Garmin eTrex/Foretrex — circa 2004

Screenshot via http://www8.garmin.com/manuals/Foretrex201_OwnersManual.pdf, p.44:

An "embedded operating system" for an older device with limited screen space, limited processing power, and limited input surface has a limited solution to the problem: a listing of perhaps two dozen or so world cities (…Samoa, Sydney, Tehran, Tokyo…) followed by the named US time zones. There's also an "Other" option enabling the user to set a custom ±hour/minute offset from UTC.

Note generally that trying to tackle the "time zone" problem with only this last option (forcing the user to manually specify their local time offset) would be broken in at least two ways: it expects the user to know this offset which is usually not the case, and it requires many users to manually change the setting twice a year. (It's broken in three ways if you assume that every time zone is offset from the meridian by whole hour values. Only most, not all, are.)

Web 2.0 — circa 2005

Screenshot of http://www.fogcreek.com/fogbugz/:

Here's an example of a web app making use of an offset-sorted dropdown in the Microsoft style.

Mac OS X Leopard — circa 2007

Screenshot via http://rubenerd.com/p2370-2/:

Mac OS X also let the user select their approximate location via a world map, as we saw early on in the Newton OS. Again, the advantage is: rather than having to think of a major city to search for, the interface shows the options near me — I just have to pick the one I feel is most appropriate of the three or four nearby options.

Garmin nüvi — circa 2007

Screenshot via http://www.gpsmagazine.com/2007/06/garmin_nuvi_250w_review.php?page=7

To be honest, I'm not sure what happens when you press the time zone button. The manuals for many nüvi models say "select a time zone or nearby city from the list", so I think it's safe to assume that this updated hardware still relies on the same limited interface as Garmin's older outdoor GPS units above.

World Wide Web — circa 2009

Screenshot via http://dribbble.com/shots/89371-Me-com-Time-Zone-Picker:

Web apps can show maps too. Here's one (kind of rough perhaps? I'm not sure what's going on with the two different highlights…) from one of Apple's ill-fated Me.com web apps.

Garmin nüvi — circa 2011

Screenshot via http://www.pocketgpsworld.com/Garmin-nuvi-2360-reviewed-37558.php:

GPS receivers know the exact time in UTC and the users' very precise location — the device can use this information to simply set the local time automatically. Many cell phones offer a similar user experience — the phone simply displays the local time of the (nearby) tower it is currently connected to.

America-Wide Web — circa 2010

Sometimes you're only localizing for a limited geographic area. In this case, a web app was built for a service only offered in the United States. It was possible to list common names for the small handful of time zones the app needed to support.

Mac OS X Lion — circa 2012

Recent versions of OS X compare the signal strengths of WiFi routers in range to a database of wireless base station locations to get a fairly precise location fix. Like the nüvi example above, this allows a fully automatic time zone setting. If necessary, the user can still override the setting as in previous versions, by clicking the map or typing the name of a nearby city. In fact, since the preference pane now uses an Internet API to look up the city, it offers a fairly comprehensive list including even some smaller cities.

This interface offers a great deal of flexibility, all centered around the helpful perspective of time zone ("local time") being strongly related to location.

General and perhaps Timely advice

Of course, the best interface is no interface. In a few cases — be careful to make sure yours is really one of them — you can ignore time zones altogether and just deal with local times. In many other cases, you can rely on time and calendar–handling facilities built in to your software's underlying platform. If the user's operating system is already configured to display their local time, it's best to use those APIs whenever possible. Store precise moments of time in a timezone-neutral format like Unix timestamps or alongside their original offset as possible with ISO 8601/RFC 3339 time strings, and convert to local time only when displayed. This often works for web apps, too; you can set a JavaScript Date object using a UTC timestamp and get the calendar values back in the user's local time.

Aside: As a general rule you should never, never attempt to handle applying the chosen time zone information yourself. (You shouldn't be implementing any calendar-based calculations yourself, for that matter.) If you would have to change your code or its configuration to handle a local legislative change to any sort of calendar or timekeeping system — and your work isn't part of a major operating system's platform — you're most likely doing it wrong.

Summary

There may occasionally be times (usually when a shared machine needs to interpret or localize times on behalf of a remote user) that your application must let the user configure a time zone.

If you need to stick with a simple dropdown, grouping regions with shared GMT offsets and DST rules and then ordering by the base offset (basically: longitude) can work. Many examples above do this. (However, avoid simply presenting the user with a list of every time zone in your platform's database. Even if you've managed to filter out the historical ones!)

If you can provide one, a clickable map is better. Include alongside a small database of major cities, or reference a more complete set of populated place names. Try to familiarize yourself with the nuances of the best interface examples above — situations where the user clicks near more than one time zone, other cases where the user would prefer to fine-tune the choice of city, and perhaps other aspects I've missed. Accessibility should also be a concern — how will the user choose a time zone if they aren't very good at seeing or clicking?

And finally, if you just want to convert between Every Time Zone, well…follow that link. Or if you like screenshots of old operating systems, you'll love the GUIdebook website.

Oh, and of course I'd love to hear about other unique and interesting solutions to this "time zone picking" problem if you have some!