So here is Material Design time picker. (below right)
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.
- You first pick an hour.
- As soon as you are done, the UI jumps to show minutes.
- 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.
- An automatic transition from hour to minute feels forced, and you get confused especially at the first time.
- As a result, it does not fully represent a clock with a long and short needles anymore that it initially took a queue from.
- 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.
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.
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.
Now, Material Design also has a different mobile time picker that you can directly type in, which is better than clock-like version.
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.
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.
Someone mentioned that Material Design time picker with a circular design is very “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.
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.
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!