Wombat and its products are used around the world and when it comes to scheduling assignments, campaigns, or any other time specific training, the user may face one tricky challenge to getting what they want, in front of their user, exactly when they want to: the time zone.
The Time Zone
Quick science lesson: thanks to the rotation of the Earth’s axis and the physical limitations of a sphere’s surface to receive light on a maximum area of one hemisphere from a single, fixed point of light, Earth gets to enjoy daytime on one half of the planet, while the other half enjoys the night. Humans have ingeniously divided ourselves among a number of longitude-based slices of time, known as time zones. This helps better coordinate with people around the world while understanding the time relative to where they are. Although one may assume there’d only be around 24 time zones, considering we have 24 hours in a day and generally divide our time zones by hour, things quickly get a lot more complicated than that.
In reality, there are approximately 39 time zones, a couple even offset by stranger intervals like 30 minutes or 45 minutes. When you have a product that is used internationally, this can become an issue. Let’s say I’m in the US on Eastern Time, and I want to send out a phishing campaign to my London offices. If I do not take into account our unique time zones, and I set the campaign to send out at “9 in the morning”, I am most likely thinking that in terms of Eastern Time, when I begin work. However, 9AM EST is 5 hours behind GMT, the time zone London would be using. In other words, in my attempt to send out a morning phish, I actually end up sending a 2PM phish to the London team.
Enhancing the User Experience
Simply being able to set a specific time through an input won’t suffice when you need this level of granularity. However, the question then becomes “how do we simplify the time zone selection process?” One common method is the map. Here is what one of my personal favorites looks like, from the Ubuntu installation process:
However, a map brings up many issues. For one, it’s one of the most space consuming answers. This wouldn’t work out well on smaller devices like tablets/phones, which we’re trying to take into account as we move towards mobile-friendly designs. Maps also tend to require additional accuracy that only a mouse and cursor can bring, especially if you’re trying to get a specific city or one of the smaller time zones. Moving away from this, the next answer is the select dropdown. However, no one wants to see a list like this:
Overwhelming, undescriptive, and visually unpleasant. Although it is certainly the simplest solution, tossing this into the user’s face would be disrespectful on our part.
The select does provide a more compact start for choosing the time zone, but a simple list doesn’t provide much context or help. Our solution ties in a few powerful additions to get something we feel is much better:
Using the freely provided timezones.json we push the data through an Ember Power Select, giving us a handy typeahead search which will let us drill down specific time zones we want. The list is limited to showing 3 at once, though it can be navigated by simply scrolling as usual. We also enhance the slats for each zone by adding metadata such as the time zone name, locations, and even an actual icon of the continent the zone (primarily) applies to.
We also enhance the search by allowing all the pieces of metadata to be searchable. So typing “EST” will prioritize the “EST” time zone as the most likely result desired, but also list some other options that contain the “est” string. You can search by cities, and if you were to enhance the data source enough, add a ton more searchable pieces of data to each zone. In the example below, you will see searching for “New York” will bring the correct time zone, even if it’s not part of the visual metadata.
Room for Improvement
Although pleased with the new component, there are still ways to enhance it even more. Some things that come to mind:
- Sizing: When you select a time zone, the input fills up with a slat about the same size as those from the dropdown. There are probably ways to condense this, and should element queries ever be a thing, we can make some cool “mini” versions as the page scales down.
- Smarter Search: The search itself works great, in reality the way to make it better is enhancing the data source with more metadata to pick up. Filling in full lists of “common cities” for each zone is one example.
- Daylights: That dreaded time of year is still an issue to work out here. Do you list them separately? Make the component smart enough to know when you are in daylights and flip any abiding zones to their alternative automatically? Perhaps I need to dig deeper, but I couldn’t find many examples of how other sites deal with this.
- More Icons: In particular I think adding the individual US states would be worthwhile, just to add a little extra polish to the icon set.