Display results from specific date and timespan

Question

I have requirement to be able to show results of a given date and a given time span of 24 hours from that date.

If you were to pick 1/1/2016 10:00pm with a time span of 6 hours it would display all results on 1/1/2016 from 4:00pm - 10:00.

Users don't know if the time span goes forward or backwards from the selected date. What is a better way to display this UI?

Answer 1

The way people think about time is from left to right, left is the past and right is the future. Likewise positive numbers reflect future and negative numbers reflect the past.(time space and metaphor).

I have two solutions to recommend, the first is more diffucult to build but will eliminate almost any possible errors. The second is very easy to build but is not as efficient as the first solution.

First solution:

• Use a slider for the time span. The slider will start from 0 Hrs on the right edge and finish at -24Hrs at the left edge. When the slider moves from right to left the span will decrease.
• Expicitly show the From date/time. The field will be display only.

The solution will look something like this :

Second solution :

• Use ONLY negative numbers for the time span field. It will change from 0 to -24 Hrs

Answer 2

There are a number of ways to do this, but the first two that come two mind are as follows (in order of difficulty):

1. Simply put a + in front of the time span (e.g. +6hrs). A plus usually indicates a forward direction - this should be trivial to implement.

2. Display a graphical time line, with the date marked intially, and the time span marked when the user selects it. For example:

   1/1/2016 10:00am 4:00pm
--|-----------------^=======================^-------------------------|

As an alternative, I would suggest displaying the time span (10:00am -> 4:00pm) next to the selection box as the user selects the offset. This way, there can be no confusion.

Answer 3

You can also consider using a DatePicker control for selecting the date, followed by two TimePicker controls for specifying the start and end times of the interval.

That is in use in Desktop email/calendar apps like Outlook, Thunderbird, etc.

Answer 4

We ended up going with the following approach:

Select the date, and than use a range slider to choose which time frame within that date.