We’ve recently deployed a new time selector based on extensive customer feedback. It’s designed and built with love by our talented team. Our previous time selector offered only a handful of preset choices, but the new time selector allows you to smoothly slide along a variable scale as well as clicking on presets.
Our customers most commonly look at a specific time range ending at the current time, but it’s easy to set specific start and end points as well. For example, here’s how you can set a specific start date and time:
There’s also pagination. You can see the pagination hint in the previous screenshot, which appears when you mouse over the activation target in the top menu. Hovering over the small arrow reveals what it does. You can use it to page back and forth an interval at a time:
This hybrid design blends a variety of things that were surprisingly difficult to put together. You might think time selectors are a solved problem, but after examining literally dozens of examples available online we did not find any designs, idioms, or implementations that came even close to satisfying us.
In the end, both the design and the implementation were marathon efforts but well worth it. Several very different tasks are combined in a way that feels natural and unremarkable. A good example of two universal design truths: good design vanishes into the background so you almost don’t notice it, and good design is very hard.
Many thanks to our customers, who gave us both good feedback and good suggestions!