15

In designing a way to enter time durations in a website, there are various proposals below. What are the pros/cons from a UX standpoint for both mouse & touch uses.

Yellow boxes show input element. Down arrow opens a selection list.

Additional information:

  • Durations will typically be under two hours, but as high as 4
  • Seconds are typically not specified, probably we can get rid of it entirely, but I'm putting it in below for illustrations
  • "Common" entries would be intervals of 10/15 minutes, eg 30 minutes, 40 minutes, 45 minutes, 60 minutes, etc
  • Duration is required - they can't enter 0:00:00

What additional UI options have you seen/used or thought of?

Option #1. This option would allow the user to type text, and parse for colons, spaces and non-numeric as separators

Option 1

Option #2. Allow user to enter hour, minute, second in three separate fields

Option 2

Option #3. Similar to #2, but visually show the three fields as one field. The ":" probably becomes a lighter grey text

Option 3

Option #4. Similar to #3, but use explicit hour, minute, second indicators for each field.

Option 4

Option #5. Similar to #2, but we allow selection from a dropdown for "common" times for each field (eg hours=1,2,3,4, minutes=0,10,15,20,30,40,45,50,60)

Option 5

Option #6. Similar to #1, but we allow selection from a dropdown for "common" total times (eg "0:10:00", "0:20:00", "1:00:00", "1:30:00"), etc

Option 6

EDIT: Here is another option. The touch slider only appears on mobile.

enter image description here

Improve this question
2
  • 1
    Good question. I don't know the answer but some thoughts. Multiple entry fields can be clumsy for touch with getting to the next field and the keyboard coming and going. Out of bounds things can be an issue, is 1:77 accepted?
    – obelia
    Oct 4, 2013 at 22:18
  • @obelia - Insightful. It occurs to me a nice touch interface would be a simple slider left to right, which horizontally scrolls values by 5 minutes.
    – Aaron Averill
    Oct 5, 2013 at 3:23

1 Answer 1

Reset to default
5

On Android platform we have nice time setter:
enter image description here
It allows to set time immediately without drop-downs. It's good for your narrow time range. Setting the smart default and lower bound will deliver good error-prevented user interaction.

Slider for time setting is not good idea:

  1. Setting discrete values with slider is hard, especially on small screen. It could lead to "jumping" and time-consuming interaction, as target tick is rather small, you have 24 ticks of 10 min for 4 hour (240 min) duration (here works Fitts's Law):
    enter image description here
    enter image description here
  2. The set values have non-uniform distribution, as you pointed. So left part of scale (under 2h) is highly used, while right part is used rarely, that is non-efficient. This leads to some complex decisions, like:
    enter image description here
    Then time settings over 2h would be overcomplicated task.
Improve this answer
1
  • 2
    A slider won't work because the upper end isn't bounded. Values of < 4h may be typical, but there may be outliers who want to enter 10 hours, 20 hours. Please see my edit above for the idea I have to support sliding on mobile
    – Aaron Averill
    Oct 6, 2013 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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