I've been trying to define the best way to show hour selection on this design. We want to offer very time focused services to business travelers, so time must be relevant on the homepage.

We design this kind of horizontal dial that allow the user to "drag" the button to the hour wanted.

Any thoughts?

enter image description here

New Update

Button changed Once an user selected a range of hours

  • I think you'll need to be more descriptive. What happens when someone picks a time? Are they times of day (8:00pm) or are they hours/minutes (8hr 0min)? How specific do the times need to be? (Is 8:00/9:00 enough or do you need 8:01, 8:02, ...?) Sep 8 '15 at 13:07
  • I think it's pretty well-done already, but could probably add some more visibility by having some kind of animated glow behind it, or make it animate from the left side (6 am) to the current time. This way people will most likely understand they should move it. Alternatively you could also just add a tooltip box that says "Select time", which dissapears when the user moves it.
    – Daan
    Sep 8 '15 at 14:08
  • Thank you @KenMohnkern, once an user picks an hour or a range of hours, the offers shown down must change to match with time scheduling. About hours and minutes, I think the user ,for example, will select 8 pm, so the the offers showed are just in the interval of 8 pm and 9 pm. If the user drags the arrows to the left or right this will create a range of hours, so the offers have to match with his selection. Sep 9 '15 at 13:46
  • Thank you @DaanHeskes we are going to include your suggestions on the html file. Sep 9 '15 at 13:48
  • Diego, I think the design is nice and interesting, but the usability is rather confusing, and not only the times part. I'd tone down the looks a notch and concentrate on more simple and direct affordances. You have so much going on that I have no idea what to do or where to look. May I suggest just a simple form in the middle where you can choose location, day and time frame? It's evident you know how to make it look nice, so that won't be an issue, and you won't need to worry about user's ability to understand affordance
    – Devin
    Sep 9 '15 at 23:50

If they only need to choose on the hour e.g. 8:00am, 9:00pm and minutes are not relevant, what you have will suffice. However, if the user needs to select specific time, e.g. 8:15am, then you must either segmented the timeline properly. IF you want to condense the real estate of the page you can implement a "genie" effect like the dock of an apple computer where through the scroll it zooms in on the timeline and reveals the minutes. It is not ideal for handheld devices. Your best bet is to have a regular calendar interface or use a text field where people can input hour and minutes they desire.


The Update you've shared looks far better.

Currently, the challenge I'm having from your screens is to properly know the time I've selected.

Here are some solutions.

You could try using a better background color for the selected hour/range though.

Blue #1E88E5 would work well with the Selected Hour's text to White #FFFFFF to pop out more.

If you can, you could also elevate the selected hour/range by 2DP and leave a small shadow with 20-30% opacity below to emphasize on the hour.


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.