user-interfacesilverlighttimespanusability

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


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.


Solution

  • 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.