2

I'm working on a project where there are numerous time entries for a given a record.

The times are stored in the database as timestamp, however for display and editing it's clutter to display the entire timestamp, as the users are only interested in hours:minutes (time of day) and being allowed to edit (or create) that time.

I'm having issues coming up with a user-friendly way for them to enter these times (and dates). I was using the jQuery datetime picker with pushback from the users (they dis-like the slider). Anyway, I'm trying to come up with ideas to make it better.

I have created a minimal mock-up with other fields omitted for clarity. It's common to have 4-5 rows of these time entries for a given record. The full time-stamp is static. All times are in chronological order. The majority of the time the date doesn't change unless the entry spans to the next day.

minimal mock-up

My question is, what should be the preferred way to enter a date and time? A couple ideas I thought of are:

  • Have the user enter a time and determine the date based on previous time.

  • Try a different datetime picker (although the users will prefer manual entry.)

Improve this question
4
  • Would a calendar-like view work? It is very easy to enter new time points or intervals when presented in a timeline by just clicking and/or dragging, provided you snap to 15 or 30 minute intervals.
    – Danita
    Nov 25, 2014 at 18:44
  • do you need to give fine control of the time (e.g. 02:13 AM) or a restraint set is possible (e.g. working hours, 5/30 min steps)?
    – Édouard Lopez
    Oct 29, 2015 at 8:52
  • Are you working on desktop/mobile/smart watch? UI will differ for each platform
    – Édouard Lopez
    Oct 29, 2015 at 8:53
  • What is the task your user try to accomplish?
    – Édouard Lopez
    Oct 29, 2015 at 8:54

2 Answers 2

Reset to default
2

Most date and time pickers provide a terrible user experience: they require clicking and scrolling through a large amount of irrelevant dates and/or times. Unless the user needs to keep track of a date relative to those around it on a calendar (for example when planning travel dates), picking dates in a calendar format adds no value.

An alternative to using date and time pickers it to use an input mask. Input masks allow the user to simply type the date and/or time by following the defined pattern. No more hunting and pecking.

jquery.inputmask is one JavaScript solution that makes using input masks straightforward.

Improve this answer
0
0

I would suggest having a regular text box where the user can type in a value, and include a dropdown arrow which expands into a more visual view of their choice.

For a visual view you could do something similar to what the Google alarm clock app does:

enter image description here

Tapping on different parts of the clock sets the time to wherever you tapped, and tapping on the numbers changes the clock from hours to minutes.

Improve this answer

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.