I'm researching the question of how to best collect data from people on how much they slept.

Rather than requesting a text / integer value, I want to investigate the possibility that putting in the user's start and end sleep times might yield better results. This would remove the need for users to try to work out the total.

With this in mind, are there any good examples of touch based inputs that would get the beginning and end times easily? So far the best I can think of is a slider with two handles, but the interaction is a little fiddly on smaller screens.

3 Answers 3


I checked every app on my phone and didn't see anything other than dropdowns.

I think you're on the right track with sliders, actually. I put an idea together that I thought could work. I'm sure something like this exists “out there” somewhere, but I haven't seen it.

I think the goal is one finger gesture for “went to sleep”, one for “woke up” and one to submit.

The idea here is to use your thumb/finger to drag around the clock to land on the time you need, probably at no smaller than :15 minute increments. I would also remember what last night's numbers were, just in case I'm really routine-oriented. Tapping on each clock would flip from AM to PM, and vice versa. The default time would be shown, and would update dynamically as you scrolled around the clock face.

The AM/PM switch action might be clunky and non-intuitive, but I'm just going for proof-of-concept here.

Duration picker

  • Thanks for the answer Michael! The concept of dialing in a start and end seems interesting. I wonder if sliders for start and end might be more efficient visually, especially if assumptions can be made on start and end of each range (perhaps assuming that the users go to sleep in the evening and wake in the morning). I'll continue to look around also.
    – Don H
    Mar 12, 2015 at 11:27

enter image description hereI took a similar approach in solving this with a 24 hour circle. I found this much easier to use.

Once implemented, most users loved it - others felt like its was hard to set smaller 15 min increments.

However, fine tuning into these increments depends on where on the circle the user would tap (on the outer edges are best as more surface/touch area) and how big their fingers are.

You could also slide along the edge of the circle with a finger to set the times.

Another UX related challenge was showing the time when the user slides along the edge and then covers up the actual time display - this could easily be remedied by moving the time out of the way to somewhere above for instance. It could also possibly slide along with finger always being displayed above.

Nevertheless, for version 1 it worked relatively well.


The Android time picker is pretty good. You first select the hour around the edge of a clock face and then you pick the minute. No need for scrolling or lists. The below example is a recreation taken from ESTimePicker. The 12-hour clock is similar.

enter image description here

  • I think this doesn't communicate time lapses (eg start and end)
    – Devin
    Jun 17, 2016 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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