What is the most intuitive, usable way of entering a time of day or a duration?

Question

I'm building a line-of-business application in Silverlight and need to get the user to edit two .NET TimeSpan values. One is a time of day (relative to midnight) and the other is a duration. Currently I'm using two TextBoxes, formatted as hh:mm. This is pretty straightforward, but it could definitely be improved. I've observed people using the application and while some have no problem quickly entering times, other people struggle.

Given that I'm working in Silverlight2, what would you see as the perfect custom control that easily let you visualize and edit these two TimeSpans?

To make things harder, the UI should allow any time of the day to be selected with accuracy down to the minute, but emphasize times within the normal working day (eg: 8:00am - 5:00pm). Some users tend to enter 2:00 (am) when they really mean 2:00pm.

In my app, I'm tending towards aligning the times and durations to 5 minute intervals. As a bit of background, this app is similar to a room booking app where people specify when and how long they want a room for.

Answer 1

It probably depends on how accurate you need your data and how varying it can be. If it doesn't need to be perfectly accurate and it doesn't vary a lot, you could do something like

Task was performed at [select start time...] o'clock for [select duration...]

where [select start time...] is a pulldown with every hour and [select duration...] is a pulldown with common scenarios for what you're tracking like "30 mins", "1 hour", "2 hours"

If it needs to be flexible maybe just going with the sentence structure and replacing the pulldowns with textboxes would make it clear for all first time users.

Answer 2

In one of my web applications I used a slider with 2 handles.

Example:

|.........Y-----------------Y...|
         5AM               8PM

Of course I didn't need as high precision as you do, but I believe that with slightly longer slider 5min intervals would be possible.

To emphasize normal workday, you could colour background of the slider in different colour for normal workday. Or make handlers "snap" to start and end of normal workday.

Answer 3

Get the latest Sliverlight Toolkit and use one of the new Time oriented controls

Answer 4

Look at Outlook perhaps, it uses dropdowns that defaults to sane half hours (to me anyway ;) and the selections can then be edited by hand afterwards if higher precision is wanted. The duration also follows when the start time is changed, and defaults to an hour or something.

I used text boxes in an old web application before just like you, with the added option of double-clicking them to bring up a quick selection widget like the above Outlook Sample. Perhaps a button or some other Silverlight magic can enhance that.

A vertical time-line like a calendar day in Outlook where you can drag the top and bottom of a meeting "box" is to me the most instuitive or atleast quickest way to place and adjust a booking. Perhaps if it's prefilled with one that spans an hour or so, easily draggable to change the start time - with the top and bottom resizeable to change the duration.

Answer 5

Expanding on what Anthony said, Silverlight Toolkit March 2009 release include TimePicker & TimeUpDown controls. You can see a live demo of TimeUpDown and TimePicker with 2 popups at: http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%201#TimeUpDown

I Actually owned the feature set and API for this control, so I'm extremely well familiar nowadays with what's the best form to input time. There's a whole list of best practices we can talk about for time input. All of which are currently easily found in the controls.

On some concepts we've had to innovate (like the "Time Intellisense" feature) but mostly we were using true time tested concepts. (no pun intended)

However, as part of the non-goals for these controls for v1 we decided to not support time ranges. If you feel that time ranges is something we should natively support, feel free to suggest this on codeplex: http://silverlight.codeplex.com/WorkItem/Create.aspx We actively prioritize items based on amount of votes and user scenarios called on in issues.

For now, I'd suggest you just use 2 TimePickers. Advanced visualizations (like a multi select ruler or a multi slider) are one way of doing time range input, but you've got to have a solid globalized text input system for a fallback option.

Answer 6

This is a great time to ask what task your users are trying to accomplish. You can craft your system's performance based on this. In Outlook, for example, people usually enter the time because they are trying to schedule a meeting -- so you can easily disambiguate "2" or "2:00" to mean 2pm, because very few users are trying to schedule meetings at 2 am. This sounds similar to your application.

If you look at your users, they will likely also be scheduling for typical times -- these should be easy to specify in your interface. E.g., if most meetings are 50 minutes long, that should be very salient, perhaps a button or other one-click option.

I wouldn't recommend inventing a new input widget. The more standard your input tool, the less your users have to think when using your product. Concentrate on the smarts inside your logic, figuring out (and showing the user) what you think they're asking for.