I have been looking at new ideas for interface design, and came across this one for selecting time by mimicking a clock face.

enter image description here

I believe that the interface can probably be tweaked to look a bit nicer and more user friendly, but it seems to have some merits compared to the typical spinner controls we see implemented for time selection.

Is this a good use case for time selection implementation, especially for those of us that process time information the same way we like to look at the analogue watch?

Looking at the design, it looks to be more suitable for cases when you don't have to specify the exact minute, but have a margin of 5 minute steps. Having said that, the spinner control can also be designed to 5 minute steps.

In terms of picking a hour/minute combination the clock face interface seems to be very fast compared to spinner controls for each of the digits to get the exact number you want, but I don't think getting into the number of clicks would necessary reflect the usability.

On the basis of picking a specific time value set as those shown, is this also a usable/user friendly technique that could be used more widely? One of the answers provided of the Android KitKat implementation probably provides a better example of how it can be used.

  • Looks like it could work well, especially for touch interfaces, the only downside I can see initially is when you need something more accurate than 5 minute segments. Commented Jul 30, 2014 at 7:48
  • What platform are you creating this form? Website; Mobile App? Also, what is the purpose of the clock, what are the users selecting the time for? It feels kind of clumsy and could lead to inaccurate entry and user frustration. I guess it also depends how much 'innovation' for innovations sake you want to go.
    – OpenTage
    Commented Jul 30, 2014 at 8:46
  • A word of warning: a UI like that's going to take a lot of JS, and it'll fall apart with JS disabled.
    – ArtOfCode
    Commented Jul 30, 2014 at 10:11
  • This is verging on a 'review my site / app / product' type question and as a result it looks like you're attracting close votes. Can you be more specific about the situation you're looking to apply this to? What problem is this a potential solution to?
    – JonW
    Commented Jul 30, 2014 at 11:18

2 Answers 2


This looks like the time selector introduced in Android KitKat;

Android time selector

From a UX perspective this UI works well on touch-enabled interfaces but would be a lot less intuitive if used with keyboard/mouse.

There is a useful overview of mobile time picker UI's here - http://blog.iangclifton.com/2014/01/22/mobile-time-pickers/

And also a nicer looking ( to me anyway ;) ) implementation of this here - https://github.com/e-sites/ESTimePicker


Hope this info helps.

  • Thanks for the example. There are lots of ideas generated in github, jsfiddle and codepen worth discussing on UXSE.
    – Michael Lai
    Commented Jul 30, 2014 at 23:42

I admire the effort of mimicking an analog(ue) clock face, but I think you're oversimplifying things into complexity.

The first point of hopefully constructive criticism is, in full honesty, one of my pet peeves as a non-native English speaker; the AM/PM thing. If your target audience contains a significant amount of non-natives, you might consider showing a toggle switch for morning/evening and afternoon/night respectively.

The second thing I think you should take another look at is the hierarchy of your input elements. Starting from the outside it's minutes > hour > part of day. While this is the most sensible arrangement regarding the orders of magnitude (looking at you, MM/DD/YYYY folks...), for displaying time it might not be ideal.

Again, I like the novel interface you came up with, but there's a possibility some users will find it too novel.

A totally unoriginal but when executed correctly very user-friendly alternative could be a horizontal scrollbar.

  • On the scrollbar's left, show Wednesday, July 30th 08:00, or any other time your business opens/your timeline should start.
  • On the other side display the end time, Wednesday, July 30th 17:45 for instance.
  • Above/below the thumb (the part of the scrollbar you grab), display the selected time. When the span of your timeline is not more than a day, 13:35 would suffice. Else, show the full date as described above.
  • You can make the slider step in increments of 5 minutes or any other step size you want.
  • Sorry, I can't take the credit for the idea... it is not my design but something I saw browsing for new ideas.
    – Michael Lai
    Commented Jul 30, 2014 at 23:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.