Best GUI control(s) to describe a time range

Question

I need to let end users specify a time range, to be stored and used internally as a starting date/time and ending date/time. The range could be minutes or it could be days.

Has anyone discovered an interactive control that can handle this elegantly?

Most GUI toolkits have a calendar control, so I could specify "start" with a calendar for the day and a text field for the time...and the same for "end".

I could also replace the "end" controls with a single text field or slider that simply describes how many seconds/minutes/hours after start "end" is.

What I don't like about these ideas is how much clicking, typing, and more clicking is required to describe such a simple concept. Also I have to slap the user's hand if a time is typed in that isn't recognizable as a time.

Is there a cleaner implementation that I'm overlooking?

Answer 1

I tend to look at common design patterns for inspiration when I'm pondering problems such as this.

The Yahoo Pattern Library offers some potential solutions.

The UI Patterns site also give some suggestions, and is worth a browse.

For good measure, here's another solution at the Welie pattern library.

Another source of inspiration might be other sites and applications. For example, think of all the use-cases where recording short and long time time durations is required. As an example, company TimeSheet recording, company car mileage log software, task recording software, stopwatch applications, calendaring apps, etc. Then see how they've handled the GUI controls for capturing time ranges.

I haven't personally found a favourite solution for picking date and time. But, I think I'd want something like this.

• User clicks to show calendar popup
• Popup shows 2 side-by-side calendars (start date/time and end date/time)
• Calendar 1 shows todays date, and the other also shows todays date.
• Calendar controls allow usual navigation and selection of day month year.
• Below each calendar is a hh:mm box, which defaults to the current time.
• User can edit value in this time box using up/down arrows or by typing.
• Alternatively, show an analogue clock below each calendar. It takes 2 mouse clicks to set time( click 1 for hour and click 2 for minutes).

Hope this helps

Answer 2

I am a fan of an old control I saw used WAY back in the 90's with Inventor (and later Open Inventor) on SGI machines (and then on PCs, etc): an infinite dial.

Some screenshots, a little on the small side, are here. Course, its been done on a variety of platforms since, including similar things on the iphone.

I think a date/time picker would work well with two dials, each representing an order of date/time magnitude. In ASCII art, with each dial between [square brackets] it might look like:

[20 Oct | 21 OCT | 22 Oct ] [11:15 .. 11:30 .. 11:45..]

or with 3:

[20 Oct | 21 OCT | 22 Oct ] [11 .. 12 .. 1pm] [12:31 .. 12:32 .. 12:33]

There are a number of variations you could try (vertical/horizontal, date/time, date/hour/minute, etc).

Dials, though somewhat rarely used, are a natural device for humans to interact with, and their infinite rotation option (unlike a slide which must always stop) suits dates/times well.

FWIW