Usability tip: Display the city name first in a time zone drop-down list
Posted by #
There’s a lot of sites where you have to select your time zone as part of the registration process. The zones are often displayed like this: “(GMT+02:00) Helsinki”. That sucks.
Given that the time zone lists always have dozens of items, it’s really annoying to scroll down to items further down the list. Fortunately, browser makers have been wise enough to implement keyboard navigation for drop-down lists. Therefore, when selecting a country, I can type “fin” and hit enter, and be quite sure Finland is selected.
With the time zone lists like above, I can’t use the keyboard. Or I could, but I would have to type everything until the “H” in “Helsinki” and that would pretty much cancel the benefits of using the keyboard. So if you need to implement time zone lists, do put the city name first and the time zone only after that. Sure, it’s a minor annoyance but they tend to add up.


What browser are you using? In IE or Firefox, if you are in a drop-down, and you type “fin”, you will end up on the first item that starts with “n”, which is obviously not finland. With each keystroke, it goes to the first item that starts with that letter.
Anyway, the reason I think most timezone drop-downs start with offset first is that the end user is actually more likely to know thei offset than there city. While that sounds absurd, there usually only a few cities in the US listed in drop-downs, since there are only a few US timezones. New York, Indiana, Arizona, etc. If you were to type “c”, thinking chicago, it’s doubtful the list has it.
Paul: This works fine in Firefox 1.5, Camino 1.0 and Safari 2.0.3, all on OS X. Haven’t got a Windows box at hand to test it right now.
I appreciate that many people navigate by the offset. However, there’s plenty of places in GMT+2 (for example) and it’s important to select the right city because different countries have different practices regarding daylight savings times etc.
Granted, this is not as important in US. However, I think it’s easy to spot the pattern pretty fast (I believe the city is always the same), and thus even in US it would be easier to just use the keyboard for selection if it was possible.
Ah, you’re right, I should have tested it before I spoke. Firefox does work as you described. I guess I just got so used to the IE way that I didn’t realize that other browsers had implemented it that way. But I just confirmed it in IE, when you type “fin” in a country drop-down, IE takes you to “French Guiana”, then “Iceland”, then “New Caledonia”.
But anyway, I still fail to understand your point about the city. For example, what city is Central Standard Time? Without looking it up, I’d guess Chicago. How about Mountain? I’d guess Denver. Pacific? Los Angeles. How many did I get right? I’ll look it up and get back to you.
Well, at least using Java’s TimeZones, I’d be 3 for 3, so maybe you are on to something here.
Paul: You’re looking this too much through stars’n’stripes glasses. Don’t get hung up on it being the name of the city. Would you be happy if I call it the name of the time zone? Mountain is Mountain and Pacific is Pacific.
But again, you need to know the name (and you will, after filling a couple of these forms). In GMT-7 there are Arizona, Mountain Time, Chihuahua, La Paz and Mazatlan, so it’s not enough to know just the hours. Even if you live in the US (and the list only lists the US time zones), you have two choices. If you live in GMT+2, there are thirteen, and for example Helsinki is number 66 of the 142 time zones, so it involves a whole lot of scrolling to begin with.
At that point you really start to appreciate the possibility of fast keyboard navigation.