Posted on by ryu

#60 Selecting time – learnings from Material Design time picker

So here is Material Design time picker. (below right)

Screenshots of Material Design time picker and date picker.

It’s typically paired with a date picker, which is a calendar-based (above left). The date picker works very well. But it’s the time picker that has problems.

Here’s how it works.

  1. You first pick an hour.
  2. As soon as you are done, the UI jumps to show minutes.
  3. You pick minutes, then you are done.

Here are the problems.

  • Circular analog clock representation is visually interesting, but does not work well, especially because hour and minute are separated.
A visual showing Material Design timer picker separates hour and minute.
  • An automatic transition from hour to minute feels forced, and you get confused especially at the first time.
An illustration showing that there's an automatic transition as soon as an hour is selected in Material Design timer picker.
  • As a result, it does not fully represent a clock with a long and short needles anymore that it initially took a queue from.
An illustration showing that a guy and a clock thinking that Material Design time picker is "clock-ish".
  • When you switch between hour and minute by clicking the number, “a clock needle” animates from 9 hour to 29 minute, but this animation does not mean anything.
An illustration showing that there's an animated effects when Material Design time picker shows selected hour and transitions to show a minute.

It could have been better if hour and minute are both represented simultaneously in the “clock”, so that it resembles how a real analog clock will look like on that time.

A prototype of Material Design time picker with a slight adjustment where hour and minute are shown simultaneously.

When you compare this to iOS calendar time input UI, I have to say iOS is much better. It allows a user to swipe up/down hour/min, or use 10-key to enter hour and minute altogether.

A screenshot of iOS time picker with a scroll wheel control.
iOS time picker with 10-key input.

Now, Material Design also has a different mobile time picker that you can directly type in, which is better than clock-like version.

A screenshot of Material Design time picker mobile, that allows a user to type in hour and minute.

So what is the lesson from these?

Entering time is such a basic, common things to do in various products and services.

  • The experience should be as straightforward and crystal-clear as possible.
  • The UI should use a metaphor that people are already familiar with.
  • It should not confuse a user. 

From this perspective, using a calendar for selecting a date is perfect. We are all used to using a calendar.

An illustration and a caption showing a calendar is something that people are familiar with.

But for time, it would be best if hour and minute are not too separated.

And for faster input, direct typing would probably be the fastest and easiest.

I think a scroll wheel for hour and minute separately is fine too. An hour only has 1-12, or 1-24, and minute only has 0-59, which is manageable.

An illustrative diagram of how hour and minute scroll wheel work.

Someone mentioned that Material Design time picker with a circular design is very “designery”.

An illustration showing a woman making a remark about Material Design time picker as "designery".

It’s an interesting remark.

I think it’s fair to say that many designers tend to get attracted to a circle as one of the most beautiful geometric shapes.

Analog clock is a manifestation of that as a symbolic representation of time.

An illustration of an analog clock shown as a symbolic representation of time, compared to digital clocks.

While it makes perfect sense to make time picker using an analog clock metaphor because it’s about time, ironically the result feels wonky.

This illustrates an interesting aspect of user experience. How you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

An illustration and a caption saying "how you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

I respect the designer who created this, that she or he, or the team had a courage to try this type of design.

But at the end of the day, this is not the most intuitive, easy to use design, even though it may look interesting and unique on its surface.

Check out YouTube version too!

Leave a Reply