Improving timezone selectors on mobile

One of the most common elements we see in web software, is the timezone selector. Although simple enough as a concept, it is a frequent source of frustration for many users, especially on mobile.

Evernote notification settings

In this example we can see the “Notification settings” page for Evernote’s iOS app. We can easily guess that this page was made for the desktop web version of Evernote and was used in the mobile app without any further testing. The problem with this selector is that there is simply not enough space to display all text. This leads to users being unable to select their timezone, which in turn leads to ¬†notifications being deferred, which defeats the purpose of this functionality.

The simplest solution to this problem would be to use shorter text for the selector. For example “Athens UTC +3” etc. This would make the selector usable both for the mobile and desktop versions of this page.

Yet we can take this one step further and create an even better timezone selector by using the <optgroup> element. This would allow us to group options in our <select> element. With this approach we can provide an easy way for users to narrow down their location and at the same time still use the short text we mentioned earlier.

<optgroup label="Western Europe">
  <option value="london">London UTC +1</option>
  <option value="paris">Paris UTC +2</option>
<optgroup label="Eastern Europe">
  <option value="athens">Athens UTC +3</option>
  <option value="moscow">Moscow UTC +4</option>

As you can see the code required is very simple and works in all browsers. Here you can see how the above code renders in Android 4.4.

optgroup on android