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

There is no single answer, it depends on the context. For many places good text controls are enough. Of course such things can still help by supporting pasting and some increase/decrease actions. Maybe it can even do some validation for the value.

Then there are places that need something more. Calendar can be really helpful for entering dates and some kind of slider could be used for time. (Lotus Notes calendar has a slider.)

My advise is:

Think what you need. Don't put complicated widgets to a less used dialog.

If you need these nice helpful widgets, check if there are ready made in the library you are using and take some time to see how others have done these.

Always have the text controls with support for pasting.

Answer 2

Unless there is a more advanced time control in your GUI toolkit of choice, two calendar controls representing start and end is the most straightforward. Also, you need to decide how you want to use the information. For example, if you used a start date and an interval to increment that date, changing the start date wouldn't change the meaning of the interval. It really depends on what you're wanting to do.

Answer 3

One way I've seen work very well is using a gantt chart:
http://en.wikipedia.org/wiki/Gantt_chart

You can create a single line chart and then you can scale it across months, days, hours and minutes depending on how wide or zoomed in you make the control. The problem is I don't know of any control out there right now that does just one line, so you may need to create a custom one. You could possibly look for a gantt chart control and just do one task/item.

Answer 4

Observe what people are doing with your time range control. Then write it so that it's most suited towards doing what the people want to achieve with it. For instance, leave away past dates if inputting future dates only makes sense.

Jonathan Leighton has made a nice date inputter -element in jquery that I've found very nice for inputting dates. This is beneficial in a way that user can both input the date by clicking or type it in directly. The user also directly gets the hint about typing it into the box. If you couple this with some kind of timeline -object, you may actually go far afar. Just avoid making UI elements that are confusing or angering!

Answer 5

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 6

User interface design is heavily application dependent. "Best" implies some kind of metric that can measure solutions. In UI design such a metric can be "home many clicks/key-presses does it take to complete the task?" where a smaller number is better. So once you've defined your metric you can start to sort solutions into good, better and best.

You also want to reduce cognitive burden for the user. If the user has to enter the final day on which a product can be exchanged based on a 90-day return policy then asking for start and end date would force them to do date math which is no fun. In this example a start date with a "delta" of x days would place less of a burden on the user.

Depending on you application you could consider and approach like the Google Finance time range selector on their charts: http://finance.google.com/finance?q=.dji

Answer 7

Check out the VisualHint date control. It can be configured a multitude of ways including a timespan. This would allow you to use one control instance to show the start time and another to set the timespan until the period is complete. The control also supports an extensible base framework so you could possibly combine both start/end or start/span into a single control.

Answer 8

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